ほぼちょうど1ヶ月前、私は消防出動情報を統一したフォーマットで取得出来るツールであるところの「emergency-dispatch」を作成しました。もちろん、このツールについているall_feed.xmlを眺めているだけでも十分楽しいのですが、せっかくわざわざ統一したJSONファイルがあるのですから、例示の意味も込めていい感じに見せるサイトやツールを作ってみたくなってしまいました。
というわけで4時間くらいで適当に作られた、全国の消防出動情報をいい感じに見れるサイト「edinfo」を作ってみました。いつまで運用するか分かりませんが、こちらから使ってみることが出来ます。正直emergency-dispatchよりも適当に作ったのですが、思ったよりもいい感じに動作して感動しています。
結論
- JSONで得られた情報をいい感じに色付け
- Nuxt3で順当に開発
- キャッシュ機構を実装し、過度な問い合わせを防いだ
正しく「JSON色付け係」
フロントエンドのことを「JSON色付け係」と揶揄/自嘲する風潮があります。当然ながらそうではない場合も多々あるのですが、これにはある程度妥当な点がありバックエンドから送られてきたJSONをいい感じにブラウザへ表示するだけ、というようなプロダクトとなってしまうパターンが割と多いというためであると考えられます。
今回開発したedinfoはまさしくこれに当てはまってしまっています。emergency-dispatchが動作しているサーバーに対して対応している地方公共団体コードの一覧（/list.json）を要求し、これを基に対応している場所の一覧を生成、各市区町村等のページにおいては毎回丁寧にemergency-dispatchへそれと対応するJSONを要求し、それを元にWebページをSSRしているといった感じになっています。「JSON色付け係は猿でも出来てしまう」みたいな話がありますが、作業に要した時間は4時間程度なので、本当に猿でも出来てしまうのではないかと思ってしまう一例をこの世界に追加してしまいました。
Nuxt3で開発
JSON色付け係と言っても、その実装方法は色々あります。今回のedinfoにおける用件は以下のようなものでした。
- 後述する理由でSSRに対応している
- 情報を更新する際に再ビルドが要求されない
- 15分に1回程度情報が更新されるとした際、例えばCloudflare Pagesの月500回のビルドまで無料といった条件を突破してしまうため
- ユーザーの要求に対してのみemergency-dispatchへ要求を送る
- 私が嫌いではない
というわけでまず初めにAstroが弾かれました。不可能ではないと思うのですが、基本的にStatic出力するフレームワークでこれをやるのはしんどそう（であるし、アイランドアーキテクチャを行うのであれば、大抵の場合それを使用するフレームワークでまとめてやった方が楽）だと感じたためです。次に私が嫌いという理由でNext.jsが弾かれ、結果的にNuxt3が採用されました。
これは以上の要件を完全に満たし、かつ私が触ったことがあったためです。最近は11tyなりAstroを触ることが多かったのでNuxt3を触るのは久しぶりでしたが、色々便利になっていてかなり経験は悪いものではありませんでした。
キャッシュ機構
SSRで実装した理由の一つとして、バックエンド（というかemergency-dispatchが動作しているサーバー）への過度の問い合わせを防ぎたい、ということがあります。edinfoのソースを見れば分かる通り、nuxt.config.tsにおいてemergency-dispatchが動作しているドメインを指定することとなっており、ここに対して基本的にページを開くたびに問い合わせが飛ぶ、といった感じになります。
とはいっても、emergency-dispatchの動作原理的に、出動情報がリアルタイムで変化するということは考え難いですし、貧弱なサーバーでemergency-dispatchが動作している場合もあります。というわけで、そういった場合においても問い合わせ先に迷惑にならないように、edinfoを見ている側からすると実際にemergency-dispatchが動作しているサーバーを秘匿しつつ適度にキャッシュする、といった機能を実装してみました。
キャッシュ機構というと壮大なものに聞こえるでしょうが、大したことは行っておらず、単にemergency-dispatchが動作しているサーバーに当該ファイルを取得しに行った時間を記録し、もう一度edinfoの方から取得要求があった際にキャッシュ時間（5分か1分）を超えているかどうかをチェックしているといったような感じです。キャッシュ時間以内だったらキャッシュを返し、そうではない場合は取得を試みています。
Renderでホスティング
SSRということは何かしらの方法でNode.jsサーバーを動かし続けなければなりません。適当なVPSでも借りて動かしても良いのですが、どうせだったら無料のサービスを使いたいものです。というわけでHerokuのようなサービスを探した結果、Renderというサービスを見つけました。
このサービスはいわゆるPaaSというべきもので、ソースコードをいい感じに与えると勝手にビルドしてくれた上にインターネット上へ公開してくれるようです。幸いにも無料プランがあり、0.1CPU/512MBとかなり貧弱ではあるものの複数人が寄ってたかってアクセスするようなものでもなさそうなので、ここでホストしてもらうことにしました。
一点難点として上げるのであるとすれば、15分間アクセスが無い場合、サーバーが閉じてしまうといったものがあります。このため、アクセスをしてくださった際に上の画像のような謎の起動画面が表示されてしまう場合があるということです。しかしながら、長くとも30秒くらいですし、このような宣伝をしていないWebサイトにアクセスするような人々は何となく察してくれるであろうと信じて、特に問題視することをしませんでした。万が一edinfoにアクセスし上のような画面が出てきてしまったら、こういった事情があると察していただければと思います。
最後に
というわけでedinfoを作成したという記事でした。まだまだ初期段階にあるので、ユーザーが地方公共団体コードを暗記していないといけないといった致命的なUXの悪さなどはありますが、今後とも気が向いた際に対応していけたらと思っています。
また、合わせてemergency-dispatchの方もゆったりと改善していく予定ですので、こちらも併せてご活用いただけますと幸いです。もちろん、emergency-dispatchを活用してもっといい見た目のWebサイトを作っていただけますと、それはそれで嬉しいので、よしなに作成いただけると助かります。
