1年をかけたアプリの制作 - Quarog

この記事は地震情報アプリ界隈 Advent Calendar 2021 - Adventarの18日目の記事です。

この記事では私のアプリ制作のこれまでの経緯と、昨年から制作しているQuarogというアプリケーションについて書かせていただきます。
※書きたいことを詰め込みすぎたため、かなり長いです。予めご了承ください。

 

自己紹介

Fuku1213です。最近は今回の記事の題にもあるQuarogというアプリケーションを制作しています。
また、それ以外にもいくらかのアプリケーションを制作・公開しています。興味があったら是非見ていってください。

 

Quarogの制作まで

制作のきっかけ

私がこのアプリケーションを制作しようと思い始めたのは昨年の5月ごろです。きっかけはこのころからBSC24様の放送内で利用されるようになった、今回のアドベントカレンダーの主催であるcompo031様制作のqmiraという独自アプリです。
私はこのアプリの情報の受信の速さや、見たことのない震度配色・地図色(現在のKiwi Monitorや地震情報リアルタイム受信ソフト Quail Fastで利用されている配色)を用いている点、そして何より地図描画に感銘を受けました。緊急地震速報時に震度4以上の予想地域を塗りつぶして表示していたり、震度速報時に震度が観測された細分区域を塗りつぶしていたりしていて、そんなことが実現できるのかと衝撃を受けたのを今でもよく覚えています。

当時、他にも地図に地震情報等を描画するアプリケーションはいくらかありましたが、特にこの地図内の地域を塗りつぶす機能を備えているものはありませんでした。

そのため、これに加えて自分の欲しい機能をもつアプリケーションを制作しようと思いいたりました。

プログラミングの開始

こう思ってから約1か月、プログラミングというものにハードルの高さを感じていて、理想をツイートするだけの人をしていました。

なお、このころからKiwi Monitorの影響を強く受けています(震度配色もKiwi Monitor カラースキーム 第2版を利用)

そして、本格的にプログラミングをするきっかけとなることがありました。

当時OBSで緊急地震速報にあわせたファイル実行をしていたKuriharaCam様制作のFileKCCに、緊急地震速報のログ出力をするという追加要素でした。
この出力ファイルを自作ソフトで読み取ることができれば、自作のデザインで情報を表示できるのではないかと考えました。
そして、5月下旬にようやく決心をつけてVisual Studioをインストールし、とりあえず見た目の部分だけでも作ってみようということになり最初のアプリケーションの制作を開始しました。

さらに6月初旬、KuriharaCam様からFileKCCのログを読み取るサンプルプログラムをいただき、それをもとに見よう見真似でlabelの表示・非表示や色を変えるコードやらを書きました。このとき、わからないことは逐一KuriharaCam様に質問して、様々なことを教えていただきました。
そしてその数日後、最初のアプリケーションが完成しました。

地図を描画したい

作ってからしばらくはこれを利用していましたが、やはりqmiraへのあこがれもあって、次第に地図描画の部分も作りたいと考えるようになりました。そしてこれもまたやりたいやりたいと言い続けて数週間たってから、次のアプリケーションの制作に取り掛かることにしました。

しかし、当時の私はそれを実現できるほどC#について、また地図描画の仕組みなどについてよく知らなかったため、結局この段階での実装はあきらめ、まずは配信されている緊急地震速報の電文を受信し、それを用いて情報を表示するアプリケーションを作ろうと決めました。(実質的には最初のアプリケーションの改良版のような立ち位置)

これについてもKuriharaCam様から多くのアドバイスをいただきながら、7月下旬ごろにとりあえず完成しました。

f:id:Fuku1213:20211216213056p:plain

Fuku's EEWMap v0.1.6+ (地図要素はない)

地震情報も見れるようにしたい

この時期になり、私は地震情報をリストで見る機能が欲しいと言うようになります。
そして、当時緊急地震速報･地震情報BOT (@QuakeB_1)を運営していた方のご厚意で地震情報のAPIを制作していただき、そのデータを利用して地震履歴機能をこのアプリに追加しました。これもまた、Kiwi Monitorの影響が色濃く出ています。
ただ、当時は繰り返し処理(for構文)のことを知らず、初回データ読み込みと、更新情報読み込みをあわせて約4万行ほどのコードを書いていました。また、表示はlabelに頼っていたため、動作も絶望的に遅く、重かったです。

f:id:Fuku1213:20211216214708p:plain

できたもの

配色の選択

このアプリの制作の中で、人によって自分好み・自分にとって違和感を感じない配色があるものではないかと考え、複数の配色の中から選択できる方式をとることを決めました。

オリジナル配色の設定

最初のオリジナル配色は、Kiwi Monitor カラースキーム 第2版を意識して、震度1から4まで徐々に明るく、震度4から7まで徐々に暗くなるものを設定しました。

