KMP環境でCoil 3を使って画像を表示する
Kotlin Multiplatformでネットの画像を表示したい
最近Kotlin MultiplatformでBlueskyのクライアントを作り始めたのですが、ポストデータから取得した画像のURLを基にして画像を表示させる実装に大分悩んでいました。
まだα版ではありますが、Jetpack Compose環境下で使われている Coil の 3.x 系がKMPをサポートするようになりました。今のところ情報が公式ドキュメントのアップグレードガイドぐらいしか見当たらないので、記事にしてみます。
前提
KMP Wizardで作成したプロジェクトをベースにします。
今回はデスクトップ(JVM), Android, iOSで動作確認しています。Webは取り扱いません。
Compose関係
基本的に以下の二種が必要です。commonMain に追加します。
最新のバージョンを確認してください(記事執筆時は 3.0.0-alpha09 が最新でした)。
commonMain.dependencies {
// ...
implementation("io.coil-kt.coil3:coil:3.0.0-alpha09")
implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha09")
}
また、デスクトップ環境では、Coroutines main dispatcherの依存関係が要求されるため、 desktopMain に追加します。
Mavenのページで最新バージョンを確認して導入してください。
desktopMain.dependencies {
// ...
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.8.1")
}
ネットワークからの画像取得
インターネット上からの画像取得は、Coil3では coil-core から分離されたため、個別で依存関係を追加する必要があります。
Coil3は OkHttp と Ktor に対応していますが、OkHttpはAndroid/JVMでしか動かないため、今回はKtorを選択します。Ktorのクライアントは、各プラットフォームに対応するものをお好みで選んでください。
commonMain.dependencies {
// ...
implementation("io.ktor:ktor-client-core:2.3.12")
implementation("io.coil-kt.coil3:coil-network-ktor2:3.0.0-alpha09")
}
desktopMain.dependencies {
// ...
implementation("io.ktor:ktor-client-okhttp:2.3.12")
}
androidMain.dependencies {
// ...
implementation("io.ktor:ktor-client-android:2.3.12")
}
iosMain.dependencies {
// ...
implementation("io.ktor:ktor-client-darwin:2.3.12")
}
サンプルコード
AsyncImage を使ってシンプルに画像を表示させます。
composeApp/src/commonMain/kotlin/App.kt に追加してみます。
@Composable
fun App() {
MaterialTheme{
// ...
AsyncImage(
model = "(適当な画像へのURL)",
contentDescription = null
)
// ...
}
}
Androidの例
まとめ
AsyncImageでかなり簡単に画像が扱えるのでイイ感じでした。プラットフォームに依存せず完全に共通のコードにできるのも嬉しい。
ただしCoin 3.xは現状α版なので、Changelogにあるように頻繁に破壊的変更が入っており、定期的にチェックしたほうがよさそうです。
KMP環境での開発は、まだプレビュー周りがちょっと苦しい感じですが、KMPの2024年のロードマップを見る限りだと共通コードのライブプレビュー等が予定されているようです。開発を進めつつ気長に待ちたいなーという気持ちです。
参考
Discussion