じゃらんnetアプリ Flutterリプレイスの道のり/クロスプラットフォーム開発2022 -Flutter・React Nativeの導入と実践-

2022/07/27 CROOZ.inc（クルーズ株式会社）主催「クロスプラットフォーム開発2022 -Flutter・React Nativeの導入と実践-」での、桐山の講演資料になります。

Transcript

1. じゃらんnetアプリ
 Flutterリプレイスの道のり
 Recruit Co., Ltd. Keisuke Kiriyama

2. • Recruit Co., Ltd.
 • じゃらんnetアプリ開発
 • Flutter開発 チームリーダー
 Keisuke Kiriyama
 2

3. 「じゃらんnetアプリのFlutterリプレイス」について
 • じゃらんnetアプリは総コード量80万行に及ぶ大規模なアプリ 
 • 我々のチームは様々な試行錯誤を行いながらリプレイスを推進している 
 
 • どの様な進め方/考え方でFlutterリプレイスしているのか 
 • これまでを振り返りどの様にリプレイスを進めると良さそうか 
 →リプレイスの過程で得られた知見をお伝えする 
 
 なお本発表は同僚/チームメンバーと一緒に取り組んできた内容を自分が代表して発表します。 
 話すこと
 3

4. 1. じゃらんnetのご紹介
 
 2. じゃらんnetアプリをFlutterリプレイスしている背景
 
 3. じゃらんnet Flutterリプレイスの道のり
 a. Add-to-appを使用したFlutterの部分的導入
 b. じゃらん全体のFlutter化を見据えた構成変更
 c. ネイティブコードの段階的なFlutterへの置き換え
 
 4. これまでの道のりの振り返り
 説明の流れ
 4

5. 1. じゃらんnetのご紹介
 
 2. じゃらんnetアプリをFlutterリプレイスしている背景
 
 3. じゃらんnet Flutterリプレイスの道のり
 a. Add-to-appを使用したFlutterの部分的導入
 b. じゃらん全体のFlutter化を見据えた構成変更
 c. ネイティブコードの段階的なFlutterへの置き換え
 
 4. これまでの道のりの振り返り
 説明の流れ
 5

6. 6
 旅を、もっと豊かに
 宿・ホテル予約アプリ

7. 7
 じゃらんnetの関連サービス(一部) 

8. 1. じゃらんnetのご紹介
 
 2. じゃらんnetアプリをFlutterリプレイスしている背景
 
 3. じゃらんnet Flutterリプレイスの道のり
 a. Add-to-appを使用したFlutterの部分的導入
 b. じゃらん全体のFlutter化を見据えた構成変更
 c. ネイティブコードの段階的なFlutterへの置き換え
 
 4. これまでの道のりの振り返り
 説明の流れ
 8

9. Flutterリプレイスの背景
 • じゃらんnetアプリはiOS/Android共にリリースから10年以上が経過
 9
 開発効率
 • プロジェクトの大規模化に
 伴うビルド時間の増加により
 開発効率が著しく低下
 コード品質
 • プロジェクト全体の
 コードが古く複雑で
 バグを生みやすい状態
 じゃらんnetアプリのリプレイスを検討

10. じゃらんnetアプリのリプレイス検討
 • クロスプラットフォーム技術の採用を検討 
 ◦ リプレイス/エンハンスの開発工数半減が期待できる 
 
 • 技術検証→Flutterの開発生産性が最も高いと実感 
 ◦ hot reload / hot restart
 ◦ 宣言的なUI構築
 ◦ 既成部品の充実
 
 • じゃらんnetアプリのリプレイスにFlutterを採用 
 
 ※ なおクロスプラットフォーム技術の比較検討の詳細については 
 　 発表の主旨とずれてしまうため割愛 
 10

11. 1. じゃらんnetのご紹介
 
 2. じゃらんnetアプリをFlutterリプレイスしている背景
 
 3. じゃらんnet Flutterリプレイスの道のり
 a. Add-to-appを使用したFlutterの部分的導入
 b. じゃらん全体のFlutter化を見据えた構成変更
 c. ネイティブコードの段階的なFlutterへの置き換え
 
 4. これまでの道のりの振り返り
 説明の流れ
 11

12. • Flutterへのリプレイスを検討していた時期はFlutterがstableリリースされて 
 から半年ほどしか立っておらず日が浅い時期だった 
 
 • プロダクションに採用されている事例は今ほど多くなく、 
 Flutterをいきなりプロダクション利用していくことに懸念があった 
 
 一度にまとめてFlutterフルリプレイスするのは困難だった
 12

13. • Flutterでフルリプレイスする場合 
 ◦ ネイティブの開発チームの案件開発を停止する必要がある
 ◦ フルリプレイスするための大規模なFlutter開発体制を構築する必要がある
 
 
 
 
 
 • Flutter自体の有効性が不明瞭な状況で実施するのはリスクが大きかった 
 
 一度にまとめてFlutterフルリプレイスするのは困難だった
 13
 iOS 開発チーム Android 開発チーム Flutter 開発チーム じゃらんnetアプリ 開発チーム 案件を停止する必要がある 
 大規模な開発体制を 
 構築する必要がある 

14. • ビジネスサイドからの目線としても実績がない状況で 
 新しい技術を使用したフルリプレイスは懐疑的だった 
 
 
 • 一度にフルリプレイスするのはリスク大/難易度高と判断 
 
 • そこでフルリプレイスするのではなく、 
 段階的に徐々にFlutterへ置き換えていく方針を採ることにした 
 一度にまとめてFlutterフルリプレイスするのは困難だった
 14
 Flutterなるものは 本当に大丈夫なのか？
15. 段階的なFlutterリプレイスの戦略
 15

16. STEP2
 Flutterリプレイスの3つのSTEP
 Flutter Add-to-app 16
 STEP3
 ネイティブ
 ネイティブ
 Flutter
 Flutter ネイティブ
 Flutter
 Flutter Flutter Flutter • じゃらんnetアプリのFlutterリプレイスは3つのSTEPで構成される 
 STEP1

17. Flutterリプレイスの3つのSTEP
 Flutter Add-to-app 17
 STEP2
 STEP3
 ネイティブ
 ネイティブ
 Flutter
 Flutter ネイティブ
 Flutter
 Flutter Flutter Flutter • Add-to-appを使用してFlutterを一部導入 
 ◦ 狙い1: Flutter自体の有効性検証 
 ◦ 狙い2: Flutterが開発生産性へ寄与することを示す実績を作ること 
 STEP1

18. Flutterリプレイスの3つのSTEP
 Flutter Add-to-app 18
 STEP2
 STEP3
 ネイティブ
 ネイティブ
 Flutter
 Flutter ネイティブ
 Flutter
 Flutter Flutter Flutter • 既存ネイティブプロジェクトを1つのFlutterプロジェクトに変更する 
 ◦ 狙い: じゃらんnetアプリ全体をFlutterリプレイスするための下地作り 
 　　 段階的にFlutterリプレイスしやすい環境を作ること 
 STEP1

19. Flutterリプレイスの3つのSTEP
 Flutter Add-to-app 19
 STEP2
 STEP3
 ネイティブ
 ネイティブ
 Flutter
 Flutter ネイティブ
 Flutter
 Flutter Flutter Flutter • 画面単位でネイティブのソースを徐々にFlutterに置き換えていく 
 STEP1

20. Flutterリプレイスの3つのSTEP
 Flutter Add-to-app 20
 STEP2
 STEP3
 ネイティブ
 ネイティブ
 Flutter
 Flutter ネイティブ
 Flutter
 Flutter Flutter Flutter • これらの段階を経て最終的にはじゃらんnetアプリのフルFlutter化を目指す 
 STEP1

21. 21
 STEP1
 Add-to-appを使用した
 Flutterの部分的導入

22. Add-to-app (Add Flutter to existing app)
 
 • 独立したiOS/AndroidプロジェクトにFlutterの画面やDartのロジックを 
 モジュールとして組み込むことができる機能 
 
 • module typeのFlutterプロジェクトを構築しネイティブプロジェクトに組み込む 
 
 
 
 
 
 22
 じゃらん
 iOS
 アプリ
 Flutter
 プロジェクト
 (module type)
 じゃらん
 Androidアプ リ
 
 
 
 
 

23. 23
 じゃらんnetの関連サービス(一部) 

24. 24
 じゃらんnetの関連サービス(一部) 

25. 25
 TOP画面の遊び・体験ボタン以 降の画面は全てFlutter
 じゃらん遊び・体験導線のFlutter化 
 

