🐥
Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する
概要
Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する方法のメモです。
背景
Knight LabのTimelineJSやStoryMapJSは、デジタルストーリーテリングのためのオープンソースツールです。
データ
以下で公開されている『渋沢栄一伝記資料』のテキストデータを利用します。
リポジトリ
以下で公開しています。
ストーリーマップ
以下のようなコンポーネントを用意することで、Next.jsからも利用することができました。
TypeScriptの利用にあたり、以下の型定義ファイルも作成しました。
以下のように表示することができました。
https://shibusawa.vercel.app/storymap/1868-08-02
タイムライン
ストーリーマップ同様、タイムラインについても以下のようなコンポーネントを作成しました。
以下のように表示することができました。
https://shibusawa.vercel.app/timeline/1868
ただし、タイムラインについては、以下でES6 modules/webpackが公開されていることに後から気がつきました。こちらの使い方について、別途調査したいと思います。
まとめ
デジタル・ヒューマニティーズ（DH）の分野で広く活用されているTimelineJSやStoryMapJSについて、データの視覚化や物語の構築を行う際の参考になりましたら幸いです。
なお、これらのツールはプログラムを介さず、Googleスプレッドシートを入力として、可視化アプリを作成することもできます。こちらも参考になりましたら幸いです。
Discussion