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

Transcript

1. AbemaTV, Inc. All Rights Reserved

   AbemaTV, Inc. All Rights Reserved
 1
   最新のCompose Multiplatform
   を使うとiOSとAndroidアプリはど
   れくらい作れるのか
   2023 October 5th
   株式会社サイバーエージェント
   Fuji Kinaga
   

   View Slide

2. AbemaTV, Inc. All Rights Reserved
 2
   1. 自己紹介
   2. 本セッションについて
   3. 質問タイム
   4. 知ったこと
   5. 考えたこと
   6. 悩んでいること
   7. 触ってみての所感
   8. 参考資料
   INDEX
   

   View Slide

3. AbemaTV, Inc. All Rights Reserved

   木永風児
   # 緊張しいなので登壇は苦手でやってます

   # ABEMA 

   # Androidエンジニア

   # 2020中途入社

   

   3
   Profile
   

   View Slide

4. AbemaTV, Inc. All Rights Reserved

   今回のセッションについて
   4
   ● Compose Multiplatformの基本情報
   ● Compose
   ○ for Desktop
   ○ for Web
   ○ HTML
   ● デバイス機能を活用するケースの発展実装
   ● Compose for iOS
   ● 動くものを作ってハマった点や学び
   について
   触れること
   触れないこと
   

   View Slide

5. AbemaTV, Inc. All Rights Reserved

   質問です！󰢧
   5
   

   View Slide

6. AbemaTV, Inc. All Rights Reserved

   Compose Multiplatformとの触れ合い方
   6
   ● 業務で使ってるよ
   ● 調査・検証し始めてるよ
   ● 使ってみたいと思ってるよ
   ● その他
   

   View Slide

7. AbemaTV, Inc. All Rights Reserved

   予想
   記事は出てるけど、
   なんとなく更新されてってるんだろうなぁ
   で止まっている方が多いかも？
   7
   

   View Slide

8. AbemaTV, Inc. All Rights Reserved

   先に進んでみましょう！🚗
   8
   

   View Slide

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

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

14. AbemaTV, Inc. All Rights Reserved

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

    View Slide

15. AbemaTV, Inc. All Rights Reserved

    Preview関数だけを入れられる previewモジュールを作成し
    た (niaのcatalogモジュールと同様の構成 )
    このモジュールには androidMainしか存在しない
    画像
    考えたこと
    15
    uiモジュールから参照される designsystemモジュールを作
    成した
    Preview使って開発したい！
    画像
    

    View Slide

16. AbemaTV, Inc. All Rights Reserved

    考えたこと
    16
    マルチモジュールな構成でビルドが通るようにした
    sharedモジュールに入れた画像リソースは他のモジュール
    からも参照できた (文字列参照のため )
    sharedモジュール肥大化しがち
    

    View Slide

17. AbemaTV, Inc. All Rights Reserved

    悩んでいること
    17
    ● IntentやSharedPreferencesの生成にはContextが必要
    ● setContentするActivityから渡していき、expect/actualでandroidMain内の実装を頑
    張る
    ● 良いDIライブラリ🥺
    AndroidにおけるContextの渡し方
    

    View Slide

18. AbemaTV, Inc. All Rights Reserved

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

    View Slide

19. AbemaTV, Inc. All Rights Reserved

    github.com/FujiKinaga/cmp-sample
    19
    セッションで紹介した内容のサンプルコード作りましたので良かったら
    🙏
    

    View Slide

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/
    

    View Slide

21. AbemaTV, Inc. All Rights Reserved

    

    View Slide