はじめに

歴史的な出来事の流れや、プロジェクトの進行過程を分かりやすく伝えるには、年表(タイムライン)が最も効果的な手段の一つです。しかし、見栄えの良いインタラクティブな年表を作成するには、通常はプログラミングの知識が必要とされます。

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:テンプレートの準備

  1. TimelineJS公式サイトにアクセス
  2. 「Make a Timeline」セクションの「Get the Spreadsheet Template」をクリック
  3. Google スプレッドシートのテンプレートが開くので、コピーを作成

ステップ2:データの入力

スプレッドシートの各列にデータを入力します。主要な列は以下の通りです。

列名説明
Year1868
Month月(任意)1
Day日(任意)3
Headlineイベントのタイトル明治維新
Text説明文日本の近代化の始まり…
MediaメディアURLhttps://example.com/image.jpg
Media Creditメディアのクレジット国立国会図書館

最初の行(Title slide)はタイムライン全体のタイトルスライドになります。

ステップ3:公開と埋め込み

  1. スプレッドシートの共有設定を「リンクを知っている全員が閲覧可能」に変更
  2. TimelineJS公式サイトにスプレッドシートのURLを貼り付け
  3. 生成された埋め込みコード(iframe)をWebサイトに挿入

活用例

日本史の年表

近代日本の主要な出来事(明治維新、日清戦争、関東大震災など)を時系列で整理し、各イベントに関連する写真や文書画像を添付することで、教育用の歴史年表を作成できます。

文学作品の時系列整理

作家の生涯と作品の発表年を並べ、各作品の表紙画像や書評へのリンクを添付することで、文学研究用のリソースを作成できます。

プロジェクトの記録

デジタルアーカイブプロジェクトの進行過程を記録し、各マイルストーンの達成状況を視覚的に共有するといった活用も可能です。

展示のデジタル補助

博物館や美術館の展示に関連する時系列情報を、来館者がスマートフォンで閲覧できるインタラクティブ年表として提供できます。

高度な使い方

JSON形式でのデータ指定

より高度な制御が必要な場合は、GoogleスプレッドシートではなくJSON形式でデータを直接指定することも可能です。これにより、プログラム的にタイムラインを生成したり、データベースと連携させたりすることができます。

カスタムスタイリング

CSSを使ってタイムラインの外観をカスタマイズできます。フォント、色、レイアウトなどを自由に変更して、Webサイトのデザインに合わせることが可能です。

セルフホスティング

TimelineJSはオープンソース(MPL-2.0)のため、自分のサーバーにホスティングすることも可能です。GitHubからソースコードをダウンロードし、独自の環境で運用できます。

注意点

  • Googleスプレッドシートを使用する場合、インターネット接続が必要です
  • 紀元前(BCE)の日付にも対応していますが、設定が必要です
  • メディアURLは公開されているものである必要があります
  • 大量のイベント(100以上)を含むタイムラインでは、ナビゲーションが煩雑になる場合があります

まとめ

TimelineJSは、プログラミングの知識がなくても、Googleスプレッドシートだけでインタラクティブな年表を作成できる優れたツールです。メディアの統合、多言語対応、美しいデザインといった特徴により、DH研究、教育、展示など幅広い用途で活用できます。歴史的データの視覚化に取り組みたい方に、まず試していただきたいツールです。