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
- Project ID: wasm.project.demo
このチュートリアルでは、一貫性のために Project ID として
wasm.project.demoを使用します。ただし、通常はorg.exampleのような独自のグループ ID を使用することをお勧めします。ここに入力した内容は、今後のプロジェクトでデフォルトとして提案されます。Web ターゲットを選択し、Share UI タブを選択します。他のオプションが選択されていないことを確認してください。
Create をクリックします。
アプリケーションの実行
プロジェクトがロードされたら、実行構成のリストから webApp [wasmJs] を選択し、Run をクリックします。
ウェブアプリケーションがブラウザで自動的に開きます。あるいは、ビルドが完了した後にブラウザで以下の URL を手動で開くこともできます。
shellhttp://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
タスクが完了すると、生成されたアーティファクトを webApp/build/dist/wasmJs/productionExecutable ディレクトリで見つけることができます。
アプリケーションの公開
生成されたアーティファクトを使用して、Kotlin/Wasm アプリケーションをデプロイします。 お好みの公開オプションを選択し、手順に従ってアーティファクトをデプロイしてください。 いくつかの選択肢を以下に示します。
サイトが作成されたら、ブラウザを開いてプラットフォームのページドメインに移動します。例：GitHub pages
おめでとうございます！アーティファクトが公開されました。
次のステップ
他の Kotlin/Wasm の例を試してみる:
Kotlin Slack の Kotlin/Wasm コミュニティに参加する:
