最新のCompose Multiplatform を使うとiOSとAndroidアプリはどれくらい作れるのか

CA.aab #4 での登壇資料です。

サンプルプロジェクトはこちら
https://github.com/FujiKinaga/cmp-sample

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 最新のCompose Multiplatform を使うとiOSとAndroidアプリはど れくらい作れるのか 2023 October 5th 株式会社サイバーエージェント Fuji Kinaga
2. AbemaTV, Inc. All Rights Reserved
 2 1. 自己紹介 2. 本セッションについて 3. 質問タイム 4. 知ったこと 5. 考えたこと 6. 悩んでいること 7. 触ってみての所感 8. 参考資料 INDEX
3. AbemaTV, Inc. All Rights Reserved
 木永風児 # 緊張しいなので登壇は苦手でやってます
 # ABEMA 
 # Androidエンジニア
 # 2020中途入社
 
 3 Profile
4. AbemaTV, Inc. All Rights Reserved
 今回のセッションについて 4 • Compose Multiplatformの基本情報 • Compose ◦ for Desktop ◦ for Web ◦ HTML • デバイス機能を活用するケースの発展実装 • Compose for iOS • 動くものを作ってハマった点や学び について 触れること 触れないこと
5. AbemaTV, Inc. All Rights Reserved
 質問です！󰢧 5
6. AbemaTV, Inc. All Rights Reserved
 Compose Multiplatformとの触れ合い方 6 • 業務で使ってるよ • 調査・検証し始めてるよ • 使ってみたいと思ってるよ • その他
7. AbemaTV, Inc. All Rights Reserved
 予想 記事は出てるけど、 なんとなく更新されてってるんだろうなぁ で止まっている方が多いかも？ 7
8. AbemaTV, Inc. All Rights Reserved
 先に進んでみましょう！🚗 8
9. AbemaTV, Inc. All Rights Reserved
 知ったこと 9 • WebViewの提供はなし ◦ Android: AndroidViewで埋め込み ◦ iOS: UIKitViewで埋め込み • ブラウザ遷移も提供なし ◦ Android: Intent.ACTION_VIEW ◦ iOS: UIApplication openURL　 WebView / ブラウザ遷移 アプリ起動のスプラッシュ 共通化が難しい部分 • Android ◦ SplashScreen API • iOS ◦ Launch Screenの設定 or Storyboard or • ロゴのアセットもそれぞれ管理が必 要　
10. AbemaTV, Inc. All Rights Reserved
 知ったこと 10 • painterResource()とresource() ◦ png, jpg, xmlの画像をcommon内で取得で きる ◦ ByteArrayを返せる • shared/src/commonMain/resources配下に 置く • CocoaPodsの定義が不要になり、 pod install も不要になったのでビルドコスト減 画像リソース管理 WindowInsets 最近(3ヶ月)で共通化ができるようになった部分 • 例の森さんがInsetsXとしてライブラ リを出していた ◦ https://github.com/mori-atsushi/ins etsx • 1.5.0から公式でも対応された • 1.5.10-beta02(Latest)からModifier のAPIも対応された ◦ https://github.com/JetBrains/compose-multiplatform/pull/3340
11. AbemaTV, Inc. All Rights Reserved
 知ったこと 11 Material Components 最近(3ヶ月)で共通化ができるようになった部分 2 • 1.5.10-beta02(Latest)時点の対応状 況 ◦ Material3: 1.1.2 ◦ Material: 1.5.1 • 本家のJetpackComposeの提供にほ ぼほぼ追いついた🎉 ◦ Material3: 1.1.2 (Stable) ◦ Material: 1.5.2 (Stable) https://developer.android.com/jetpack/compose/components 全部使えます◎
