Kotlin/WasmとCompose Multiplatformを使ってみる
Kotlin/Wasmはアルファ版です。これは予告なく変更される場合があります。
このチュートリアルでは、IntelliJ IDEAでKotlin/Wasmを使用してCompose Multiplatformアプリを実行し、GitHub pages上でサイトとして公開するためのアーティファクトを生成する方法を説明します。
始める前に
Kotlin Multiplatformウィザードを使用してプロジェクトを作成します。
New Projectタブで、プロジェクト名とIDを任意のものに変更します。このチュートリアルでは、名前を「WasmDemo」、IDを「wasm.project.demo」に設定します。
これらはプロジェクトディレクトリの名前とIDです。そのままにしておくこともできます。
Webオプションを選択します。他のオプションが選択されていないことを確認してください。
Downloadボタンをクリックし、結果として得られるアーカイブを解凍します。
プロジェクトをIntelliJ IDEAで開く
- IntelliJ IDEAの最新バージョンをダウンロードしてインストールします。
- IntelliJ IDEAのようこそ画面でOpenをクリックするか、メニューバーからFile | Openを選択します。
- 解凍した「WasmDemo」フォルダに移動し、Openをクリックします。
アプリケーションを実行する
IntelliJ IDEAで、View | Tool Windows | Gradleを選択してGradleツールウィンドウを開きます。
プロジェクトのロードが完了すると、GradleツールウィンドウでGradleタスクを見つけることができます。
タスクを正常にロードするには、Gradle JVMとしてJava 11以上が必要です。
wasmdemo | Tasks | kotlin browserで、wasmJsBrowserDevelopmentRunタスクを選択して実行します。
または、
WasmDemoのルートディレクトリからターミナルで次のコマンドを実行することもできます。bash./gradlew wasmJsBrowserDevelopmentRun -tアプリケーションが起動したら、ブラウザで次のURLを開きます。
bashhttp://localhost:8080/ポート番号は、8080ポートが利用できない場合があるため、異なることがあります。実際のポート番号はGradleビルドコンソールに表示されます。
「Click me!」ボタンが表示されます。これをクリックします。
これでCompose Multiplatformのロゴが表示されます。
アーティファクトを生成する
wasmdemo | Tasks | kotlin browserで、wasmJsBrowserDistributionタスクを選択して実行します。
または、WasmDemoのルートディレクトリからターミナルで次のコマンドを実行することもできます。
./gradlew wasmJsBrowserDistributionアプリケーションのタスクが完了すると、生成されたアーティファクトはcomposeApp/build/dist/wasmJs/productionExecutableディレクトリにあります。
GitHub pagesで公開する
productionExecutableディレクトリ内のすべてのコンテンツを、サイトを作成したいリポジトリにコピーします。サイトの作成に関するGitHubの手順に従ってください。
変更をGitHubにプッシュした後、サイトに公開されるまでに最大10分かかる場合があります。
ブラウザで、GitHub pagesのドメインに移動します。
おめでとうございます！GitHub pagesにアーティファクトが公開されました。
次のステップ
その他のKotlin/Wasmの例を試す:
Kotlin SlackでKotlin/Wasmコミュニティに参加する:
