はじめに
こんにちは、i-plug でモバイルアプリのエンジニアをしている咲枝（さきえだ）です。
元々 iOS エンジニアとして開発をしており、直近2年以上は Flutter での開発を行っています。
現在は、私ともう一名でモバイルアプリの開発をしています。
今回は i-plug が運営する OfferBox アプリを Flutter でリプレイスしたお話をしたいと思います。
OfferBoxはどんなアプリ？
企業から直接オファーが届く就活アプリです。
皆さんの周りで就活中の方・学生の方がいらっしゃいましたら、ぜひダウンロードを薦めていただけると嬉しいです。
https://play.google.com/store/apps/details?id=jp.offerboxplay.google.com
なぜリプレイスに至ったのか
元々はiOS, Androidの開発経験のあるモバイルエンジニアが在籍し開発を行っていたのですが、その方が退職してから数年間は、オフショアやモバイルアプリ開発の専任ではないメンバーで保守・運用をしていた状況でした。
昨年6月に筆者が入社し、今後はアプリ開発を内製化していきたいという狙いがある中で、以下のような理由からFlutterでリプレイスすることを決めました。
開発効率・生産性の向上
OS間の機能・デザインの差異をなくす
Flutterでの開発経験がある
技術構成
技術的な構成はざっくり以下のようになっています。
CI / CD
Codemagicを主に以下の目的で使用しています。
- PR時のテスト実行
- Firebase経由でのテストアプリの配布
- ストアへのアップロード
状態管理
riverpod・flutter_hooks・hooks_riverpodを使用しています。
一時的な状態(ephemeral state)は hooks、それ以外は Riverpod といった形で使い分けています。
アーキテクチャ
MVVM＋Repositoryとしています。
ディレクトリ構成はこちらの記事のように機能ごとに分ける feature-first を採用しています。
関連性のあるものがまとまっているので、開発がしやすいですね。
API定義・モック通信
API定義の管理や、モック通信に apidog を使用しています。
開発当初は情報共有ツール上にAPIドキュメントを作成して、バックエンド担当のエンジニアにモックのレスポンスを返却してもらって開発をしていました。
しかしそれだとバックエンド側も大変ですし、デプロイしてもらうまで待ちが発生する状況でした。
apidog を導入してからは API管理はもちろん、モック通信機能を提供してくれているのでアプリ開発担当者がAPI定義をしてバックエンド担当者にレビューしてもらった上で、モック通信をして開発が進められるようになり、開発効率が向上しました。
大変だったこと
旧版の OfferBox アプリの特徴として メインの画面のほとんどが WebView でアプリの画面は全体の一部という構成 でした。
アプリと WebView で JavaScriptChannel により連携している箇所が多数あり、調査の上で webview_flutter という公式パッケージを使用して開発を進めていたのですが、JS の confirm, alert メソッドがアプリ側でハンドリングできない問題があることに気づきました。（現在は解消されています）
リリース予定日まで余裕もない中、もう一つの人気パッケージである flutter_inappwebview パッケージへの差し替えも検討しましたが、issueもすでに上がっており、修正 PR も投げられていたので、fork して開発を進めることに。
そんな中、開発の合間を縫って FlutterKaigi 2023 に参加してきたのですが、スポンサーブースに Google Japan の Flutter チーム chenglinlim さんが出展していました。
そこで先述の webview_flutter の issue に関してお話ししたところ、アメリカの Flutter チームに伝えていただけるという話になり、その数日後には止まっていた PR のレビューが活発になり結果としてマージされ、リリース前に fork 版から正式版に差し替えることができました。神ですよね... 本当にありがとうございます！！
ちなみにしっかり Dash くんゲットしてきましたw
反省点としては、サービスの機能を詳細まで把握できていなかったことと、パッケージ導入時の調査不足だったと思っています。
自分自身ここまで WebView に依存したサービスの開発に携わったことがなかったので、とても良い経験ができました。
本当はまだまだ大変なこともありましたが、キリがないので別の機会にお話しできればと思います😅
まとめ
i-plug では、Flutter によって iOS と Android アプリのリプレイス開発を行いました。
本記事では既存アプリを Flutter でリプレイス開発する流れや、その中で発生した問題・解決に至った流れ、エピソードなどを紹介しました。
OfferBox アプリの事例が、今後リプレイス開発をする際の参考となれば幸いです。
今回紹介することができなかった技術的な話などは、次回以降発信していければと思います。
