KMP「Kotlin Multiplatform」で困ったことまとめ
harutiroKMPのプロジェクトの作成する方法
KMPのプロジェクトを作成するときは、Intellijのプラグインに入っているテンプレートを使うと古いため、
https://kmp.jetbrains.com/ を用いて作成すると良い。
Android, iOS以外にもWebやデスクトップ、サーバーも作れる
ComposeMultiplatform
UIライブラリの部分だけは、こっちでも良いかも？
harutiroWasmを起動させる時にGradleのタスクがない時は
Wasmを起動させる時にGradleに表示されなかったら以下のURLを参考にしてGradleのタスクを全て表示されるようにしよう
harutiroiOSのデバイスを切り替えたい時は
iOSのデバイス切り替えは、Rub/Debugのコンフィグを変えて行う
harutiroKMPにおけるMaterial3の使い方
上を
implementation(compose.material)
下に変更するだけ
implementation(compose.material3)
harutiro
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
material-icons-extendedのパッケージが使えないけどどうしたらいい？
iOSが対応していないって怒られる...
Jetbrinsがデフォルトで用意をしてくれているので、それを読み込ませるようにすれば大丈夫。
以下を追加すればOK
implementation(compose.materialIconsExtended)
harutiroWasmだと日本語フォントがぶち殺される。
そのためフォントを自分で用意し直す必要がある
以下の記事を見ながらフォントを変える必要がある。
フォントはGoogleIconのフォントでも使うといいと思う
ポイントは、読み込ませたResフォルダに関しては一度ビルドを通さないとClassが再生成されないため、追加したタイミングでBuildを通してからFontの設定をしよう
harutiroテキストを選択できるようにする方法！！
超単純 SelectionContainer で選択できるようにする部分を囲めばOK！！
SelectionContainer {
Text("A ISO/IEC 20248 DAID is the same as a ISO/IEC 15459 IAC and CIN concatenated as.....")
}
harutiro[!TIP]
ただし、iOSのようなsafari系のブラウザだと何も表示されないので注意
Wasmで作成したアプリをデプロイしてみる
1. デプロイするためのファイルの作成
案外簡単にできる。
以下の手順を踏んでとりあえずデプロイするためのファイルを作る
2. Gitignoreの変更
次に、gitignoreに以下を追加して作成したファイルをgitに含めるようにする。
!*/composeApp/build/dist/wasmJs/productionExecutable/
3. cloudflarePagesでデプロイ
以下のようにデプロイするためのファイルを出力した場所に設定して、コマンドを何も書かなければ、とりあえず、手動でエクスポートして、ファイルをアップロードして、動かしてくれるシステムは完成！！
harutiroURL を用いて画面遷移をする方法
これを用いることで、URLに飛べるようになる。
val uriHandler = LocalUriHandler.current
uriHandler.openUri(websiteUri)
harutiro「Compose for Web でアドレスバーのURLとCompose Navigationのrouteを同期させてみる試み」をCloudflarePagesでやってみる
以下サイトをめっちゃ参考にしています。
CloudflarePagesにおいては_worker.jsファイルでのリライト設定を行う
jsで行うので、逆にやりやすいかもしれない。
export default {
async fetch(request, env, ctx) {
const url = new URL(request.url);
// リライトルール: `.js`以外のリクエストを`index.html`にルーティング
if (!url.pathname.match(/\.js$/)) {
url.pathname = "/index.html";
return fetch(url.toString(), request);
}
// `.js`ファイルのリクエストはそのまま返す
return fetch(request);
}
};
デプロイURL
作成したForkのレポジトリ