紅茶の歴史タイムラインを作った話

# はじめに

紅茶好きがこうじて、紅茶の歴史をタイムライン化してみた話。

こんなのができた。

<p class="codepen" data-height="694" data-theme-id="dark" data-default-tab="result" data-user="kannkyo" data-slug-hash="xxKVVde" style="height: 694px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="The History of Tea">
  <span>See the Pen <a href="https://codepen.io/kannkyo/pen/xxKVVde/">
  The History of Tea</a> by kannkyo (<a href="https://codepen.io/kannkyo">@kannkyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 史実を調べる

まずは文献を調べて史実を把握しよう。

専門家ではないので、普通の市民図書館にある一般向けの本で十分である。

<a href="https://www.amazon.co.jp/%E5%9B%B3%E8%AA%AC-%E7%B4%85%E8%8C%B6-%E3%81%B5%E3%81%8F%E3%82%8D%E3%81%86%E3%81%AE%E6%9C%AC-Cha-Tea%E7%B4%85%E8%8C%B6%E6%95%99%E5%AE%A4/dp/4309762522/ref=as_li_ss_il?ie=UTF8&linkCode=li2&tag=i0fe2-22&linkId=cf9d00db6929695a54b1bc0628aa3ed5&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4309762522&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=i0fe2-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=i0fe2-22&language=ja_JP&l=li2&o=9&a=4309762522" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />　　<a href="https://www.amazon.co.jp/%E3%83%84%E3%82%A6%E3%81%AB%E3%81%AA%E3%82%8B-%E7%B4%85%E8%8C%B6%E3%81%AE%E6%95%99%E6%9C%AC-%E7%A3%AF%E6%B7%B5%E7%8C%9B/dp/4798055239/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%83%84%E3%82%A6%E3%81%AB%E3%81%AA%E3%82%8B+%E7%B4%85%E8%8C%B6%E3%81%AE%E6%9C%AC&qid=1565832804&s=books&sr=1-1&linkCode=li2&tag=i0fe2-22&linkId=dfeaa7475edd620fde1ef0b2e86fa6eb&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4798055239&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=i0fe2-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=i0fe2-22&language=ja_JP&l=li2&o=9&a=4798055239" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />　　<a href="https://www.amazon.co.jp/%E3%81%8A%E3%81%84%E3%81%97%E3%81%84%E7%B4%85%E8%8C%B6%E3%81%AE%E5%9B%B3%E9%91%91%E2%80%95%E8%8C%B6%E8%91%89%E3%81%AB%E5%90%88%E3%81%A3%E3%81%9F%E6%B7%B9%E3%82%8C%E6%96%B9%E3%80%81%E6%A5%BD%E3%81%97%E3%81%BF%E6%96%B9%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8B-%E8%8C%B6%E8%91%8992%E7%A8%AE%E9%A1%9E%E3%81%A8%E3%80%81%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E7%B4%85%E8%8C%B636-%E4%B8%BB%E5%A9%A6%E3%81%AE%E5%8F%8B%E3%83%99%E3%82%B9%E3%83%88BOOKS-%E5%B1%B1%E7%94%B0-%E6%A0%84/dp/4072420220/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3I50ATP35E54V&keywords=%E3%81%8A%E3%81%84%E3%81%97%E3%81%84%E7%B4%85%E8%8C%B6%E3%81%AE%E5%9B%B3%E9%91%91&qid=1565832827&s=books&sprefix=%E3%81%8A%E3%81%84%E3%81%97%E3%81%84%E7%B4%85%E8%8C%B6%E3%81%AE,stripbooks,251&sr=1-2&linkCode=li2&tag=i0fe2-22&linkId=089438760cb366bbf494ab6f272c7934&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4072420220&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=i0fe2-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=i0fe2-22&language=ja_JP&l=li2&o=9&a=4072420220" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

# ツールを選定する

次に、可視化するツールを選定する。

1. お絵かきツール (イラストレータ的なやつ)
2. 可視化ライブラリ (d3.js等のJavaScriptやPythonの可視化ライブラリ)

## Drawing ツール

[AlternativeTo](https://alternativeto.net/software/canva/?license=free&platform=linux) で複数のDrawing Tool を比較する。

ここでは、自分の環境（Ubuntu, 有償ツール不可）に合わせてフィルタリングしている。

すると、Stand-aloneのツールはInkscape、OnlineのツールはGravit Designerがそれぞれ人気だとわかる。

### Pros

- 自由度が高い。
- GUIの感覚的な操作で作り込める。

### Cons

- イチからデザインをしないといけない。
- 動的に動くものは作れない。

## 可視化ライブラリ

`timeline javascript`というキーワードでググって、ヒットした適当なサイトで比較する。

フロントエンド界隈は英語で検索したほうが良い。情報量がケタ違い。

- [10 Javascript Timeline Libraries](https://bashooka.com/coding/javascript-timeline-libraries/)
- [JAVASCRIPT & CSS TIMELINE](https://www.cssscript.com/tag/timeline/)

色々と見ていく中で`timeline.js`の見栄えが良さそうである。

念のため [npm trends](https://www.npmtrends.com/) で似たようなもっといいライブラリがないかどうかを調べる。

<blockquote class="twitter-tweet"><p lang="tl" dir="ltr">timelinejs vs react-timelines | npm trends <a href="https://t.co/PX1FohQPYN">https://t.co/PX1FohQPYN</a></p>&mdash; kannkyo (@kannkyoshi) <a href="https://twitter.com/kannkyoshi/status/1161818133935480832?ref_src=twsrc%5Etfw">August 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

どうやら類似品の `react-timelines` のほうが人気らしい。

しかし、単にタイムラインを作るためにReactを導入するのは面倒なので無視する。

他の対抗馬はなさそう。

### Pros

- メディアの **TimeやCNNが採用した実績有** 。デザインも悪くない。
- JavaScriptで書けるからデザインとデータ構造（史実を入力したオブジェクト）を分離でき、 **メンテナンスしやすい** 。

### Cons

- JavaScriptを書かないといけない。
- 指定できるOptionは少なく、自由度は低い。

## まとめ

なんだかんだで 自分にとっては **デザインよりコーディングのほうがラク** なので、 `timeline.js` を採用した。

# ちょいプロで動作検証

[Timeline.jsの公式サイト](https://github.com/NUKnightLab/TimelineJS)から使い方を学ぶ。

CodePenで書いてみる。

まずは史実からひとつだけ選択してJSONオブジェクトを作成。

```json
var dataObject = {
  ...
  {
    "headline": "ボストン茶会事件",
    "tag": "USA",
    "startDate": "1773,12,16",
    "text": "<p>マサチューセッツ植民地（現アメリカ合衆国マサチューセッツ州）のボストンで、イギリス本国議会の植民地政策に憤慨した植民地人の急進派が港に停泊中の貨物輸送船に侵入し、イギリス東インド会社の船荷である紅茶箱を海に投棄した事件である。</p><p><small>&copy; 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に食わせる。

```javascript
createStoryJS({
  type:	'timeline',
  width: '100%',
  height: '600',
  lang: 'ja',
  font: 'Georgia-Helvetica',
  source: dataObject,
  embed_id: 'timeline'
});
```

動作確認で、所望の結果が得られたことを確認。

## ひたすら史実をオブジェクト化する修行

あとは`dataObject`にひたすら史実を追加していく修行をする。

コンテンツとしてフリーの写真や文章を切り貼りする編集作業が地味に疲れる。

で、最終的にこんなのができた。

<p class="codepen" data-height="694" data-theme-id="dark" data-default-tab="result" data-user="kannkyo" data-slug-hash="xxKVVde" style="height: 694px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="The History of Tea">
  <span>See the Pen <a href="https://codepen.io/kannkyo/pen/xxKVVde/">
  The History of Tea</a> by kannkyo (<a href="https://codepen.io/kannkyo">@kannkyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>