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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 

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

ネイティブ  Flutter  Flutter Flutter Flutter • 画面単位でネイティブのソースを徐々にFlutterに置き換えていく   STEP1 

ネイティブ  Flutter  Flutter Flutter Flutter • これらの段階を経て最終的にはじゃらんnetアプリのフルFlutter化を目指す   STEP1 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ  52 

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

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

Appendix  55 

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

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

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

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

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

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

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

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

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

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

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

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 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

じゃらんnetアプリ Flutterリプレイスの道のり/クロスプラットフォーム開発2022 -...

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

More Decks by Recruit

Other Decks in Technology

Featured

Transcript