Compose Multiplatformアプリを作成する

このチュートリアルではIntelliJ IDEAを使用していますが、Android Studioでも同様に進めることができます。どちらのIDEもコア機能とKotlin Multiplatformのサポートは共通しています。

これは共有ロジックとUIを持つCompose Multiplatformアプリの作成チュートリアルの最初のパートです。

Compose Multiplatformアプリの作成
コンポーザブルコードを探索する
プロジェクトの変更

独自のアプリケーションを作成する

ここでは、IntelliJ IDEAを使って初めてのCompose Multiplatformアプリケーションを作成し、実行する方法を学びます。

Compose Multiplatform UIフレームワークを使えば、Kotlin Multiplatformのコード共有機能をアプリケーションロジックを超えて拡張できます。ユーザーインターフェースを一度実装すれば、Compose Multiplatformがサポートするすべてのプラットフォームでそれを使用できます。

このチュートリアルでは、Android、iOS、デスクトップ、およびウェブで動作するサンプルアプリケーションを構築します。ユーザーインターフェースの作成にはCompose Multiplatformフレームワークを使用し、その基本であるコンポーザブル関数、テーマ、レイアウト、イベント、モディファイアについて学びます。

このチュートリアルを進める上での注意点：

• Compose Multiplatform、Android、iOSに関する事前の経験は不要です。開始する前にKotlinの基礎に慣れておくことをお勧めします。
• このチュートリアルを完了するには、IntelliJ IDEAのみが必要です。IntelliJ IDEAを使用すると、Androidおよびデスクトップでのマルチプラットフォーム開発を試すことができます。iOSの場合、XcodeがインストールされたmacOSマシンが必要です。これはiOS開発全般の制限事項です。
• 必要に応じて、興味のある特定のプラットフォームに選択を限定し、他のプラットフォームを省略することも可能です。

プロジェクトの作成

1. クイックスタートに記載されているKotlin Multiplatform開発の環境設定の手順を完了します。

2. IntelliJ IDEAで、File | New | Projectを選択します。

3. 左側のパネルで、Kotlin Multiplatformを選択します。

   Kotlin Multiplatform IDEプラグインを使用していない場合でも、KMP Webウィザードを使用して同じプロジェクトを生成できます。

4. New Projectウィンドウで以下のフィールドを指定します。

   • Name: ComposeDemo
   • Group: compose.project
   • Artifact: demo

   Webウィザードを使用している場合は、Project Nameを「ComposeDemo」、Project IDを「compose.project.demo」と指定します。

5. Android、iOS、Desktop、Webターゲットを選択します。 iOSでShare UIオプションが選択されていることを確認してください。

6. すべてのフィールドとターゲットを指定したら、Create（Webウィザードの場合はDownload）をクリックします。

プロジェクト構造の確認

IntelliJ IDEAで「ComposeDemo」フォルダに移動します。 ウィザードでiOSを選択しなかった場合、「ios」または「apple」で始まる名前のフォルダはありません。

IntelliJ IDEAは、プロジェクト内のAndroid Gradleプラグインを最新バージョンにアップグレードすることを自動的に提案する場合があります。 しかし、Kotlin Multiplatformは最新のAGPバージョンと互換性がないため（互換性テーブルを参照）、アップグレードはお勧めしません。

このプロジェクトには2つのモジュールが含まれています。

• composeApp は、Android、デスクトップ、iOS、ウェブアプリケーション間で共有されるロジック（すべてのプラットフォームで使用するコード）を含むKotlinモジュールです。ビルドプロセスを自動化するのに役立つビルドシステムとしてGradleを使用しています。
• iosApp は、iOSアプリケーションにビルドされるXcodeプロジェクトです。共有モジュールに依存し、それをiOSフレームワークとして使用します。

composeAppモジュールは、以下のソースセットで構成されています：androidMain、commonMain、desktopMain、iosMain、wasmJsMain。 ソースセット とは、Gradleの概念で、論理的にグループ化された複数のファイルの集まりであり、各グループは独自の依存関係を持ちます。Kotlin Multiplatformでは、異なるソースセットが異なるプラットフォームをターゲットにすることができます。

commonMainソースセットは共通のKotlinコードを使用し、プラットフォームソースセットは各ターゲットに固有のKotlinコードを使用します。Kotlin/JVMはandroidMainとdesktopMainに、Kotlin/NativeはiosMainに、そしてKotlin/WasmはwasmJsMainに使用されます。

共有モジュールがAndroidライブラリにビルドされるとき、共通のKotlinコードはKotlin/JVMとして扱われます。iOSフレームワークにビルドされるとき、共通のKotlinコードはKotlin/Nativeとして扱われます。共有モジュールがWebアプリにビルドされるとき、共通のKotlinコードはKotlin/Wasmとして扱われます。

一般的に、プラットフォーム固有のソースセットで機能を重複させるのではなく、可能な限り実装を共通コードとして記述してください。

composeApp/src/commonMain/kotlinディレクトリにあるApp.ktファイルを開きます。このファイルには、最小限ながら完全なCompose Multiplatform UIを実装するApp()関数が含まれています。

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                val greeting = remember { Greeting().greet() }
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

サポートされているすべてのプラットフォームでアプリケーションを実行してみましょう。

アプリケーションの実行

アプリケーションはAndroid、iOS、デスクトップ、ウェブで実行できます。特定の順序で実行する必要はないため、最も慣れているプラットフォームから始めてください。

Gradleビルドタスクを使用する必要はありません。マルチプラットフォームアプリケーションでは、これはサポートされているすべてのターゲットのデバッグ版とリリース版をビルドします。 Multiplatformウィザードで選択されたプラットフォームによっては、時間がかかる場合があります。 実行構成を使用する方がはるかに高速です。この場合、選択されたターゲットのみがビルドされます。

Androidでアプリケーションを実行する

1. 実行構成のリストからcomposeAppを選択します。
2. Android仮想デバイスを選択し、Runをクリックします。IDEが選択された仮想デバイスの電源が入っていない場合は起動し、アプリを実行します。

別のAndroidシミュレートデバイスで実行する

Android Emulatorを設定し、別のシミュレートデバイスでアプリケーションを実行する方法を学びましょう。

実際のAndroidデバイスで実行する

ハードウェアデバイスを設定して接続し、そのデバイスでアプリケーションを実行する方法を学びましょう。

iOSでアプリケーションを実行する

初期設定の一環としてXcodeを起動していない場合は、iOSアプリを実行する前にXcodeを起動してください。

IntelliJ IDEAで、実行構成のリストからiosAppを選択し、実行構成の横にあるシミュレートデバイスを選択して、Runをクリックします。 リストに利用可能なiOS構成がない場合は、新しい実行構成を追加します。

新しいiOSシミュレートデバイスで実行する

アプリケーションをシミュレートデバイスで実行したい場合は、新しい実行構成を追加できます。

1. 実行構成のリストで、Edit Configurationsをクリックします。

2. 構成リストの上にある**+**ボタンをクリックし、Xcode Applicationを選択します。

3. 構成に名前を付けます。

4. Working directoryを選択します。そのためには、プロジェクト（例：KotlinMultiplatformSandbox）のiosAppフォルダに移動します。

5. Runをクリックして、新しいシミュレートデバイスでアプリケーションを実行します。

実際のiOSデバイスで実行する

マルチプラットフォームアプリケーションを実際のiOSデバイスで実行できます。開始する前に、Apple IDに関連付けられたTeam IDを設定する必要があります。

Team IDの設定

プロジェクトでTeam IDを設定するには、IntelliJ IDEAでKDoctorツールを使用するか、Xcodeでチームを選択することができます。

KDoctorの場合：

1. IntelliJ IDEAで、ターミナルで以下のコマンドを実行します。

kdoctor --team-ids

KDoctorは、現在システムに設定されているすべてのTeam IDをリストします。例：

3ABC246XYZ (Max Sample)
ZABCW6SXYZ (SampleTech Inc.)

2. IntelliJ IDEAで、iosApp/Configuration/Config.xcconfigを開き、Team IDを指定します。

あるいは、Xcodeでチームを選択する方法：

1. Xcodeを起動し、Open a project or fileを選択します。
2. プロジェクトのiosApp/iosApp.xcworkspaceファイルに移動します。
3. 左側のメニューでiosAppを選択します。
4. Signing & Capabilitiesに移動します。
5. Teamリストで、自分のチームを選択します。

まだチームを設定していない場合は、TeamリストのAdd an Accountオプションを使用して、Xcodeの指示に従ってください。

6. Bundle Identifierがユニークであり、Signing Certificateが正常に割り当てられていることを確認してください。

アプリケーションの実行

iPhoneをケーブルで接続します。Xcodeにデバイスがすでに登録されている場合、IntelliJ IDEAはそれを実行構成のリストに表示します。対応するiosApp構成を実行してください。

まだiPhoneをXcodeに登録していない場合は、Appleの推奨事項に従ってください。 手短に言えば、以下の手順を実行する必要があります。

1. iPhoneをケーブルで接続します。
2. iPhoneで、設定 | プライバシーとセキュリティから開発者モードを有効にします。
3. Xcodeで、上部メニューからWindow | Devices and Simulatorsを選択します。
4. プラス記号をクリックします。接続されているiPhoneを選択し、Addをクリックします。
5. Apple IDでサインインして、デバイスでの開発機能を有効にします。
6. 画面の指示に従ってペアリングプロセスを完了します。

XcodeでiPhoneを登録したら、IntelliJ IDEAで新しい実行構成を作成し、Execution targetリストでデバイスを選択します。対応するiosApp構成を実行します。

デスクトップでアプリケーションを実行する

実行構成のリストから**composeApp [desktop]**を選択し、Runをクリックします。デフォルトでは、実行構成はデスクトップアプリを独自のOSウィンドウで起動します。

ウェブアプリケーションを実行する

実行構成のリストから**composeApp [wasmJs]**を選択し、Runをクリックします。

ウェブアプリケーションはブラウザで自動的に開きます。あるいは、実行が完了したらブラウザに以下のURLを入力することもできます。

   http://localhost:8080/

ポート番号は、8080番ポートが利用できない場合があるため、異なる場合があります。 実際のポート番号はGradleビルドコンソールで確認できます。

次のステップ

チュートリアルの次のパートでは、コンポーザブル関数の実装方法と、各プラットフォームでアプリケーションを起動する方法を学びます。

次のパートに進む

ヘルプ

• Kotlin Slack。招待状を入手し、#multiplatformチャンネルに参加してください。
• Kotlin課題トラッカー。新しい課題を報告してください。