Flutterでアプリを書き直してiOSとAndroid両方にリリースしてみた

数年前にSwitfで書いたiOSアプリ「TAISENカウンター」がメンテできない状態になってしまい、画面もiPhoneXサイズに最適化されていなかったため、ずっと書き直したいと思って直しました。ついでにAndroid版もデビューです。

TAISENカウンター(AppStore)

TAISENカウンター(Google Play)

幸い?大した機能のないただのカウンターアプリであったこともあり、最近周囲で流行っていたFlutterで書き直してみました。SwiftUIも少しだけ触ってみたのですが、うまくいけばGoogle Play Storeにも出せるのではと思ったのでFlutterを選出しています。

今回は今回のリリースまでに感じたことを書いていきます。実装周りの詳細については後日追加で記事にしていきます。

Flutterよさそう

Flutterで書き直してみての感想は、最初コツを掴むまではたくさんエラーを出しながら、悩んだりしていましたが、それを乗り越えたら結構サクサク実装を進めることができました。実質アプリのUI部分に関しては、3画面くらいなのでほぼ1日で仕上がりました。(その前に2日くらい試行錯誤でしたが・・)。

普段サーバサイドのバックエンドの仕事をしていてUIに不慣れということもあったからか、たくさんのネストが生まれるコードは大変でした。こことここの間に新しいScrollViewを入れようとなったときに、閉じかっこどこだとか悩んでいました。ただIDEの機能をちゃんと使いこなせばこれも大丈夫みたいです。(範囲選択やリファクタなど。)

iOSシミュレーターで動かす時のビルドは結構時間がかかります。しかしそれを補うホットリロードのありがたさ。素敵です。ホットリロードなかったら無理では・・。時々、初期画面から試したい時があって、そのときは毎回ビルドしていて辛いなとは思いました。

Flutterの学び方

Dart

あくまで趣味プロジェクトということで、基本的にDartは雰囲気で使いました。普段Javaを使っている自分からしたら結構馴染み深いような言語に感じました。これくらいのアプリだったら特に言語要因で悩むことはほとんどないと思います。むしろJava目線で見たら、いろいろ便利そうな機能が見えて楽しかったです。

開発環境はInteliJを選択しました。補完もしっかり聞いてFormatterも動くし、素晴らしかったと思います。普通はVSCodeでやるのかな?

Flutter

基本的に公式のドキュメントのGet StartdとSamples & Tutorialsまでは一通り読み、それ以外は要点だけ目を通したくらいでした。ここから使えそうな各UIパーツを拾って行って実装を開始するという感じです。その段階に至ったときに試行錯誤期間に突入しました。

「childrenを期待していたのに、あれ?childか」とか、「TextFormFieldはPaddingとかの下に入れないといけないのか」とかとか。雰囲気でやろうとするとこういうところで躓きますね。頑張って乗り越えましょう。

Flutter documentation (公式)

このアプリ固有のポイント

このアプリはカウントアップ時に音がなるのですが、音を鳴らすパッケージでどれを使えばいいのか悩みました。。試しに一つ選んでみてもうまく動かなかったり、結構詰まっていました。

audioplayer、audioplayer2、audioplayersとか似た名前のがたくさんあるんすよね・・。辛み。

最終的に使ったのはこれ-> https://pub.dev/packages/audioplayers

あとアクティブユーザがそんなにいないアプリなので、お金になるとは考えていませんが、admobを入れてみています。ちゃんとパッケージがあって素敵でした。これもさくっと入りました。ただNativeより制限があるっぽい?

https://pub.dev/packages/firebase_admob

最初広告設定も全部終えたつもりでリリースしてしばらくしても広告配信されないなぁと思っていたのですが、支払設定を作らないとダメだったみたいです。ちなみにこれくらいの弱いアプリだと、いわゆる広告主?的なものは0件となっていて、Googleさんしか配信元になってくれていないっぽい。

iOS版一回リジェクトされる・・

TAISENカウンターというアプリ自体は数年前からiOSのストアに出していたのですが、今回Flutterで書き直したとはいえ、機能そのままで審査に提出したところ、例の理由でリジェクトされました・・。

リジェクト理由は4.2、知る人ぞ知る、「機能が少なすぎる」というものでした。前は通ったのに・・。長期戦を覚悟して、前から実装予定だった機能を1つ2つを1日で実装して、再提出してみたところ、さくっと通りました。よかった。このとき結果のShare機能も追加しましたが、shareパッケージ簡単で素敵。

https://pub.dev/packages/share

カウンターアプリなんてありふれていますからね〜。しょうがないとは思います。

Android版の作成もスムーズ

問題のAndroid版です。まず自分は実機を持っていない。Developerアカウントもないという状態でした。Android Studioは以前入れていたので、シミュレーターを動かしてみたところ・・・。完璧に想定どおりに動きました。さすがFlutter!これは感動しますね。少しは手直しが必要かと思っていたのですが、コード自体はそのままで、Android向けのビルド向けの作業をしただけです。これも公式そのままなぞるだけ。簡単。

Build and release an Android app - Flutter

今後

またアプリを作るときにはFlutterでやってみたいと思うくらいには気に入りました。表示をFlutterに委ねることで、XCodeのGUIでのごにゃごにゃからも逃げられてよかったです。複雑な画面の場合はNativeの方が組みやすいとかはあるのかもしれない?

(旧ブログから移行)

author icon
  • IwaKen (moru3)
  • 札幌在住Webエンジニア。色々書いていきます。Tech系、ゲーム、映画、Youtubeなど多岐にわたって触れていきます。
  • twitter mark
  • youtube mark