Multiplatform Engineering Roadmap for the Future | ABEMA Developer Conference 2021

ABEMAはスマートフォンやPC、テレビデバイスなどの様々なプラットフォームで楽しむことができます。
その一方、拡大する対応プラットフォームに対しての開発リソースやプラットフォーム間の機能や仕様差異、品質のばらつきなど様々な課題を抱えています。
また、技術的なトレンドとしてKMM(Kotlin Multiplatform Mobile)やFlutter、React Nativeといったマルチプラットフォーム・クロスプラットフォーム技術が注目を浴びています。
それらの課題と技術的な時流から、ABEMAでもKMMを活用したソースコードの共通化に取り組んでいます。
このセッションでは、クライアントアプリケーション開発におけるマルチプラットフォームエンジニアリングの戦略をはじめ、モバイルアプリケーションにKMMを導入した背景や選定理由、具体的な取り組み、そして今後の展望についてご紹介します。

Transcript

1. AbemaTV, Inc. All Rights Reserved
 1
2. AbemaTV, Inc. All Rights Reserved
 鈴木 大貴 Native Team所属。 ABEMAのモバイルアプリ開発及び マルチプラットフォームによる開発に従事。 2 波戸 勇二 國師 誠也 自己紹介 Native Team所属。 ABEMAモバイルアプリやテレビアプリ、 マルチプラットフォーム開発に従事。 Native Team所属。 Native Teamマネージャー兼クライアント戦略室 室長。
3. AbemaTV, Inc. All Rights Reserved
 鈴木 大貴 Native Team所属。 ABEMAのモバイルアプリ開発及び マルチプラットフォームによる開発に従事。 3 波戸 勇二 國師 誠也 自己紹介 Native Team所属。 ABEMAモバイルアプリやテレビアプリ、 マルチプラットフォーム開発に従事。 Native Team所属。 Native Teamマネージャー兼クライアント戦略室 室長。
4. AbemaTV, Inc. All Rights Reserved
 4 1. 対応デバイスの拡大 2. MobileAppが抱えていた課題 3. リアーキテクチャ 4. KMMのアーキテクチャ 5. バージョン管理 INDEX 6.　既存アプリの移行 7.　MobileAppチームへの普及 8.　全体戦略
5. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 5
6. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 6 2016年4月11日に開局した当初は、対応デバイスとして iOS・Android (mobile) とブラウザ (pc / mobile) からスタート。 2016年4月 開局 iOS mobile Android mobile Web pc / mobile
7. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 7 2016年中には当時の主要なテレビデバイスのプラットフォームに順次対応。 2016年 2016/08 Apple TV Android TV Chrome cast 2016/11 2016/12 2016/10 Amazon Fire TV
8. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 8 2017年 ~ 2019年にAmazon Alexa、Daydream、Amazon Fire Tablet, IPTV, Clova Deskに対応 ※ IPTVはここではLinuxベースのIPTVをさしています 2017年 ~ 2019年 2017/11 Daydream Clova Desk IPTV 2018/03 2019/03 Amazon Alexa Amazon Fire Tablet 2018/11 2017/12 ※ Daydream, Clova Deskはサポート終了
9. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 9 2021年にはにはGoogle Nest HubとNintendo Switchに対応。 2021年 Game Console Google Nest Hub 2021/12 2021/06
10. AbemaTV, Inc. All Rights Reserved
 10 ※ Daydream, Clova Deskはサポート終了 対応デバイスの拡大 2016 iOS mobile Android mobile Web pc / mobile Chrome cast Apple TV Android TV IPTV Daydream Clova Desk Google Nest Hub Game Console 2017 2019 2018 2020 2021 Amazon Alexa Amazon Fire TV Amazon FIre Tablet 2022
11. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 11 • 対応デバイスが増えるのに比例して開発リソースが必要 • 優先度の高いデバイスに開発リソースが偏り、機能差がある • デバイス間で意図しない仕様・実装差異や品質のバラつきがある • レガシーなアプリケーションのメンテナンスコストが高くなる 課題
12. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 12 • デバイスの特性にあわせたユースケースのグルーピングをして対応デバイスの拡 大に正比例しない開発体制の構築 • 汎化可能な領域と特化する領域を定め、コードの共通化と再利用性の促進 アプローチ
13. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 13 デバイスのユースケースにあわせたグルーピング。 ユースケース Desktop Browser Mobile Browser Mobile App Smart Display/ Speaker TV
14. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 14 技術スタックは大きく分けて iOS, Android, Web, Unity。 技術スタック (プラットフォーム) Android Web Unity iOS ※ Amazon AlexaはAWS Lambdaですがここではスコープ外としています
15. AbemaTV, Inc. All Rights Reserved
 15 ※ Daydream, Clova Deskはサポート終了 対応デバイスの拡大 2016 iOS mobile Android mobile Web pc / mobile Chrome cast Apple TV Android TV IPTV Daydream Clova Desk Google Nest Hub Game Console 2017 2019 2018 2020 2021 Amazon Alexa Amazon Fire TV Amazon FIre Tablet 2022 再掲
