スマホ向け地震観測・速報アプリを開発しているお話

この記事は、[防災アプリ Advent Calendar 2022](https://adventar.org/calendars/7488) 18日目、
[Qiita全国学生対抗戦 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/student) 21日目の記事です。

# whois
```bash
$ who -b
    システム起動 2004-09-17
$ uptime 
    00:00:00 up 18 years 95 days, 1 user
$ whois @YumNumm
🏫     SCHOOL    : YSFH 12期
💕      LOVE     : Flutter
👀 INTERESTED IN : Kotlin
```

**2022年春頃から地震関連アプリケーション EQMonitor を開発しています。**  
今回はこのアプリについてお話できればと思います。
[![](https://user-images.githubusercontent.com/73390859/183258345-ac71c9ca-b794-4c00-bd7d-a9a20693464e.png)](https://github.com/EQMonitor/EQMonitor)

https://github.com/EQMonitor/EQMonitor

:::note warn
**警告**
私は、地震の専門家ではありません。
事実と異なった情報を記載している可能性があります。
予めご了承ください。
:::

# ざっくりどんなアプリなのか
**Android向け 地震関連情報のアプリケーションです。**
こちらよりAPKをダウンロードできます。

https://github.com/EQMonitor/EQMonitor/releases  


|強震モニタ|地震履歴一覧|地震履歴詳細|
|---|---|---|
|![Screenshot_20221217-143921_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/130ecff3-3e74-9d29-3777-85de4a79945a.png)|![Screenshot_20221217-143932_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/1109dcd7-2c5a-08e1-3cda-4fde5c49d847.png)|![Screenshot_20221217-143954_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/5e3e690e-11f9-6d86-6ebc-cadefca4e6bf.png)|

<iframe height="315" src="https://www.youtube.com/embed/FCdc7VUJbRE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


このように、ざっくりと
1. 緊急地震速報を受信し、揺れの状況をリアルタイムで表示
2. 地震履歴の確認

ができます。
APIKeyなどの機密情報を除くほぼすべてのコードをGitHub上で公開しているのでよかったら確認してみてください。

http://github.com/EQMonitor/EQMonitor

# 開発した目的
Twitterでフォローしている[竹林人間🍣🍊3g+◢](https://twitter.com/Chromium_Linux)さんが、とあるBotを運営し始めたことがきっかけです。
どんなBotだったのかというと、「地震」と竹林人間さんにメンションしたツイートを送信すると、数秒後に現在の地震の状況をリプライで教えてくれるというものです。

https://twitter.com/Chromium_Linux/status/1494706637030178816

これ、ものすごく便利だと思いませんか?  
揺れたと思ったらメンションしてツイートすればよいのです。  
(~~"日本人は地震があった時にTwitterを開く"と揶揄されますが、まさにピッタリです~~)
しかし、毎回メンションするのは正直面倒です。これは一体何のソフトウェアのスクリーンショットなのか調べてみると、
フランスでエンジニアをやっていらしている[François LN / フランソワ (JQuake)](https://twitter.com/NoneType1)さんが開発した[**JQuake**](https://jquake.net/)というソフトウェアであることが分かりました。
(フランソワさんの[JQuakeの話](https://jquake.hatenablog.com/entry/2020/12/07/200114)に開発したきっかけ等を記事にまとめてくれています。気が向いたらぜひ見てみてください。)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/3da7452c-2a87-fc92-794b-d8b6d1897736.png)](https://jquake.net/)

JQuakeはWindows・Linux・macOS用のソフトウェアです。
UIもすごく好きで、揺れている状況を分かりやすく表示している点でお気に入りのソフトウェアでした。

ですが、**外出先でスマホしかない時でも、地震情報をサッと知りたいですし揺れの状況を見たいです。**
これがアプリ開発をしようと思ったきっかけです。

# ざっくり利用した技術の紹介
- アプリケーション本体
	- Flutter
  - Firebase
- バックエンド
	- Oracle Cloud Infrastructureの無料枠
  		- PostgreSQL
      - Docker
      - Dart
      - Deno(TypeScript)
  - Firebase
      - Firebase Cloud Messaging
      - Firebase Crashlytics

以前から使っていたFlutterでアプリケーションの開発を行いました。  
Android・iOS等のクロスプラットフォーム開発をすることができるのがメリットです。  
(しかし、macOSが動作するデバイスを持っていないため&&Apple Developer Programに参加していないため、iOS向けの開発はまだできていません。)

# どんなアプリなの?
アプリの機能をつらつら紹介していこうと思います。
## 強震モニタ
[強震モニタ](http://www.kmoni.bosai.go.jp/)というWebサービスをご存じでしょうか。

日本全国に張り巡らされた観測点のリアルタイム震度を画像で確認できます。
これにより、

- 今揺れているのかどうか
- どのくらい揺れているのか

を直感的に理解することができます。

強震モニタから取得した画像をデバイス内で処理を行い、各観測点の色・リアルタイム震度の値を取得し、マップ上に描画します。画像を処理した上で描画を行っているので、特定の地域を拡大して確認することも容易にできます。
|解析前<br>[強震モニタ](http://www.kmoni.bosai.go.jp/)|解析後<br>本アプリ|
|---|---|
|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/1f8313ed-5ede-5aec-f826-fef69fc621a0.png)|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/5faa62c2-dbe1-3baa-e12f-182ce46a5f36.png)|

内部の画像処理はこれらの記事を参考に実装しています。興味があれば、ぜひご参照ください。

https://qiita.com/ingen084/items/7e91f8da2996972ac586

https://qiita.com/NoneType1/items/a4d2cf932e20b56ca444

実際のコードはこちらです。 

https://github.com/EQMonitor/EQMonitor/blob/77ed4059bac22dca91f76149ddfaa21f4301e816/lib/api/remote/kmoni/kmoni_image_parser.dart#L14

## 緊急地震速報の表示
気象庁が発表した緊急地震速報をアプリ上で分かりやすく表示します。
詳しい配信手法については、[防災アプリ Advent Calendar 2022](https://adventar.org/calendars/7488) 21日目の記事で紹介します。

||サンプルデータ|サンプルデータ|
|---|---|---|
|![Screenshot_20221211-184737_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/cfd7ce55-7585-a560-9b62-72b577fab78c.png)|![Screenshot_20221217-233159_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/8bb84c31-2b6b-6ed9-c091-43471b7d234e.png)|![Screenshot_20221217-233408_EQMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/f2b7cfb8-5d03-a2a6-eb68-cad47de3f033.png)|

このように、緊急地震速報の情報とP/S波到達予想円を表示します。
アプリケーションの実行中はWebSocketでサーバと接続し、迅速に緊急地震速報の情報を取得します。

緊急地震速報に関して別の記事も書いたので よかったらご覧ください〜

https://qiita.com/YumNumm/items/10b47fcd883011aea475


## 地震関連情報の通知
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/070b1e32-545f-0c47-0aaf-06e7046fd83a.png)
このように様々な地震に関する情報を通知でユーザに知らせます。
また、通知時にTTS(Text To Speech)機能を用いて音声でもお知らせします。これにより、スマホをすぐに見ることができないような条件下、例えば食器洗いをしている時でも迅速に地震情報を知ることができます。
### 通知条件設定
緊急地震速報(予報)は、1日に数回出ることもあります。(M3.5以上と推定された場合などに発表のため。)
そのため、それらのすべてを通知しているのでは、通知が鳴りまくってしまう**ダメアプリ**になりかねません。
そこで、緊急地震速報についてはFirebase Cloud Messagingのデータペイロードを用いて、緊急地震速報の詳細を送信します。
- 推定最大震度
- 推定マグニチュード
- 震源決定の精度

によって通知するかどうかを設定できるようにしました。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/bdf3e946-fd28-bb9e-f262-ab63da9a4903.png" >

今後は

- 現在地/設定した地域の予想震度
- 推定震度 [変化時/減少時/上昇時]
- 推定マグニチュード [変化時/減少時/上昇時]

で選べるようにする予定です。


## 地震履歴の確認
サーバに保管してある地震履歴情報を取得し、表示します。

|||
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/3eddb065-01fa-8f70-8c21-e365283ac3b6.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/7480b29a-93da-1b75-5573-1cbf122e5f71.png)|

2020年11月18日以降の地震の履歴を確認することができます。

---

# 苦労したこと
- **地図描画関連**
  これが、一番大変だったような気がします。
  日本の白地図を描画し、観測点・予想震度等を16.6ms以内(60fps)に描画するのが目標です。
  Flutterの`CustomPainter`Widgetで描画した地図を、`InteractiveViewer`Widgetで操作可能にしています。
- **緊急地震速報のより高速な配信**
  「サーバが受信した緊急地震速報の電文データをどうやってユーザにより早く配信するか」です。
  現在は、WebSocket経由で**アプリ起動中**は配信していますが、地震発生時(スマホアプリのため)多くの場合は、アプリを閉じている状態だと思われます。今後は、常時WebSocket接続に対応する予定です。
- **緊急地震速報そのものへの理解**
  読者の中には「緊急地震速報なんて単純だろ!」と思う方もいるかもしれません。
  しかし、緊急地震速報を扱うアプリを開発にするにあたって、緊急地震速報を発表するまでの過程(気象庁の震源決定手法等)を理解する必要がありました。 というのも、PLUM法やレベル法と呼ばれる震度推定手法によって発表された緊急地震速報データには「M1.0 深さ10km」という**仮定震源要素**が含まれます。そのデータを正しく区別しなければ、正しい情報をユーザに伝えることができません。


# EQMonitorの将来について
これからもEQMonitorの開発は続けていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489005/56189bf6-69c6-0bbf-00e0-58a06e016beb.png)
## 予定している改善項目
- **緊急地震速報の配信改善**
  - **常時WebSocket接続 - より高速な配信**
  現在、アプリ起動中はWebSocket経由で緊急地震速報を取得するようにしています。
  しかし、アプリ停止中はFirebase Cloud Messaging経由で通知を配信しているため 1秒程度の遅延が発生してしまいます。
  バックグラウンドでのWebSocket接続をし、コンマレベルでの遅延解消を図っていきます。  
  (この機能は今年度中にリリースします)
  - **配信サーバに冗長性を持たせる**
  現在、Oracle Cloud Infrastructure Osaka Region内のインスタンスが、DMDATA.JPのAWS Osakaに接続をし、緊急地震速報の再配信を行っています。 
  しかし、これでは、信頼性・安全性に不安が残ります。  
  今後は、複数AZ・複数Regionにサーバを配置し、冗長性を確保していく予定です。
  - **ペイロードの圧縮**
  現在、DMDATA.JPから配信されるデータをそのまま再配信しています。大きな地震による緊急地震速報の場合数百KBほどになってしまい、モバイルデータ回線では通信に時間がかかってしまいます。
  今後は、アプリが必要としている情報のみにデータを削減し、配信を行っていく予定です。
  
- **揺れ検知**
緊急地震速報の有無には関係せず、強震モニタからの画像から「揺れている」ことを通知できるようにする機能です。
[KyoshinEewViewer for ingen](https://svs.ingen084.net/kyoshineewviewer/)を開発しているingen084氏の記事が参考になると思っています。

https://qiita.com/ingen084/items/82985e8d3227c97c608d

- **津波情報**
  いうまでもなく、地震と津波には大きな関係性があります。津波情報と地震情報を統合したUIで確認できるようにしていきます。
- **マップの描画改善**
  現在、`CustomPainter`Widgetで描画したマップを`InteractiveViewer`Widgetでユーザが拡大・移動可能にしています。
  しかし、無駄な描画が多くマップを拡大した際に動作が重くなってしまうのが課題となっています。
  今後は、OpenGL ESや`PlatformView`Widgetを用いたマップ描画を試していきます。
- **iOSへの対応**
  Flutterで開発しているため、iOS向けにもビルドできます。しかし、Macデバイスを持っていないためビルド・デバッグできないのです....
  いつかMacを買ったらiOS向けにもリリースします。



## 広告はつけないの?
現在、地震情報取得に2,310円/月払っています。それを無料でアプリ向けに再配信を行っているため赤字です。
しかし、今後もアプリ内に広告をつける予定はありません。そもそも「地震だ! 情報確認しよう!」といって アプリ開いたのに広告出てきたら嫌ですよね。
(別に、防災関連の広告を付けているアプリを否定しているわけではありません。)
ということで、**EQMonitorはオープンソース・広告なしのアプリとして今後も改善を行っていきます。**



# やってよかったこと・悪かったこと
## やってよかったこと
- **地震について知ることができた**
地震関連のアプリを開発しようと思っていなければ、緊急地震速報の仕組みだったり、配信手法について深く調べることもなかったかと思います。
今まで地震があった時に、何気なくNHKを見て情報が更新されていくのを眺めていたのが、
「お、震度速報だ!」
「(アーカイブを見つつ)この緊急地震速報はPLUM法だったんだな!」
というように また別の視点から地震について知れるようになりました。とても面白いです。

- **アプリ開発の楽しみを知ることができた**
自分の「欲しい!」という思いを原動力に約10か月走ってきました。
**自分が欲しいと思うアプリを開発して、自分が使い、自分でよりよく作り上げていく。** 控えめに言ってめちゃくちゃ楽しいです。
業務でアプリを開発するのとはまた一味違う体験ができたと感じています。
(まだ業務で開発をしたことはありません。業務での開発も、どのような学びが得られるのかとても期待しています。)

- **Flutterについてより深く知ることができた**
強震モニタ用のマップ実装だったり、緊急地震速報の状態管理、地震履歴のページング実装だったり、様々なものを実装し、経験することができました。
必要なことを必要なときに都度学ぶというスタンスで学習してきました。モチベーションの維持ができたので、とても楽しく開発を進めることができました。
パラシュート勉強法? 遅延評価勉強法?というのですかね。

- **新たな繋がりを得られた**
(これを"繋がり"という表し方をして良いのか分かりませんが) 地震アプリ開発を通じて、様々な人とTwitter上で関わることができました。

- **地震について知ることができた**
アプリ開発に際して、緊急地震速報の仕組み・技術を知ることができました。新たな発見や知見があり、とても面白かったです。

## 悪かったこと
- **時間を費やしすぎた**
貴重な高校生活の多くをこのアプリの開発に費やしました。ある時は、行きの電車内で設計をどうするか考えたり、またある時は深夜4時まで開発をしていたこともありました。
ただ、体力のある高校生のうちに貴重な体験をできたのかもな～～とも感じています。



# まとめ
繰り返しになりますが、**『アプリ開発は楽しいです。』**
自分が欲しいアプリを 周りの方々の力も借りつつ 自分の力で開発し 自分で改善し 自分が使う。
最高の営みです。

これからも、EQMonitorの開発で得た知識や経験を別の何かに生かしていきたいと思います。


# Buy me a coffee
現在学生で、資金面で相当ギリギリです。
もし、このアプリに興味があり支援いただけるようでしたら、下記リンクより支援していただけると非常に幸いです。
**(記事のいいねでも、モチベ爆上がりします!!)**

https://www.buymeacoffee.com/mgmg