制作しているアプリの進捗

この記事は、「防災アプリ開発 Advent Calendar 2023」17日目の記事です。

16日目はあめうまさんの記事「これまでの地震ソフト制作をまとめてみるでした。
明日18日目は、福岡市のとある地震観測者さんの記事です。

はじめに

こんにちは、Fuku @fuku121303 です。この記事では、私がすでにリリースしているアプリの進捗や、自分用に制作しているアプリケーションについて書かせていただきます。公開直前になってゴタゴタしながら書いていますので、かなり駄文になっていますがお許しください。

Quarog

まずは、昨年のアドベントカレンダー記事公開と同時にリリースしたQuarogについてです。

2022/12/15にVer 1.0.0をリリースし、2023/03/19にバグ修正などを行ったVer 1.0.1がリリースされていますが、それ以降のリリースはありません。

この3月から今までの期間は、アプリの全コードを書きなおしていました。

もともとVer 1.0.0をリリースする前からコードをすべて書きなおしたいという思いがあったのですが、これを正式リリース後からちまちま進めている形です。

slnがふたつ存在してます。(Map_For_Fuku.slnはこれまでのQuarogで、Quarog.slnが新しいQuarog)

全コード書きなおし前のコードの問題点

1.地図描画

現在一般向けにリリースしているQuarogは、2020年に制作を開始してから、同じプロジェクトでコードを継ぎ足しながらできた、いわゆるスパゲティコードな状態になっています。

特に微妙な実装になっているのが地図描画の部分です。地形などはGeoJSONを使って描画しているのですが、「指定された中心点で、指定されたズーム率の地図を描画する」という、同じ内容のクラスが3つ生えています(緊急地震速報用の地図、地震情報(観測点/市区町村ごとの震度アイコンを描画する方)、地震情報(細分区域ごとの震度アイコンを描画する方))。
(現状は全部で3つですが、正式リリースの少し前までは緊急地震速報用の地図のクラスがもう3つ余計にありました。)

Map_Paintクラスが3つあります

また、地形を描画する処理と、震度アイコンや震央アイコンを描画する処理を一つのクラスに書いていたため、地形の描画処理を修正しようとすると、他の2つのクラスにも同じ変更が必要になってきます。これでは修正に余計な時間がかかる上、修正を誤るとバグの原因にもつながりかねません。

2.サイドパネルの融通が利かない

これはQuarogを使用している方なら感じることがあったかもしれませんが、サイドパネル部分の操作があまり心地よくありません。

具体的には、

  • 見た目だけでは何ができるのかわからないボタンがある
  • 地震情報リストや地震の詳細情報にスクロールバーが無い

の2つが挙げられます。

サイドパネルは、このエリアを指します(この記事書いてる時間がバレる!!!!!!!)

まずはボタンについて、Quarogの地震情報では、「観測点/市区町村ごとの震度アイコンを描画する地図」と「細分区域ごとの震度アイコンを描画する地図」の2種類が用意されています。開発初期段階では、アプリのどこかを右クリックして現れるコンテキストメニューからこの2種類を切り替えられるようにしていました。

この機能自体は2021年1月ぐらいに思い付きで実装した機能でした。コンテキストメニューから切り替えできるようにしていたのは、このころの地図描画がCPUとメモリを占有し、かつ生成に0.3~1秒近くかかっていたためで、少し時間がかかる操作をしないと切り替えできないようにしていました。

しかし、2021年3月に地図描画の処理を刷新した際に上記2つの問題は解消され、わざわざコンテキストメニューから切り替えできる仕組みにする必要がなくなっていました。

そうして現在のボタンタイプに切り替えたのは、問題が解消されてから半年ほどたった2021年9月でした。この時期は、サイドパネルで揺れを観測した市区町村/細分区域を詳細に表示できるように実装していました。そのついでに、せっかくならメインウィンドウのボタンだけでサイドパネルの操作が完結できるようにしたいと思い、ボタンタイプを実装しています。

