【Kotlin】Compose を使ってWebアプリケーションを作ってみる

2024-12-06Advent Calendar 2024, Jetpack Compose, Kotlin, Kotlin Multiplatform, wasm

この記事はレコチョク Advent Calendar 2024 の6日目の記事となります。
記事が公開される頃にはElectric Callboyの豊洲PITでのライブの余韻に浸っているAndroidアプリエンジニアの杉山です。
メタルコアバンドですがMVが印象的なのでよかったら見てみてください。

Electric Callboy – WE GOT THE MOVES (OFFICIAL VIDEO)

私達のチームでは、朝にリモート会議で雑談などのコミュニケーションを取る時間を設けています。しかし、現在会話のネタが思いつかず無言の時間が発生してしまう課題があります。
その解決策として、「お題を提案するルーレット的なものがあるといいのでは？」という意見が上がりました。リモート会議で使うことを考えると、PC上で動かせるWebアプリでそれが実現できると良いと考えました。
また、どうせなら普段扱っている言語であるKotlinで作ってみたいと思い、調べたところKotlinで、かつ現在主流になってきているJetpack Composeを使ってWebアプリを作れることを知り試してみることにしました。
課題解決のアプリは現在開発中であるので、今回は「Composeを使ってWebアプリを作る導入から開発スタートできる」ところまでの記事となります。

開発環境、使用技術

ComposeでWebアプリを作るにあたって今回はKotlin/Wasmを使いました。Kotlin/Wasmはブラウザでプログラムを高速実行するための、「ブラウザ上で動くバイナリコードの新しいフォーマット(仕様)」であるWasm（WebAssembly）をKotlinでコンパイル・ターゲットにできるようにしたものになります。(現在はアルファ版なので、本記事時点とは内容が異なる場合があります。)Kotlin/Wasmを利用するにあたって、Kotlinで異なるプラットフォーム間でコードを共有できるKotlin Multiplatform(KMP)が対応していたので、こちらも利用しました。
また今回の開発環境は以下になります。

MacOS 14.5(sonoma)
AndroidStudio Ladybug | 2024.2.1 Patch 1
Google Chrome 131.0.6778.86

プロジェクト作成

Webアプリ用のプロジェクトを作成するために、Kotlin Multiplatform Wizardを使用しました。

Kotlin Multiplatform WizardのNew Project ページを開く
ProjectNameとProject IDを設定する
Web のチェックボックスにチェックを入れる

今回は以下の画像のように設定をしました。

下部のDOWNLOADボタンを押すとzipファイルがダウンロードされます。解凍するとAndroid Studioで開くことのできるプロジェクト構成ファイルが一式入っています。実際に開いてみると以下のようなファイル構成になっていました。

この状態で、実行に必要なファイルは用意されているので ./gradlew wasmJsBrowserRun -t を実行すると http://localhost:8080/ のローカルホストでアクセスできるようになり、以下の画面がGoogle Chromeで表示されると思います。

この状態になれば開発が可能になります。

開発するにあたって注意点

開発をしていく中で注意するべき点が2点あったので記載しておきます。

日本語がデフォルトだと使えない

プロジェクト作成直後の状態では、テキストに日本語を表示しようとすると文字化けしてしまうようです。
試しに、「こんにちはこんばんわ」と表示しようとしたところ、以下の画像のように文字化けしている状態(とうふ状態)になりました。そのため自身でフォントを入れる必要があります。

今回はGoogleFontsからNotoSansJPをダウンロードして利用しています。

commonMainのcomposeResource配下にfontディレクトリを作成します。
作成後、以下のようにフォントを指定することで日本語を設定できます。

val notoSansJP = FontFamily(Font(Res.font.NotoSansJP_Black))

Text("こんにちはこんばんわ",

style = TextStyle(

fontFamily = notoSansJP, // フォントを指定

)

指定後は以下のように日本語が表示できるようになります。

javaのコードの呼び出しができない

これはKMPの仕様上の問題になりますが、一部javaのクラスの関数が使用できません。
自分が今回 Math.toRadians()を使おうとしましたが、importすることができませんでした。
必要に応じて自分で実装する必要があります。 kotlin.mathは使うことができるので、自分で実装して使いました。