TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計

iOSアプリのアーキテクチャ設計~TCA実践編~
https://findy.connpass.com/event/315494/

---
小幡 十矛（Obata Tomu）｜共創で価値をつくるエンジニア・新規事業×ブランドづくり

2021年にサイバーエージェントへ新卒入社し、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
アプリ開発・新規事業・ブランドづくりを軸に、「リアルとデジタルの交差点」から挑戦のきっかけや価値を共創しています。
iOSエンジニアとしての実務経験を活かしつつ、実店舗や共創型の場づくりにも取り組んでいます。
“ちょっと未来の当たり前”を、仲間と一緒に育てていく活動を続けています。

👥 特に、社会人1〜5年目で…
「やりたい気持ちはあるけど、最初の一歩に迷っている」方
「自分の可能性をもっと広げたい」方
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」方

🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌

🔗各種リンク：
📲 LINE（気軽に話してみたい方へ）：https://lin.ee/wdR6Udp
📷 Instagram：https://www.instagram.com/tomu28creator/
🧵 Threads：https://www.threads.net/@tomu28creator/
🐦 X（旧Twitter）：https://x.com/obata_tomu
📝 note（価値観やストーリーを発信中）：https://note.com/obata_tomu
🔗 プロフィールサイト：https://obata-tomu.jp/

Transcript

1. TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計 株式会社サイバーエージェント　小幡 十矛 2024/04/25　iOSアプリのアーキテクチャ設計~TCA実践編~ 1
2. ・2021年、株式会社サイバーエージェントに新卒入社。 ・2023年4月までAmebaブログのiOSアプリを作成。 ・2023年5月から「ABEMA Live」iOSアプリの開発リードをしています。 ・WWDC 2024現地参加予定！🇺🇸 名前：小幡 十矛(Obata Tomu) 自己紹介 https://x.com/_tomu28 https://github.com/tomu28 2
3. POINT 01 サービス説明 POINT 04 iOS側の技術構成, 使用ライブラリ POINT 02 実装機能 POINT 05 TCA, KMPの設計について POINT 03 開発体制, スケジュール POINT 06 さいごに 目次 3
4. サービス説明 4
5. 「ABEMA Live」は、「ABEMA」で配信されるアーティストのライブ、 イベント、スポーツ興行、舞台など多彩なペイパービュー （PayPerView）コンテンツを、海外から購入できるサービスです。 第一弾として2024/01/28に世界最大級の格闘技団体・ONE Championshipの日本大会をタイ、フィリピン、韓国にて 同時生中継を行いました。 サービス説明 5
6. 実装機能 6
7. ホーム/お知らせ/マイページ の3タブ構成 海外向け、PPV動画配信、 ログイン機能あり 実装機能 7
8. ユーザーログイン機能 ホーム 番組詳細 実装機能 8
9. プレイヤー お知らせ一覧/詳細 マイページ 実装機能 9
10. アプリ内課金 実装機能 10
11. その他 強制アップデート メンテナンスモード エラー画面 実装機能 11
12. その他 全画面タブレット対応 多言語対応（英語・タイ語・韓国語） Haptics feedback 実装機能 12
13. 開発体制, スケジュール 13
14. 2024/01/28に初回のイベントを実施 2023/10月までに基本的な機能を作り終え、 QA開始できる状態を目標に、開発を推進していた 2023/05から開発開始 開発体制としては、iOSエンジニア1~2人、Androidエンジニア1人 iOS、Android兼任1人 開発体制, スケジュール 14
15. iOS側の技術構成, 使用ライブラリ 15
16. 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
17. touchlab/SKIE → Swift-Kotlin間のKMPインターフェイス エンハンサー vtourraine/AcknowList → ライセンス画面で使用 exyte/ScalingHeaderScrollView → 縮小する固定ヘッダーを備えたスクロール ビュー onevcat/Kingfisher siteline/swiftui-introspect → フルスクリーン再生時にTabを非表示にする制御で使用 apple/swift-format realm/SwiftLint iOS側の技術構成, 使用ライブラリ 17
18. icerockdev/moko-resources → 画像は各OS毎の取得に変更 icerockdev/moko-kswift → Kotlin sealed classを扱いやすくする機能は 　　　　　　　　　　　　　 SKIEに置き換え KMP-NativeCoroutines → Kotlin Coroutinesを扱いやすくする機能は 　　　　　　　　　　　　 SKIEに置き換え String Catalog → KMP経由の文言取得に変更 現在は使っていないが一時期使っていたもの iOS側の技術構成, 使用ライブラリ 18
19. TCA, KMPの 設計について 19
20. 1 メリット TCA(swift-composable-architecture)を使用した理由 TCAに則って実装を進めることになるため、チームメンバー間で書き方のズレが 少なくなること KMPで定義してあるState購読やAction発火、遷移周りの処理・他ビューのAction 伝搬など、TCAに準拠することで見通し・メンテナンス性が良くなるため 2 許容したデメリット 開発当初(2023/05)はまだバージョンが0.5x.x系だったことも、推奨される書き方 が大きく変わる可能性が高く、破壊変更に追従する必要があること → 開発途中で1.0.0がリリースされた 今後、メンバーが増減した時も対応しやすい TCA, KMPの設計について 20
21. 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
22. iOS側のコード：AppStore TCAとKMPの組み合わせについて TCA, KMPの設計について https://github.com/tomu28/tca-kmp-sample/blob/main/iosApp/FeaturePackage/Sources/AppFeature/AppView.swift#L31-L78 22
23. iOS側のコード：AppView TCAとKMPの組み合わせについて TCA, KMPの設計について https://github.com/tomu28/tca-kmp-sample/blob/main/iosApp/FeaturePackage/Sources/AppFeature/AppView.swift#L6-L29 23
24. KotlinのSuspend FunctionsやFlowをSwiftで扱いやすくなる default case削除（sealed class/interfaceをenumとして扱えるようにする） SKIEを使って、KMPで生成されたコードをSwiftで扱いやすくする KMPで行っていること TCA, KMPの設計について https://skie.touchlab.co/features/ 24
25. SKIEを使って、iOS側で定義していたenumを削除した例 TCA, KMPの設計について 25
26. SKIEを使って、default caseを削除した例 TCA, KMPの設計について 26
27. パッケージ, モジュール構成 依存の流れとしては、MobileAppFeaturesパッケージで MobileAppCoreパッケージを読み込むような形となる 04/ MobileAppFeaturesパッケージでは機能単位でモジュールを分割している。 TV対応なども視野に入れた時、モジュールの責務が明確になる方が良いと考え パッケージを分ける形にした。 TV対応する時は、TVAppFeaturesパッケージを作るイメージ。 03/ 共通する処理はMobileAppCoreパッケージに入れるようにしている。 KMPに関する部分もMobileAppCoreパッケージに入れている。 02/ MobileAppCoreとMobileAppFeaturesパッケージを定義 01/ TCA, KMPの設計について 27
28. KMPは、Build PhasesのRun Scriptより読 み込むことも出来ますが、マルチパッケー ジの構成でも対応出来るようSPMの binaryTargetで入れるようにしています。 パッケージ, モジュール構成 TCA, KMPの設計について 28
29. 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. さいごに 30
31. その他、開発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