Flutterアプリを公開するまでやったことのまとめ

半年くらい前ですが、Flutterでアプリ作ってPlayストアとAppストアに公開したので、経過をメモがてら公開します。
コーディングの詳細では無くて、一連の開発作業のフローについてを書きます。

アプリの概要

毎日の食事から、摂取したたんぱく質の点数を記録するアプリです。
実は某女性向けフィットネスクラブに通っておりまして、そこでオススメされるのが、

1日12点たんぱく質を摂ろう！

というもの。
だいたいたんぱく質6gを1点として、それが12点になるように、バランス良く摂りましょうといわれるんですね。
で、それを記録する紙も貰うんですが、これが面倒で(笑)
いちいち合計点数計算するのも面倒だし。
(ターゲット年齢層を考えれば、計算は頭の体操にもなって良いのかも知れませんがw)

エクセルでも十分ですが、せっかくFlutter勉強する機会があったので作ってみようと。
設計は、Kotlinアプリでやっていたものがほとんど使えたので迷うことはありませんでした。

目指したのは、

• カレンダー風で記録可能
• とりあえず二ヶ月分表示と記録が可能
  • 古いデータは読まない。一応データは全部残る(アンインストールしない限り)
  • 月が変わった瞬間に前月分が読み書きできないのはさすがに不便なので、2ヶ月分とした
• 紙ベースの記録表に転記しやすい形にする
  • 後でトレーナーさんに提出するときに(ポイントが貰えるw)、手で書き写すのを楽にしたいから

という要件です。

開発スケジュールを立てる

普段、個人で「開発」というといきなりコーディングして、画面デザインは作りながら、で結構失敗してきたので、今回はしっかり画面デザインを開発期間に設けることにしました。
結果として、画面の実装がとてもスムーズに進んだで、これは良かった点です。

工数としての見積もりは80Hで、実装とデバッグを入れて、4月中にリリースを目標としました。

開発

実際の開発フェースに入ったのは、3月中旬、ちょうど連休中くらいからでした。

1. 画面のデザイン

Prottというサイトを利用しました。
https://prottapp.com

ここでしっかり画面デザインをしたことで、画面遷移も頭を整理することが出来ました。
事情により1画面初回リリースからはオミットしましたが、今後のアップデートで追加する予定です。

デザインがしっかり出来上がっていると、実装も早かったように思います。体感ですが。

ただ、私にはデザインセンスはないので、何となく素っ気ないデザインになっています。
もう少し可愛いデザインにしたかったんですが、とりあえずスピード重視だったので(汗)
(というか時間があっても多分無理ですけどw)

あ、デザインはマテリアルデザイン採用でございます。UIの実装はAndroidもiOSも統一することが一番早いので。

2. 実装する

(1)アプリ名、パッケージ名を決める

後から変えるの大変なので、最初に決めます。
プロテインを記録するので、パッケージ名はproteinrecorder、日本語は「たんぱく録」としました。
また、アプリのアーキテクチャパターンも、この時点で決めました。
BLoCでいくか、AndroidのLiveDataリスペクトなMVVMパターンで行くか。
MVVMで行くことにしましたが、実際にはBLoCプロバイダーぽいパターンも入れることになりました。
詳細はこちらの記事にて。

(2)もくもくと実装する

実装で困ったのはレイアウトですね、やはり。
なかなかコツを掴むまでは、四苦八苦です。

※先ほど「画面の実装はスムーズに進んだ」と書いたのと矛盾するようですが、ここで書いているのはより細かいパーツの組み上げにはコーディングレベルで四苦八苦した、という意味です。「画面の実装はスムーズに進んだ」というのは、パーツを作っては遷移を作って「アレ違う」となって作り直して、ということはなかった、という意味です。

Androidだと、ウィジェットをおいて、そのウィジェットに対してセンタリングなどの「属性」を持たせる感じですが、Flutter(Dart)は、センタリングウィジェットの中にウィジェットを配置する、という感じで。
でも、これ、HTMLと同じ考え方だというのを目にして、それからは何となく書きやすくなりました。

あとはリップルエフェクトが苦労しました。
詳細はこちらの記事にて。
しかも、苦労してリップルエフェクト付けたのに、そこから遷移する予定だった画面は初回リリースからオミットされてます(ならエフェクトも外すべきなんですが、外すのも面倒な作りになったのでそのままです)。

(3)もくもくとテストする

テストを書く、というのが、実は一番大きな目標だったので、これだけは手を抜かずに書きました。
実は、Flutterでアプリ開発できるプロジェクトにいけるかもしれないという話で、唯一テストについてだけ調べてなかったので、その知見を得ておきたかったのです。
なのでQiita記事も数多く挙げました。(後で仕事で参考に出来るように)

driverテストだけやってませんが、これは「必要ないな」と感じたからです。
私の場合、ウィジェットテストまでで十分でした。

ただ、今後タブレットにちゃんと対応させようと思っているので(今は若干レイアウトが崩れる)、そうなったらエミュレーターテストでスクショ撮って、とやった方が良いでしょうかね。
もしくは、Firebase Test LabでMatrixテストを上手く使うかですね。

なお、入れるかも知れないと聞いていたプロジェクトは、このご時世のせいか着手見送りとなり、別のプロジェクトに配属されることになりました(泣)

アイコン、Playストア登録用画像のデザイン

アイコンの記事でも書きましたが、これが最難関でした。
デザインセンスが皆無なので(汗)

アイコンはそこそこしっくりくるの選べたと思いますが、あの1024x500の画像はどうだろう・・・
まあ、Googleが広告してくれるときに使う画像だから、広告してくれるとは思えないアプリなので、世の皆様の目に触れることはないだろう(笑)

というか、アイコンデザインは、最初にやった方が良かったかもです。
ある程度、テーマカラーなどは決めて実装してましたが、アイコンが決まるとアプリの全体的なテイストも決まるので、それに合わせてデザインしたら無機質なアプリ画面ももう少しなんとかなったかなと反省しています。

CI/CDツールの選定

テストの量がある程度になってから、選定を開始しました。

Github Actions, CircleCI, Codemagicを試しました。
結論としては、Github ActionsとCircleCIは一長一短で、お互いを補足し合いながら使えれば良いかなあと言う感じ。

これから始めるなら、Codemagic一択でオススメします。Flutter専用というだけあってマジで設定が楽です。(ただし今現在、Something weng wrong.というエラーしか吐かないで失敗するという不具合が時々起きていて悩ましいです。Codemagic側の問題のようです)

ビルド時間が気になる規模のプロジェクトの場合は、どうしても無料で済ませたい場合、他の2つも組み合わせて上手く分散させると良いでしょう。
私は、developへのpush => CircleCI、masrterへのPR/tag付けリリース作成 => Codemagic、としています。
ビルド時間十分余ってますけどねw

クローズドテスト

知人数名にお願いして、クローズドアルファ版テストをしてもらいました。
案の定、よく分からないアプリなので、戸惑っておられましたw

ロボテスト

Firebase Test Labでロボテストを回しました。
動画見てると面白いですよ。画面めっちゃランダムタップ(連打)してます。

普通のAndroidアプリだと、あの勢いでランダム連打されたら、そこそこの頻度でクラッシュするか変な動きしちゃいそうですが、大丈夫なのは、FlutterはいわゆるNDKアプリっぽい(JavaやKotlinではなく、CやC++のコードが吐かれる)からですかねえ。
Activityが1個しかないので、ライフサイクル問題が起きないのかな？と。

以前は、WebViewな画面は全くタップしてくれなかったように思うけど、NDKアプリの画面はランダムにあちこちタップしてくれるんですね。それとも、今は変わって、WebView画面でもランダムタップしてくれるのかな？

審査

Google Playストアはあまり心配してませんでしたが、Appleさんは心配でしたね・・・
案の定、何度もリジェクトを食らいつつ、英語の指摘文を何度も読み直しては修正申請する、の繰り返しでした。

反省

開発計画は結構無茶だったですね。

80H/2ヶ月で出来ると思ってたけど、コーディングに着手できたのが3月後半で、土日に1日9時間とか頑張って(仕事よりやってるw)、やっと4月中ギリギリに第1フェーズ終わらせた(画面1個オミット)、という感じです。

まあでも総工数は90Hくらいか。バッファ1.2で足りたか・・・
という感じです。

ちなみに、開発スケジュール立てて、ガントチャートも引いてましたが、最初に作って満足して、結局使いませんでした(汗)

Github Projectのカンバンくらいで十分だったかもです。

その他感想

Appleへの提出はGoogleより後にするのは予定通りだったので、そこはいいのですが(開発者費用を本当に払うか迷っていたし。結局払いましたけどw)、このご時世でGoogleも勤務縮小体制だとかで審査に時間がかかったのは想定外でした。
(審査ってリモート出来ないの？？)

それと、Appleさんの開発者登録でサポートの人とメールでやりとりする必要があったんですが、連休中にもかかわらず返信くれたのは驚きました。
さすが、サポートはいいですね。(Googleが悪いとは言ってませんよ！必要な場面に出くわしたことがまだないだけで^^;)