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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

段階的なFlutterリプレイスの戦略  15 

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

● Flutter自体の有効性の検証ができた     ● またビジネスサイドからの懐疑的な目線に対してもファクトとして   Flutterの開発生産性寄与を示すことができた     ● じゃらんnetアプリ全体にFlutterを展開していく   ○ 前準備としてプロジェクトの構成変更を実施   Add-to-appを使用したFlutterの一部導入によって  32  Flutterいいね！

Slide 33

Slide 33 text

● 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として  用意する必要がある 

Slide 34

Slide 34 text

● 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プロジェクトへ  

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

● 既存のネイティブプロジェクトをFlutterとして実行するためには   ネイティブのソースファイルをFlutterプロジェクト内に配置する必要がある     ● Flutterプロジェクトはルートディレクトリにios/とandroid/があり   ここにiOSのソースファイルとAndroidのソースファイルを配置する   ① Flutterプロジェクト内にネイティブのソースファイルを配置  37  じゃらんnet Androidプロジェクトのファイル群を配置   じゃらんnet iOSプロジェクトのファイル群を配置   ※ ファイル配置の手順についてはAppendixに記載

Slide 38

Slide 38 text

● Flutterはいくつかのファイルや設定の命名を   特定の名前であることを前提にしている(主にiOS側)     ● ios/配下のiOSプロジェクト名: 「Runner」   ● BuildConfiguration名: 「{FlutterのBuildMode}-{Flavor名}」     ※ 命名の詳細についてはAppendixに記載     ② ファイルや設定の命名をFlutterが前提とする命名にする  38 

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

● 当初の懸念  ○ Flutter自体の有効性  ○ ビジネスサイドからの懐疑的な目線     ● 段階的にリプレイスを実施したことで少しずつ試しながら推進   ○ リスクを抑えながらリプレイスを推進することができている     ● リプレイスの過程でFlutterの生産性寄与を実績として作ることができた   ○ 開発外への決裁でも信頼性のある提案をしつつ   更なるFlutter展開の合意を得ることができている     段階的なFlutterリプレイスの実施による懸念解消  43  Flutterいいね！

Slide 44

Slide 44 text

● 当初の懸念  ○ Flutter自体の有効性が不明瞭な状態で   以下を実施するのはリスクが大きい   ■ ネイティブの開発チームの案件を停止  ■ 大規模なFlutterの開発体制の構築      ● Flutterチームが特定の画面をリプレイスしている間   ネイティブチームで他画面の案件開発を並行   ○ →案件開発の停止が不要    ● 最初は小規模な開発体制でリプレイスを開始し   必要に応じて体制を拡大する    段階的なFlutterリプレイスの実施による懸念解消  44  iOS 開発チーム Android 開発チーム Flutter 開発チームじゃらんnetアプリ開発チーム案件の停止  大規模な  開発体制の構築  画面 A 画面 B Flutter開発Tで  リプレイス  iOS/Android開発T  で案件の開発  並行 

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

● 既存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  } 

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

まとめ  52 

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Appendix  55 

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Flutterプロジェクトの構造  ● android/とios/に格納されているプロジェクトと  既存のAndroid/iOSプロジェクトをマージ(既存のファイル群を配置)する  ことで既存のネイティブプロジェクトをFlutterとして実行できるようにする  60  Android  プロジェクト  iOS  プロジェクト  iOS プロジェクト Android プロジェクトマージマージ

Slide 61

Slide 61 text

新規のFlutterプロジェクトを作成  ● 新規のFlutterプロジェクトを作成しリポジトリ管理しておく   61  新規のFlutterリポジトリ  既存のiOSリポジトリ  既存のAndroidリポジトリ 

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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 

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Flutterの画面を表示するために重要なクラス  73  FlutterEngine FlutterViewController FlutterActivity FlutterView

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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