TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計 株式会社サイバーエージェント　小幡 十矛 2024/04/25　iOSアプリのアーキテクチャ設計~TCA実践編~ 1

・2021年、株式会社サイバーエージェントに新卒入社。 ・2023年4月までAmebaブログのiOSアプリを作成。 ・2023年5月から「ABEMA Live」iOSアプリの開発リードをしています。 ・WWDC 2024現地参加予定！🇺🇸 名前：小幡 十矛(Obata Tomu) 自己紹介 https://x.com/_tomu28 https://github.com/tomu28 2

POINT 01 サービス説明 POINT 04 iOS側の技術構成, 使用ライブラリ POINT 02 実装機能 POINT 05 TCA, KMPの設計について POINT 03 開発体制, スケジュール POINT 06 さいごに 目次 3

サービス説明 4

「ABEMA Live」は、「ABEMA」で配信されるアーティストのライブ、 イベント、スポーツ興行、舞台など多彩なペイパービュー （PayPerView）コンテンツを、海外から購入できるサービスです。 第一弾として2024/01/28に世界最大級の格闘技団体・ONE Championshipの日本大会をタイ、フィリピン、韓国にて 同時生中継を行いました。 サービス説明 5

実装機能 6

ホーム/お知らせ/マイページ の3タブ構成 海外向け、PPV動画配信、 ログイン機能あり 実装機能 7

ユーザーログイン機能 ホーム 番組詳細 実装機能 8

プレイヤー お知らせ一覧/詳細 マイページ 実装機能 9

アプリ内課金 実装機能 10

その他 強制アップデート メンテナンスモード エラー画面 実装機能 11

その他 全画面タブレット対応 多言語対応（英語・タイ語・韓国語） Haptics feedback 実装機能 12

開発体制, スケジュール 13

2024/01/28に初回のイベントを実施 2023/10月までに基本的な機能を作り終え、 QA開始できる状態を目標に、開発を推進していた 2023/05から開発開始 開発体制としては、iOSエンジニア1~2人、Androidエンジニア1人 iOS、Android兼任1人 開発体制, スケジュール 14

iOS側の技術構成, 使用ライブラリ 15

VRT（pointfreeco/swift-snapshot-testing） KMP(Kotlin Multiplatform) TCA(The Composable Architecture) SPM(Swift Package Manager)でのライブラリ, モジュール管理 Feature単位でのマルチモジュール分割 プレイヤー周り：AVKit, UIKit。UIViewRepresentableを使い、UI側はフルSwiftUI Swift, SwiftUI, Swift Concurrency (iOS 16.6+) iOS側の技術構成, 使用ライブラリ 16

touchlab/SKIE → Swift-Kotlin間のKMPインターフェイス エンハンサー vtourraine/AcknowList → ライセンス画面で使用 exyte/ScalingHeaderScrollView → 縮小する固定ヘッダーを備えたスクロール ビュー onevcat/Kingfisher siteline/swiftui-introspect → フルスクリーン再生時にTabを非表示にする制御で使用 apple/swift-format realm/SwiftLint iOS側の技術構成, 使用ライブラリ 17

icerockdev/moko-resources → 画像は各OS毎の取得に変更 icerockdev/moko-kswift → Kotlin sealed classを扱いやすくする機能は 　　　　　　　　　　　　　 SKIEに置き換え KMP-NativeCoroutines → Kotlin Coroutinesを扱いやすくする機能は 　　　　　　　　　　　　 SKIEに置き換え String Catalog → KMP経由の文言取得に変更 現在は使っていないが一時期使っていたもの iOS側の技術構成, 使用ライブラリ 18

TCA, KMPの 設計について 19

1 メリット TCA(swift-composable-architecture)を使用した理由 TCAに則って実装を進めることになるため、チームメンバー間で書き方のズレが 少なくなること KMPで定義してあるState購読やAction発火、遷移周りの処理・他ビューのAction 伝搬など、TCAに準拠することで見通し・メンテナンス性が良くなるため 2 許容したデメリット 開発当初(2023/05)はまだバージョンが0.5x.x系だったことも、推奨される書き方 が大きく変わる可能性が高く、破壊変更に追従する必要があること → 開発途中で1.0.0がリリースされた 今後、メンバーが増減した時も対応しやすい TCA, KMPの設計について 20

KMP側のコード：SampleClass TCAとKMPの組み合わせについて TCA, KMPの設計について https://github.com/tomu28/tca-kmp-sample/blob/main/shared/src/commonMain/kotlin/com/tomu28/tcakmpsampleapp/SampleClass.kt 21

iOS側のコード：AppStore TCAとKMPの組み合わせについて TCA, KMPの設計について https://github.com/tomu28/tca-kmp-sample/blob/main/iosApp/FeaturePackage/Sources/AppFeature/AppView.swift#L31-L78 22

iOS側のコード：AppView TCAとKMPの組み合わせについて TCA, KMPの設計について https://github.com/tomu28/tca-kmp-sample/blob/main/iosApp/FeaturePackage/Sources/AppFeature/AppView.swift#L6-L29 23

KotlinのSuspend FunctionsやFlowをSwiftで扱いやすくなる default case削除（sealed class/interfaceをenumとして扱えるようにする） SKIEを使って、KMPで生成されたコードをSwiftで扱いやすくする KMPで行っていること TCA, KMPの設計について https://skie.touchlab.co/features/ 24

SKIEを使って、iOS側で定義していたenumを削除した例 TCA, KMPの設計について 25

SKIEを使って、default caseを削除した例 TCA, KMPの設計について 26

パッケージ, モジュール構成 依存の流れとしては、MobileAppFeaturesパッケージで MobileAppCoreパッケージを読み込むような形となる 04/ MobileAppFeaturesパッケージでは機能単位でモジュールを分割している。 TV対応なども視野に入れた時、モジュールの責務が明確になる方が良いと考え パッケージを分ける形にした。 TV対応する時は、TVAppFeaturesパッケージを作るイメージ。 03/ 共通する処理はMobileAppCoreパッケージに入れるようにしている。 KMPに関する部分もMobileAppCoreパッケージに入れている。 02/ MobileAppCoreとMobileAppFeaturesパッケージを定義 01/ TCA, KMPの設計について 27

KMPは、Build PhasesのRun Scriptより読 み込むことも出来ますが、マルチパッケー ジの構成でも対応出来るようSPMの binaryTargetで入れるようにしています。 パッケージ, モジュール構成 TCA, KMPの設計について 28

gradlewで生成したXCFrameworkをiOS直下にコピーして、 KMPをSPMのbinaryTargetとして読み込んでいます。 KMPをSPMのbinaryTargetで読み込む TCA, KMPの設計について 参考：https://github.com/tomu28/tca-kmp- sample/blob/main/iosApp/CorePackage/Package.swift#L39-L43 29

さいごに 30

その他、開発Tipsなどはこちらでも発表しました。 CA.swift #19 〜新規開発の技術選定〜 https://speakerdeck.com/tomu28/shao-shu-timudetiao-mu- swiftui-tca-kmpwoyong-ita-xin-gui-dong-hua-pei-xin-apuri- abema-live-nokai-fa-nituite 最後までご清聴いただきありがとうございました！！ 31