水無月の余韻 開発Sc.

プログラミング関連の雑記

ゆびぬきシミュレータFlutter化計画

先日、加賀ゆびぬき刺し模様シミュレータ v2 を Android/iOS でリリースしました。

何回目かのリニューアルですが、その舞台裏と意図を記録しておこうと思います。

アプリを乗り換えよう

遡ること1年半。年を越えたら産前休暇が確定的になってきた頃、Android版にiOS版の機能を取り込むべく開発をすすめていました。

機能取込みのつらいところは、同じことを別の言語で実装して、大量にあるテストも再実装するところです。(アプリの核であるシミュレートエンジンは複雑なので、その分テストが増えます。)

そんなわけで筆(?)も乗らず、ゆっくりペースで開発はすすんでいました。

「今後のメンテを考えると、ソースコードをひとつにした方がいいんじゃない」という夫の助言から、Flutter に乗り換えることにしました。

これまでもマルチプラットフォームの開発ツールはあったものの、安定性の面で躊躇して取り組んではきませんでした。Flutter は Google が本腰を入れているので、使い続けることもできると期待しています。

シミュレート結果の描画を試して、ほぼいけると確認したので開発をはじめました。宣言的UIで開発していくのも新鮮でした。

iOS にのみ提供していた、3D プレビューも夫が頑張ってくれたおかげで、Flutter版アプリでも機能提供できました。

Flutter版ゆびぬきシミュレータアプリ(iOS)

Flutter Web

Android/iOSにFlutterで実装したアプリを公開できました。

Flutter には、Webブラウザで動くアプリケーションも作ることができます。加賀ゆびぬきシミュレータもWeb版を置き換えられると、すべてのコードがひとつになる! と期待していました。

Flutter Web の課題を調べると、まだいくつか実用段階になさそうな issue が登場します。

少し古いですが、わかりやすかった課題解説がこちら。

Flutter Webで注意した方が良さそうなこと

アプリの性質上、UIは別に作りなおす必要があると踏んでいました。モバイルアプリの動作をWebで再現されても使いやすくはありません。

これらを想定しつつも、自分のアプリだとどうなるかな、という興味からひとまず最低限の変更でWebブラウザで動かしてみることにしました。

やってみると結構大変でした。4日ほどかけて重要な画面を開ける状態にしました。(日に1〜2時間)

Flutter版ゆびぬきシミュレータ(Web)

  • platform の書き分けがめんどい
  • UIパーツの書き分けも必要 (数字のドラムロールが操作不能、Webで動かしたときだけ表示される要素がある)
  • 複数画面で構成されるの操作がしんどい。画面遷移いらない。 (想定通り)
  • ロードがめちゃくちゃ遅い。さっと始められない。 (known issue)
  • 日本語が豆腐になる
  • クリックへの反応がちょっと遅い

これは実用段階ぎりぎりかな、という感想でした。

ゆびぬきシミュレータにおいては、さっと始められないのは許容しがたいので、Web版は別の実装ですすめることにしました。

Android/iOSと同等のシミュレートができるように更新予定です。

Web版に適用できないのは残念でしたが、Android/iOSをひとつのコードで管理できるだけでもだいぶ助かっています。Flutter ありがとう。