ブログやWebサイトに年表を貼り付ける”Timeline JS”がすごい！

（↑：イメージ画像）

歴史の資料集にある年表や、企業パンフレットの「○○グループの歩み」のような年表をブログ等に貼り付けられたら便利だと思いませんか？
例えば、

• 好きな作家や画家の作品を年代順に並べる（「モネの作品集」など）
• ある国際問題に関するここ数年の状況をまとめる（「イスラム国の概要」など）
• 話題になったニュースの流れを時系列で紹介する（「STAP細胞問題の推移」など）

などなど様々な利用例が考えられます。

そんな年表を簡単に作れないかな、と探していたところ”Timeline JS”という便利なものを見つけました。

Timeline JSとは？

だれでもオシャレでインタラクティブな年表をつくれるオープンソースのツールです。
このページの一番下に実際にTimeline JSでつくったサンプルを貼り付けています。
文字だけでなく画像や動画・地図・Wikipediaを載せることができ、年表の例は以下の公式サイトで見ることができます。
http://timeline.knightlab.com/

使い方は簡単で、GoogleアカウントとブラウザさえあればOKです。Google Spreadsheetに書いたデータから年表を作れるので、PCが手元になくてもスマホのGoogle Drive等から編集ができてしまいます。
公式サイトにも英語で記載されていますが、以下、備忘録をかねてTimeline JSの使い方を記していきます。

Timeline JSを使ってブログに年表を貼り付ける

1. 年表のテンプレートを開く

http://timeline.knightlab.com/にアクセスし、以下のキャプチャの"Google Spreadsheet Template"をクリックする。開いた画面でGoogleアカウントにログインしていなければログインすると、Google Spreadsheetが表示される。

開いたGoogle Spreadsheetの画面上部のUse this template（下図のようなボタン）をクリックすると、自分のGoogle Driveに保存されて編集可能となる。

2. 年表のSpreadsheetを編集

例えば以下のようにする。一部の動画・地図はテンプレートのままで、はてなフォトライフの画像をURLをもとに貼り付ける例を追加しました。

3. 編集したSpreadsheetのURLを取得

さきほどのSpreadsheetの画面でFile（ファイル）→Publish to the webをクリックすると以下の画面があらわれる。

ここでStart publishingボタンをクリックすると下の欄にURLがあらわれるので、それをコピーする。

4. Spreadsheetから年表を生成

再びhttp://timeline.knightlab.com/にアクセスし、上の画面のようなGoogle Spreadsheet URLという入力欄にさきほどのURLを貼り付ける。
More Optionsをクリックすると細かな設定が変えられる。
この段階で、貼り付けたすぐ下にある4. Embed the code into your websiteという欄に＜iframe src=...みたいなコードが表示されるので、それをコピー。

5. ブログ等に埋め込み

はてなブログの場合、先ほどの＜iframe src=...みたいなものを編集画面にそのままコピペすればよい。
そうすると以下のように年表が表示される。やった！

おわりに

そのうち科学史とか美術史に関する本の書評をブログに書くつもりなのですが、その本で取り上げられた出来事をまとめた年表を記事に貼り付ければ、自分の復習にも読者の方にも便利だなと思っています。
1年の自分の記事を振り返ったりするのにも使えそう。

Google SpreadsheetだけでなくJSON形式でもデータを与えられるようなので、今度試してみるかもしれません。

追記

夏目漱石の小説を年表にしてみました。

【Timeline JS】夏目漱石の小説をインタラクティブな年表にまとめてみた - roombaの日記