Kotlin/Wasm と Compose Multiplatform を使ってみる
このチュートリアルでは、IntelliJ IDEA で を使用した Compose Multiplatform アプリを実行し、ウェブサイトの一部として公開するためのアーティファクトを生成する方法を解説します。
プロジェクトの作成
Kotlin Multiplatform 開発のための環境設定を行ってください。
IntelliJ IDEA で、File | New | Project を選択します。
左側のパネルで Kotlin Multiplatform を選択します。
Kotlin Multiplatform IDE プラグインを使用していない場合は、KMP web wizard を使用して同じプロジェクトを生成できます。
New Project ウィンドウで以下のフィールドを指定します。
- Name: WasmDemo
- Group: wasm.project.demo
- Artifact: wasmdemo
ウェブウィザードを使用する場合は、Project Name に「WasmDemo」、Project ID に「wasm.project.demo」を指定してください。
Web ターゲットを選択し、Share UI タブを選択します。他のオプションが選択されていないことを確認してください。
Create をクリックします。
アプリケーションの実行
プロジェクトがロードされたら、実行構成のリストから composeApp [wasmJs] を選択し、Run をクリックします。
ウェブアプリケーションがブラウザで自動的に開きます。あるいは、実行が完了した後にブラウザで以下の URL を開くこともできます。
http://localhost:8080/8080 ポートが使用できない場合があるため、ポート番号は異なる場合があります。 実際のポート番号は Gradle ビルドの出力で確認できます。
「Click me!」ボタンをクリックします。
Compose Multiplatform のロゴが表示されます。
アーティファクトの生成
ウェブサイトで公開するためのプロジェクトのアーティファクトを生成します。
View | Tool Windows | Gradle を選択して、Gradle ツールウィンドウを開きます。
wasmdemo | Tasks | kotlin browser で、wasmJsBrowserDistribution タスクを選択して実行します。
タスクを正常にロードするには、Gradle JVM として少なくとも Java 11 が必要です。また、一般的な Compose Multiplatform プロジェクトでは Java 17 以上を推奨します。
あるいは、
WasmDemoのルートディレクトリからターミナルで以下のコマンドを実行することもできます。bash./gradlew wasmJsBrowserDistribution
アプリケーションタスクが完了すると、生成されたアーティファクトを composeApp/build/dist/wasmJs/productionExecutable ディレクトリで見つけることができます。
アプリケーションの公開
生成されたアーティファクトを使用して、Kotlin/Wasm アプリケーションをデプロイします。 お好みの公開オプションを選択し、手順に従ってアーティファクトをデプロイしてください。 いくつかの選択肢を以下に示します。
サイトが作成されたら、ブラウザを開いてプラットフォームのページドメインに移動します。例：GitHub pages
おめでとうございます！アーティファクトが公開されました。
次のステップ
他の Kotlin/Wasm の例を試してみる:
Kotlin Slack の Kotlin/Wasm コミュニティに参加する:
