概要
- Compose Multiplatformを2023年5月の段階で試すときに最初に知っておくと良さそうな知見を書き出してみました
- 変化が激しい領域なので、新鮮さはすぐに失われる情報だと思うので、読んでくださった時期によってはあまり参考にしない方がいいかもしれません🙏
目次
- 押さえておきたい開発リポジトリ
- どんな環境でComposeが使えるのか
- テンプレートを使って楽々セットアップ
- Android/iOS/Desktop/Webを網羅したサンプルは存在するのか
- AndroidStudio上でiOSアプリをビルドするPlugin
- Compose for DesktopでUIプレビューを表示するPlugin
押さえておきたいリポジトリ
JetBrains/compose-multiplatform
- Compose Multiplatformはここで作られています
-
examples: サンプルがあります -
turorial: 事始めの内容やテンプレートリポジトリへのリンクがあります -
experimental: 動画プレイヤーが開発されていそうです
Kotlin/kotlin-wasm-examples
- Kotlin/Wasmでも動作するマルチプラットフォームプロジェクトのサンプルがあります
cashapp/molecule
- Compose Multiplatformにも対応しているため表示ロジックを分離したい場合は採用を検討できそうです
arkivanov/Decompose
- ビジネスロジックとルーティング、スタックを管理できるライブラリです
- Kotlin/Wasmには現在対応していませんが、いずれ対応されていくことが予想されます
他にも出てきた場合は余力があれば足したいと思います。
どんな環境でComposeが使えるのか
図にしてみました。
まずはKotlin Multiplatformが現在サポートしているターゲットから書き出してみたいと思います。
案外、網羅された図が探しても無かったので、間違っているところがあるかもしれません。
p.s. ありました。が、現時点だとwasmがなさそうです
■ : gettingでアクセスできます
■ : Kotlin Multiplatformプラグインが定義してくれているのでgettingでアクセスできます(Shortcut)
■ : gettingではアクセスできません。creatingでグルーピングを新規作成しています
■ : main or test をSuffixとしてキャメルケースで繋いで取得します (ex. commonMain, iosTest, etc)
注釈
- Kotlin1.8.20時点でDeprecatedになっているTargetは除外しています
-
darwinの箇所はオフィシャルにはappleと表現されています -
webの箇所はjsWasmとして実装されているところもあります
蛇足ですが、KotlinのTargetは以下に自動生成されたコードがあるので見ると便利です。DesktopのPresetは見当たりませんでした。どこからか参照できるのだとは思います👀
import org.jetbrains.kotlin.gradle.dsl.KotlinTargetContainerWithPresetFunctions
import org.jetbrains.kotlin.gradle.dsl.KotlinTargetContainerWithJsPresetFunctions
import org.jetbrains.kotlin.gradle.dsl.KotlinTargetContainerWithWasmPresetFunctions
import org.jetbrains.kotlin.gradle.dsl.KotlinTargetContainerWithNativeShortcuts
Compose Multiplatformは以下で使えます。
注釈
-
androidとそれ以外とで実装や依存関係の追加を分けたい場合が多そうなので、nonAndroidというグループを作っている実装もありました。図では割愛しています。
creatingで作成したターゲットや、Shortcutで定義されたターゲットごとにComposeの定義を加えることで、シンプルに依存関係を追加することができます。
つまり、上記のグルーピングを開発環境で作っていれば、ios、android、web、desktopといったターゲットに対して設定していくことができます。
テンプレートを使って楽々セットアップ
対応したいプラットフォームによって、テンプレートも複数用意されています。要件にあったものを選ぶと良いでしょう。
- Android, iOS, Desktop
- Android, iOS (KMM)
- Desktop
Android/iOS/Desktop/Webを網羅したサンプルは存在するのか
Kotlin Multiplatformに対応しており、対応PFも多いサンプルプロジェクトは存在しますが、Compose Multiplatformかつ対応PFが多いものはまだ少ないようです。
Kotlin/Wasmが使えるようになったことで、Kotlin/JSで動作する状態から移行していきたい時期なのかなと思います。
そのため、手前で紹介した Kotlin/kotlin-wasm-examples にある以下2つのサンプルを追っておくと良さそうです。
compose-imageviewercompose-jetsnack
JetBrains/compose-multiplatform にもWebで動作するサンプルがありますが、こちらは現在はKotlin/JSで動いています
todoapp
AndroidStudio上でiOSアプリをビルドするPlugin
- 入れるだけなのですが、たどり着くのに多少時間がかかったので、参照してみてください。
- iOSでビルドする際は、 kdoctor を使って環境のセットアップができているかを確認した上で進められると良さそうです
Compose for DesktopでUIプレビューを表示するPlugin
- こちらも同じく入れるだけです。