Open10

KMP「Kotlin Multiplatform」で困ったことまとめ

harutiroharutiro

KMPのプロジェクトの作成する方法

KMPのプロジェクトを作成するときは、Intellijのプラグインに入っているテンプレートを使うと古いため、
https://kmp.jetbrains.com/ を用いて作成すると良い。

Android, iOS以外にもWebやデスクトップ、サーバーも作れる

https://kmp.jetbrains.com/

ComposeMultiplatform

UIライブラリの部分だけは、こっちでも良いかも?

https://terrakok.github.io/Compose-Multiplatform-Wizard/

harutiroharutiro

iOSのデバイスを切り替えたい時は

iOSのデバイス切り替えは、Rub/Debugのコンフィグを変えて行う

harutiroharutiro

Lock file was changed. Run the kotlinUpgradeYarnLock task to actualize lock file (yarnファイルのエラー)

yarnファイルでエラーが出た時の対応

Execution failed for task ':kotlinStoreYarnLock'.
> Lock file was changed. Run the `kotlinUpgradeYarnLock` task to actualize lock file

以下のコマンドを実行して、yarnファイルをアップデートする

 ./gradlew kotlinUpgradeYarnLock
harutiroharutiro

Wasmだと日本語フォントがぶち殺される。

そのためフォントを自分で用意し直す必要がある

以下の記事を見ながらフォントを変える必要がある。

フォントはGoogleIconのフォントでも使うといいと思う

ポイントは、読み込ませたResフォルダに関しては一度ビルドを通さないとClassが再生成されないため、追加したタイミングでBuildを通してからFontの設定をしよう

https://medium.com/@boobalaninfo/integrate-custom-fonts-in-kotlin-compose-multiplatform-bc0f30c0b7e6

harutiroharutiro

[!TIP]
ただし、iOSのようなsafari系のブラウザだと何も表示されないので注意

Wasmで作成したアプリをデプロイしてみる

1. デプロイするためのファイルの作成

案外簡単にできる。
以下の手順を踏んでとりあえずデプロイするためのファイルを作る

https://kotlinlang.org/docs/wasm-get-started.html#generate-artifacts

2. Gitignoreの変更

次に、gitignoreに以下を追加して作成したファイルをgitに含めるようにする。

!*/composeApp/build/dist/wasmJs/productionExecutable/

3. cloudflarePagesでデプロイ

以下のようにデプロイするためのファイルを出力した場所に設定して、コマンドを何も書かなければ、とりあえず、手動でエクスポートして、ファイルをアップロードして、動かしてくれるシステムは完成!!