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
220
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
870
モジュール分割した開発での知見とテーマ切り替えやUICatalogについて
tomu28
1
820
Other Decks in Programming
See All in Programming
CSC307 Lecture 12
javiergs
PRO
0
220
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Advanced App Shrinking Techniques
cbeyls
2
150
小さな開発会社を作った理由
polidog
0
1.9k
Namespace on read
tagomoris
2
370
Trial
cairolibrary720
1
130
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Teambox: Starting and Learning
jrom
130
8.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
How STYLIGHT went responsive
nonsquared
93
5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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