26. • この段階ではまだじゃらんnetアプリに 
 Flutterを全面的に採用する決断には至っていない 
 ◦ →小さいコストでFlutterを導入し、Flutter自体の有効性検証を行いたい 
 
 • Add-to-appはドキュメントが充実していて、 
 Flutterを導入する際のコストが最も小さいと判断 
 
 • まずはAdd-to-appで一部Flutterを導入した 
 
 ※ なおAdd-to-appはドキュメントが充実しているため 
 　 その導入手順の説明は本発表では割愛 
 
 Add-to-appを使用した背景
 26

27. • 総じて期待していたメリットを得られたと実感 
 じゃらん遊び・体験のFlutter化において 
 • iOS/Androidの仕様差分をなるべく減らす 
 • iOS/Android両方をマテリアルデザインで統一 
 
 • 開発以外の工数も削減
 Add-to-appでFlutterを導入してみて
 27
 ほとんどのコードを
 Dartで統一でき
 開発工数はほぼ半分に
 開発工数
 要件検討工数
 デザイン作成工数
 ５割減
 ５割減
 3割減

28. • hot reload/hot restartによる高速な開発イテレーション 
 
 • 既成部品の充実
 
 • IDEの機能充実
 
 
 
 • 従来のネイティブ開発と比較して2、3割程度開発効率向上を実感(主観値)
 Add-to-appでFlutterを導入してみて
 28

29. • また回避できない致命的なバグに遭遇することもなく 
 品質面でも問題ないことを確認することができた 
 Add-to-appでFlutterを導入してみて
 29

30. • Add-to-appでFlutterを一部導入した際にハマったポイント 
 • 得られたメリットの詳細
 
 • 参考
 • YouTube動画: https://www.youtube.com/watch?v=Wi0Wmv3B8Uk 
 • SlideShare: https://www.slideshare.net/RecruitLifestyle/flutter-238676480 
 
 iOSDC2020: 「Flutter以降の苦労と乗り越えた先に得られたもの」
 30

31. 31
 STEP2
 じゃらん全体のFlutter化を
 見据えた構成変更

32. • Flutter自体の有効性の検証ができた 
 
 • またビジネスサイドからの懐疑的な目線に対してもファクトとして 
 Flutterの開発生産性寄与を示すことができた 
 
 • じゃらんnetアプリ全体にFlutterを展開していく 
 ◦ 前準備としてプロジェクトの構成変更を実施 
 Add-to-appを使用したFlutterの一部導入によって
 32
 Flutterいいね！
33. • iOSプロジェクトとAndroidプロジェクトが独立して存在 
 • FlutterプロジェクトがAdd-to-appでそれぞれ組み込まれている 
 Add-to-app時点のじゃらんnetアプリのプロジェクト構成
 33
 じゃらんnetアプリ iOSプロジェクト じゃらんnetアプリ Androidプロジェクト じゃらん遊び・体験 Flutterプロジェクト (module) Add-to-app
 Add-to-app
 この状況だとFlutter
 コードを追加する際に
 都度moduleとして
 用意する必要がある

34. • iOS/Androidプロジェクトを1つのFlutterプロジェクトにすることができれば 
 ◦ moduleとしてFlutterコードを用意する必要がなくなる 
 ◦ 任意のタイミングでFlutter画面を表示したり 
 Dartコードを呼び出したりしやすくなる 
 
 
 
 
 
 
 iOS/Androidプロジェクトを一つのFlutterプロジェクトへ
 34
 じゃらんnetアプリ iOSプロジェクト じゃらんnetアプリ Androidプロジェクト じゃらん遊び・体験 Flutterプロジェクト (module) Add-to-app
 Add-to-app
 じゃらんnetアプリ Flutterプロジェクト(app) じゃらんnetアプリ iOSプロジェクト じゃらんnetアプリ Androidプロジェクト じゃらんnet iOS/Androidプロジェクトを1つのFlutterプロジェクトへ 

35. • しかしAdd-to-appとは違い
 「既存のネイティブプロジェクトを1つのFlutterプロジェクトに変更する方法」 
 はドキュメントにもなければ、探した範囲ではネット上にも存在しなかった 
 
 • そこで自分たちでFlutterプロジェクトの構造やビルドの流れを確認することで 
 実現方法を調査した
 
 ※ 実現方法についての説明はあまりにも詳細な実装や修正の話になってしまうため、 
 　 Appendixに記載。本発表では詳細なところまでは説明せず、どの様なことが 
 　 必要になるのか大まかな考え方について説明。 
 iOS/Androidプロジェクトを一つのFlutterプロジェクトへ
 35

