開発道中膝栗毛 第二編

[防災アプリ開発 Advent Calendar 2023](https://adventar.org/calendars/9301) 10日目

この記事では、主に私の制作しているアプリの独自機能（主にUI面）と、その設計思想などについて長々と垂れようと思います。

## はじめに
初めまして。地震アプリ「[Zero Quake](https://0quake.github.io/ZeroQuake_Website/)」を開発している、[べにだて](https://twitter.com/Zero_Quake)と申します。当アプリは、私の~~風呂場での~~思い付きを、詰込みに詰め込んであります。ぼくのかんがえたさいきょうの地震アプリです。現時点でベータ版ですが、この頃動作も安定してきました。
当アプリはオープンソースです。私の陳腐なアイデアでよければ、ご存分に流用してください。

## 基本となる設計思想
* できる限り詳細に、しかし煩雑にならないようにする
* 極力誤解を避ける
* せっかくのパソコンソフトなので、マルチウィンドウを駆使する
* ユニバーサルデザインを取り入れる（配色、フォント）
* 無駄な装飾は避ける
* かっこよくする！！！！！
 
## 地図表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/99407be2-a4e7-660b-f251-754c9686c21e.png)
画面の大部分を占める地図についての工夫です。

### 多彩なレイヤー
地理院タイルにあやかって、様々なレイヤーの表示に対応しています。航空写真などのほかに、避難計画に便利なハザードマップや避難所情報の表示にも対応しています。

### 震源ポップアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/811ef6ee-3093-23a0-6663-7e8e91a94ae1.png)
緊急地震速報の震源の「❌」の上に、注釈文を表示します。
訓練の際は「訓練」、PLUM法などの場合、「仮定震源」、シミュレーション機能を使って表示した情報には「再現」と表示します。
主に、誤解を防ぐ目的で使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/dc1abacc-7753-7dbe-70de-b461ad5e6ed3.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/0be2eea2-e0b6-b84d-ff80-95f9d6c964f5.png)
また、緊急地震速報が複数発表されたとき、通し番号を「震源ポップアップ」および画面左側の文字表示部分に表示し、照らし合わせることができるようにしています。

震源のところにマグニチュードを表示しているアプリもあるようです。なるほど、わかりやすいですね。

## 「速報パネル」
画面左側の、詳細な情報を文字列で表現する部分の工夫を挙げます。

### 緊急地震速報 到達予想
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/2c6674cf-15b4-74f7-a8b2-7880a6d81902.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/7d773255-14c1-736a-3dfe-b13b6b1529ab.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/6d74ad41-7ed6-02c1-2231-1a56ee0cc94b.png)

地震が起きた際、多くの人は「あとどれくらいで揺れるか」が気になると思います。そこで、上のような表示をしいます

#### 到達カウントダウン
震度４以上が予想される地域には、気象庁により到達時刻が予測され、提供されます。その場合、到達予想時刻を利用し、カウントダウンを表示します。

なぜか、私の知る限り、この情報を利用してカウントダウンを実装しているアプリはありあせん。

#### しかし...
しかし、震度４未満の地域の場合が問題です。「JMA2001走時表」を使えば、比較的簡単に到達予想時刻を算出できますが、この計算には「**予報業務許可**」が必要になります。これを取得するのはハードルが高い...そこで、当アプリでは、代替手段をとっています。

#### ① 円形プログレスバー
到達までの猶予を視覚的に表示するため、プログレスバーを使用しています。P波・S波が設定地点に達するまでの経過が一目でわかります。

#### ② 距離表示
震源までの距離が分かれば、到達までの猶予が大まかにわかります（変人に限る）。そのため、距離表示をしています。

#### ③ 到達・未到達表示
小さな揺れの場合、到達に気づかないこともあります。到達したか否かを知らせるため、「到達」・「未到達」の表示をしています。

:::note info
内部的に到達時刻を予想し、それを基に到達状況を表示しています。
気象庁に確認したところ、この機能の実装に予報業務許可[^1]は必要ないとのことです。
:::

### 津波情報 設定地点の情報
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/56facf00-cb95-91b8-b583-2bea17daa3fd.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/824a7e82-0ceb-72b3-d657-2b3c6c3e462d.png)

