Flutter の Add-to-app でナビゲーションスタックが Flutter → Native → Flutter となってしまう場合のリリース後課題と対応事例

Flutter の Add-to-app で ナビゲーションスタックが Flutter → Native → Flutter となってしまう場合の リリース後課題と対応事例 potatotips #95 iOS/Android開発Tips共有会 1

自己紹介 ● ● ● ● 高田 晴彦 株式会社Omiai Flutter / Android エンジニア @tfandkusu ○ ● Qiita / Zenn / note / GitHub / X 来月、息子が産まれる 2

Omiai（オミアイ）婚活マッチングアプリ ● ● 2012年から長年運営 古いコードベース ○ 技術的負債 ○ iOS / Android 仕様差異 3

Flutter にリプレイス リプレイス中も新たな施策をデリバリーしたい 4

Add-to-app 既存 iOS Native App 既存 Android Native App Flutter Module Flutter の 画面を表示 5

ある時期の画面構成 お相手を探す Flutter 足あと一覧 Native お相手の詳細プロフィール Flutter 6

今回のテーマ ナビゲーションスタックが Flutter → Native → Flutter になっている Flutter 画面 Native 画面 リリース 課題 発生 対応 学びを 共有 Flutter 画面 7

Add-to-app の 2つの技術要素と 制約 1. 2. FlutterEngine FlutterViewController / FlutterActivity 8

FlutterEngine ● ● ネイティブから FlutterEngine を作ることで Flutter の世界を作ることができる FlutterEngine は複数作ることができる ○ それぞれ別の世界なので、グローバル変数等は、別の FlutterEngine に反映されない 9

FlutterViewController Android FlutterActivity iOS FlutterEngine を Attach することで Flutter の世界をネイティブアプリの画 面に表示することができる。 FlutterEngine FlutterView Controller FlutterActivity 10

制約 ひとつの FlutterEngine は同時に1つの FlutterViewController / FlutterActivity に対してしか Attach できない FlutterView Controller FlutterView Controller FlutterActivity FlutterActivity Attach はひとつだけ FlutterEngine 11

制約 つまりナビゲーションスタックが Flutter → Native → Flutter となる場合は、 FlutterEngine が2つ必要 複数 FlutterEngine FlutterView Controller FlutterView Controller FlutterActivity FlutterActivity FlutterEngine FlutterEngine 12

複数 FlutterEngine を採用して アプリをリリース 13

Android で課題が発生 ● ANR（アプリが応答しなくなる現象）発生 ○ 社内QAでは未確認 ○ Android vitals / Firebase Crashlytics で一定割合で発生していることを確 認 ○ Flutter のCPUネイティブな部分で発生 去年の6月のことで、当時の Firebase Crashlytics の記録やスクリーンショットは残っていなかった 14

対応 15

ロールバック ビジネス上、必要な機能が Flutter で作られていたため 修正して再リリース 16

FlutterEngine の生成方法を変更 初期リリース版 生成 Native 画面 FlutterActivity 画面遷移 (複数回) FlutterEngine 破棄 FlutterActivity 画面遷移 (複数回) FlutterEngine 生成 破棄 複数回 17

FlutterEngine の生成方法を変更 修正版 生成 Native 画面 FlutterActivity 画面遷移 (複数回) FlutterEngine FlutterActivity 画面遷移 (複数回) FlutterEngine 生成1回 上司の渡邊が対応 破棄 Attach Detach 複数回 18

ANR 解決 ● ● FlutterEngine は生成と破棄を繰り返すと ANR が発生🤔 公式情報なし😢 FlutterEngine 生成 破棄 ANR 発生 複数回 19

学び 20

前例の無い技術への挑戦は難しい ● Add-to-app 事例 ○ Studyplus さん ■ ○ Moneyforward さん ■ ● Add-to-Appの戦い方 - DroidKaigi 2022 MEet Flutter Add-to-App: Unlocking Our Productivity - Money Forward TECH DAY’24 複数 FlutterEngine の公開された事例は見つからず😥 21

• https://2022.droidkaigi.jp/timetable/363033
• https://techday.moneyforward-dev.jp/2024/sessions/talk-07/

どうするのが良かったのか🤔 22

複数 FlutterEngine を採用しない 施策があり改修の必要な画面を Flutter 化 Flutter 画面 Native 画面 特に施策は無いが Flutter 画面に挟まれるので Flutter 化する Native 画面 FlutterEngine ひとつ 23

リスクを共有の上 慎重に少しづつリリースする リリース後の監視項目を事前に定義 クラッシュ ANR リリース割合 リプレイス 画面の KPI 5% 例：プロフィール閲覧数 10% … 1% 24

ありがとうございました 25