36. 1. Flutterプロジェクトの中に
 既存ネイティブプロジェクトのソースファイルを配置する
 
 2. ファイルや設定の命名をFlutterが前提としている命名にしておく
 
 3. Flutter SDKが保持するビルド用の処理を正しい順番で呼び出す
 ネイティブプロジェクトをFlutterプロジェクトにする際必要なこと
 36

37. • 既存のネイティブプロジェクトをFlutterとして実行するためには 
 ネイティブのソースファイルをFlutterプロジェクト内に配置する必要がある 
 
 • Flutterプロジェクトはルートディレクトリにios/とandroid/があり 
 ここにiOSのソースファイルとAndroidのソースファイルを配置する 
 ① Flutterプロジェクト内にネイティブのソースファイルを配置
 37
 じゃらんnet Androidプロジェクトのファイル群を配置 
 じゃらんnet iOSプロジェクトのファイル群を配置 
 ※ ファイル配置の手順についてはAppendixに記載
38. • Flutterはいくつかのファイルや設定の命名を 
 特定の名前であることを前提にしている(主にiOS側) 
 
 • ios/配下のiOSプロジェクト名: 「Runner」 
 • BuildConfiguration名: 「{FlutterのBuildMode}-{Flavor名}」 
 
 ※ 命名の詳細についてはAppendixに記載 
 
 ② ファイルや設定の命名をFlutterが前提とする命名にする
 38

39. • app typeのFlutterプロジェクトの以下の部分を確認し必要な処理を呼び出す 
 ◦ iOS: Podfile、プロジェクトファイルのBuild Phase 
 
 
 
 
 
 ◦ Android: build.gradle、settings.gradle 
 
 
 
 ※ こちらの手順についてもAppendixの方に記載 
 ③ Flutterが保持するビルド用の処理を正しい順番で呼び出す
 39
 例)
 例)

40. 40
 STEP3
 プロジェクト構成変更後の
 段階的なリプレイス

41. • Flutterプロジェクトで包んだネイティブのコード を画面単位で除去していき、
 Dartで実装し直すことでFlutterに 
 置き換えていく
 
 • Add-to-appの状態から構成変更を 
 行なったことで任意の箇所をFlutterに 
 置き換えやすくなった
 
 • 最終的にはじゃらんnetアプリ全体のFlutter化 を目指していく
 プロジェクト構成変更後の段階的なリプレイス
 41
 ネイティブ
 Flutter Flutter Flutter Flutter

42. 1. じゃらんnetのご紹介
 
 2. じゃらんnetアプリをFlutterリプレイスしている背景
 
 3. じゃらんnet Flutterリプレイスの道のり
 a. Add-to-appを使用したFlutterの部分的導入
 b. じゃらん全体のFlutter化を見据えた構成変更
 c. ネイティブコードの段階的なFlutterへの置き換え
 
 4. これまでの道のりの振り返り
 説明の流れ
 42

43. • 当初の懸念
 ◦ Flutter自体の有効性
 ◦ ビジネスサイドからの懐疑的な目線 
 
 • 段階的にリプレイスを実施したことで少しずつ試しながら推進 
 ◦ リスクを抑えながらリプレイスを推進することができている 
 
 • リプレイスの過程でFlutterの生産性寄与を実績として作ることができた 
 ◦ 開発外への決裁でも信頼性のある提案をしつつ 
 更なるFlutter展開の合意を得ることができている 
 
 段階的なFlutterリプレイスの実施による懸念解消
 43
 Flutterいいね！
44. • 当初の懸念
 ◦ Flutter自体の有効性が不明瞭な状態で 
 以下を実施するのはリスクが大きい 
 ▪ ネイティブの開発チームの案件を停止
 ▪ 大規模なFlutterの開発体制の構築
 
 
 • Flutterチームが特定の画面をリプレイスしている間 
 ネイティブチームで他画面の案件開発を並行 
 ◦ →案件開発の停止が不要
 
 • 最初は小規模な開発体制でリプレイスを開始し 
 必要に応じて体制を拡大する
 
 段階的なFlutterリプレイスの実施による懸念解消
 44
 iOS 開発チーム Android 開発チーム Flutter 開発チーム じゃらんnetアプリ 開発チーム 案件の停止
 大規模な
 開発体制の構築
 画面 A 画面 B Flutter開発Tで
 リプレイス
 iOS/Android開発T
 で案件の開発
 並行

