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
400
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
1.1k
モジュール分割した開発での知見とテーマ切り替えやUICatalogについて
tomu28
1
920
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
SwiftUI Viewの責務分離
elmetal
PRO
0
140
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
GAEログのコスト削減
mot_techtalk
0
110
ARA Ansible for the teams
kksat
0
150
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
チームリードになって変わったこと
isaka1022
0
190
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
CI改善もDatadogとともに
taumu
0
110
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
The Cult of Friendly URLs
andyhume
78
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
Producing Creativity
orderedlist
PRO
343
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Faster Mobile Websites
deanohume
306
31k
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