記事

Actuif
arrow_back

記事一覧

サムネイル
access_time

2026/10/25

EQLiveを支える「DATA STUDIO」って何?

#開発の裏側

WeatherQuake

どうも、WeatherQuakeです。今回は、任意団体Kactuifが提供する災害情報配信プロジェクト「EQLive」を支えているツール、DATA STUDIOをご紹介します。

DATA STUDIOの概要

最初に、DATA STUDIOの概要について説明します。配信(EQLive)用の気象・防災グラフィックを作れるツールです。NHKの「DATA NAVIGATOR」、「Digital Earth 4」を参考にしました。自由に「パネル」を作成できるので、グラフなども作成できます。また、雨雲レーダーやアメダスなどの「特別パネル(ツール)」もあります。

DATA STUDIOを開いたときの最初の画面は「チャンネル選択画面」。地震チャンネル、天気チャンネルなどがあります。

DATA STUDIOのチャンネル選択画面。画面上部には「チャンネル選択」の文字、右上にDATA STUDIOのロゴ。各チャンネルのサムネイルがあり、右下には「V1.4」というバージョン表記もある。
DATA STUDIO「チャンネル選択画面」。いまのバージョンは1.4です

例として天気チャンネルを見てみましょう。最低・最高気温ランキングや現在気温ランキング、雨雲レーダーなどがあります。全部で12枚。

天気チャンネル。左上には「戻る」ボタン、その右隣には「放送モード」ボタン。その下には「パネル追加」「パネル移動」「パネル複製」「削除」、右端には「チャンネル設定」ボタンがある。これらボタンの下にはパネルが並んでいる。
天気チャンネル

通常モードの際はパネルを選択すると設定画面が開きます。ここで放送モード時の地図の位置やテロップなどを設定できます。

雨雲パネルの設定画面。右側には設定項目があり、「テロップ」トグルがオンになっている。パネル下部には記録的短時間大雨のテロップが表示されている。
雨雲パネルでの例 記録的短時間大雨の気象防災速報が発表されると自動で時刻や雨量が入ります

テロップにもいくつか種類があり、それぞれタイトルや本文、色を好きなものに変更することができます。他のテロップはいつかEQLiveでお見せします!

様々な場面で活用できる「画像書き出し」

「マップを調整して保存してブラウザソースで映す」のほかに、DATA STUDIOには画像書き出し機能があります。パネルをそのままの状態で画像として書き出すことができ、URLも発行できます(↓は実際に発行したURLで埋め込んでみたものです)。

ブラウザソースはコントロールボタン類が映り込んでしまったり、重くなったりするデメリットがあるため、最近のEQLiveでは画像書き出し機能を活用しています。

そのほか、記事内の埋め込みやSNSでの情報発信、資料などの作成にも使えます。実際に、メンバーもクラスラインでの情報発信に活用していました。

メンバーがクラスラインで実際に発信したもの。「台風30号に注意」という文章とともに、台風パネルのスクリーンショットが添付されている。
実際に発信した内容(台風パネルのデータ出典:気象庁(加工して作成))

こだわり

いろいろこだわりました。まず、フォントはUD角ゴ。みんなの減災ラボが主に使っているフォントでもあり、かつ防災情報は見やすさが大切なため、このフォントにしました。制作段階ではロダンNTLGだったものの、さすがにDATA NAVIGATORに似すぎるのはよくないうえに、視認性も悪かったため、UD角ゴにしました。

さらに、雨雲パネルやキキクルパネルなど、対応しているパネルでは地図をクリックするとその市区町村内の雨量や格子数を出すことができます。

雨雲パネルでの例。村上市を選択している吹き出しが表示されており、「区域内の最大 20〜30mm/h(強い雨)」と表示されている。
雨雲パネルでの例

市区町村名にはふりがなも振ってあります。これで読めない地名が出ても安心です!