16. AbemaTV, Inc. All Rights Reserved
 16 対応デバイスの拡大 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック
17. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 17 汎化と特化 Use Cases Entities UI Presentation DB 拡大する対応デバイスに対して、汎化できる部分 と特化するべき部分を検討。 サービスの強みとして UI/UX・快適な視聴体験の 追求をしていくために、プレゼンテーション層は各 デバイス・プラットフォームに最適化し特化してい く方針。 デバイス・プラットフォームに依存しないユース ケース、エンティティは汎化できる部分として共通 化を進める。 platform-specific APIs External Interfaces Gateways Presenters Controllers
18. AbemaTV, Inc. All Rights Reserved
 対応デバイスの拡大 18 汎化と特化 Use Cases Entities UI Presentation DB platform-specific APIs External Interfaces Gateways Presenters Controllers 特化 汎化 • 特化する部分 ◦ プレゼンテーション層 ◦ プラットフォーム固有のエンティティ・ユー スケース • 汎化する部分 ◦ 汎化された外部IF ◦ プラットフォームに依存しないエンティティ ・ユースケース
19. AbemaTV, Inc. All Rights Reserved
 • UIを含むコードの共通化 (独自UI) - Flutter, Unity, Xamarin Forms, Cobalt, ... • UIを含むコードの共通化 (ネイティブUI) - React Native, ... • UIを含むコードの共通化 (WebベースUI) - Cordova, Titanium Mobile, ... • ロジックのみの共通化 - Kotlin Multiplatform, Xamarin Native, ... 対応デバイスの拡大 19 マルチプラットフォーム・クロスプラットフォームツールの検討
20. AbemaTV, Inc. All Rights Reserved
 • プラットフォームに特化した最適なUI/UXの提供 • プラットフォームAPIへの追従性 • 開発コミュニティの将来性 • 快適な開発体験 対応デバイスの拡大 20 マルチプラットフォーム・クロスプラットフォームツールの検討
21. AbemaTV, Inc. All Rights Reserved
 UIを含むコードの共通化は各プラットフォームに最適なUI/UXの提供が難しい部分 が大きく、モバイルだけでなくクライアントアプリケーション全体のスコープで考え、 ABEMAのUI/UXの要求を満たすことができないと判断。 開発やコミュニティ状況、将来性とDeveloper Experienceを鑑みて現時点でビジ ネスロジックの共通化を目的としてKotlin Multiplatformを採用。 ※ UnityによるUIを含めた共通化も検証中 対応デバイスの拡大 21 マルチプラットフォーム・クロスプラットフォームツールの検討
22. AbemaTV, Inc. All Rights Reserved
 Web Native Cross Device Smart Display/ Speaker 22 対応デバイスの拡大 Desktop Browser Mobile Browser Mobile App TV iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web 開発体制
23. AbemaTV, Inc. All Rights Reserved
 Web Native Cross Device Smart Display/ Speaker 23 対応デバイスの拡大 Desktop Browser Mobile Browser Mobile App TV iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web 開発体制
24. AbemaTV, Inc. All Rights Reserved
 鈴木 大貴 Native Team所属。 ABEMAのモバイルアプリ開発及び マルチプラットフォームによる開発に従事。 24 波戸 勇二 國師 誠也 自己紹介 Native Team所属。 ABEMAモバイルアプリやテレビアプリ、 マルチプラットフォーム開発に従事。 Native Team所属。 Native Teamマネージャー兼クライアント戦略室 室長。
25. AbemaTV, Inc. All Rights Reserved
 Mobile Appが抱えていた課題 25
26. AbemaTV, Inc. All Rights Reserved
 Mobile Appが抱えていた課題 26 • 設計によってコンポーネント間の疎結合が担保されていない • テスタビリティ・メンテナビリティの低さ • AndroidとiOSの仕様・実装差異の拡大 • UI開発の安全性と生産性の低下
27. AbemaTV, Inc. All Rights Reserved
 Mobile Appが抱えていた課題 27 リアーキテクチャ • 設計によってコンポーネント間の疎結合が担保されていない • テスタビリティ・メンテナビリティの低さ • AndroidとiOSの仕様・実装差異の拡大 • UI開発の安全性と生産性の低下
28. AbemaTV, Inc. All Rights Reserved
 Mobile Appが抱えていた課題 28 リアーキテクチャ ＋ KMM • 設計によってコンポーネント間の疎結合が担保されていない • テスタビリティ・メンテナビリティの低さ • AndroidとiOSの仕様・実装差異の拡大 • UI開発の安全性と生産性の低下
29. AbemaTV, Inc. All Rights Reserved
 • 設計によってコンポーネント間の疎結合が担保されていない • テスタビリティ・メンテナビリティの低さ • AndroidとiOSの仕様・実装差異の拡大 • UI開発の安全性と生産性の低下 Mobile Appが抱えていた課題 29 リアーキテクチャ ＋ VRT (Visual Regression Test)
30. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 30
31. AbemaTV, Inc. All Rights Reserved
 • ロジックの置き場所が設計によって担保されない ◦ プラットフォーム間共通のビジネスロジックの分離が困 難 ◦ テスタビリティ・メンテナビリティの低いコードの増加 ◦ 密結合なコンポーネントによってビルド時間の増加、個 別のビルドが困難 課題 リアーキテクチャ 31 Meta Platforms(旧Facebook)社が提唱したクライアントウェ ブアプリケーションのアーキテクチャ。 ABEMA開局当初(2016年)から採用。 Flux https://facebook.github.io/flux/docs/in-depth-overview
32. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 32 Clean Architectureをベースに、責務によってレイヤーを分割 。 関心を分離し、各レイヤーの将来的な変更を容易にしている。 https://blog.cleancoder.com/uncle-bob/2012/08/13/ the-clean-architecture.html 新しいアーキテクチャ UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer
33. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 33 プラットフォーム(OSやデバイス)やアプリケーションを問わず、サー ビスで共通するドメインモデルとビジネスロジックを実装する。 ・アプリケーション層やデータ層から使用されるデータモデル ・ドメインモデルに属する不変なビジネスロジック ・アプリケーションに依存しないビジネスロジック DO DON'T ・アプリケーション固有のビジネスロジック ・UIやDB、APIに依存するロジック UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer ドメイン層
34. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 34 アプリケーション固有のロジックを実装する。 ユーザーがアプリケーションを操作して結果を得るまでの一連を 1つ のユースケースとする。 ・アプリケーション固有のビジネスロジック ・ユースケースは原則ステートレス ・複数のユースケースで共通するロジックはServiceとして切り出す DO DON'T ・表示と密に関わるもの(文字列や画像リソース) ・ユースケースから他のユースケースの呼び出し UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer アプリケーション層
35. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 35 UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer データソースおよび、それを隠蔽するリポジトリを実装する。 外部のアプリケーションやシステムとの境界。 ・APIとの通信やストレージに対するデータの読み書き ・DBやメモリにキャッシュするデータの管理 DO DON'T ・ドメインロジックやアプリケーションロジック ・リポジトリから他のリポジトリの呼び出し データ層
36. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 36 UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer UIコンポーネントやOSから通知されるイベントをハンドリングして、ユー スケースを実行する。 ユースケースの結果をUIコンポーネントへ反映する。 ・UIコンポーネントやOSからのイベントとユースケースの紐付け ・UI表示 DO DON'T ・ビジネスロジック UI層
37. AbemaTV, Inc. All Rights Reserved
 リアーキテクチャ 37 もっと詳しい話 https://developers.cyberagent.co.jp/blog/archives/29967/
38. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 38
39. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 39 UI UI Logic UseCase DB API Domain Repository Domain Layer Application Layer UI Layer Data Layer 責務によってレイヤーを分割 → 共通のロジックやモデルをまとめることが可能に。 UI層を除いた、ドメイン層・アプリケーション層・データ層をKMMによっ て共通化。 共通化が難しいところは、インタフェースをKMMから提供し、各プラット フォームで実装。 既存の資産を最大限活用しつつ、KMMフレームワークに依存しすぎな いよう、expect/actualはなるべく使わない方針。 どこを共通化するか
40. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 40 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
41. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 41 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
42. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 42 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module 各プラットフォームと KMMのソースコードは別の Gitリポジトリで管理。 → バージョン管理の煩雑さから、 将来的にはモノレポ を目指す。
43. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 43 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
44. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 44 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module 各機能ごとにUseCaseを作成。 アプリケーション全体で使用する UseCaseはServiceとして定義。 ServiceはさまざまなUseCaseから呼ばれ得る。
45. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 45 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
46. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 46 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module DomainがRepositoryやAPIに関心を持たないようにしつつ、 UseCaseやServiceからRepositoryやAPIを呼び出せるよう、 interfaceをDomain moduleに定義。
47. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 47 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
48. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 48 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module バージョン管理のために、 API ClientをラップするAPI Serviceを定義。 API Clientはprotocol bufferを返し、API ServiceでDomainに変換。
49. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 49 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module
50. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャ 50 UseCase Adapter Interface Repository UseCase module Repository module Android/iOS Application KMM Application Service Service module Domain Domain module API Client API Client module Proto Proto module Repository Interface API Service Interface SDK Adapter Feature UILogic UI API Service API Service module KMMのライブラリがないSDKなどは、 RepositoryにAdapterを定義し、各アプリケーションで実装。 ログ、パフォーマンス計測機構や KMMへの移行に時間がかかる大きな Repositoryなど。
51. AbemaTV, Inc. All Rights Reserved
 鈴木 大貴 Native Team所属。 ABEMAのモバイルアプリ開発及び マルチプラットフォームによる開発に従事。 51 波戸 勇二 國師 誠也 自己紹介 Native Team所属。 ABEMAモバイルアプリやテレビアプリ、 マルチプラットフォーム開発に従事。 Native Team所属。 Native Teamマネージャー兼クライアント戦略室 室長。
52. AbemaTV, Inc. All Rights Reserved
 バージョン管理 52
53. AbemaTV, Inc. All Rights Reserved
 53 バージョン管理 現状のリポジトリ構成 AndroidとiOSのプロジェクトを別リポジトリで管理しているため、 KMMのリポジトリも別で管理している abema-ios abema-android abema-native
54. AbemaTV, Inc. All Rights Reserved
 54 バージョン管理 現状のリポジトリ構成 KMMのリポジトリでは APIモジュールとiOS向けに各モジュールをまとめるモジュールを管理している abema-ios abema-android abema-native ios-mpp-2 ios-mpp-1 api-client-3 api-client-2 api-client-1
55. AbemaTV, Inc. All Rights Reserved
 ios-mpp-2 ios-mpp-1 api-client-3 api-client-2 api-client-1 55 バージョン管理 現状のリポジトリ構成 iOS向けに各モジュールをまとめたモジュールから Frameworkを生成し、成果物をダウンロードして Xcodeで利用する abema-ios abema-android abema-native ios-mpp.framework
56. AbemaTV, Inc. All Rights Reserved
 56 iOS向けのFrameworkを配布する機構に関する過去の登壇資料 https://speakerdeck.com/martysuzuki/iosnikmmwodao-ru-surutips 現状のリポジトリ構成
57. AbemaTV, Inc. All Rights Reserved
 ios-mpp-2 ios-mpp-1 api-client-3 api-client-2 api-client-1 57 バージョン管理 現状のリポジトリ構成 Androidアプリのプロジェクトで KMMのリポジトリのAPIモジュールを指定して利用する abema-ios abema-android abema-native
58. AbemaTV, Inc. All Rights Reserved
 58 バージョン管理 モジュールが増えていくと バージョン管理はどうなっていくか？
59. AbemaTV, Inc. All Rights Reserved
 UseCase Interface UseCase Repository ApiClient Domain 59 バージョン管理 マルチモジュールのバージョン管理 各モジュールごとにバージョニングされ、任意のモジュールでは依存するモジュールのバージョン解決が必要となる api-client-4 api-client-3 api-client-2 api-client-1 domain-3 domain-2 domain-1 repository-3 repository-2 repository-1 use-case-3 use-case-2 use-case-1 use-case-if-2 use-case-if-1
60. AbemaTV, Inc. All Rights Reserved
 60 バージョン管理 マルチモジュールのバージョン管理 UseCaseモジュール自体は 1つなので、AndroidとiOSで任意の機能のみをバージョン指定することが困難となる UseCase Interface Repository ApiClient Domain api-client-4 api-client-3 api-client-2 api-client-1 domain-3 domain-2 domain-1 repository-3 repository-2 repository-1 use-case-if-2 use-case-if-1 UseCase use-case-3 use-case-2 use-case-1 Feature Bを実装 Feature Aを変更 Feature Aを実装 • Androidではv2のFeature Aの変更に対応済みで v3で追加したFeature Bの実装を取り込める • iOSではv2の変更の対応は後に実施したいが v3で追加したFeature Bの実装を先に使いたい
61. AbemaTV, Inc. All Rights Reserved
 任意の機能をAndroid/iOSでバージョンを指定して利用可能とするために、 UseCaseをFeatureごとに分ける FeatureA UseCase I/F FeatureA UseCase Repository ApiClient Domain 61 バージョン管理 マルチモジュールで Featureを分けたバージョン管理 api-client-4 api-client-3 api-client-2 api-client-1 domain-3 domain-2 domain-1 repository-3 repository-2 repository-1 feature-a-2 feature-a-1 feature-b-if-2 feature-b-if-1 FeatureB UseCase I/F FeatureB UseCase feature-b-2 feature-b-1 feature-b-if-2 feature-b-if-1
62. AbemaTV, Inc. All Rights Reserved
 feature-b-if-2 feature-b-if-1 feature-b-2 feature-b-1 FeatureAを更新する際に、 Repository・Domain・ApiClientのバージョンをそれぞれ v3に更新した場合 FeatureA UseCase I/F FeatureA UseCase ApiClient Domain 62 バージョン管理 マルチモジュールで Featureを分けたバージョン管理 FeatureB UseCase I/F FeatureB UseCase Repository repository-3 repository-2 repository-1 feature-a-2 feature-a-1 feature-b-if-2 feature-b-if-1 api-client-4 api-client-3 api-client-2 api-client-1 domain-3 domain-2 domain-1
63. AbemaTV, Inc. All Rights Reserved
 feature-b-if-2 feature-b-if-1 feature-a-2 feature-a-1 アプリ側でfeature-a-2を指定すると依存しているモジュールが v3になってしまい、 feature-b-1が壊れる FeatureA UseCase I/F FeatureA UseCase バージョン管理 マルチモジュールで Featureを分けたバージョン管理 Repository api-client-4 api-client-3 api-client-2 api-client-1 domain-3 domain-2 domain-1 ApiClient feature-b-if-2 feature-b-if-1 feature-b-2 feature-b-1 FeatureB UseCase I/F FeatureB UseCase Domain repository-3 repository-2 repository-1
64. AbemaTV, Inc. All Rights Reserved
 UseCaseからドメインまで含んだ Featureと、共通Serviceとドメインを含んだ Coreに分けてバージョンを管理する 64 バージョン管理 マルチモジュールで FeatureとCoreを分けたバージョン管理 FeatureA UseCase I/F FeatureA UseCase FeatureB UseCase I/F FeatureB UseCase FeatureA Repository FeatureA Domain FeatureB Repository FeatureB Domain Core Repository Core Domain ApiClient Service Service I/F feature-a-3 feature-a-2 feature-a-1 feature-a-2 feature-a-1 core-2 core-1 api-client-2 api-client-1
65. AbemaTV, Inc. All Rights Reserved
 feature-a-2 feature-a-1 feature-a-3 feature-a-2 feature-a-1 UseCaseからドメインまで含んだ Featureと、共通Serviceとドメインを含んだ Coreに分けてバージョンを管理する 65 バージョン管理 マルチモジュールで FeatureとCoreを分けたバージョン管理 FeatureA UseCase I/F FeatureA UseCase FeatureB UseCase I/F FeatureB UseCase FeatureA Repository FeatureA Domain FeatureB Repository FeatureB Domain Service I/F Core Repository Core Domain ApiClient Service core-2 core-1 api-client-2 api-client-1 「Featureで管理するドメイン」と「 Coreで管理するドメイン」 に分けることでドメインの変更による影響範囲が明確にな るため、Featureごとにバージョニングしても壊れにくい状 態にできる
66. AbemaTV, Inc. All Rights Reserved
 66 バージョン管理 マルチモジュールで FeatureとCoreを分けたバージョン管理 FeatureA UseCase I/F FeatureA UseCase FeatureB UseCase I/F FeatureB UseCase FeatureA Repository FeatureA Domain FeatureB Repository FeatureB Domain Core Repository Core Domain ApiClient Service Service I/F ApiClientを更新した場合は以降依存モジュール、 Coreを更新した場合は全 Featureを更新する運用が必要になる feature-a-3 feature-a-2 feature-a-1 feature-a-2 feature-a-1 core-2 core-1 api-client-2 api-client-1
67. AbemaTV, Inc. All Rights Reserved
 • モジュールがアップロードが完了するまで次のモジュールの作業ができない ◦ モジュールの実装ごとにPRを投げ、マージのタイミングでリリース処理を実行している ◦ アップロードが完了すると、次のモジュールの build.gradle.ktsに任意のバージョンを指定してGradle Sync をすることで利用可能になる • iOS向けにまとめるモジュールがあることでAndroidよりもPRが1回多くなっている ◦ 利用したい全モジュールがバージョン指定できるようになったタイミングでバージョンを修正して PRを投げ、 マージのタイミングでframework生成のコマンドを実行して任意の Releaseに成果物を添付している バージョン管理 67 今後の課題
68. AbemaTV, Inc. All Rights Reserved
 • モジュールがアップロードが完了するまで次のモジュールの作業ができない ◦ モジュールの実装ごとにPRを投げ、マージのタイミングでリリース処理を実行している ◦ アップロードが完了すると、次のモジュールの build.gradle.ktsに任意のバージョンを指定してGradle Sync をすることで利用可能になる • iOS向けにまとめるモジュールがあることでAndroidよりもPRが1回多くなっている ◦ 利用したい全モジュールがバージョン指定できるようになったタイミングでバージョンを修正して PRを投げ、 マージのタイミングでframework生成のコマンドを実行して任意の Releaseに成果物を添付している バージョン管理 68 今後の課題
69. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 69
70. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャがアプリ側のリアーキテクチャをベースにしているため、一見置き換えが容易に見える 70 既存アプリの移行 アプリのUseCase以降の層をKMMのUseCase以降の層に置き換える UI UI Logic UI Layer UseCase DB API Domain Repository Domain Layer Application Layer Data Layer UseCase Adapter API Domain Repository FeatureA UseCase Adapter API Domain Repository FeatureB Core Domain UseCase Repository API Adapter
71. AbemaTV, Inc. All Rights Reserved
 KMMのアーキテクチャがアプリ側のリアーキテクチャをベースにしているため、一見置き換えが容易に見える 71 既存アプリの移行 アプリのUseCase以降の層をKMMのUseCase以降の層に置き換える UI UI Logic UI Layer DB API Domain Repository Domain Layer Data Layer Adapter API Domain Repository UseCase Adapter API Domain Repository FeatureB Core Domain UseCase Repository API Adapter UseCase FeatureA UseCase Application Layer UseCaseを置き換え、UseCaseImplが依存している RepositoryのInterfaceのImplを注入できるようにする
72. AbemaTV, Inc. All Rights Reserved
 • AndroidとiOSでアーキテクチャは揃っていたが定義の単位が異なる部分がある ◦ 該当箇所の実装担当者にヒアリングをし、 KMMで実装するための方針を整理 ◦ クラス単位で実装が異なる場合はそれぞれで対応するクラスを整理し、実装方針を策定 • UseCaseImplに注入するRepositoryを現段階でKMM側で実装し切れない ◦ KMM側ではI/Fのみを定義し、アプリ側の既存 RepositoryとInterfaceを適合させるアダプタを実 装する ◦ iOS側ではPublisherやObservableをFlowに変換するアダプタを別途実装が必要になる 既存アプリの移行 72 課題
73. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 (差異の例) 73 fun getCanRegisterManager(isTablet: Boolean): Boolean { return ContentPreviewUtil.canRegisterManager( isTablet = isTablet, isJapanRegion = regionStore.isJapan(), ) } fun toggleLockManager(isTvPlayable: Boolean): Boolean { return ContentPreviewUtil.shouldLockManager( isTvPlayable = isTvPlayable, networkState = systemStore.networkState, mode = userStore.contentPreviewAutoPlayMode.value, ) } func observeContentPreviewable() -> Observable<Bool> { return Observable.combineLatest( reachabilityRepository.observeNetworkType(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ) .map { networkType, setting, regionPolicy -> Bool in ... } .distinctUntilChanged() } Android iOS
74. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 (差異の例) 74 fun getCanRegisterManager(isTablet: Boolean): Boolean { return ContentPreviewUtil.canRegisterManager( isTablet = isTablet, isJapanRegion = regionStore.isJapan(), ) } fun toggleLockManager(isTvPlayable: Boolean): Boolean { return ContentPreviewUtil.shouldLockManager( isTvPlayable = isTvPlayable, networkState = systemStore.networkState, mode = userStore.contentPreviewAutoPlayMode.value, ) } func observeContentPreviewable() -> Observable<Bool> { return Observable.combineLatest( reachabilityRepository.observeNetworkType(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ) .map { networkType, setting, regionPolicy -> Bool in ... } .distinctUntilChanged() } Android iOS 任意の処理の結果を返す関数が 1つ存在し 処理は非同期実行される
75. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 (差異の例) 75 fun getCanRegisterManager(isTablet: Boolean): Boolean { return ContentPreviewUtil.canRegisterManager( isTablet = isTablet, isJapanRegion = regionStore.isJapan(), ) } fun toggleLockManager(isTvPlayable: Boolean): Boolean { return ContentPreviewUtil.shouldLockManager( isTvPlayable = isTvPlayable, networkState = systemStore.networkState, mode = userStore.contentPreviewAutoPlayMode.value, ) } func observeContentPreviewable() -> Observable<Bool> { return Observable.combineLatest( reachabilityRepository.observeNetworkType(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ) .map { networkType, setting, regionPolicy -> Bool in ... } .distinctUntilChanged() } Android iOS iOSと同等の処理が 2つの関数に分かれており 処理は同期実行される
76. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 (差異の例) 76 fun getCanRegisterManager(isTablet: Boolean): Boolean { return ContentPreviewUtil.canRegisterManager( isTablet = isTablet, isJapanRegion = regionStore.isJapan(), ) } fun toggleLockManager(isTvPlayable: Boolean): Boolean { return ContentPreviewUtil.shouldLockManager( isTvPlayable = isTvPlayable, networkState = systemStore.networkState, mode = userStore.contentPreviewAutoPlayMode.value, ) } func observeContentPreviewable() -> Observable<Bool> { return Observable.combineLatest( reachabilityRepository.observeNetworkType(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ) .map { networkType, setting, regionPolicy -> Bool in ... } .distinctUntilChanged() } Android iOS
77. AbemaTV, Inc. All Rights Reserved
 既存アプリの移行 (差異の例) 77 fun getCanRegisterManager(isTablet: Boolean): Boolean { return ContentPreviewUtil.canRegisterManager( isTablet = isTablet, isJapanRegion = regionStore.isJapan(), ) } fun toggleLockManager(isTvPlayable: Boolean): Boolean { return ContentPreviewUtil.shouldLockManager( isTvPlayable = isTvPlayable, networkState = systemStore.networkState, mode = userStore.contentPreviewAutoPlayMode.value, ) } func observeContentPreviewable() -> Observable<Bool> { return Observable.combineLatest( reachabilityRepository.observeNetworkType(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ) .map { networkType, setting, regionPolicy -> Bool in ... } .distinctUntilChanged() } Android iOS fun observeContentPreviewable(): Flow<Boolean> { return combine( networkRepository.observeNetworkState(), settingContentPreviewRepository.observeSetting(), regionRepository.observeRegionPolicy() ){ networkState, setting, regionPolicy -> … } … } KMM コードリーディング + 該当範囲の担当に実装についての ヒアリングを実施し、両 OSのUILogicでの影響も考慮した 上でKMM側のI/Fを決めて実装を進める
78. AbemaTV, Inc. All Rights Reserved
 • AndroidとiOSでアーキテクチャは揃っていたが定義の単位が異なる部分がある ◦ 該当箇所の実装担当者にヒアリングをし、 KMMで実装するための方針を整理 ◦ クラス単位で実装が異なる場合はそれぞれで対応するクラスを整理し、実装方針を策定 • UseCaseImplに注入するRepositoryを現段階でKMM側で実装し切れない ◦ KMM側ではI/Fのみを定義し、アプリ側の既存 RepositoryとInterfaceを適合させるアダプタを実 装する ◦ iOS側ではPublisherやObservableをFlowに変換するアダプタを別途実装が必要になる 既存アプリの移行 78 課題
79. AbemaTV, Inc. All Rights Reserved
 Mobile Appチームへの普及 79
80. AbemaTV, Inc. All Rights Reserved
 • Playgroundを作成 ◦ KMMのRepositoryで実装したものを、アプリに導入する前に事前に確認できる • チュートリアルプロジェクトを作成 ◦ 移行途中のAndroidとiOSのサンプルプロジェクトを作成し、模擬移行を PRベースで実施 ◦ 講義・実習形式でメンバーへのインストールを検討 • Contributingのガイドラインの作成 Mobile Appチームへの普及 80 今後やっていくこと
81. AbemaTV, Inc. All Rights Reserved
 全体戦略 81
82. AbemaTV, Inc. All Rights Reserved
 82 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック 再掲
83. AbemaTV, Inc. All Rights Reserved
 83 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック 全クライアントで汎化できる Entityの共通化
84. AbemaTV, Inc. All Rights Reserved
 84 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック Player、platform-specificな部分の共通化
85. AbemaTV, Inc. All Rights Reserved
 85 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック Player、platform-specificな部分の共通化
86. AbemaTV, Inc. All Rights Reserved
 86 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック Player、platform-specificな 部分の共通化
87. AbemaTV, Inc. All Rights Reserved
 87 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック UseCase、Entityの共通化 ※ platform-specificなAPIも部分的に共通化可能
88. AbemaTV, Inc. All Rights Reserved
 88 全体戦略 Desktop Browser Android Web Unity Mobile Browser Mobile App Smart Display/ Speaker TV iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Amazon Fire TV Amazon FIre Tablet Mobile Web ユースケース 技術スタック UseCase、Entityの共通化 ※ platform-specificなAPIも部分的に共通化可能
89. AbemaTV, Inc. All Rights Reserved
 全体戦略 89 Use Cases Entities UI Presentation DB platform-specific APIs External Interfaces Gateways Presenters Controllers Platform Common UI / Presenters / Controllers Desktop Browser UseCases Android Web Unity Mobile App UseCases Mobile Browser UseCases Smart Display/Speaker UseCases TV UseCases iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Common Entities Multi Platform Common Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature API DB Purchase Log etc Purchase Purchase etc etc etc Player Player Player Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service Feature Feature Kotlin MPP
90. AbemaTV, Inc. All Rights Reserved
 全体戦略 90 Use Cases UI Presentation DB platform-specific APIs External Interfaces Gateways Presenters Controllers Platform Common UI / Presenters / Controllers Desktop Browser UseCases Android Web Unity Mobile App UseCases Mobile Browser UseCases Smart Display/Speaker UseCases TV UseCases iOS iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Multi Platform Common Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature API DB Purchase Log etc Purchase Purchase etc etc etc Player Player Player Feature Feature Kotlin MPP 全クライアントで汎化できる Entityの共通化 Common Entities Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service Entities
91. AbemaTV, Inc. All Rights Reserved
 Kotlin MPP Common Entities Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service 全体戦略 91 UI Presentation DB platform-specific APIs External Interfaces UI / Presenters / Controllers Desktop Browser UseCases Mobile App UseCases Mobile Browser UseCases Smart Display/Speaker UseCases TV UseCases iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Multi Platform Common Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature API DB Log etc Feature Feature Unity Platform Common Purchase Purchase Purchase etc etc etc Player Player Player Player、platform-specificな 部分の共通化 Android Web iOS Use Cases Gateways Presenters Controllers Entities
92. AbemaTV, Inc. All Rights Reserved
 Platform Common Purchase Purchase Purchase etc etc etc Player Player Player Common Entities Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service 全体戦略 92 UI Presentation DB platform-specific APIs External Interfaces Gateways Presenters Controllers UI / Presenters / Controllers Desktop Browser UseCases Mobile Browser UseCases Smart Display/Speaker UseCases iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Multi Platform Common Feature Feature Feature Feature Feature Feature Feature Feature Feature API DB Log etc Android Web Unity iOS Mobile App UseCases TV UseCases Feature Feature Feature Feature Feature Feature Feature Feature UseCase、Entityの共通化 Kotlin MPP Use Cases Entities
93. AbemaTV, Inc. All Rights Reserved
 Common Entities Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service 全体戦略 93 UI Presentation DB platform-specific APIs External Interfaces UI / Presenters / Controllers Desktop Browser UseCases Mobile App UseCases Mobile Browser UseCases Smart Display/Speaker UseCases TV UseCases iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Unity Platform Common Purchase Purchase Purchase etc etc etc Player Player Player Android Web iOS Use Cases Gateways Presenters Controllers Entities Multi Platform Common API DB Log etc Kotlin MPP APIやDB、ログなど外部IFの共通化 ※ 適用できないPFもあり
94. AbemaTV, Inc. All Rights Reserved
 全体戦略 94 Platform Common UI / Presenters / Controllers Desktop Browser UseCases Mobile App UseCases Mobile Browser UseCases Smart Display/Speaker UseCases TV UseCases iOS Mobile Android Mobile PC Web Chrome cast Apple TV Android TV IPTV Google Nest Hub Game Console Mobile Web Common Entities Multi Platform Common Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature API DB Purchase Log etc Purchase Purchase etc etc etc Player Player Player Domain Service Domain service Domain Object Domain Object Domain Object Value Object Value Object Value Object Domain Service Feature Feature • クライアント全体でのEntityの共通化 • プラットフォーム軸での共通化 • ユースケース軸での共通化 • 外部IFの共通化 • モジュラアーキテクチャによる再利用性の促進 • モジュールのバージョン管理と開発フローの構築 • マルチプラットフォーム・クロスプラットフォーム技術の進化への追随
95. AbemaTV, Inc. All Rights Reserved