これは 防災アプリ開発 Advent Calendar 2025 18日目(12/18)の記事です.
樫宮アロ (Kashimiya Aro) です. 最近は配信番組の演出をしたり, フェスに遊びに行ったりしてます. 防災界隈との関わりとしては, 2015年ころからBSC24の共同管理者(ayatti)をしていること, Twitterで周辺界隈の方に認知していただいていること…くらいでしょうか. いつも関わってくださっている方は, お世話になっております.
もとはグラフィックをつくって遊ぶことがメインでしたので, アプリ開発的なこととは疎遠でした. しかし, AIの力によってあまりにも再現の幅が広がりすぎて, お遊びとも言えないものまで作るようになってしまい今日に至ります. まだまだ勉強中ですので, 「コードを若干読めるけどほぼ書けない」人間による記事であることをご承知おきくださいませ.
この記事では, 強震モニタや気象庁のページなどをキャプチャする地震気象系の配信（以下, 防災配信とでも呼びましょう）で使う様々なソフトウェアをHTML＋CSS＋JavaScript（ほぼ言及していませんがNode.js, Socket.IOもからめて）で作ってみたという話をしております.
（思考のきっかけやエピソードをつらつらと綴っていたところ執筆が間に合わなくなってしまったので, この記事は仮版として一度仮公開させていただきます. 完全版は後ほど公開いたします.）
それでは, どうぞ最後までよろしくお願いいたします.
自分用に配信画面をレイアウトしてみたら, 自分の配信画面のスタイルに合う表示をなんとかして作れないだろうかと考えたことがきっかけです.
画像01 ; 配信画面のレイアウト構想
ここで「スタイルに合う」というのは, フォント, カラー, デザインがおおよそ統一されている状態のことを言っています.
これまでは様々な制作者様による様々なソフトをキャプチャして配信を成り立たせていたわけですが, 当然制作者様が異なりますから, 例えばマップのデザイン, 震度階級色, 情報パネルの形状やレイアウトなどがウィンドウによって異なるという現象が発生します. かといって, デザインを全部統一するぞ！というのは大変酷な話で, そう簡単にできないものです. (ただし, 究極的にはそれを目指したい)
さらに, 気象警報や雨雲レーダー, キキクルなどの気象情報関連は, ブラウザで気象庁等のページをキャプチャし, ブラウザの拡張機能でタブを自動切り替えして…と運用が大変でした. 見た目と併せて, 運用面も改善したいな（ブラウザを立ち上げたり, 個々のページにアクセスせずとも表示することができたらな）と悩みも抱えておりまして, この機会に如何にかしようと思い立ったわけです.
具体的な開発備忘録の前に, 画面の構想のお話をひとつまみします.