45. 画面A あまり 改修 されない 画面B 頻繁に 改修 される 画面C あまり 改修 されない • アプリ内の頻繁に改修する画面を優先的にFlutter化することで、 
 小さい工数で早期にFlutterのメリットを享受できる 
 段階的リプレイスの副次的メリット: 効果が大きいところから優先的
 にFlutter化できる
 45
 後回し
 後回し
 先にFlutter化
 早期にFlutterのメリットを享受できる

46. 段階的リプレイスの副次的メリット: 既存のネイティブロジックを
 適宜使用できる
 • MethodChannel
 ◦ Dartとネイティブコードを
 連携できる機能
 
 • MethodChannelを使用することで 
 Dartで実装し直さなくても、構築済みの 
 ネイティブの処理を呼び出すことができる 
 
 • じゃらん遊び・体験をAdd-to-appで 
 Flutter化した際、認証のロジックを 
 Dartで作り直す工数が大きかったため、 
 構築済みのネイティブ認証ロジックを使用 
 
 46

47. • 既存iOS/Androidプロジェクトは
 Flutterで連携されることを前提としていない 
 
 • リプレイスする際にネイティブとの連携箇所でiOS/Androidの形式が異なって 
 いて、その違いを吸収するために設計が難化するケースがある 
 
 • 例) 画面遷移引数
 画面遷移引数の形式が 
 iOS/Androidで異なる 
 • どの様な構造で渡す？ 
 • Flutter内では
 どう管理する？
 段階的なFlutterリプレイスの悩みポイント: 設計の難化
 47
 Flutter 画面A iOS 画面B And roid 画面B {
 key1: String
 key2: int
 }
 {
 key1:int
 key3: Map
 }

48. 段階的なFlutterリプレイスの悩みポイント: 総工数の増加
 • フルリプレイスする場合は全てのコードをFlutterで実装することが可能 
 
 • 一方で段階的にリプレイスする場合は 
 ネイティブと連携するためのコードを追加で実装していく必要がある 
 
 • ネイティブとの連携実装分で総工数が増えてしまう 
 
 
 48

49. 段階的にFlutterリプレイス
 する場合のススメ
 49

50. • 我々がAdd-to-appによる部分的導入を実施した背景 
 ◦ 小さいコストでFlutter自体の有効性検証と
 実績作りをしたかったため
 
 • このフェーズの必要性はチーム状況によって変わるが 
 飛ばせるなら飛ばした方が良いと今は考えている 
 ◦ 現在はFlutter自体の品質は一定信頼できるはず 
 ◦ Add-to-app固有のバグにはまったり、運用を検討 
 したりするコストは多少なりともかかる 
 
 • 小さく始めて実績を積みたい場合は採用するのも一つの選択肢 
 
 
 Add-to-appを使用したFlutterの有効性検証について
 50
 Flutter Add-to-app ネイティブ
 STEP1

51. • ネイティブプロジェクトを一つのFlutterプロジェクト 
 に構成変更する方法は、徐々にネイティブコードを 
 Flutterコードに置き換えていきやすくおすすめ 
 
 
 
 
 ネイティブプロジェクトを一つのFlutterプロジェクトにする
 51
 STEP2
 ネイティブ
 Flutter
 Flutter
52. まとめ
 52

53. • 話したこと
 ◦ じゃらんnetアプリFlutterリプレイスの道のり
 i. Add-to-appを使用したFlutterの部分的導入 
 ii. じゃらん全体のFlutter化を見据えた構成変更 
 iii. ネイティブコードの段階的なFlutterへの置き換え 
 
 ◦ 段階的リプレイスのメリット/デメリットと、 
 段階的にリプレイスする場合今ならどの様な方針を採るかについて 
 
 • リプレイスする場合どの様な方針を採るかは 
 プロダクト/チーム状況に合わせて検討する必要がある 
 まとめ
 53

