概要
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/
動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。