12. AbemaTV, Inc. All Rights Reserved
 知ったこと 12 • KeyboardControllerや FocusManagerも使える • KeyboardOptionやKeyboardAction も指定できる • 先述したWindowInsetsも使えるので かなり操作体験が向上🔨 • MoleculeがiOSでも動作する ◦ DisplayLinkClockというのを使う ▪ https://github.com/cashapp/molecule/ pull/170 ◦ RecompositionModeはContextClockだと 動かないのでImmediateで動作させる ▪ https://github.com/cashapp/molecule/i ssues/2#issuecomment-1348840994 • パフォーマンス面は未検証です Composeを使ったUiLogic管理 Keyboardとフォーカス制御 意外とここもいける部分
13. AbemaTV, Inc. All Rights Reserved
 知ったこと 13 • cashapp/multiplatform-pagingが3.2.0-alphaからJetBrains Composeにも対応 • 先日、androidx paging 3.3.0-alpha02もKMP対応された • androidx pagingは現時点ではまだcomposeの実装まではiOSの考慮を提供していない • Compose Multiplatformで動かす場合は引き続きcashapp製の3.3.0-alphaを使いましょう ページング 意外とここもいける部分 2
14. AbemaTV, Inc. All Rights Reserved
 考えたこと 14 • Hot Reloadもないのでビルド頻度減らしたい 💪 • uiToolingPreviewはandroidMainにしか入れ られない • commonMainベースで開発する時に Previewのためだけにわざわざ androidMain を作りたくない • マルチモジュールで並列ビルド ◦ ついでにCompositeBuildも入れたい • 画像リソースの置き場所問題 ◦ 基本の設定だとshared配下のものしか 読み込まない ◦ ただ、xcode側の設定を頑張りたくない sharedモジュール肥大化しがち Preview使って開発したい！
15. AbemaTV, Inc. All Rights Reserved
 Preview関数だけを入れられる previewモジュールを作成し た (niaのcatalogモジュールと同様の構成 ) このモジュールには androidMainしか存在しない 画像 考えたこと 15 uiモジュールから参照される designsystemモジュールを作 成した Preview使って開発したい！ 画像
16. AbemaTV, Inc. All Rights Reserved
 考えたこと 16 マルチモジュールな構成でビルドが通るようにした sharedモジュールに入れた画像リソースは他のモジュール からも参照できた (文字列参照のため ) sharedモジュール肥大化しがち
17. AbemaTV, Inc. All Rights Reserved
 悩んでいること 17 • IntentやSharedPreferencesの生成にはContextが必要 • setContentするActivityから渡していき、expect/actualでandroidMain内の実装を頑 張る • 良いDIライブラリ🥺 AndroidにおけるContextの渡し方
18. AbemaTV, Inc. All Rights Reserved
 触ってみての所感 18 • え、思ったよりめっちゃ動く • KotlinやJetpackCompose、MaterialComponents側のアップデートへの追従が早く なってる ◦ 数ヶ月前は2~3ヶ月ほどズレがあったが、今は1週間もあれば対応される • Kotlin1.9.20-Beta2からGradle Configuration CacheもKMP対応し、環境としては 整いつつあるのでは • デバイス機能や動画に手を出す場合はまだツラミ ◦ moko-{hoge}のライブラリがあることに期待しましょう
19. AbemaTV, Inc. All Rights Reserved
 github.com/FujiKinaga/cmp-sample 19 セッションで紹介した内容のサンプルコード作りましたので良かったら 🙏
20. AbemaTV, Inc. All Rights Reserved
 参考資料 20 • Compose Multiplatform for iOS がアルファ版に！ ◦ https://blog.jetbrains.com/ja/kotlin/2023/05/compose-multiplatform-for-ios-is-in-alpha/ • Compose for iOS for ZOZOTOWN ◦ https://speakerdeck.com/kohei_inoue/compose-for-ios-for-zozotown • Compose Multiplatform for iOSで音声再生しようぜ！！ ◦ https://speakerdeck.com/kohei_inoue/compose-multiplatform-for-iosdeyin-sheng-zai-sheng-siyouze • Compose で Android/iOS アプリを作る ◦ https://speakerdeck.com/m_coder/ios-ahuriwozuo-ru • KALEIDOT.NET ◦ https://kaleidot.net/
21. AbemaTV, Inc. All Rights Reserved