54. じゃらんnetでは
 ネイティブアプリエンジニア、Flutterエンジニア等
 様々な職種で一緒に働く仲間を募集しています。
 • 大規模なアプリが抱える課題解決に取り組みたい
 • Flutterの開発に携わりたい
 上記に興味がある方はぜひご応募ください！
 
 採用サイト(テクノロジー職): https://recruit-saiyo.jp/technology/ Tech Blog: https://engineers.recruit-jinji.jp/
 We’re Hiring!!!
 54

55. Appendix
 55

56. ネイティブプロジェクトを1つのFlutterプロジェクトにする手順
 1. Flutterプロジェクト内に既存プロジェクトのファイル群を配置 
 
 2. 既存プロジェクトのファイル群を使用して 
 Flutterプロジェクトとして実行できるようにする(iOSのみ) 
 
 3. Flutterの画面を表示する
 
 
 ※ Plugin使用時は追加手順が発生するためPlugin使用前提で説明 
 56

57. STEP2: 手順
 1. Flutterプロジェクト内に既存プロジェクトのファイル群を配置 
 
 2. 既存プロジェクトのファイル群を使用して 
 Flutterプロジェクトとして実行できるようにする(iOSのみ) 
 
 3. Flutterの画面を表示する
 57

58. Flutterプロジェクトの構造
 • Flutterプロジェクトはルートディレクトリにandroid/とios/があり 
 それぞれAndroidプロジェクトとiOSプロジェクトが格納されている 
 58
 Android
 プロジェクト
 iOS
 プロジェクト

59. • Flutterプロジェクトはルートディレクトリにandroid/とios/があり 
 それぞれAndroidプロジェクトとiOSプロジェクトが格納されている 
 ここにネイティブの
 ファイルを配置することで Flutterからネイティブのソー スコードを使用できる
 Flutterプロジェクトの構造
 59
 Android
 プロジェクト
 iOS
 プロジェクト

60. Flutterプロジェクトの構造
 • android/とios/に格納されているプロジェクトと
 既存のAndroid/iOSプロジェクトをマージ(既存のファイル群を配置)する
 ことで既存のネイティブプロジェクトをFlutterとして実行できるようにする
 60
 Android
 プロジェクト
 iOS
 プロジェクト
 iOS プロジェクト Android プロジェクト マージ マージ
61. 新規のFlutterプロジェクトを作成
 • 新規のFlutterプロジェクトを作成しリポジトリ管理しておく 
 61
 新規のFlutterリポジトリ
 既存のiOSリポジトリ
 既存のAndroidリポジトリ

62. マージ準備
 • 既存のiOSとAndroidネイティブプロジェクトで必要なファイル群を 
 それぞれios/とandroid/に移動しておく 
 62
 既存のiOSプロジェクト 
 (SampleiOS)
 既存のAndroidプロジェクト 
 (SampleAndroid)

63. 新規のFlutterプロジェクトとマージする
 • 既存のiOS/Androidプロジェクトのリポジトリのoriginを変更し、 
 新規のFlutterプロジェクトのブランチとマージする 
 ◦ iOS(SampleiOS)/Android(SampleAndroid)それぞれで行う 
 
 
 
 
 
 
 • なお履歴が連続していないブランチ間のマージとなるため 
 --allow-unrelated-historiesオプションの指定が必要 
 63

64. マージ後の状態
 • 新規のFlutterプロジェクトのandroid/とios/にそれぞれ 
 既存のiOSとAndroidネイティブプロジェクトのファイル群が格納 
 されている状態になる
 64
 既存のAndroidプロジェクトのファイル群 
 既存のiOSプロジェクトのファイル群 

65. STEP2: 手順
 1. Flutterプロジェクト内に既存プロジェクトのファイル群を配置 
 
 2. 既存プロジェクトのファイル群を使用して 
 Flutterプロジェクトとして実行できるようにする(iOSのみ) 
 
 3. Flutterの画面を表示する
 65

66. iOSプロジェクト名のrename
 • ios/配下のiOSプロジェクトはRunnerの命名であることが前提とされている
 • Flutterプロジェクト(sample_flutter)にマージした
 既存iOSプロジェクト(SampleiOS)を「Runner」にrenameする
 
 
 66
 ①初期生成されるRunnerのプロジェクトファイルは削除
 ②SampleiOSをRunnerにrename
 ③Rename project content itemsのチェックは外す

