この記事の目的
この記事では、Compose Multiplatformを始められる環境を整えることを目的にしています。
仕組み的なお話や、どうやって実現されているのか、という話は一旦置いておいて、Compose Multiplatform が何者なのかを理解して、環境を準備して触り始められるまでをゴールとしたいと思います。
Compose Multiplatform とは
端的にいえば、「iOS, Android, Desktopアプリ開発で共通的に使えるKotlinによる宣言的UIフレームワーク」です。
あくまでUIフレームワークなので、Compose Multiplatform だけではロジックの共通化まではできません。ロジックの共通化に関しては Kotlin Multiplatform（KMP）、Kotlin Multiplatform Mobile（KMM）の責務になってきます。
KMPやKMMの解説については、こちらの記事の説明が分かりやすかったのでぜひ見てみてください。
これまで、技術選定としてKMMやKMPを検討する上で一番のネックだったことが、UIは各プラットフォームで別々に実装しないといけない、という点でした。
https://kotlinlang.org/lp/multiplatform/
すでに各プラットフォームで開発がある程度進んでいる状況で、保守が大変なので一部分だけでもコードを共通化したい、というようなケースではKMMやKMPは有力な候補です。
しかし、新規に立ち上げる少人数なプロジェクトで「ロジックはKotlin、UIはネイティブ」というのはリソース的にかなり辛く、私の場合は最終的に Electron や React Native、Flutter などを選定するケースが多かったです。
Compose Multiplatform がUI層の共通化を担ってくれることで、アプリケーションの全てのコードを Kotlin 化できる、というのが最大のうまみです。
この度、Compose Multiplatform for iOS が Experimental から Alpha になったということもあり、マルチプラットフォームなアプリを開発する際、（Android/Kotlin開発経験者が多ければ）有用なフレームワークになりうると思ったので、とにかく触ってみることにします。
セットアップ
手元の環境は下記。Android、iOSの開発環境が整備されていることを前提としています。
- macOS Ventura 13.3.1
- Android Studio Flamingo 2022.2.1 Patch 2
- Xcode 14.3
Compose Multiplatform を試すには、JetBrainsが用意してくれているGitHubリポジトリのテンプレートを利用するのが一番手っ取り早いと思います。
2023/06/01時点では、下記4種類のテンプレートが用意されていました。
-
https://github.com/JetBrains/compose-multiplatform-template
- Desktop + iOS + Android のテンプレート
-
https://github.com/JetBrains/compose-multiplatform-ios-android-template
- iOS + Android のテンプレート
-
https://github.com/JetBrains/compose-multiplatform-html-library-template
- Web のテンプレート
-
https://github.com/JetBrains/compose-multiplatform-desktop-template
- Desktop のテンプレート
今回は Desktop + iOS + Android のテンプレート を選択しました。
テンプレートのREADMEにも記載があるのですが、次はKDoctorというツールを使って開発環境のチェックを行います。
$ brew install kdoctor
$ kdoctor
kdoctorを実行すると、下記のようにKMMの開発環境が整っている旨のメッセージが表示されました。不足している設定があればここで表示されるとのこと。
Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[✓] Cocoapods
Conclusion:
✓ Your system is ready for Kotlin Multiplatform Mobile Development!
ここまででセットアップは完了です。
触ってみる
テンプレートから作成した自分のリポジトリをクローンし、Android Studio で開きます。
すると、自分の環境だとこんなエラーが発生しました。
A problem occurred configuring root project 'MyApplication'.
> Could not resolve all files for configuration ':classpath'.
> Could not resolve com.android.tools.build:gradle:7.4.2.
このエラーは Gradle JDK をバージョン17に変更して再度 Sync Gradle で解消できました。今回 Android Studio を新しくインストールされた方なら発生しなさそうです。
※似たような轍を踏んでいたのですぐ気づけました。Gradle JDK の変更方法が分からない方はそちらの轍をご参照ください。
まずは各プラットフォームで実行してみます。
とはいえ、Android/Desktop 用にはすでにConfigurationが構成されていて、Configurationを選択するだけで実行できました。
iOSでの実行には少し追加設定が必要です。
Android Studio > Settings... > Plugins で Marketplace から Kotlin Multiplatform Mobile を検索してインストール。その後、Android Studio の再起動を促されます。
すると、Configurations に iosApp が追加されます。Simulatorの機種を変えたい場合、実機で実行したい場合などはテンプレートのREADMEを参照してください。
ここまででAndroid, iOS, Desktop アプリのビルドができるようになってるはずです！
コードを見てみると、shared/下の各プラットフォームのxxxMain/kotlin/main.xxx.ktで、App()という関数を呼び出しています。
import androidx.compose.runtime.Composable
actual fun getPlatformName(): String = "Android"
@Composable fun MainView() = App()
import androidx.compose.ui.window.ComposeUIViewController
actual fun getPlatformName(): String = "iOS"
fun MainViewController() = ComposeUIViewController { App() }
import androidx.compose.runtime.Composable
actual fun getPlatformName(): String = "Desktop"
@Composable fun MainView() = App()
App()の実体はshared/src/commonMainにありました。ここを編集すれば全てのプラットフォームに反映されます。
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource
@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
MaterialTheme {
var greetingText by remember { mutableStateOf("Hello, World!") }
var showImage by remember { mutableStateOf(false) }
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = {
greetingText = "Hello, ${getPlatformName()}"
showImage = !showImage
}) {
Text(greetingText)
}
AnimatedVisibility(showImage) {
Image(
painterResource("compose-multiplatform.xml"),
null
)
}
}
}
}
expect fun getPlatformName(): String
Next step...
公式リポジトリに、サンプルがたくさん用意されています。
次回は、サンプルを参考にしながら簡単なアプリケーションを作れたらいいなと思っています。
Q&A
社内でこの記事の内容を紹介した際に、いくつか質問が挙がったのでこの章で補足します。
Q1. Desktop + iOS + Android + Web 全部入りのテンプレートはないの？
A1. 現時点ではありません。
今のところ、Webとそれ以外のプラットフォームでのUIコンポーネントの仕組みが大きく異なるようで、Webとその他のプラットフォームをまとめたい！というケースには対応できないのかな、と推測しています。
Web単体のテンプレートを見てみて頂けるとわかるのですが、Divというコンポーネントが利用されています。
// import文等省略
@Composable
fun Body() {
var counter by remember { mutableStateOf(0) }
Div {
Text("Clicked: ${counter}")
}
Button(
attrs = {
onClick { _ ->
counter++
}
}
) {
Text("Click")
}
}
ただ、鋭意開発中のフレームワークですので、今後Webのコードも共通化できる可能性は大いにあると思います！お祈りして待ちましょう。
Q2. Hot reload / Hot reflesh はできる？
A2. 現時点ではできなさそうです。
これはテンプレートのREADMEに記載がありました。今のところ、変更を反映させるためには Re-run する必要があるようです。
2.Update the shared code by adding a text field that will update the name displayed on the button:
3.Re-run the desktopApp, androidApp, and iosApp configurations. You'll see this change reflected in all three apps:
こっちは JetBrains が対応してくれなくても、世界のどこかの天才デベロッパーがプラグイン的なものを作ってくれないかな...と期待しています。
参考にさせていただいたサイト