歴史を楽しむためのWebアプリ「Historie Graph」を作った
突然ですが、皆さんは歴史お好きですか？私は最近、歴史に結構ハマっています。きっかけは、ポッドキャスト「COTEN RADIO」を聴き始めたことで、最近は結構歴史関係の本や漫画を読み漁っています。最近のお気に入りは横山光輝先生作品です「項羽と劉邦」「史記」「三国志」とか。
そんな歴史をもっとカジュアルに楽しむためのアプリ「Historie Graph」を作ったので紹介します。なお、歴史の正確性をもとめたり研究したいという人向けではなく、あくまで歴史をもとに想像力を働かせて楽しみたいという人向けのアプリですのでその点はご了承ください。誤りや一般的でない説も含まれている可能性あります。明らかな誤りは指摘いただけるととても嬉しいです。
無料のアプリなので以下リンクで誰でも楽しめます。
画面は以下のような感じです（現段階）
COTEN RADIOを聴いていて思ったこと
COTEN RADIOを聴いていると、歴史って本当に面白いなと思うんですよね。ただ、聴いていてちょっと困ることがあって。それは「この出来事って、あの出来事と同じ時代だっけ？」とか「この人とあの人って同時代に生きてたの？」という疑問が湧いてきます。
歴史は、学校では国ごとに縦割りで習うことが多いので、実は国ごとの相関関係ってよく分からなかったりします。時代同士の関係だったり、同世代に生きている人だったり。私は漫画も好きなんですが、歴史を題材にした漫画でも、読んでいて「この漫画の時代と、あの漫画の時代って、どういう関係なんだろう？」と気になることがあります。
特に最近はCOTEN RADIOと横山先生の「項羽と劉邦」や「キングダム」の影響で中国の歴史が気になっています。
今年の冬休みに読もうと思い買い込んだ本たち
「Historie Graph」を作った
というわけで、歴史イベントをタイムラインで可視化できるWebアプリを作りました。名前は「Historie Graph」です。
主な機能は以下です。
- タイムライン表示: 歴史イベントを年代順に表示
- 地域フィルタリング: 日本、中国、ヨーロッパなど地域別に絞り込み可能
- 時代フィルタリング: 古代、中世、近代など時代で絞り込み
- メディア管理: 関連する漫画や小説などの作品情報も登録できる
開発にはAIを活用しています。基本的には以下記事のやり方で開発しました。
技術スタックは、Vue.js + TypeScript + Vite + Tailwind CSSです。全然フロントエンド詳しくないのですが、勉強も兼ねて最近のフロントエンド開発の定番構成を使ってみました。サイトはGitHub Pagesで公開しています。GitHub Pagesだと単純なものしかダメだと思いこんでいたんですが、結構凝ったことできるのをこの開発を通じて知りました。無知でした。
実際に使ってみて
自分で使ってみて思ったのは、「歴史って横のつながりで見ると、また違った面白さがあるな」ということです。例えば、「三国志の時代って、ローマ帝国が衰退し始めた時代と重なってるんだ」みたいな発見があったりします。
漫画との紐付けも便利です。「この時代を描いた漫画、他にないかな？」と探すときに役立ちます。COTEN RADIOのエピソードの時代も可視化しているので、COTEN RADIOもより楽しめるのではないかなと思います。
データの追加に関して
データの追加に関しては、issueをあげてもらえば、（自分が追加したいものは）追加していきます。
Claude Codeのスラッシュコマンド一発で、自動で作品調べて入力してくれるようにしています。以下からissueをあげてもらえましたら幸いです。
まとめ
歴史を楽しむためのWebアプリ「Historie Graph」を作りました。COTEN RADIOを聴いていて、「歴史の横のつながりを可視化したい」「好きな漫画と歴史の関係を整理したい」と思ったのがきっかけです。AIを活用して開発しましたが、詳しくないフロントエンド開発に加えて、歴史の年代とかイベント、作品の年代とか調べて整理してくれるので便利でした。こうやって調べてまとめて整理するのにAIは本当に便利ですね。
ただ、ちょくちょくハルシネーションはあったりしました。吉田松陰を描いた「松かげに憩う」を何故か平安時代に分類したり…気がついたところは直していますが、他にも間違いあるかも…（気付いた方は教えてください）。
歴史好きの方、漫画好きの方、COTEN RADIOリスナーの方はよかったら使ってみてください。MITライセンスで公開しているので、ソフトがつくれる人ならこのソフトをベースに自分が好きな作品だけを集めた自分だけの年表をつくってみるのも楽しいかなと思います。作品の追加リクエストも歓迎です。GitHubのIssueからお気軽に。