津波情報は、「津波予報区」ごとに発表されます。しかし、一目で自宅付近の情報を探すことは困難です。そのために地図表示があるわけですが、地図で表現できるのは、警報発表状況くらいになります。
そこで、予め最寄りの津波予報区を登録しておき、その予報区の情報を表示できる機能を搭載しています。

## 地震情報 詳細画面
### 設定地点の震度表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/5af5c318-e23c-cf58-a999-2d74c285ef9e.png)
地震が起きてから、一番気になることは、地震の規模、そして、「いまここがどれだけ揺れたのか」です。この機能により、ひとめ見て、設定地点の揺れがわかります。

### アコーディオンメニューでの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/68474fc0-1100-db4d-bb7b-bb931676ade5.png)
都道府県・細分区域・市ごとの最大震度や、観測した震度を、アコーディオンメニューで表示します。多重入れ子構造となるこの情報は、アコーディオンメニューでの表示が最適だと思います。

### 推計震度分布
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/2522d97b-6a82-9b5a-c843-0bb4bff7adaf.png)
当アプリは、**珍しくも**推計震度分布図の表示に対応しています。通常の震度情報と切り替えて表示できます。データソースは気象庁ホームページ。タイルではなく、3次メッシュ単位で提供されるので、処理には注意。

:::note info
気象庁ホームぺージは合法的にスクレイピングできます。
:::

### その他
他のアプリでは表示されないことも多い、「付加文」や「マグニチュードの種類(Mw, Mj)」についても表示します。
「長周期地震動に関する観測情報」や、「顕著な地震の震源要素更新のお知らせ」も、すべて一つの画面で確認できます。

## 津波情報 詳細画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/7a3130b0-3f20-8ecf-3706-1ab01ac8fcd7.png)

津波情報を表形式で詳細に表示します。
津波に関連する情報を一つに統合したうえで、あえて「予測値」と「観測値」でセルを分けることで、混同を防止しています。

この表が、アプリの中で一番苦労したところです...

## 地震検知
リアルタイム震度を利用して地震の発生を検知しています。これについてはまた詳しく語ります。

## その他
### カスタム可能な読み上げ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/a88b2f8b-7623-8329-cfeb-c3415604779e.png)
地震が発生したとき、必ずパソコンの画面を見ているとは限りません。そこで、地震情報を合成音声で読み上げる機能を実装しています。
読み上げ内容は自由に変更可能で、「マグニチュード」「震央地名」などの変数も含めて柔軟に組み替えられます。

### 通知音
読み上げに加え、効果音での通知も行います。音声は、聞き取りやすく、危機感を持てるよう工夫しています。
効果音は私の ~~ハイセンスな~~ 自作です。

### 情報取得時刻の表示
防災情報にとって情報の新しさは重要であるため、最後に情報を取得した時刻を、情報源ごとに表示します。

### 自動更新
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3168838/7189b49b-1978-4a3e-9652-4d2acd50cff3.png)
バグの修正などを一刻も早く全利用者に適用するため、ソフトウェアの自動更新に対応しています。

### 様々なデバイスに対応
（現状、Windowsしか対応していませんが）様々なデバイスでの操作を想定しています。
450x400pxまで縮小可能で、タッチ操作を考慮してボタンのサイズなども工夫しています。

## おわりに
### 今後に期待！
設定や通知まわりで、かねてより計画していたものの ~~後回しに~~ まだ手が回っていない機能があるため、近日中にそれらの実装を済ませ、バージョン１をリリースする予定です。

現時点での展望として、地図を球体表示(Globe View)にすることで、地震波の広がりがより視覚的に表せるのでは、と考えています。MapLibre側の対応に期待です。（他力本願）

### 感想
初めての記事で一通り醜態を晒しました。独自機能の自慢と化しているような気もしますが、誰かの役に立つと思い込んでおきます。
当方 新参者ですが、ぜひお手柔らかにお願いします。


### ぜひお試しください
ベータ版ではありますが、ぜひお試しください。よろしければ、ご指摘・エラー報告などお願いいたします。

https://0quake.github.io/ZeroQuake_Website/

[^1]:予報業務許可について https://www.jma.go.jp/jma/kishou/minkan/q_a_s.html