67. iOSプロジェクトのScheme名のrename
 • flutterコマンドから--flavorオプションを付けずに実行する場合 
 Scheme名がRunnerであることが前提とされている 
 
 • ManageSchemeからScheme名をRunnerに変更する 
 67

68. Run Scriptの追加
 
 • ↓の2つのRun ScriptをBuild Phaseに追加する 
 ◦ 「Run Script - xcode_backend.sh build」はCompile Sourcesの前
 ◦ 「Run Script - xcode_backend.sh embed_and_thin」はCompile Sourcesの後
 68

69. Run Scriptの追加
 
 • xcode_backend.sh
 ◦ Flutter SDK内に格納されているFlutterのiOS組み込みのためのスクリプト 
 • buildとembed_and_thinを呼び出す 
 69

70. xcode_backend.sh実行のための環境変数取得
 • xcode_backend.shはFlutter SDK内に格納されているため実行する 
 際はローカル環境のFlutter SDKのPath($FLUTTER_ROOT)が必要 
 
 
 
 • このPathはFlutterが自動生成するGenerated.xcconfigから取得可能 
 
 70

71. • Generated.xcconfigはios/Flutter配下に格納されている 
 
 
 
 
 • プロジェクトに追加し、xcconfigでincludeすることでGenerated.xcconfigの環境変数を利用 可能
 xcode_backend.sh実行のための環境変数取得
 71

72. STEP2: 手順
 1. Flutterプロジェクト内に既存プロジェクトのファイル群を配置 
 
 2. 既存プロジェクトのファイル群を使用して 
 Flutterプロジェクトとして実行できるようにする(iOSのみ) 
 
 3. Flutterの画面を表示する
 72

73. Flutterの画面を表示するために重要なクラス
 73
 FlutterEngine FlutterViewController FlutterActivity FlutterView
74. • iOS: FlutterViewController
 Android: FlutterActivity
 に遷移することでFlutterの画面を表示 
 Flutterの画面を表示するために重要なクラス
 74
 FlutterEngine FlutterViewController FlutterActivity FlutterView Flutter
 View
 Controller
 
 Flutter
 Activity
 View
 Controller
 
 Activity
 
 画面遷移

75. • FlutterViewControllerとFlutterActivity 
 に乗っているView
 • FlutterアプリケーションのUIが描画される 
 Flutterの画面を表示するために重要なクラス
 75
 FlutterEngine FlutterViewController FlutterActivity FlutterView FlutterViewController
 FlutterActivity
 FlutterView

76. • Dartコードを実行してFlutterViewに 
 FlutterアプリケーションのUIを描画する 
 Flutterの画面を表示するために重要なクラス
 76
 FlutterEngine FlutterViewController FlutterActivity FlutterView FlutterViewController
 FlutterActivity
 FlutterView
 FlutterEngine

77. • FlutterViewへの描画を行うFlutterEngineを
 初期化→FlutterViewController/FlutterActivity
 に遷移する
 Flutterの画面を表示するために重要なクラス
 77
 FlutterEngine FlutterViewController FlutterActivity FlutterView FlutterViewController
 FlutterActivity
 FlutterView
 FlutterEngine

78. iOS: FlutterEngineの初期化
 78
 • AppDelegateでFlutterEngineを保持 
 • FlutterEngine.runを呼び出しdartのmain関数を実行する 

79. iOS: FlutterEngineの初期化
 79
 • Pluginとの接続処理を呼び出す
 • ※ ios/Runner/配下に存在するFlutterPluginRegisrant.h/mを 
 予めプロジェクトに追加しておく
 

80. iOS: Flutter画面の表示
 80
 • AppDelegateでキャッシュしておいたFlutterEngineを取得 
 • 取得したFlutterEngineを使用して 
 FlutterViewControllerをインスタンス化&画面遷移 

81. STEP2(iOS): Flutter画面の表示
 
 81
 画面遷移

82. STEP2(Android): FlutterEngineの初期化
 82
 • ApplicationクラスでFlutterEngineを初期化する 

83. STEP2(Android): FlutterEngineの初期化
 83
 • 実行したFlutterEngineをキャッシュする 

84. Android: FlutterActivity遷移処理
 84
 • キャッシュしたFlutterEngineを使用してFlutterActivityを 
 インスタンス化しstartActivityに渡す 

85. STEP2(Android): Flutter画面の表示
 85
 画面遷移