Kotlin Multiplatform でのリソース共有について

Transcript

1. Kotlin Multiplatform でのリソース共有について しみず @omooooori432
2. Android iOS バックエンド 仕事 自己紹介 清水　亮介 X: @omooooori432 LINEヤフー株式会社 ヤフーショッピングの Androidアプリ開発 ＋ 副業でAndroid / iOSアプリ開発 会社 ゲーム 料理 ギター 自転車 ディズニー 趣味
3. Android / iOSのアプリのリニューアル案件をやることに。 エンジニアは１人。 Android歴の長い自分としては、KotlinでJetpack Composeで開発したい。 Kotlin Multiplatformを使うことに。
4. 今日の話す内容は Kotlin Multiplatform のリソース共有について
6. 画像ファイル 　Android：PNG, JPG, WEBP→Non Scalable、SVG→Scalable 　iOS：PNG, JPG, HEIF/HEIC, GIF→Non Scalable、PDF→Scalable 文字列 　Android：strings.xml 　iOS：Localizable.strings 他にも、色・フォントなどのリソースも。
7. libs.versions.toml [versions] agp = "8.2.0" kotlin = "2.0.0" compose-plugin = "1.6.11" [plugins] androidApplication = { id = "com.android.application", version.ref = "agp" } androidLibrary = { id = "com.android.library", version.ref = "agp" } jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" } compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" } kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
8. build.gradle.kts (composeApp) sourceSets { androidMain.dependencies { implementation(compose.preview) implementation(libs.androidx.activity.compose) } commonMain.dependencies { implementation(compose.runtime) implementation(compose.foundation) implementation(compose.material) implementation(compose.ui) implementation(compose.components.resources) implementation(compose.components.uiToolingPreview) } }
9. 使い方
10. commonAppのモジュール内に、 “composeResources”という名前のフォルダを作成 このファイル名が違うと機能しない。 “composeResource“としていて、 動作しない理由分かるのに、 小一時間かけてしまった。 あと、kotlinフォルダに入れたりして 駄目だったのもありました。
11. 画像 Image( 　painterResource( 　　Res.drawable.compose_multiplatform 　), 　null ) 文字列 Text(stringResource(Res.string.click_me)) 色 colors.xmlが使えない。colorResource(Res.color.orange500) Color.ktで定義。 internal val Orange500 = Color(0xFFF9AA33) internal val Orange700 = Color(0xFFC78522) フォント Typography.ktで定義。 @Composable fun getFontFamily(): FontFamily { val rubikFamily = FontFamily( listOf( Font(Res.font.rubik_light), Font(Res.font.rubik_medium), Font(Res.font.rubik_regular), Font(Res.font.rubik_bold) ) ) return rubikFamily }
12. 困りごと
13. Multiplatform Resourceとは関係ないですが、 Android / iOSのKMPプロジェクトで、１画面しか無いようなプロジェクトでも、 リビルドに６−１０分ほどかかる。iOSプラットフォームのコード生成に 時間がかかっているイメージ。速くなるのを期待。
14. Res.~でリソースを参照しようとすると、 @Previewが使用できない。 commonMain.dependencies { : implementation(compose.ui) implementation(compose.uiTooling)　<-- Jetpack ComposeでのPreview implementation(compose.components.resources) implementation(compose.components.uiToolingPreview)　<-- KMPでのPreview 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（いつものようにPreviewで表示確認不可） } No matching variant of org.jetbrains.compose.ui:ui-tooling:1.6.11 was found. The consumer was configured to find a library for use during 'kotlin-metadata', preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.native.target' with value 'ios_arm64', attribute 'org.jetbrains.kotlin.platform.type' with value 'native' but:- Variant 'debugApiElements-published' declares a library for use during compile-time:
15. androidMainのフォルダからはPreview表示可能。 実際の表示。 画像もClick me!の文言も出ない。 許容範囲か。
17. リソースをマルチプラットフォームで 共通で使えるのはありがたい。 SVGファイル作って貰えれば大丈夫！ デザイナさんも助かりそう。 Jetbrains紹介のKMP利用リポジトリでも ほぼ使われていそうで、今後主流に なっていきそう。 Previewの使い勝手はやや悪いが、 androidMainフォルダで見られるので 許容できる！使える！