Kotlin/WasmとCompose Multiplatformを始める

NOTE

Kotlin/Wasmはアルファ版です。いつでも変更される可能性があります。

Kotlin/Wasmコミュニティに参加しましょう。

このチュートリアルでは、IntelliJ IDEAでKotlin/Wasmを使ってCompose Multiplatformアプリケーションを実行し、生成された成果物をGitHub Pagesサイトとして公開する方法を説明します。

始める前に

Kotlin Multiplatformウィザードを使用してプロジェクトを作成します。

1. Kotlin Multiplatformウィザードを開きます。

2. New Projectタブで、プロジェクト名とIDを任意のものに変更します。このチュートリアルでは、名前を「WasmDemo」、IDを「wasm.project.demo」と設定します。

   TIP

   これらはプロジェクトディレクトリの名前とIDです。そのままにすることもできます。

3. Webオプションを選択します。他のオプションが選択されていないことを確認してください。

4. Downloadボタンをクリックし、生成されたアーカイブを展開します。

   

IntelliJ IDEAでプロジェクトを開く

1. IntelliJ IDEAの最新版をダウンロードしてインストールします。
2. IntelliJ IDEAのようこそ画面で、Openをクリックするか、メニューバーでFile | Openを選択します。
3. 展開した「WasmDemo」フォルダに移動し、Openをクリックします。

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

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

   プロジェクトが読み込まれると、GradleツールウィンドウでGradleタスクを見つけることができます。

   NOTE

   タスクを正常に読み込むには、Gradle JVMとしてJava 11以上が必要です。

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

   

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

   ./gradlew wasmJsBrowserDevelopmentRun -t

3. アプリケーションが起動したら、ブラウザで以下のURLを開きます。

   http://localhost:8080/

   TIP

   8080ポートが使用できない場合があるため、ポート番号は異なる場合があります。実際のポート番号は、Gradleビルドコンソールに出力されます。

   「Click me!」ボタンが表示されます。それをクリックします。

   

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

   

成果物を生成する

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

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

./gradlew wasmJsBrowserDistribution

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

GitHub Pagesに公開する

1. productionExecutableディレクトリ内のすべてのコンテンツを、サイトを作成したいリポジトリにコピーします。

2. サイトの作成に関するGitHubの指示に従ってください。

   NOTE

   変更をGitHubにプッシュした後、サイトへの変更が公開されるまでに最大10分かかる場合があります。

3. ブラウザで、GitHub Pagesのドメインにアクセスします。

   

おめでとうございます！成果物をGitHub Pagesに公開できました。

次のステップ

Kotlin SlackのKotlin/Wasmコミュニティに参加しましょう。

その他のKotlin/Wasmの例を試してみてください。

• Composeイメージビューア
• Jetsnackアプリケーション
• Node.jsの例
• WASIの例
• Composeの例