Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する

概要

Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する方法のメモです。

Knight LabのTimelineJSやStoryMapJSは、デジタルストーリーテリングのためのオープンソースツールです。

以下で公開されている『渋沢栄一伝記資料』のテキストデータを利用します。

以下で公開しています。

以下のようなコンポーネントを用意することで、Next.jsからも利用することができました。

TypeScriptの利用にあたり、以下の型定義ファイルも作成しました。

以下のように表示することができました。

ストーリーマップ同様、タイムラインについても以下のようなコンポーネントを作成しました。

以下のように表示することができました。

ただし、タイムラインについては、以下でES6 modules/webpackが公開されていることに後から気がつきました。こちらの使い方について、別途調査したいと思います。

デジタル・ヒューマニティーズ（DH）の分野で広く活用されているTimelineJSやStoryMapJSについて、データの視覚化や物語の構築を行う際の参考になりましたら幸いです。

なお、これらのツールはプログラムを介さず、Googleスプレッドシートを入力として、可視化アプリを作成することもできます。こちらも参考になりましたら幸いです。