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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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 ● ロゴのアセットもそれぞれ管理が必要　

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 全部使えます◎

Slide 12

Slide 12 text

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とフォーカス制御意外とここもいける部分

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved  考えたこと 14 ● Hot Reloadもないのでビルド頻度減らしたい 💪 ● uiToolingPreviewはandroidMainにしか入れられない ● commonMainベースで開発する時に Previewのためだけにわざわざ androidMain を作りたくない ● マルチモジュールで並列ビルド ○ ついでにCompositeBuildも入れたい ● 画像リソースの置き場所問題 ○ 基本の設定だとshared配下のものしか読み込まない ○ ただ、xcode側の設定を頑張りたくない sharedモジュール肥大化しがち Preview使って開発したい！

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

AbemaTV, Inc. All Rights Reserved  触ってみての所感 18 ● え、思ったよりめっちゃ動く ● KotlinやJetpackCompose、MaterialComponents側のアップデートへの追従が早くなってる ○ 数ヶ月前は2~3ヶ月ほどズレがあったが、今は1週間もあれば対応される ● Kotlin1.9.20-Beta2からGradle Configuration CacheもKMP対応し、環境としては整いつつあるのでは ● デバイス機能や動画に手を出す場合はまだツラミ ○ moko-{hoge}のライブラリがあることに期待しましょう

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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/

Slide 21

Slide 21 text