タイムライン
ドラッグ / タッチで任意の時点へ
時系列のJSONから、順位が動く棒グラフの動画をブラウザだけで作ります
年ごとの人口・売上・アクセス数のように、時点によって順位が入れ替わるデータを見せたいときに向いています。表やグラフを並べるより、順位が抜き差しされる瞬間が伝わりやすくなります。
データは3通りの入れ方があります。ひとつはJSONを直接貼る方法、ひとつは公開データサンプルから選んで取り込む方法、もうひとつはオフライン例を読み込む方法です。どれを選んでも、取り込んだあとはJSON欄が正となり、保存して次回そのまま使えます。
「長さの決め方」で、どちらから決めるかを選べます。選ばなかった側の数値は自動で計算されて入力欄に入るので、いま全体が何秒・1期間が何秒なのかは常に画面で確認できます。
| 決め方 | 入力する値 | 自動で決まる値 | 向いている場面 |
|---|---|---|---|
| 1期間の秒数から決める | 1期間の基準秒数 | 動画全体の秒数 | 1年ぶんの見え方を揃えたいとき |
| 動画全体の秒数を指定する | 動画全体の秒数 | 1期間の基準秒数 | 尺が決まっているとき（BGMに合わせる・SNSの上限に収める） |
計算式は「全体の秒数 ＝ 区間の数 × 1期間の基準秒数 ÷ 再生スピード」です。区間の数は期間の数より1つ少なくなります（2020年から2025年までの6期間なら5区間）。最初の期間は動きの起点なので、そこから次の期間へ移る回数が動く回数になるためです。
全体の秒数を指定しておくと、データを差し替えて期間の数が変わっても尺は変わりません（1期間の秒数のほうが自動で詰まる／伸びる）。逆に1期間の秒数から決めているときは、期間が増えたぶんだけ動画が長くなります。
1期間が0.15秒を下回るほど短い尺を指定すると、期間の切り替わりがほとんど見えなくなります。その場合は画面に注意書きが出ます。0.5秒未満の指定は成立しないため0.5秒へ引き上げ、そのことも表示します。
録画すると WebM 形式で保存されます。録画時にも画面と同じ長さ・同じ速さの設定が使われるので、プレビューで気持ちよく見える状態にしてから録画すれば、そのままの動画になります。
| 解像度 | 比率 | 主な用途 |
|---|---|---|
| 1280×720 | 16:9 | 軽く試すとき。ファイルが小さい |
| 1920×1080 | 16:9 | 通常の横型動画 |
| 1080×1920 | 9:16 | ショート動画・縦型のSNS投稿 |
| 1080×1080 | 1:1 | 正方形の投稿枠 |
「公開データを取得」は World Bank の Indicators API から指標を取り込みます。この操作のときだけ外部へ通信します。取得した値はその場でJSONへ展開されるので、以降はオフラインでも同じデータで作業できます。取り込める指標は、GDP・人口・1人あたりGDP・インターネット利用率です。
JSONの meta.valueDivisor は表示のときだけ数値を割る設定です。GDPを「兆US$」で見せたい場合などに使います。棒の長さの比較は割る前の元の値で行われるため、表示単位を変えても順位は変わりません。
entity.image に外部の画像URLを指定した場合、その画像側のCORS設定によっては録画できないことがあります。録画に失敗するときは画像の指定を外して試してください。
時間の経過にあわせて棒の長さと順位が入れ替わっていく棒グラフのことです。人口やGDPのように年ごとに順位が動くデータを見せるのに向いており、動画やショート動画でよく使われます。
このツール専用のJSONです。画面内に仕様書と最小の例があり、そのままコピーして使えます。timeline は古い時点から新しい時点の順に並べてください。時点と時点のあいだの値は自動で補間されます。
WebM形式です。解像度は1280×720、1920×1080、1080×1920、1080×1080から選べます。1080×1920はショート動画向けの縦長サイズです。
できます。「長さの決め方」を「動画全体の秒数を指定する」にして、秒数を入力してください。1期間の基準秒数のほうが自動で逆算されます。この状態ならデータを差し替えて期間の数が変わっても、動画の長さは指定した秒数のままです。
動画の長さを決めるのは期間の数ではなく、期間から期間へ移る回数（区間の数）だからです。6期間なら区間は5つになります。最初の期間は動きの起点として表示されるだけで、そこには移動時間がかかりません。
いいえ。JSONの解釈も描画も録画も、すべてお使いのブラウザ内で完結します。ただし「公開データを取得」を押したときだけは、World Bank の公開APIへ通信して指標データを取り込みます。この機能を使わなければ外部への通信は発生しません。