はじめに
紅茶好きがこうじて、紅茶の歴史をタイムライン化してみた話。
こんなのができた。
See the Pen The History of Tea by kannkyo (@kannkyo) on CodePen.
史実を調べる
まずは文献を調べて史実を把握しよう。
専門家ではないので、普通の市民図書館にある一般向けの本で十分である。
ツールを選定する
次に、可視化するツールを選定する。
- お絵かきツール (イラストレータ的なやつ)
- 可視化ライブラリ (d3.js等のJavaScriptやPythonの可視化ライブラリ)
Drawing ツール
AlternativeTo で複数のDrawing Tool を比較する。
ここでは、自分の環境（Ubuntu, 有償ツール不可）に合わせてフィルタリングしている。
すると、Stand-aloneのツールはInkscape、OnlineのツールはGravit Designerがそれぞれ人気だとわかる。
Pros
- 自由度が高い。
- GUIの感覚的な操作で作り込める。
Cons
- イチからデザインをしないといけない。
- 動的に動くものは作れない。
可視化ライブラリ
timeline javascriptというキーワードでググって、ヒットした適当なサイトで比較する。
フロントエンド界隈は英語で検索したほうが良い。情報量がケタ違い。
色々と見ていく中でtimeline.jsの見栄えが良さそうである。
念のため npm trends で似たようなもっといいライブラリがないかどうかを調べる。
timelinejs vs react-timelines | npm trends https://t.co/PX1FohQPYN
— kannkyo (@kannkyoshi) August 15, 2019
どうやら類似品の react-timelines のほうが人気らしい。
しかし、単にタイムラインを作るためにReactを導入するのは面倒なので無視する。
他の対抗馬はなさそう。
Pros
- メディアの TimeやCNNが採用した実績有 。デザインも悪くない。
- JavaScriptで書けるからデザインとデータ構造（史実を入力したオブジェクト）を分離でき、 メンテナンスしやすい 。
Cons
- JavaScriptを書かないといけない。
- 指定できるOptionは少なく、自由度は低い。
まとめ
なんだかんだで 自分にとっては デザインよりコーディングのほうがラク なので、 timeline.js を採用した。
ちょいプロで動作検証
Timeline.jsの公式サイトから使い方を学ぶ。
CodePenで書いてみる。
まずは史実からひとつだけ選択してJSONオブジェクトを作成。
var dataObject = {
...
{
"headline": "ボストン茶会事件",
"tag": "USA",
"startDate": "1773,12,16",
"text": "<p>マサチューセッツ植民地（現アメリカ合衆国マサチューセッツ州）のボストンで、イギリス本国議会の植民地政策に憤慨した植民地人の急進派が港に停泊中の貨物輸送船に侵入し、イギリス東インド会社の船荷である紅茶箱を海に投棄した事件である。</p><p><small>© Wikipedia</small></p>",
"asset": {
"media": "https://upload.wikimedia.org/wikipedia/commons/5/52/Boston_Tea_Party_Currier_colored.jpg",
"thumbnail": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Boston_Tea_Party_Currier_colored.jpg/320px-Boston_Tea_Party_Currier_colored.jpg",
"credit": "Nathaniel Currier",
"caption": "The Destruction of Tea at Boston Harbor"
}
}
...
};
これをTimeline.jsに食わせる。
createStoryJS({
type: 'timeline',
width: '100%',
height: '600',
lang: 'ja',
font: 'Georgia-Helvetica',
source: dataObject,
embed_id: 'timeline'
});
動作確認で、所望の結果が得られたことを確認。
ひたすら史実をオブジェクト化する修行
あとはdataObjectにひたすら史実を追加していく修行をする。
コンテンツとしてフリーの写真や文章を切り貼りする編集作業が地味に疲れる。
で、最終的にこんなのができた。
See the Pen The History of Tea by kannkyo (@kannkyo) on CodePen.