f:id:Fuku1213:20211217000302p:plain

初期配色

 

Quarogの制作

さて、かなり長くなりましたがここからはQuarogの制作過程と工夫について書きます。

制作開始

地図を用いた本格的なアプリケーションの制作を決めたのは9月中旬頃でした。また、この時点では先ほどのアプリの改良版のようなものを想定していました。
初期段階では

を目標にすることにしました。
地図の描画方法は、大きな地図画像を使って、それをGraphicsで描画する方法にし、QGISを用いてその地図画像を作成しました。画像サイズは縦6000px, 横10019pxです。

f:id:Fuku1213:20211216223725p:plain

生成した地図画像(サイズが大きすぎて元データはアップロードできなかった)

そして各細分地域を塗りつぶす方法として、あらかじめ細分区域ごとにRGBのうちのGが1ずつ異なる地図画像を用意し、ColorMapを用いて適切な色に変換する処理を実装しました。

しかし、ここでメモリの問題と、生成時間の問題に直面することになります。
前述の通りかなり大きいサイズの画像を描画して、またそれをColorMapを用いて色変換まで行っているのですから、当然といえば当然なのですが、地図画像を1枚生成するだけでメモリを2GB占領し、生成に2000ms以上かかる残念なものが生まれてしまいました。
メモリについてはがんばって目を瞑ることができるとしても、生成時間の遅さは速報性を求められる緊急地震速報の地図描画にとっては大きな問題です。結局これについては、解決策が思いつくことがなく3月ごろまでそのまま放置されることになります。

緊急地震速報と地震情報の統合

緊急地震速報の地図描画がある程度できたころ、以前地震情報のAPIを制作してくれた方にお願いして、API内で観測した震度と観測した市町村と細分区域の緯度経度が入った新バージョンを制作していただき、それをもとに緊急地震速報が発表されていないときに地震情報を描画するスタイルの確立を目指しました。

情報を把握しやすいUIの考案 - 1

QuarogのUIは大きく分けて3回の変遷をしています。2020/10～2020/12ごろまでは以下のようなUIでした。

f:id:Fuku1213:20211217000454p:plain

全体的にある程度統一感を持ったUIになるよう調整しながら作成しました。当時はホットリロードという概念を知らず、ちまちまとずらしてはビルド、そして画像編集ソフトで確認という方法でかなりの時間をかけて作成しています。
しかし、特に地震履歴に顕著に表れていますが無駄な余白が多く、表示できる地震の件数が限られてしまっています。また、時計の主張がかなり激しいものになっています。
また、津波の有無を画像で表現して省スペースにまとめようとしていますが、そのアイコンがわかりづらかったためこれも問題でした。

緊急地震速報時のUIは以下のようなものでした。

f:id:Fuku1213:20211217001355p:plain

これは、必要な文字を大きく表示させ、震度配色で文字を読むことなく地震の大きさをある程度把握できるよう作成しました。
ただ、このUIでは地震の発生時刻がどこにも記述されていないため、これ単体で見たときに適切に情報が伝えられていないように見えます。

緊急地震速報の到達予測円の描画

これは昨年の地震界隈 Advent Calendar 2020 - Adventarでも記事にしましたが、緊急地震速報に到達予測円があったほうがいいなと思い、実装しました。(2020年12月初旬)

f:id:Fuku1213:20201215162401p:plain

情報を把握しやすいUIの考案 - 2

到達予測円を実装し終えた後、12月中旬になってUIの見直しに取り組みます。
最初は全てのUIを見直すつもりでしたが、最終的にこの段階では地震情報と地震履歴を見直しました。

f:id:Fuku1213:20211217004223p:plain

f:id:Fuku1213:20211217002414p:plain

見直し後のUI

地震情報のUIは、初期のものと大差ありませんが、使用する色をできるだけ少なくしてシンプルなものを目指しました。
地震履歴のUIは、2021年12月現在も大きな変更をせず利用しているスタイルです。
できるだけ無駄な余白を作らず、それでいて統一感をもって必要な情報を把握できるUIを目指し作成しました。時計部分も周りから悪目立ちしないよう、ほどよい大きさにしています。

情報を把握しやすいUIの考案 - 3

年が明けて2021年1月、地震履歴のUIに見た目が合うように地震情報と緊急地震速報のUIの見直しに取り組みました。また、このデザインについてはKurisu様にアドバイスをいただきながら作成しています。以下が、大まかなデザイン作成の変遷です。

f:id:Fuku1213:20211217005513p:plain

↓

f:id:Fuku1213:20211217005552p:plain

↓

f:id:Fuku1213:20211217005634p:plain

GIMPを用いて作成した最終案

そして最終的にできたのがこちらです

f:id:Fuku1213:20211217005927p:plain

f:id:Fuku1213:20211217010010p:plain

地震情報と緊急地震速報である程度形をそろえつつ、情報が切り替わった際に瞬時に把握できるよう色遣いを調節しました。

