Fultterによるクロスプラットフォーム開発_bravia_connect

Transcript

1. Sony | BRAVIA Connect Flutter によるクロスプラットフォーム開発 ソニー株式会社 Copyright 2024 Sony Corporation
2. 2 自己紹介 ⚫ 氏名：田中輝行 ⚫ 所属：ソニー株式会社 ソフトウェアエンジニア ⚫ 経歴：SI企業で組込機器のソフトウェア設計・開発を経験。ソニー への転職後はテレビアプリの開発を担当。 ⚫ 現在：テレビ・オーディオ機器向けアプリ、Sony | BRAVIA Connect の開発に従事
3. 3 目次 ⚫ Sony | BRAVIA Connectの概要 ⚫ プロジェクトの背景 ⚫ アプリケーションアーキテクチャと開発プロセス ⚫ Flutter 採用のメリット ⚫ 課題と対応
4. 4 Sony | BRAVIA Connect とは 機器操作 マニュアルフリー セットアップ テクニカル サポート https://electronics.sony.com/bravia-connect-app 4.2 /5.0 4.4 /5.0 ※ 数字は WW でのレーティング値です ソニー製ホームシアター機器 (BRAVIAシステム) を かんたんに使えるスマホアプリ
5. 5 リリース 2023.3 2023.7 2024.4 2024.5 HT-A2000 HT-AX7 BRAVIA Theatre Quad BRAVIA Theatre 8/9 機器操作 機器セットアップ 対応機器や機能を追加していきながら、BRAVIA Connect の基本コンセプトのベースが完成 BRAVIA 7/8/9, A95L Series Home Entertainment Connect Ver1.0 Home Entertainment Connect Ver1.1 BRAVIA Connect Ver2.0 BRAVIA Connect Ver3.0 アプリ名称変更 初期リリース
6. 6 Flutter採用の経緯 ⚫ Sony | Headphones Connect などの既存アプリはiOS/Androidのネイ ティブ開発だった ⚫ Sony | BRAVIA Connect の立ち上げには以下の課題があった – 対応製品のリリースに合わせて初版リリースを死守する必要があった – OS固有のパラメータを調整するなどでPlatform APIを直接呼ばないといけないケースがある – 既存のアプリで数年かけて対応した基本機能(※)を初版からリリースから対応する必要があった (※) EULA/Privacy Policy、FW Update、Push/アンケート、アプリログ、機器通信プロトコル、など クロスプラットフォーム開発技術を採用し、新規アプリの迅速かつ効率的な 開発を実現する必要があった ⚫ UIデザインはiOS/Androidで共通にする方針に決まった ⚫ React Native/Xamarinなどと比較しFlutterを採用することに
7. 7 アプリアーキテクチャ ⚫ Android アプリアーキテクチャガイドで推奨されている layered architectureをFlutter向けにして利用 ⚫ 既存アプリで開発された基本機能は Platform側でライブラリとして取り込み、 Platform ChannelでFlutterからも利用可能に ⚫ Flutter <-> Platformはpigeonを使用して 型安全に相互通信 ⚫ 状態管理・DI には Riverpod を採用 https://developer.android.com/topic/architectureS
8. 8 アプリアーキテクチャ UI Layer (Flutter) State holders (ViewModel) Domain Layer (UseCase) Repositories Data Sources • Flutter Framework API • OSS Platform I/F Adapter (Flutter) Pigeon auto-gen API Pigeon auto-gen API UI Layer アプリ固有コード Eula/Privacy Policy Auth Help Bluetooth LE FW Update アプリ固有コード Eula/Privacy Policy Auth Help Bluetooth LE FW Update iOS Native Android Native Platform I/F Adapter Platform I/F Adapter UI Layer App Context App Context Pigeon auto-gen API J2ObjC J2ObjC変換による共通コード Platform Channel Flutterによる共通コード Platform 固有コード 既存アプリのコードをライブラリ化して追加 Platform API Platform API
9. 9 Flutter側 ⚫ Android アプリアーキテクチャガイ ドで推奨されている layered architectureに従った構成 ⚫ 1つの画面に対し1つのViewModelク ラスを用意し、画面の状態を保持 ⚫ Domain/Repository/Data Sourceへの アクセスはProvider経由にし、テス ト時に置換可能にする UI Layer Data Sources StateNotifierProvider AsyncNotifierProvider Provider Provider Provider State holders (ViewModel) Domain Layer (UseCase) Repositories watch read read read Future<Result<E>> Future<void> Future<Result<E>>
10. 10 コード種別の割合 ⚫ Flutter/DartによるOS間共通コード は61% ⚫ OS Nativeコードは J2ObjCを使った コード共通化が行われているため、 実際には共通コードの割合はもっと 高いと考えられる
11. 11 リポジトリ構成 ⚫ Melosを用いたモノレポ構成 – 現在はツール類を分割しているのみ – 将来的にはアプリ本体コードを モジュール分割していきたい ⚫ 環境変数はjsonファイルで定義し、 “--dart-define-from-file”を利用
12. 12 CI ⚫ CIにはGitHub Actionsの self-hosted runnerを利用 ⚫ CI専用のMac Mini複数台で構成 ⚫ GitHubのPull Request作成・更新時 の静的解析・自動テスト・ iOS/Androidのビルド確認を実行、 PRのマージ必須条件としている
13. 13 自動テスト ⚫ StateProvider/Repository層で複雑な 部分を優先的に一部のUnit Testを作 成 ⚫ UI部分は共通カスタムWidgetを中心 にGolden Testを作成し、UIのリグ レッションテストを実施 – 端末解像度 – Android/iOS – Theme の組み合わせでGolden(スクリーンショッ ト)を保存 GoldenTest/Android/Light Theme GoldenTest/iOS/Light Theme
14. 14 結合テスト ⚫ 機器との結合テストの課題 – テストを実施するには対抗機が必要 – イヤホン・ヘッドフォンと異なり、本アプリの対象機器はサイズが大きく、 個人で複数機器を保持するのは難しい – また、リモートワークで自宅に機器を持ち帰るのも困難 ⚫ 対策 – Android端末上で動作する機器シミュレーターをAndroidアプリとして実装 – サポート対象機器のソフトウェアが完成する前にテスト可能に – シミュレーターアプリ自体もFlutterで作成することで、追加学習なしにア プリ開発チーム自身で開発・運用可能
15. 15 Flutter 採用によるメリット ⚫ UI開発の効率化 – ホットリロードによる効率的なUI実装 – UI関連の共通コード部分の不具合はそれほど多くない印象 • Impeller(※) 対応を試した時に一部のFlutterのView部分で不具合があったが、それ以外 ではPlatform固有の不具合はほとんどなかった (※) Flutter3.10からのiOSのデフォルトレンダリングエンジン。従来のskiaよりも高速で効率的と言われている。 – Flutter webの活用による デザイン確認・調整プロセスの簡略化 • Flutter webでのWidgetBookの配信で、 画面やカスタム部品のデザインやUX確認を可能に
16. 16 Flutter 採用によるメリット ⚫ デバッグツールも共通化 – Flutter DevToolsは十分な機能を有しているため、Platformごとのデバッグ ツールに精通していなくても問題ない • UI Layout検証 • Perfomance問題検出 • CPU/Network Profile • A11y 解析…
17. 17 Flutter 採用によるメリット ⚫ 既存資産の活用 – Native実装も自然にFlutterアプリに統合することができるため、 既存の資産の流用も問題なく可能 ⚫ その他 – Android端末のみで開発が可能 • iOSでのデバイス登録は1企業で100台までの制限があるが、 Flutter部分はAndroid端末での開発で多くのケースは問題ない – 機能開発が自然とiOS/Android両対応になる • OS毎に実装することが少ないため、どちらかのOSでの実装忘れなどが発生しにくい
18. 18 課題 ⚫ Flutter(Dart)/Android/iOSの人材の確保 – 既存資産を流用する方針になったため、少なからずNative側を触らざるを 得ないことがある – Flutter/Android/iOSを全て一定のレベルでこなせる技術者の確保は困難 ⚫ Flutter(Dart)の学習コスト – 新規に参画するメンバーはAndroidまたはiOSのネイティブ開発者が多い • まだまだFlutter経験者は簡単には確保できない – Jetpack Compose/Swift UIの経験者も少ないため宣言的UIにも慣れていない – 非同期処理のPlatformごとの違いに苦戦することも多い
19. 19 まとめ ⚫ Sony | BRAVIA Connect で Flutter によるクロスプラットフォーム開 発の事例を紹介した ⚫ Flutter の導入による新規部分の効率的な開発と、既存資産の流用と Flutterとの統合によって、当初の目標であるリリースと基本機能の 実現を達成した
20. SONY is a registered trademark of Sony Group Corporation. Names of Sony products and services are the registered trademarks and/or trademarks of Sony Group Corporation or its Group companies. Other company names and product names are registered trademarks and/or trademarks of the respective companies.