KMM&Compose MutiPlatformで始めるクロスプラットフォーム開発

potatotips #82 iOS/Android開発Tips共有会の発表資料です。

Transcript

1. potatotips #82
   ©2023 RAKUS Co., Ltd.
   KMM & Compose MultiPlatformで
   始めるクロスプラットフォーム開発
   @akkiee76
   potatotips #82 iOS/Android開発Tips共有会
   

   View Slide

2. potatotips #82
   Akihiko Sato / 株式会社ラクス Lead Engineer / @akkiee76
   SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android)
   上流工程、コードレビュー、チームの課題改善など
   コールドブリューコーヒー☕ / パン作り🍞 / あんバターフランス🥐
   自己紹介
   

   View Slide

3. potatotips #82
   今日伝えたいこと
   KMM & Compose MultiPlatform　
   を導入したクロスプラットフォーム開発の紹介
   

   View Slide

4. potatotips #82
   Kotlin Multiplatform for Mobile （KMM）
   JetBrainsが開発したKotlinベースのクロスプラットフォーム
   開発フレームワーク。1つの共通のKotlinコードベースを使用して、
   iOSとAndroidの両方のプラットフォーム向けにネイティブアプリを
   開発することができる点が特徴。
   

   View Slide

5. potatotips #82
   Kotlin Multiplatform for Mobile （KMM）
   フレームワークイメージ
   

   View Slide

6. potatotips #82
   Kotlin Multiplatform for Mobile （KMM）
   アーキテクチャイメージ
   Compose Multiplatform
   

   View Slide

7. potatotips #82
   Compose MultiPlatform
   Compose Multiplatformは、Kotlinを使用して複数のプラットフォーム間でUI
   を共有するための宣言的なフレームワークです。JetBrainsとオープンソースの貢献
   者によって開発され、Jetpack Composeに基づいています。
   https://github.com/JetBrains/compose-multiplatform
   

   View Slide

8. potatotips #82
   ここからは導入手順を紹介します
   

   View Slide

9. potatotips #82
   開発に必要な環境
   ・ macOS
   ・ Android Studio
   ・ Xcode
   ・ JDK
   ・ Kotlin Multiplatform Mobile plugin
   ・ Kotlin plugin
   ・ CocoaPods dependency manager
   あとは brew install kdoctor を実行するだけ
   

   View Slide

10. potatotips #82
    プロジェクト作成
    ＊ Desktop版はIntelliJから作成可能
    

    View Slide

11. potatotips #82
    プロジェクト構成
    

    View Slide

12. potatotips #82
    commonMainに定義されている共通コード
    

    View Slide

13. potatotips #82
    実際に利用したライブラリなど
    ・ Navigation
    ・ Network
    ・ DI
    （時間の関係上3つ紹介）
    

    View Slide

14. potatotips #82
    Navigation
    自分の実装イメージはこんな感じでしたが・・・。
    

    View Slide

15. potatotips #82
    Navigation
    サポートされていなかった。。
    https://github.com/JetBrains/compose-multiplatform/tree/master/tutorials/Navigation
    

    View Slide

16. potatotips #82
    Navigation
    とりあえず自前で実装（Android）
    

    View Slide

17. potatotips #82
    Navigation
    とりあえず自前で実装（iOS）
    * main.ios.ktも定義が必要です。
    

    View Slide

18. potatotips #82
    Network
    Ktrofitライブラリを
    導入して実装
    RetrofitのようなAPIで
    実装することが可能
    https://foso.github.io/Ktorfit/
    

    View Slide

19. potatotips #82
    Network
    レスポンスをselializeするため、
    kotlinx-serializationも同時に導入
    します。
    https://github.com/Kotlin/kotlinx.serialization
    

    View Slide

20. potatotips #82
    DI （Dependency Injection） 〜 module 定義
    Koin（InsertKoinIO）を導入して実装
    https://insert-koin.io/docs/reference/koin-mp/kmp/
    

    View Slide

21. potatotips #82
    DI （Dependency Injection） 〜 Android 編
    

    View Slide

22. potatotips #82
    DI （Dependency Injection） 〜 iOS 編
    

    View Slide

23. potatotips #82
    まとめ
    ・ ComposeでViewを共通で利用できるため、
    生産性の向上、保守性に期待できる
    ・ Kotlinで実装する共通ロジックは、柔軟に設計ができる
    ・ Android、iOS 両方のアーキテクチャの知見が必要
    ・ まだまだ使い勝手が悪い点もあるが今後のアップデートに期待！
    

    View Slide

24. potatotips #82
    ご静聴ありがとうございました
    

    View Slide