当時は直感的に操作できると喜んでいましたが、いま改めて見ると、このボタンがあまりにも抽象的なアイコンのみで構成されており、そもそもボタンであると認識するのが難しいぐらいに背景と同化しています(一応ボタンにカーソルを合わせると「細分区域に切り替える」や「市町村/観測点表示に切り替える」と出てきますが、これも主語が抜けていて何が起こるかわからない怖いボタンにさせてしまっています。)。

ただ□だけのアイコンに、この説明だけでは、何が起こるかが想起しづらい

 

次に地震情報リストや地震の詳細情報にスクロールバーが無いことについて。

先ほども少し触れましたが、2021年9月にサイドパネルで揺れを観測した市区町村/細分区域を詳細に表示できるように実装したタイミングで、マウスホイールでくるくるしてスクロールできるようにしています。

しかし、スクロールバーが無いため大きな地震の観測震度リストを見ようと思うと、腱鞘炎になりそうな勢いでマウスホイールでくるくるする必要があります。

(この問題自体は実装した当初から認識していて、スクロールバーをつけようとしたこともありました。それが今になっても改善されていないのは、WinFormsアプリであらかじめ用意されているスクロールバーがアプリの見た目にマッチしなかったためです。)

2022/03/16の福島県沖の地震の例
3.ウィンドウサイズの変更が縛られすぎている

Quarogは、メインウィンドウの地図の縦横比に限って、設定から「16:9」「16:10」「4:3」「1:1」の4つから変更できるようにしています。この縛りを設けているのは、ウィンドウを触ってサイズを変えられるようにしたときに頻繁に地図の再描画が必要で、動作がかなり不安定になったという経緯があります。地図画像のサイズ自体は、どれだけ大きくしても小さくしても描画できるようにコードを組んでいるのに、この縛りがあるためあまり活かせていません。

画像比率が縛られている上に、候補が少ない

全コード書きなおし後の展望

1.地図描画

地図描画は、従来のGeoJSONからの描画からTopoJSONからの描画に変更しました。

パフォーマンスではそこまで大差がありませんが、内部の処理方法はだいぶまともになっています。

これまでGeoJSONとTopoJSONの仕様をあまり理解できておらず、自分で作成したGeoJSON以外を使用するとエラーが発生する欠陥仕様になってたのですが、リファクタリングするタイミングでようやくTopoJSONの仕様をお勉強して、きれいに処理できるようになっています。

また、前述の問題であった「指定された中心点で、指定されたズーム率の地図を描画する」という、同じ内容のクラスが3つ生える問題もなおし、地図の描画処理を分離して1つのクラスでできるようにしています。

さらに、震度アイコンや震央アイコンの描画もそれぞれのタイプで描画するクラスを作成し、メンテナンスしやすいようにしました。

この記事の執筆時点ではまだ緊急地震速報関連の処理を全く実装していないため、今後はP波とS波の描画部分を見直すことになるでしょう。

描画したいオブジェクトでクラスをわけました
2.サイドパネルの刷新

サイドパネルは執筆時点で未実装で、Figmaで構想を練っている段階です。

現在のQuarogは地震情報と緊急地震速報の2つにしか対応できていませんが、いずれは津波情報や長周期地震動の観測情報(欲をいうなら火山情報や気象警報・注意報)にも対応したいと考えています。そのため、現在の地震情報中心のサイドパネルの構成から脱却し、時系列順や重要度順に情報を確認できるタイムライン形式に変えていく予定です。

また、詳細情報とタイムラインをわかりやすく切り替えられるように、タブで表示させるつもりです。

まだまだ素案の素案ぐらいの薄い案
3.ウィンドウサイズをフレキシブルに

これは実装できている機能です。

ウィンドウサイズを固定せず、自由に変更できるようになりました。サイズ変更中に頻繁に再描画をして負荷が大きくなる問題も解消しました。

