概要
Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する方法のメモです。
背景
Knight LabのTimelineJSやStoryMapJSは、デジタルストーリーテリングのためのオープンソースツールです。
Knight Lab
Advancing media through exploration and experimentation.
Northwestern University Knight Labデータ
以下で公開されている『渋沢栄一伝記資料』のテキストデータを利用します。
GitHub - shibusawa-dlab/lab1: 「渋沢栄一ダイアリー」データ
「渋沢栄一ダイアリー」データ. Contribute to shibusawa-dlab/lab1 development by creating an account on GitHub.
GitHubリポジトリ
以下で公開しています。
GitHub - nakamura196/shibusawa: 渋沢栄一伝記資料 可視化サイト
渋沢栄一伝記資料 可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.
GitHubストーリーマップ
以下のようなコンポーネントを用意することで、Next.jsからも利用することができました。
shibusawa/src/components/Storymap.tsx at main · nakamura196/shibusawa
渋沢栄一伝記資料 可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.
GitHubTypeScriptの利用にあたり、以下の型定義ファイルも作成しました。
shibusawa/src/global.d.ts at main · nakamura196/shibusawa
渋沢栄一伝記資料 可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.
GitHub以下のように表示することができました。
shibusawa.vercel.app
タイムライン
ストーリーマップ同様、タイムラインについても以下のようなコンポーネントを作成しました。
shibusawa/src/components/Timeline.tsx at main · nakamura196/shibusawa
渋沢栄一伝記資料 可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.
GitHub以下のように表示することができました。
shibusawa.vercel.app
ただし、タイムラインについては、以下でES6 modules/webpackが公開されていることに後から気がつきました。こちらの使い方について、別途調査したいと思います。
www.npmjs.com
まとめ
デジタル・ヒューマニティーズ（DH）の分野で広く活用されているTimelineJSやStoryMapJSについて、データの視覚化や物語の構築を行う際の参考になりましたら幸いです。
なお、これらのツールはプログラムを介さず、Googleスプレッドシートを入力として、可視化アプリを作成することもできます。こちらも参考になりましたら幸いです。
Timeline JS
Easy-to-make, beautiful timelines.
Timeline JS
StoryMap
Maps that tell stories.
StoryMap動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。
コメント
…