はじめに
歴史的な出来事の流れや、プロジェクトの進行過程を分かりやすく伝えるには、年表(タイムライン)が最も効果的な手段の一つです。しかし、見栄えの良いインタラクティブな年表を作成するには、通常はプログラミングの知識が必要とされます。
TimelineJS は、ノースウェスタン大学の Knight Lab が開発したオープンソースのタイムライン作成ツールです。Google スプレッドシートにデータを入力するだけで、美しいインタラクティブな年表を自動生成できます。ライセンスは MPL-2.0 で、無料で利用可能です。
TimelineJSの特徴
1. プログラミング不要
TimelineJSの最大の魅力は、コードを一切書かずにタイムラインを作成できることです。Knight Labが提供するGoogleスプレッドシートのテンプレートにデータを入力し、公開設定を行うだけで完成します。
2. メディアの統合
各イベントには、画像、動画、音声、ツイート、Wikipedia記事など、さまざまなメディアを埋め込むことができます。URLを指定するだけで自動的にメディアが表示されるため、視覚的にリッチなタイムラインを簡単に作れます。
対応メディアの例:
- 画像(JPEG、PNG、GIF)
- YouTube / Vimeo の動画
- SoundCloud の音声
- Twitter のツイート
- Wikipedia の記事
- Google Map の地図
- Flickr の写真
3. 美しいデザイン
生成されるタイムラインは、モダンなデザインで視覚的に洗練されています。レスポンシブ対応のため、PCでもスマートフォンでも快適に閲覧できます。スライド間のアニメーション遷移も滑らかです。
4. 多言語対応
TimelineJSは60以上の言語に対応しており、日本語でのインターフェース表示も可能です。日付フォーマットも各言語に合わせて自動調整されます。
作成手順
ステップ1:テンプレートの準備
- TimelineJS公式サイトにアクセス
- 「Make a Timeline」セクションの「Get the Spreadsheet Template」をクリック
- Google スプレッドシートのテンプレートが開くので、コピーを作成
ステップ2:データの入力
スプレッドシートの各列にデータを入力します。主要な列は以下の通りです。
| 列名 | 説明 | 例 |
|---|---|---|
| Year | 年 | 1868 |
| Month | 月(任意) | 1 |
| Day | 日(任意) | 3 |
| Headline | イベントのタイトル | 明治維新 |
| Text | 説明文 | 日本の近代化の始まり… |
| Media | メディアURL | https://example.com/image.jpg |
| Media Credit | メディアのクレジット | 国立国会図書館 |
最初の行(Title slide)はタイムライン全体のタイトルスライドになります。
ステップ3:公開と埋め込み
- スプレッドシートの共有設定を「リンクを知っている全員が閲覧可能」に変更
- TimelineJS公式サイトにスプレッドシートのURLを貼り付け
- 生成された埋め込みコード(iframe)をWebサイトに挿入
活用例
日本史の年表
近代日本の主要な出来事(明治維新、日清戦争、関東大震災など)を時系列で整理し、各イベントに関連する写真や文書画像を添付することで、教育用の歴史年表を作成できます。
文学作品の時系列整理
作家の生涯と作品の発表年を並べ、各作品の表紙画像や書評へのリンクを添付することで、文学研究用のリソースを作成できます。
プロジェクトの記録
デジタルアーカイブプロジェクトの進行過程を記録し、各マイルストーンの達成状況を視覚的に共有するといった活用も可能です。
展示のデジタル補助
博物館や美術館の展示に関連する時系列情報を、来館者がスマートフォンで閲覧できるインタラクティブ年表として提供できます。
高度な使い方
JSON形式でのデータ指定
より高度な制御が必要な場合は、GoogleスプレッドシートではなくJSON形式でデータを直接指定することも可能です。これにより、プログラム的にタイムラインを生成したり、データベースと連携させたりすることができます。
カスタムスタイリング
CSSを使ってタイムラインの外観をカスタマイズできます。フォント、色、レイアウトなどを自由に変更して、Webサイトのデザインに合わせることが可能です。
セルフホスティング
TimelineJSはオープンソース(MPL-2.0)のため、自分のサーバーにホスティングすることも可能です。GitHubからソースコードをダウンロードし、独自の環境で運用できます。
注意点
- Googleスプレッドシートを使用する場合、インターネット接続が必要です
- 紀元前(BCE)の日付にも対応していますが、設定が必要です
- メディアURLは公開されているものである必要があります
- 大量のイベント(100以上)を含むタイムラインでは、ナビゲーションが煩雑になる場合があります
まとめ
TimelineJSは、プログラミングの知識がなくても、Googleスプレッドシートだけでインタラクティブな年表を作成できる優れたツールです。メディアの統合、多言語対応、美しいデザインといった特徴により、DH研究、教育、展示など幅広い用途で活用できます。歴史的データの視覚化に取り組みたい方に、まず試していただきたいツールです。