発想は単純で、ウィンドウサイズの変更を検知してすぐに再描画するのではなく、検知から100ミリ秒待って、待っている間にさらにウィンドウサイズが変更されなければ再描画するようにしています。こうすれば余計な再描画が起こらないため、負荷も抑えることができました。

このアイデアingenさんに言われたもので、頭が固すぎる私は思いつきませんでした。(助言されたときは衝撃を受けました。ありがとうございます。)

今後は、フルスクリーンに対応したいと思っています。

4.画像の描画方法の刷新

全コード書き直しに合わせて、内部の画像処理をSystem.DrawingからSkiaSharpに移行しました。

System.Drawingでもそこまで大きな不満はなかったのですが、将来的にGPU描画やマルチプラットフォーム対応する上で妨げになるかもしれないという思いと、もう少しバリエーション豊富な表現がしたいという思いから移行に踏み切りました。

昨年の記事で、Quarogの現在のUIデザインの構想が載っているのですが、このときFigmaで組んだUIデザインは、Windows11の雰囲気と同じように、全体的に角を丸めた四角形で構成していました。しかし、これを従来のSystem.Drawingで実装しようとすると、思ったような角丸四角形が描けません。今回の移行先のSkiaSharpでは、最初からDrawRoundRectというメソッドが用意されているため、容易に思い通りの角丸四角形が描画できます。なんとなく今どきのトレンドになっていそうな角丸デザインを、ようやく取り入れられそうです。

Figmaで構想していたデザイン

現在制作中のアプリより(Figmaの構想にかなり近い形で実現できそうです)

GPU描画については、今のところ実現していませんが、実現しやすい状態まで持っていけているため、どこかのタイミングでちゃんと対応したいと考えています。

マルチプラットフォーム対応については、ほぼ無計画で、実現見込みもゼロです。これを進めるなら、先にWinFormsから脱却する必要があります。そのため、まだまだ腰は重たいです。

Clock For Fuku

Clock For Fukuは、2023年6月末に強震モニタの利用条件が示されてから、強震モニタデータに依拠しない方向で更新するつもりですが、今のところ実現できていません。

今後の方針は、緊急地震速報(警報)については、P2PQuake JSON API v2を活用して誰でも利用できるようにしようと考えていて、それ以外の緊急地震速報地震動予報)についてはDMDATA.JPにユーザーが課金する形で接続できるようにしようと思っています。

しかし、緊急地震速報を受信できたとしても表示できる情報は現状「予想震度」「予報か警報か」のみで、このためだけにユーザーのWebSocket枠を一つ潰してしまうのはかなり微妙なので、もう少し良い方法がないかと模索しています。

理想としては、Quarogで緊急地震速報を受信できる状態になっているときに、QuarogからClock For Fukuにその情報を飛ばしClock For Fukuで表示できるようにすれば、無駄な1枠を削れるのではないかと思っていますが、実現するかは不透明です。

Quake For Fuku

ここからは一般向けに広く公開していないアプリの進捗です。

Quake For Fukuは、Clock For Fukuと同じで強震モニタデータに依拠した構成になっており、更新が必要になっているアプリです。

しかし、Quarogがこのアプリのほぼ上位互換に等しいような機能を有している上、Quarogよりも昔から制作していたアプリなことも祟って地獄のようなスパゲティコードになっているため、なかなかモチベーションが上がらず、この1年間一切触っていません。(自分の情報閲覧用のOBS画面からもいなくなったため、余計に進まなくなりました。)

このアプリは、文字情報を大きく表示できたり、緊急地震速報(警報)の発表地域をテレビで見るような形式で表示できるなど、いくつか利点はあるので、Clock For Fukuと同じように、Quarogの拡張機能として成長させられたらなあと頭の中でこねています。

Quake For Fukuのメインウィンドウ(想像の倍ぐらいウィンドウサイズが大きいです)

テレビで見る、左に地図、右に該当地域が表示される緊急地震速報パネル

Fukuarog

このアプリは、完全に自分用として制作しているもので、情報閲覧用のOBS画面で、自分の地域の情報を一挙に見たいという思いからちまちま作っています。

