Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
Search
Tomu Obata
April 25, 2024
Programming
2
340
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
https://findy.connpass.com/event/315494/
Tomu Obata
April 25, 2024
Tweet
Share
More Decks by Tomu Obata
See All by Tomu Obata
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
1k
モジュール分割した開発での知見とテーマ切り替えやUICatalogについて
tomu28
1
890
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
最新TCAキャッチアップ
0si43
0
200
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
110
Quine, Polyglot, 良いコード
qnighy
4
650
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.2k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
flutterkaigi_2024.pdf
kyoheig3
0
150
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
Ethereum_.pdf
nekomatu
0
470
Featured
See All Featured
Become a Pro
speakerdeck
PRO
25
5k
Teambox: Starting and Learning
jrom
133
8.8k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Documentation Writing (for coders)
carmenintech
65
4.4k
Automating Front-end Workflow
addyosmani
1366
200k
The Cult of Friendly URLs
andyhume
78
6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Transcript
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