Compose MultiplatformでいつものQiitaビューアを作ってみた

この記事は[NTTテクノクロス Advent Calendar 2023　シリーズ1](https://qiita.com/advent-calendar/2023/ntt-tx)の2日目です。

こんにちは、NTTテクノクロスの戸部@etctaroと申します。

普段は社内でモバイルアプリ開発関連の技術支援や社内向けのノウハウ記事執筆、社内研修講師活動、社内コミュニティ活動などを行なっています。

毎年恒例のアドカレですが、今年も私はComposeで記事を一本を書きました。

今回のお題は「Compose Multiplatform」です。

★ところで、記事の前に宣伝です。

先日まで開催されていた技術書典15では当社の仲間と書籍を出しています。
今回私が執筆した本は以下の通り。

- [ゼロから始めるFlutterアプリ開発入門 2023.11版](https://techbookfest.org/product/5925951072370688)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/9afe23c2-fcfd-b07b-1dfa-dc1d195e015c.png)

ぜひお手にとっていただければと思います。

# はじめに
- Compose Multiplatformは、一言で表すと、Kotlinを使い、Jetpack Composeと同じ書式で、さまざまなプラットフォームのアプリを作ることができる仕組みです。
- Kotlinの1.9.20が2023/11にリリースされ、その中で、マルチプラットフォームの仕組みである、Kotlin Multiplatformが「Stable」と宣言されました。
- Compose Multiplatformについても環境が少しずつ整備されて、以前より実用的になりました。
- ということで、私のアドカレで恒例のQiitaビューアを作ってみることにします。

# 対象読者

- Jetpack Composeについては知っているが、Compose Multiplatformについては知らない人
- クロスプラットフォームアプリ開発を色々と模索している人
- とりあえず新しいものに触ってみたい人
- Kotlinが好きな人

# 読んで得られること
- Compose Multiplatformの現状がなんとなく理解できる。
- よくあるタイプのアプリを作ることができるようになることで、他のアプリに水平展開できる。

# とりあえずの完成品
今回はこんなアプリを作ります。(Android寄せの画面になっています。)

- リスト画面
    - FABをタップするとQiitaのAPIに対してリクエストを行いその結果として、タイトルとURLの一覧を取得する。
    - 画面にタイトルとURLを一覧表示する。
    - 一覧の各アイテムをタップすることができる。タップすると、そのURLをパラメータとして詳細画面に遷移する。
    - ついでに、アクションボタンでリストの内容を空にすることもできる。
- 詳細画面
    - リスト画面から受け取ったURLを使ってそのURLのWebページをWebViewで表示する。
    - 今回表示するのは、対応するQiitaの記事。
    - また、詳細画面からリスト画面に戻るナビゲーションボタンもAppBarに用意する。
- その他
    - AndroidとiOSに対応する。

画面イメージは以下の通りです。

- リスト画面と詳細画面の遷移

![リスト画面と詳細画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/04755cb5-e8ef-321d-92ce-f56653dff33a.png)

※画面の選択に他意はありません。内容を見て印象に残ったので選びました。

- iOSにも対応

![iOSのリスト画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/e05a2e29-78d5-a97a-1522-0d8315be95f3.png)

# 今回のサンプルコード

- サンプルコードは[こちらのリポジトリ](https://github.com/etctaro-tech/ComposeMultiplatformQiitaViewer/tree/v2023.1)にあります。
- あくまでもサンプルコードですので、エラー処理などは最低限です。ただし、比較的応用しやすいと思いますので、ぜひ参考にご利用ください。そして、あなたもComposeの世界に入りましょう。


# Compose Multiplatformのアプリ開発について

まず、アプリ開発を進めるまでの準備について記載します。
[公式の手順](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-getting-started.html)が整理されていますのでこちらもご参考に。

## 今回の想定環境（執筆時の環境）
- Android Studio Hedgehog RC2にて開発。
    - Kotlin Multiplatformプラグインは0.8.0でした。
- Kotlin 1.9.20
- Compose 1.5.x
- Android 14　の実機/エミュレータ
- iOS 16.x のシミュレータ
- Xcode 14.3.1 (直接は使わないけどインストールと初回起動が必須です。 **執筆中に更新が入って15.0.1にしたら動かなくなるという状況に・・・なんでや・・・ダウングレードして対処しました。** )

## 環境の準備
※proxyの設定など、NW環境などは整っている前提です。

- 1.Android Studio に Kotlin Multiplatform Mobileのプラグインを入れる
    - 何はなくともプラグインが必要。
    - Hedgehog以降の方が良いかもしれません。(Giraffe対応のKotlinプラグインだと1.9.20以降には未対応。)
- 2.[kdoctor をインストール(Homebrew)して実行する](https://github.com/Kotlin/kdoctor)
    - Flutterをご存知の人なら、flutter doctorと同じようなものだと思ってください。
- 3.[kdoctorの警告](https://github.com/Kotlin/kdoctor#usage)に従って対応すると自然とKotlin Multiplatformの環境が整う
    - JDK, Android Studio, Xcode, CocoaPodsなどなど


## プロジェクトの作成・初回実行

※以下の手順についても、執筆時点のものになります。テンプレートのプロジェクトなどはタイミングによって変化がある可能性があります。（ **実際に、私が執筆中にも変更が入ってそれに合わせて修正を入れました。** ）

- 1.プロジェクトウィザードを使ってプロジェクト生成、DLする。
    - 公式： https://kmp.jetbrains.com/
        - 使い方は直感的にすぐわかると思います。
        - 動作・利用するプラットフォームを選択する。（Android/iOS/Desktop/Server)
    - 非公式： https://terrakok.github.io/Compose-Multiplatform-Wizard/
        - 非公式と言ってもKotlinの中の人が主導しているので、ほぼ公式です。公式の手順に挙げられていないだけです。
        - プラットフォームの選択だけでなく、利用するライブラリも選択できるので、これも便利。
- 2.ダウンロードしたPJの雛形をAndroid Studioで読み込む。
- 3.そのまま、必要なライブラリ類のダウンロードが始まるため、しばらく待機する。
    - ※数ギガ単位のファイルを取得する。
- 4.エラーなくSyncが終わって、取り合えずアプリを実行できればOK。
    - どのプラットフォーム向けの実行でも、初回は非常に時間がかかります。

# 実装内容の検討
今回は以下の流れで実装を考えていきます。

- 1.Qiitaの記事のAPIをリクエストする処理を実装する。（アドカレでは毎回恒例）
- 2.リスト画面を実装する。
- 3.詳細画面を実装する。
- 4.二つの画面間の遷移を実装する。
- 5.時間があればもう少し工夫できる点を検討。

# 1.Qiitaの記事のAPIをリクエストする処理を実装する

- 通信のライブラリとしては JetBrains謹製の[Ktor](https://ktor.io/)のクライアント側のAPIを使うことにします。
- また、通信結果のデシリアライズでは[Kotlinx.Serialization](https://github.com/Kotlin/kotlinx.serialization)を使います。

これらのライブラリはKotlin Multiplatform対応であり、二つのライブラリを連携した実装をすることが可能です。

※なお、レスポンスがJSONの場合は実装が可能です。XMLなどの場合には自前でカスタムパーサーの実装が必要になるなど、単純にはいかないケースも出てきます。

## dependencies

KtorとSerializationを使うため、以下の通り設定を加えます。
なお、雛形を使うと、Version Catalogが適用されている状態になります。
また、ビルドスクリプトはKotlin DSLが使われます。

- gradle/libs.versions.toml
- 
    **バージョンカタログのファイルについては、この時点では一旦手を触れず。後から手を入れましょう。**

- composeApp/src/build.gradle.kts　（プラグイン部分）

```kotlin
plugins {
    alias(libs.plugins.kotlinMultiplatform)
    alias(libs.plugins.androidApplication)
    alias(libs.plugins.jetbrainsCompose)

    kotlin("plugin.serialization") version "1.9.20" // ★追加
}
```

- composeApp/src/build.gradle.kts　（ライブラリ類の部分）

★ポイントとなる部分のみ抜粋します。

```kotlin
val ktorVersion = "2.3.2"
val serializationVersion = "1.5.1"

kotlin {
    sourceSets {
        androidMain.dependencies {
            // 略
            implementation("io.ktor:ktor-client-okhttp:$ktorVersion")
        }
        commonMain.dependencies {
            // 略
            implementation("io.ktor:ktor-client-core:$ktorVersion")
            implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion")
            implementation("io.ktor:ktor-client-content-negotiation:$ktorVersion")

            implementation ("org.jetbrains.kotlinx:kotlinx-serialization-json:$serializationVersion")
        }
        iosMain.dependencies {
            implementation("io.ktor:ktor-client-darwin:$ktorVersion")
        }
```

## デシリアライズ対象のモデルクラス

各記事の情報は、このクラスのオブジェクトとして保持されます。

- commonMain/kotlin/QiitaArticle.kt

```kotlin
import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable

@Serializable
data class QiitaArticle (
    @SerialName("id")
    val id: String,

    @SerialName("title")
    val title: String,

    @SerialName("url")
    val url: String
)
```

## 通信処理の実装

さほど難しいことはしていません。Ktorの作法に則っているところです。
記事の一覧を取得するメソッドgetArticlesはsuspend関数としています。

- commonMain/kotlin/ExampleApi.kt

```kotlin
import io.ktor.client.HttpClient
import io.ktor.client.call.body
import io.ktor.client.plugins.contentnegotiation.ContentNegotiation
import io.ktor.client.request.get
import io.ktor.serialization.kotlinx.json.json
import kotlinx.serialization.json.Json

class ExampleApi {
    private val client = HttpClient() {
        install(ContentNegotiation) {
            json(Json {
                ignoreUnknownKeys = true
            })
        }
    }

    companion object {
        private const val QIITA_URI = "https://qiita.com/api/v2/items?page=1&per_page=20"
    }

    suspend fun getArticles(): List<QiitaArticle> {
        return client.get(QIITA_URI).body()
    }
}
```

## 呼び出す側の実装イメージ

```kotlin
var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }

FloatingActionButton(onClick = {
    MainScope().launch {
        val result = ExampleApi().getArticles()
        resultList = result
    }
}) {
    Icon(imageVector = Icons.Filled.Refresh, contentDescription = "Refresh")
}
```

# 2.リスト画面を実装する

## ベースとなるComposableを作成

まずは、記事の一覧（とりあえずタイトルとURL）を表示するComposeを実装してみます。
と言っても、普段のJetpack Composeの実装と大きな違いはありません。

```kotlin
@Composable
fun ListScreen() {
    var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }
    LazyColumn {
        items(resultList) {
            Column {
                Text(it.title, style = MaterialTheme.typography.body1)
                Text(it.url, style = MaterialTheme.typography.body2, modifier = Modifier.padding(start = 5.dp))
            }
            Divider()
        }
    }
}
```

さらに、Scaffoldで囲んで　FABを追加します。

```kotlin
@Composable
fun ListScreen() {
        var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }

        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Sample List") }
                )
            },
            floatingActionButton = { FloatingActionButton(onClick = {
            }) {
                Icon(imageVector = Icons.Filled.Refresh, contentDescription = "Refresh")
            } }
        ) {
            LazyColumn {
                items(resultList) {
                    Column {
                        Text(it.title, style = MaterialTheme.typography.body1)
                        Text(it.url, style = MaterialTheme.typography.body2, modifier = Modifier.padding(start = 5.dp))
                    }
                    Divider()
                }
            }
        }
}
```

## API呼び出しの追加

FABを追加したので、そこに、先ほどのAPI呼び出しを追加します。
Coroutineのスコープで実行。なお、Coroutineはdependenciesに新たに追加しなくても使うことはできます。

取得した結果は `resultList` ステートに格納します。

```kotlin
        //var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }
        // ...

            floatingActionButton = { FloatingActionButton(onClick = {
                MainScope().launch {
                    val result = ExampleApi().getArticles()
                    resultList = result
                }
            }) {
                Icon(imageVector = Icons.Filled.Refresh, contentDescription = "Refresh")
            } }
```

## クリア機能追加

ついでとして、一覧を空にするクリア機能も追加しておきます。
ボタンを追加して、タップされた際の処理として、resultListを空にするだけです。


```kotlin
        //var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }
        // ...
        
        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Sample List") },
                    actions = {
                        IconButton(onClick = {
                            resultList = listOf()
                        }) {
                            Icon(imageVector = Icons.Filled.Clear, contentDescription = "clear")
                        }
                    }
                )
            },
            // 以下略
```

## Appの更新
ここまで実施したところで、Appから先ほどのListScreenコンポーザブルを呼んでみましょう。

```kotlin
@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
    MaterialTheme {
        ListScreen()
    }
}
```

## AndroidManifestの更新

もう一つ、忘れてはならないのがAndroidのパーミッションです。

- `composeApp/androidMain/AndroidManifest.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <!--以下略-->
```

## ひと段落

さて、これで一覧画面の表示については実装できました。画面イメージは以下の通りです。

![ListScreenのイメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/c8424f6a-c847-fb2f-0fc3-b3a843da39ff.png)

# 3.詳細画面を実装する

続けて、詳細画面を実装しようと思います。
今回、URLを指定してそのページを表示しようと思うので、パラメータに記事のURLを設定できるようにします。

- DetailScreen.kt

```kotlin
@Composable
fun DetailScreen(url: String = "") {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Sample Detail") }
            )
        },
    ){
        // ここにWebViewを入れる想定
    }
}
```

さて、上に書いた通り、WebViewを使って記事を表示しようと思います。

ここで、サードパーティのライブラリを利用します。

今回は [compose-webview-multiplatform](https://github.com/KevinnZou/compose-webview-multiplatform) を利用。
- 作者ご本人の[Mediumの記事](https://medium.com/@kevinnzou/web-everywhere-introducing-our-multiplatform-compose-webview-library-f9b1264b370)
- ライブラリ名の文字通りのライブラリです。
- AndroidについてはAcommpanist(Deprecated)のWebView、iOSはWKWebView、DesktopはJavaFXのWebView(→最新バージョンはは[Kotlin CEF Browser](https://github.com/DatL4g/KCEF/tree/master)）がベースとなっています。
- かなり精力的に開発されており、この記事を書いている途中でもバージョンが更新されていました。

もっとも簡単な使い方は以下の通りです。専用のStateにURLを指定し、それをコンポーザブルのパラメータとして渡すのみ。

```kotlin
val state = rememberWebViewState("https://example.com") 
WebView(state)
```

非常にシンプルでわかりやすいですね。
実際にはローディング途中の状況を取得するなど、もう少し複雑なことも可能です。
詳しくはリポジトリを確認してみてください。

今回は単純な使い方のみをします。

まずはdependenciesに上記のライブラリのアーティファクトを追加します。
※必要な部分のみ抜粋しています。

```kotlin
kotlin {
    sourceSets {
        commonMain.dependencies {
            // ・・・略
            api("io.github.kevinnzou:compose-webview-multiplatform:1.7.0")
        }
    }
}
```

そして、このWebViewをComposableに追加します。

```kotlin
@Composable
fun DetailScreen(url: String = "") {
    val state = rememberWebViewState(url.ifEmpty { "https://google.co.jp" })
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Sample Detail") }
            )
        },
    ){
        WebView(state)
    }
}
```

# 4.二つの画面間の遷移を実装する

次に、2つの画面間の遷移について追加します。
現時点では公式のナビゲーションライブラリはありませんので、サードパーティのライブラリを使うことにします。

[Compose Multiplatformの公式](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-navigation-routing.html)でもナビゲーションに関するライブラリが紹介されています。

今回使って（or使おうとして）みたライブラリは以下の通りです。

- [PreCompose](https://github.com/Tlaster/PreCompose)
- [Voyager](https://github.com/adrielcafe/voyager)

## [PreCompose](https://github.com/Tlaster/PreCompose)
- AndroidXのNavigation API(navigation-compose)と同じ感覚で実装できる。

具体的な実装方法は以下の通りです。

- dependenciesの設定

```kotlin
val precompose_version = "1.5.7"

kotlin {
    sourceSets {
        commonMain.dependencies {
            // ・・・略
            api("moe.tlaster:precompose:$precompose_version")
        }
    }
}
```


- NavHostの実装例

```kotlin
@Composable
fun MyNavHost() {
    PreComposeApp {
        val navigator = rememberNavigator()
        NavHost( navigator = navigator, 
            navTransition = NavTransition(), 
            initialRoute = "/home") {
                scene( route = "/home",) { ListScreen(navigator)}
                scene(route = "/detail",) { backStackEntry ->               
                    backStackEntry.query<String>("url")?.let { url ->
                        DetailScreen(url)
                    }
                }
            }
    }
}

```

- 画面遷移実行部分

```kotlin
Column(modifier = Modifier.clickable {
    navigator.navigate("/detail?url=${it.url}")
    }) {
    //...
```

上記の通り、NavHostのComposableを実装してNavGraphを構成し、Navigatorを各Composableに渡し、navigateメソッドを呼ぶことで、他の画面に遷移できます。

また、各画面に渡すパラメータについても、Navigation APIと同様に実装できます。

- Appの修正

先ほどのNavHostのComposableを最初に呼ぶようにします。

```kotlin
@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
    MaterialTheme {
        MyNavHost()
    }
}
```

- JVMのターゲットを11以降にする

そのままビルドしようとすると、以下のようなエラーメッセージが出ます。

```text
e: file://hogehoge/composeApp/src/commonMain/kotlin/App.kt:28:32 Cannot inline bytecode built with JVM target 11 into bytecode that is being built with JVM target 1.8. Please specify proper '-jvm-target' option
```

メッセージに従ってJVMのターゲットを11以降にします。（今回のウィザードのプロジェクトだと初期状態は8になっています。）

- build.gradle.kts

```kotlin
kotlin {
    androidTarget {
        compilations.all {
            kotlinOptions {
                jvmTarget = "11"
            }
        }
    }
    // 略

android {
    // 略
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
}
```

- これでいけそうだ、と実装してみたものの、iOSでは画面遷移時に落ちるなどの状況になり、今回の記事執筆の中では他の方法を取ることにしました。
- Androidでは上手く動いていましたので、どのようなところが問題だったかという点は改めて確認してみようと思います。

## [Voyager](https://github.com/adrielcafe/voyager)
- Voyagerはそれぞれの画面を独自のScreenインタフェースを実装することで画面遷移を実現する。
    - 独自のと言っても、インタフェースで定義されているComposable関数を実装するだけなのでさほどの変更は入りません。
- パラメータを使う場合はNavigation APIやPreComposeより扱いやすいかも。

具体的な実装方法は以下の通りです。

- dependenciesの設定

```kotlin
val voyagerVersion = "1.0.0-rc05"

kotlin {
    sourceSets {
        commonMain.dependencies {
            // ・・・略
            implementation("cafe.adriel.voyager:voyager-navigator:$voyagerVersion") 
        }
    }
}
```

※なお、この変更と合わせてPreComposeの依存を削除し、ターゲットJVMを1.8に戻しても良いです。

- ルートの部分の実装

```kotlin
@Composable
fun App() {
    MaterialTheme {
        Navigator(ListScreen)
    }
}
```

- リスト画面の実装

上で実装したListScreenコンポーザブルから大きな変更はありません。以下がポイントです。

- ScreenインタフェースのContent関数(Composable)を実装する。
    - ここに、先ほどのListScreenの内容をそのまま書いてあげれば良い。
- 画面遷移に関する関数を提供してくれるnavigatorをContentの中で利用する。
    - ※実際の画面遷移の実装については後述。

```kotlin
object ListScreen : Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow
        var resultList by rememberSaveable { mutableStateOf(listOf<QiitaArticle>()) }

        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Sample List") },
                    actions = {
                        IconButton(onClick = {
                            resultList = listOf()
                        }) {
                            Icon(imageVector = Icons.Filled.Clear, contentDescription = "clear")
                        }
                    }
                )
            },
            floatingActionButton = { FloatingActionButton(onClick = {
                MainScope().launch {
                    val result = ExampleApi().getArticles()
                    resultList = result
                }
            }) {
                Icon(imageVector = Icons.Filled.Refresh, contentDescription = "Refresh")
            } }
        ) {
            LazyColumn {
                items(resultList) {
                    Column(modifier = Modifier.clickable {
                        // あとで追加する
                    }) {
                        Text(it.title, style = MaterialTheme.typography.body1)
                        Text(it.url, style = MaterialTheme.typography.body2, modifier = Modifier.padding(start = 5.dp))
                    }
                    Divider()
                }
            }
        }
    }
}
```

- 詳細画面の実装(パラメータが必要な場合、data classを使うと良い。)

```kotlin
data class DetailScreen(val url: String = "") : Screen {
    @Composable
    override fun Content() {
        val state = rememberWebViewState(url.ifEmpty { "https://google.co.jp" })
        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Sample Detail") }
                )
            },
        ){
            WebView(state)
        }
    }
}

```

- 画面遷移実行部分

リスト画面の各アイテムをタップした時の処理は以下のようになります。
`navigator.push` の引数に遷移先のScreenを設定すれば良いです。

```kotlin
//        val navigator = LocalNavigator.currentOrThrow
// ...
            LazyColumn {
                items(resultList) {
                    Column(modifier = Modifier.clickable {
                        navigator.push(DetailScreen(it.url)) // ★
                    }) {
                        Text(it.title, style = MaterialTheme.typography.body1)
                        Text(it.url, style = MaterialTheme.typography.body2, modifier = Modifier.padding(start = 5.dp))
                    }
                    Divider()
                }
            }
```

- 詳細画面からリスト画面への戻る遷移

詳細からリストへ戻る遷移も追加しておきます。
戻る場合はpushで積んだスタックをpopで取り除くことになるので、以下の通りです。

```kotlin
data class DetailScreen(val url: String = "") : Screen {
    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow
        val state = rememberWebViewState(url.ifEmpty { "https://google.co.jp" })

        Scaffold(
            topBar = {
                TopAppBar(title = { Text("Sample Detail") }
                    , navigationIcon = {
                        IconButton(onClick = {navigator.pop()}){ // ★
                            Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
                        }
                    }
                )
            },
        ){
            WebView(state)
        }
    }
}
```

# Version Catalogに対応
さて、最初にdepndenciesに追加して放置していましたが、Version Catalogでライブラリ類のバージョン管理をしておきましょう。

このような状況になっているかと思います。

![depndencies before](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/7b9384e6-17ba-ef68-399c-a4f02435b9a5.png)

Version Catalogの機能が導入されたての時は移行が面倒だった記憶がある人もいると思いますが、
下記の通り Alt + Enter (などのショートカット)のメニューから変換することができます。

![version catalogへ変換](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/b9cf9d1b-329a-1760-e3c9-202fce9a98a7.png)

変換後に文字列が赤くなっていたら、Syncを実施すると解消されるはずです。

![赤文字表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/f75cdfe0-af92-fef3-64f4-1b2f4906d03b.png)


- libs.versions.toml（追加したもののみ抜粋）

```toml
[versions]
composeWebviewMultiplatform = "1.6.0"
ktorVersion = "2.3.2"
serializationVersion = "1.5.1"
voyagerVersion = "1.0.0-rc05"

[libraries]
compose-webview-multiplatform = { module = "io.github.kevinnzou:compose-webview-multiplatform", version.ref = "composeWebviewMultiplatform" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "serializationVersion" }
ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktorVersion" }
ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktorVersion" }
ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktorVersion" }
ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktorVersion" }
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktorVersion" }
voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyagerVersion" }
```

- build.gradle.kts

```kotlin
kotlin {
    sourceSets {
        androidMain.dependencies {
            // ...
            implementation(libs.ktor.client.okhttp)
        }
        commonMain.dependencies {
            //...
            implementation(libs.ktor.client.core)
            implementation(libs.ktor.serialization.kotlinx.json)
            implementation(libs.ktor.client.content.negotiation)

            implementation (libs.kotlinx.serialization.json)

            // Navigator
            implementation(libs.voyager.navigator)

            // WebView
            api(libs.compose.webview.multiplatform)
            
            // ...
        }
        iosMain.dependencies {
            implementation(libs.ktor.client.darwin)
        }
```

また、プラグインだけはショートカットのメニューから変換することはできないようなので、以下の通り追記・修正します。

- libs.versions.toml

```toml
[versions]
plugin-serialization = "1.9.20"

[plugins]
serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "plugin-serialization"}
```

- build.gradle.kts

```kotlin
plugins {
    //...
    alias(libs.plugins.serialization)
}
```

あとは、build.gradle.ktsの中にバージョンの値が残っていたら削除しておきます。

# ここまでの状況

ここまでで概ね元々作りたかったものは作ることができました。

Android StudioにKotlin Multiplatformのプラグインが入っていれば、Android / iOSでの実行は通常のRun Appと同様に実行できます。

![Run on iOS](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/e27c671a-dc29-aac2-f866-6105d3beb9ad.png)


画面は概ね以下の通り。

![リスト画面と詳細画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/04755cb5-e8ef-321d-92ce-f56653dff33a.png)

# その他、工夫できる点を検討

さて、もう少しだけ触ってみましょう。
たとえば以下のような点が挙げられるかと思います。

- プラットフォームごとの表示だし分け
- Android13からの「予測型バックジェスチャー」に対応する
- ローディングの追加
- エラー処理、ログ出力
- 永続化とアーキテクチャ追加
- Android/iOSのネイティブ機能の実行
- 既存のアプリに対するMultiplatformの導入
- テーマの設定
- ・・・

とは言え、単独で記事にできそうなレベルのトピックもあるので、
ここでは軽めな内容だけ触れておきます。

続きはアドカレ後半の記事にて。

## プラットフォームごとの表示だし分け

それぞれのプラットフォームごとに画像の出しわけをしてみましょう。

今回は以下のような画像を使ってみます。
いずれも[いらすとや](https://www.irasutoya.com/)の画像を利用しています。

- [Android(ロボット画像)で利用する画像](https://www.irasutoya.com/2019/03/blog-post_84.html)

![robo_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/be1e5ba4-c66c-62fd-9118-0c51be87135e.png)


- [iOS(リンゴ画像)で利用する画像](https://www.irasutoya.com/2014/03/blog-post_2216.html)

![apple_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/d9d68e1e-f172-564f-cb08-fedce121322c.png)

### 利用する画像の配置

利用するリソース類は、commonMain/resourcesに配置することで容易に扱えます。
ウィザードで作成すると、デフォルトでComposeのロゴ画像(XML)が用意されていますが、pngなどのファイルでも扱うことができます。

以下の通りに準備しました。

![画像の配置](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/e259c543-81fb-198f-4efa-079fe7089a0b.png)

### ロジックの実装

Kotlin Multiplatformで共通で呼び出すロジックを、プラットフォームごとに異なる内容で実装する場合、
それぞれcommonMainにexpectをつけた中身のない関数を定義し、
androidMainとiosMainにactualをつけた関数を実装します。
(インタフェースを扱うのと同様です。)

今回の場合は以下の通りです。

- `commonMain/kotlin/Platform.kt`

```kotlin
expect fun imageFileName(): String
```

- `androidMain/kotlin/Platform.android.kt`

```kotlin
actual fun imageFileName(): String = "robo_icon.png"
```

- `androidMain/kotlin/Platform.ios.kt`

```kotlin
actual fun imageFileName(): String = "apple_icon.png"
```

### 画像の呼び出し

リスト画面のTopAppBarで上記の画像を呼び出すことにします。
ポイントは以下の通り。

- painterResourceを呼ぶと、resources配下の画像が扱える。
- 共通のコードとして先ほどのimageFileNameを呼び出す。
- リソースを扱う場合、現時点ではOptInのアノテーションが必要。

```kotlin
object ListScreen : Screen {

    @OptIn(ExperimentalResourceApi::class)
    @Composable
    override fun Content() {
        // ...
        Scaffold(
            topBar = {
                TopAppBar(title = {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Image(painter = painterResource(imageFileName()), contentDescription = "")
                        Text("Sample List")
                    }},
                // 以下略
```

画面イメージは以下の通りとなります。上記のソースコードの通り、縦方向の調整もしました。

![ロボアイコン追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/2521fc3b-0091-96fb-fd9b-5ecf2a8d76f4.png)

![リンゴアイコン追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/3002c651-3a30-9761-ce9e-f15500ba8342.png)

## Android13からの「予測型バックジェスチャー」に対応する
Androidの独自部分にも少しだけ触れようと思います。

Android13以降で追加された「[予測型バックジェスチャー](https://developer.android.com/guide/navigation/predictive-back-gesture?hl=ja)」は、ジェスチャーで戻る画面遷移をするときに、
戻る遷移を操作途中で止めて、キャンセルできる機能です。

以下の通り、AndroidManifestに以下の通り、enableOnBackInvokedCallbackを追加します。

```xml
<manifest xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@android:style/Theme.Material.Light.NoActionBar"
        android:enableOnBackInvokedCallback="true"
        tools:targetApi="tiramisu">
        <!--以下略-->
```

また、利用する場合、ユーザが開発者ツールで機能を有効にする必要があります。

![アニメーション有効化](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/c84125ef-08d9-722a-7e69-c4e51a35acec.png)


画面イメージは以下の通り。

![バックジェスチャーの動作](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151249/db7dfef3-ffd3-663d-6bc7-1fdf11945fed.png)

# ここまで試してみての所感
## いいところ
- Composeで実装するそのままの感覚でマルチプラットフォーム対応アプリが実装可能
- 通信・非同期処理のロジックもなど含め大体のことはKotlinで実装できる。

## まだまだなところ
- マルチプラットフォーム対応ライブラリを利用する設定がなかなか複雑
    - とはいえ、その点はそれぞれのライブラリ作者が認識しているところでもあり、READMEなどに細かく書かれていることも多いです。
- マルチプラットフォーム対応ライブラリが見つからない
    - [こちらのリポジトリ](https://github.com/AAkira/Kotlin-Multiplatform-Libraries)など参照。
- 対応していない機能・コンポーネントについては個別対応が必要
    - 前よりも少しずつ対応が増えている！
- syncなどでのライブラリ取得、ビルドなどに時間がかかる。
- PreviewやLive EditなどComposeの便利機能がまだ使えない。(Desktopなど、一部は対応しているので、今後対応が広がる可能性はあり。)
- 見た目がAndroid(MaterialUI)寄りになる。これは如何ともし難い。
- iOSでエラーが起きた時、エラーの理由がよくわからない、ということもあります。これが一番厳しいかもしれませんね。

# おわりに

ということで、今年もComposeを使った記事を書いてきました。

Kotlinで全体的に色々と対応できる点は非常に強いです。
また、以前触れた時よりもさらに対応しやすくなっていると感じています。

この話がどこまで広がるか、という点は不透明感はありますが、現時点でもかなりサクサク実装して動かせる点はなかなかです。

それでは、皆様、良いComposeライフを。


# 令和TXこそこそ噂話

シリーズ1の3日目は@Dahaさんが「ITカタカナ用語」について語ってくださるようですよ。
明日もぜひご覧ください！