現状実装できている機能は、住んでいる市の現在の天気・気温・湿度・風速・降水量・日の出日の入り時刻と、緊急地震速報が発表されたときにその地図+設定した場所の予想震度を表示する機能の2種類のみです。

平常時

緊急地震速報発表時(細分区域ごとの予想震度は、距離減衰式を用いてアプリ内で計算し、表示しています。)

他の機能も実装しようと意気込みながら、今年はFigmaでひたすらデザインを考えるだけにとどまっています。また、現在は気象情報をOpenWeatherMapに頼っているのですが、精度がそこまでよくないため、気象庁アメダスデータとかを使うようにしていきたいなと思っています。

Figmaでちまちま考えています

地震観測について

2021年5月ぐらいにウェブカメラを購入してから、自宅の揺れがどれくらいだったかを記録しようと思い、自宅の衣装ケースの中に簡易な地震観測スペースを作り、年中記録できるようにしています。

今年8月に、EQIS-1(組み立て済)を購入し、ingenさんseismometerを書き込んだうえで、PiDASPlusGraphをお借りし、設置場所の震度を記録できるようにしました。

自宅は地盤や建物の影響で、気象庁の震度発表では無感とされるような揺れでもそこそこ揺れます。そのため、以前から自宅に震度計を設置して、自宅の揺れがどれくらいだったのかを知りたいと思っていました。EQIS-1はかなり安価で購入できて、サイズがコンパクトで設置しやすく、かつ震度1程度の小さい揺れでもノイズに負けず計測できるため、まさに私の理想でした。

来年は、衣装ケースからの観測から脱却し、もう少し広いスペースで本格的に観測を行いたいと思っています。

(衣装ケースの1段が占領されていたり、震度計が固定できていなかったりと問題が山積みです。)

現在の観測スペース(ウェブカメラはLogicoolのC920を使用)

PiDASPlusGraph(震度配色を変更したり、震度アイコンのフォントを変更したりして活用しています)

さいごに

今年を総括すると、今までの年と比較してもダントツで何もやっていない1年でした。

昨年は3月まで学生だったり、社会人になってからもこの活動に時間を割けていたのですが、今年は活動時間がかなり少なかったです。

理由は単に怠けていたり、魅力的なゲームが多く登場したりとかがありましたが、一番感じたのは、仕事にすべての気力が吸われているということです。仕事自体は現状防災関連とは無関係の業務ですが、自分には合っていて(多分)、楽しくやれています。仕事も2年目になり、自分の業務もだいぶ板についてきたのですが、だからこそ1日のパワーの90%ぐらいは仕事に使っています。そして、学生時代び比べて帰宅時間が2~3時間ほど遅くなったため、帰ってご飯食べて風呂入ってとしていたらあっという間に日が変わりそうになっています。これが重なった結果、今年は土日にも気力が残らず、活動時間が激減しています。

今学生のみなさんは、学生のうちにやりたいことをやっておいた方が後悔しないと思います……!

とはいえ、自分の怠けから活動が遅れているのも事実ですので、2024年はもっと有意義に過ごしたいです。

ほぼ枯れているGitHubの草(メインじゃないブランチのコミットとかが反映されていないので、ここまで酷くはないですが、それでもかなり荒廃しています)

来年は、Quarogの新バージョンを途中ぐらいまで制作したのち、できるだけ早い段階でいつもデバッグに協力していただいている方々にデバッグをしていただこうと考えています。

来年のアドベントカレンダーでは、もう少しいろんなことができました!!と報告できるよう、活動していきます。まずはこの年末に向けて、少しずつ活動時間を増やしていきます(みなさんのアドベントカレンダー記事を読ませていただき、モチベーションも上昇傾向でチャンス!)

以上、長々とこの1年の振り返りや今後やりたいことを書かせていただきました。ここまで読んでいただき、ありがとうございました!今後ともよろしくお願いします。