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

概要

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

背景

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

https://knightlab.northwestern.edu/

データ

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

https://github.com/shibusawa-dlab/lab1

リポジトリ

以下で公開しています。

https://github.com/nakamura196/shibusawa

ストーリーマップ

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

https://github.com/nakamura196/shibusawa/blob/main/src/components/Storymap.tsx

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

https://github.com/nakamura196/shibusawa/blob/main/src/global.d.ts

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

https://shibusawa.vercel.app/storymap/1868-08-02

タイムライン

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

https://github.com/nakamura196/shibusawa/blob/main/src/components/Timeline.tsx

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

https://shibusawa.vercel.app/timeline/1868

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

https://www.npmjs.com/package/@knight-lab/timelinejs

まとめ

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

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

https://timeline.knightlab.com/

https://storymap.knightlab.com/