プロジェクトの修正

このチュートリアルではIntelliJ IDEAを使用していますが、Android Studioでも同様に進めることができます。両IDEは同じコア機能とKotlin Multiplatformのサポートを共有しています。

これは「共有ロジックとUIを持つCompose Multiplatformアプリの作成」チュートリアルの3番目のパートです。進む前に、前の手順を完了していることを確認してください。

プロジェクトを修正する

独自のアプリケーションを作成する

Kotlin Multiplatformウィザードによって生成されたコードを修正し、Appコンポーザブル内に現在の日付を表示しましょう。これを行うには、プロジェクトに新しい依存関係を追加し、UIを強化し、各プラットフォームでアプリケーションを再実行します。

新しい依存関係を追加する

プラットフォーム固有のライブラリとexpect/actual宣言を使用して日付を取得することもできます。しかし、このアプローチはKotlin Multiplatformライブラリが利用できない場合にのみ使用することをお勧めします。この場合は、kotlinx-datetimeライブラリを使用できます。

ターゲットプラットフォームで利用可能なKotlin Multiplatformライブラリは、マルチプラットフォームライブラリを発見するためのJetBrainsの実験的な検索サービスであるklibs.ioで探索できます。

kotlinx-datetimeライブラリを使用するには:

composeApp/build.gradle.ktsファイルを開き、それをプロジェクトの依存関係として追加します。
kotlin
```
kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.2")
        }
        wasmJsMain.dependencies {
            implementation(npm("@js-joda/timezone", "2.22.0"))
        }
    }
}
```
- 主な依存関係は、共通コードのソースセットを設定するセクションに追加されます。
- 簡潔にするため、バージョン番号はバージョンカタログに追加する代わりに直接含まれています。
- Webターゲットでタイムゾーンをサポートするために、必要なnpmパッケージへの参照がwasmJsMain依存関係に含まれます。
依存関係が追加されると、プロジェクトの再同期を促されます。Sync Gradle ChangesボタンをクリックしてGradleファイルを同期します。
Terminalツールウィンドウで、以下のコマンドを実行します。
shell
```
./gradlew kotlinUpgradeYarnLock
```
このGradleタスクにより、yarn.lockファイルが最新の依存関係バージョンで更新されます。

ユーザーインターフェースを強化する

composeApp/src/commonMain/kotlin/App.ktファイルを開き、現在の日付を含む文字列を返す以下の関数を追加します。

kotlin

fun todaysDate(): String {
    fun LocalDateTime.format() = toString().substringBefore('T')

    val now = Clock.System.now()
    val zone = TimeZone.currentSystemDefault()
    return now.toLocalDateTime(zone).format()
}

同じファイルで、App()コンポーザブルを修正し、この関数を呼び出して結果を表示するText()コンポーザブルを含めます。

kotlin

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        val greeting = remember { Greeting().greet() }
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Today's date is ${todaysDate()}",
                modifier = Modifier.padding(20.dp),
                fontSize = 24.sp,
                textAlign = TextAlign.Center
            )
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

IDEの提案に従って、不足している依存関係をインポートします。 todaysDate()関数の不足しているすべての依存関係をkotlin.time ではなく、kotlinx.datetimeパッケージからインポートするようにしてください。
WebアプリのコンテナとしてElementを使用するのを、外部で指定されたidを持つHTML要素を使用するように切り替えます。
1. composeApp/src/wasmJsMain/resources/index.htmlファイルで、<body>内に名前付き要素を追加します。
  html
```
<body>
<div id="composeApplication" style="width:400px; height: 600px;"></div>
</body>
```
2. composeApp/src/wasmJsMain/kotlin/main.ktファイルで、ComposeViewportの呼び出しを、HTMLファイルで指定したIDを指すStringバリアントに変更します。
  kotlin
```
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(viewportContainerId = "composeApplication") {
        App()
    }
}
```