Beta

Kotlin/WasmとCompose Multiplatformを使い始める

このチュートリアルでは、IntelliJ IDEAでを使用してCompose Multiplatformアプリを実行し、ウェブサイトの一部として公開するためのアーティファクトを生成する方法を説明します。

プロジェクトを作成する

1. Kotlin Multiplatform開発用の環境をセットアップします。

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

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

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

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

   • Name: WasmDemo
   • Group: wasm.project.demo
   • Artifact: wasmdemo

   Webウィザードを使用する場合は、「Project Name」として「WasmDemo」、「Project ID」として「wasm.project.demo」を指定してください。

5. WebターゲットとShare UIタブを選択します。他のオプションが選択されていないことを確認してください。

6. Createをクリックします。

   

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

プロジェクトのロードが完了したら、実行構成のリストからcomposeApp [wasmJs]を選択し、Runをクリックします。

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

   http://localhost:8080/

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

「Click me!」ボタンをクリックします。

Compose Multiplatformのロゴが表示されます。

アーティファクトを生成する

ウェブサイトに公開するために、プロジェクトのアーティファクトを生成します。

1. View | Tool Windows | Gradleを選択して、Gradleツールウィンドウを開きます。

2. wasmdemo | Tasks | kotlin browserで、wasmJsBrowserDistributionタスクを選択して実行します。

   タスクを正常にロードするには、Gradle JVMとしてJava 11以上が必要です。また、Compose Multiplatformプロジェクト全般ではJava 17以上を推奨します。

   

   あるいは、WasmDemoのルートディレクトリからターミナルで次のコマンドを実行することもできます。

   ./gradlew wasmJsBrowserDistribution

アプリケーションのタスクが完了すると、生成されたアーティファクトはcomposeApp/build/dist/wasmJs/productionExecutableディレクトリにあります。

アプリケーションを公開する

生成されたアーティファクトを使用して、Kotlin/Wasmアプリケーションをデプロイします。 お好みの公開オプションを選択し、 アーティファクトをデプロイするための手順に従ってください。 いくつかの選択肢は次のとおりです。

• GitHub pages
• Cloudflare
• Apache HTTP Server

サイトが作成されたら、ブラウザを開き、プラットフォームのページドメインに移動します。例えば、GitHub pagesの場合：

おめでとうございます！アーティファクトが公開されました。

次のステップ

• Compose Multiplatformを使用してiOSとAndroid間でUIを共有する方法を学ぶ

• その他のKotlin/Wasmの例を試す：

• KotlinConfアプリケーション

• Compose画像ビューア

• Jetsnackアプリケーション

• Node.jsの例

• WASIの例

• Composeの例

• Kotlin SlackでKotlin/Wasmコミュニティに参加する：