震度6強の地震、そして処理の限界

こうして開発をしている中、2021/02/13に福島県沖でM7.3の地震が発生しました。
Quarogは前述した生成時間のラグに加えて、処理が重なったためにアプリがクラッシュしてしまいました。いざという時のためのアプリであるのに、実際には地震が発生して使えなければ本末転倒です。そのため、この処理をすべて一度見直すべきだと感じました。

f:id:Fuku1213:20211217011949p:plain

地図の描画方法の刷新

こうして2月下旬、大きな地図画像をあらかじめ用意してそれに描画する方式ではなく、別の方法で地図を描画しようと思い、情報収集をしました。その際に、GeoJSONというものを知りました。構造は理解しやすく、描画方法も独自の方法を思いついたため、それを試作用のアプリで実装してみることにしました。
そして実装し、描画してみたときに、使用するメモリ量の少なさや描画速さに驚きました。
これはすぐにでもQuarogに移植すべきだと思い、3月初旬に実装しました。(学校の期末テストの間でやっていたので、それが終わってからの実装になりました)

f:id:Fuku1213:20211217011512p:plain

震度5強の地震

この実装が終わって間もない2021/03/20、今度は宮城県沖でM6.9の地震が発生しました。
Quarogはこの処理刷新のおかげで、ソフトがフリーズすることもクラッシュすることもなく、最後まで情報を表示することができました。

f:id:Fuku1213:20211217011904p:plain

配色の見直し

4月に、最初に自作した配色について少し問題を感じました。

  • 震度3の色にあう文字色が設定しづらい
  • 地震情報の陸地の色が濃く、震度を視認する際に邪魔になっている

そこで、色を一度見直すことにしました。

f:id:Fuku1213:20211217012647p:plain

そうしてできたのが2021年12月現在も使用している配色です。
あまり目立った変化はありませんが、問題になっていた色を中心に全体の色のバランスを取り、どのような方が見ても危険度を簡単に把握できるよう設定しました。

緊急地震速報をより詳しく伝える

8月、緊急地震速報発表時に地震履歴が表示されている部分に緊急地震速報の詳細を表示すればなお視覚的にとらえやすくなるのではないかと考えました。そして内部処理の刷新も交えながら実装しました。

f:id:Fuku1213:20211217013418p:plain

自分の地域の予想震度を大きく、そして各地域の予想震度が表で見れるようになっています。

直感的に情報を閲覧できるようにする

9月以降は、メインウィンドウの中でできるだけ直感的に情報を閲覧できるようにしたいと考え、市町村 / 観測点別描画 ←→ 細分区域の切り替えが容易にできるようにボタンを追加したり、地震情報の観測震度を閲覧できる機能を追加するなどしました。これにより、右クリからの切り替えなどの手間を省き、簡単に閲覧できるようになりました。

f:id:Fuku1213:20211217014109p:plain

 

さいごに

プログラムについては様々な先人の知見や、多くの方法を伝授していただきながら安定動作に近づくことができました。
デザインについても、最初はKiwi Monitorのデザインを参考にしながらベースを作り、そこからある程度自分流の形へ独立し、いろいろな意見をいただき取り入れることでここまで来ることができました。
様々な方の協力があって、このアプリケーションは制作されています。本当に感謝しています。

この活動を始めてから、何もなかった自分がようやくまともな趣味を持つことができ、また防災・減災についてもいろいろ学ぶことができました。自分の将来を決める大事な場でも、これを活かし来年度以降の自分を定めることもできました。

かなり長く、まとまりのない記事となりましたが、ここまで見ていただきありがとうございました。これからもよろしくお願いします。

おまけ - Quarogの名称と公開について

Quarogという名称の由来は、揺れを意味する(Quake) + 制作開始当時自分のアイコンになっていたゲッコウガのモチーフであったカエル(Frog) で、Quarog (くあろっぐ)と読みます。
名称はやきじゃけ様が原案です。

Quarogは当初2021年初旬のリリースを目指していましたが、できるだけ良い品質のものを利用していただきたいと思い現在まで一般公開していませんでした。ですが、私が欲しいと思っていた機能の大半を実装し終え、動作の安定感もかなり向上しています。そのため、近日中に一般公開をしようと考えています。

(2022/03/27 追記)
2022/03/16に発生した福島県沖を震源とするM7.4の地震で、Quarogでは多くの不具合が発見され、さらに情報の表示方法などにも大きな課題を残しました。そのため、中途半端なものをリリースするのではなく、できる限り問題を解決してからリリースすべきであると判断したため、リリースについては2022年上半期中とさせてください。配布予定サイトは以下です。
Quarog - Home (fuku1213.github.io)

ちなみに、今日はQuarog Ver 1.0.0 - α1をデバッグ協力の方にお渡しした日から1年だったりします。