また、データは気象庁のホームページで使われているものを使用させてもらっています。そのため、気象庁のサーバーに負担をかけないようデータを使いまわしています。キャッシュというやつです。

万が一データが取得できなくても安心です。「エラーが出ました」などを出さず、最後に取得したデータを表示します。空っぽの画面よりはマシです。

ちなみに、線状降水帯の予想も少しこだわりました。もともと気象庁のタイルの色を変えず、そのまま表示していたのですが、「雨雲レーダーの50〜80mm/hの色とかぶって見づらい」という意見が団体内で出ました。

線状降水帯予想の改善前の配色。50〜80mm/hの色と酷似している
改善前の配色 徳之島にあるやつです

改善策として、白い縁をつけました。

線状降水帯予想の改善後の画像。白い縁がついている
改善後 少し色を変更したうえに、白い縁をつけました

改善前の画像を見るとわかるのですが、凡例や線状降水帯の予想タイルなどが不透明になっています。一方、改善後の画像では半透明になっています。これは、団体内で「雨雲レーダーが凡例や線状降水帯予想にかぶって見えない」という意見が出たからです。ここもこだわりポイントです。

PHPの脆弱性

DATA STUDIOは主にPHPを使用しています。ログイン画面、画像書き出し画面、内部の処理など、ありとあらゆるところで使っています。

Xを見ていると「PHPがヤバい」旨のツイートが流れてきました。やばいです。

17時ごろから緊急メンテナンスを実施し、DATA STUDIOが完全に使えないように対策を行いました。

メンテナンス中の画面。中央にはDATA STUDIOのロゴや「ただいまメンテナンス中です」などといった表記がされている。
メンテナンス中の画面

そんな中、パッチ配布前の19時に子吉川が氾濫。メンテナンスを一時的に解除しました。

当時のEQLiveの画面。画面右下には「気象警報・注意報パネル」、「雨雲パネル」がある。
当時のEQLive 右下の気象警報・雨雲パネルがDATA STUDIO ライブカメラの映像は海上保安庁より

「見やすく」とか言っておきながら文字がつぶれていたり、いろいろと見にくい部分はあります。おそらく配信の配置のせいです(DATA STUDIO含めご意見等はKactuifのお問い合わせフォームからお願いします!)

22時半にはメンテナンスを再開。そして、翌朝サーバーに修正版が入ったため、管理パネルで修正版の切り替えを確認したのちにメンテナンスを解除しました。

バグと試行錯誤

制作から現在まで、いろんなバグの修正と試行錯誤を繰り返してきました。

最近でいえば、地震パネルを作った際、震度アイコンを都道府県別に置いたらとんでもない位置にプロットされました。県の形の重心から計算し直して、正しい位置に置けるようにしました。

次に、画像書き出し機能。画像は毎回PCで描き直されるのですが、地図が描かれないまま画像を書き出してしまうことが多発。最初は台風パネルで発生しましたが、その翌日にアメダスパネルでも発生。すぐに修正しました。

そして、書き出した画像には謎のつぶつぶがありました。原因はファイルを軽くするための減色処理でした。しかも、軽くするどころかつぶつぶのせいで元より大きくなっていました。修正として、より精度の高い減色の方法に切り替えました。

このように、さまざまなバグの修正と試行錯誤をしてきました。他にもいくつかあります。

これから

もっと便利になるように、もっと見やすくなるように、団体内で話し合った上でより良いツールになるよう取り組んでいこうと思います。

今現在、とあるパネルを追加できるように取得元と連絡を取っています。他のメンバーはおろか、代表にすら言っていません。追加できればEQLiveで大活躍すると思います。たぶん。

以上、DATA STUDIOの紹介でした。「EQLiveを支える」が言い過ぎじゃないかと思ってつけにくかったです。

※記事内の画像のデータ出典:気象庁(加工して作成)

この記事を書いたのは...

この記事をシェアする

search

記事を探す

ロゴ