Zenn
😀

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

2019/08/15に公開
visualization
codepen
timeline
datavisualization
紅茶
tech

はじめに

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

こんなのができた。

<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/図説-紅茶-ふくろうの本-Cha-Tea紅茶教室/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/ツウになる-紅茶の教本-磯淵猛/dp/4798055239/ref=as_li_ss_il?__mk_ja_JP=カタカナ&keywords=ツウになる+紅茶の本&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/おいしい紅茶の図鑑―茶葉に合った淹れ方、楽しみ方がわかる-茶葉92種類と、ブランド紅茶36-主婦の友ベストBOOKS-山田-栄/dp/4072420220/ref=as_li_ss_il?__mk_ja_JP=カタカナ&crid=3I50ATP35E54V&keywords=おいしい紅茶の図鑑&qid=1565832827&s=books&sprefix=おいしい紅茶の,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 で複数のDrawing Tool を比較する。

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

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

Pros

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

Cons

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

可視化ライブラリ

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

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

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

念のため npm trends で似たようなもっといいライブラリがないかどうかを調べる。

<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>— kannkyo (@kannkyoshi) <a href="https://twitter.com/kannkyoshi/status/1161818133935480832?ref_src=twsrc^tfw">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の公式サイトから使い方を学ぶ。

CodePenで書いてみる。

まずは史実からひとつだけ選択して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に食わせる。

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>

Discussion