Compose Multiplatform 1.6.0 – リソース、UI テスト、iOS アクセシビリティ、および Preview アノテーション

Ryuji Owan

Read this post in other languages:

• English
,
• 한국어
,
• 简体中文

Compose Multiplatform は開発者が UI の実装を異なるプラットフォーム間で共有できるようにする JetBrains の宣言型 UI フレームワークです。 1.6.0 リリースには複数の強力な機能が備わっており、Kotlin の最新バージョンとの互換性や Google の最新の Jetpack Compose のアップデートによる変更が反映されています。

Compose Multiplatform の基礎

このリリースの Compose Multiplatform では以下が実装されました。

• リソース管理ライブラリの改良。
• UI テスト API の導入。
• iOS アクセシビリティのサポートの追加。
• その他多数の機能と改善の追加。

すべての重要な変更の説明については、Compose Multiplatform の新機能ページか GitHub のリリースノートをご覧ください。

共通リソース API

Compose Multiplatform 1.6.0 で最も大きく期待されていた変更は、共通の Kotlin コードでリソースの共有とアクセスを行うための API の改善です。 この API を使用することで、Compose Multiplatform アプリケーションにより多くのタイプのリソースを含めてアクセスできるようになりました。

リソースは commonMain ソースセットの一部として複数のディレクトリにまとめられています。

• composeResources/drawable: 画像が含まれます。
• composeResources/font: フォントが含まれます。
• composeResources/values: 文字列が含まれます（strings.xml 形式）。
• composeResources/files: その他のファイルが含まれます。

Compose Multiplatform はこれらすべてのリソースタイプ（files ディレクトリを除く）に対し、型安全なアクセサーを生成します。 たとえば、composeResources/drawable ディレクトリにベクター画像の compose-multiplatform.xml を入れると、生成された Res オブジェクトを使って Compose Multiplatform コード内でこの画像にアクセスすることができます。

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import kotlinproject.composeapp.generated.resources.*
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource

@OptIn(ExperimentalResourceApi::class)
@Composable
fun Logo() {
    Image(
        painterResource(Res.drawable.compose_multiplatform),
        contentDescription = "CMP Logo"
    )
}

新しいリソース API でも、ロケール、画面解像度、テーマなど、同じリソースのバリエーションを異なるユースケースに対して提供することができます。 テキストのローカライズ、ダークモードのアイコンの色の変更、画像解像度に基づく代替画像の指定などの制約はディレクトリ名に修飾子を追加することで表現することができます。

リソースの修飾子の詳細や Compose Multiplatform 1.6.0 における新しいリソース API の詳しい概要については、公式ドキュメントをご覧ください！

UI テスト用の共通 API

UI テストによって、アプリケーションが意図したとおりに動作することを確認できます。 Compose Multiplatform 1.6.0 では、フレームワークがサポートする異なるプラットフォーム間でアプリケーションのユーザーインターフェースの動作を検証する Compose Multiplatform 用の共通 UI テストを記述することができる実験的 API を導入しました。

たとえば、カスタムコンポーネントが適切な接頭辞で情報文字列を正しく表示することを確認する場合があります。

@Composable
fun MyInfoComposable(info: String, modifier: Modifier) {
    Text(modifier = modifier, text = "[IFNO] $info")
}

Compose Multiplatform の最新バージョンでは、UI テストを使用して、コンポーネントがレンダリングされる際に、実際に適切な接頭辞を使用するかどうかを検証できるようになりました。 これを行うには、Android の Jetpack Compose と同様に Finder、アサーション、アクション、およびマッチャーを使用できます。 ドキュメントに記載のセットアップ手順を実行した後、接頭辞が適切に追加されることを確認するテストを記述できます。

import androidx.compose.ui.test.ExperimentalTestApi
import androidx.compose.ui.test.runComposeUiTest
...

class InformationTest {
    @OptIn(ExperimentalTestApi::class)
    @Test
    fun shouldPrefixWithInfoTag() = runComposeUiTest {
        setContent {
            MyInfoComposable("Important things!", modifier = Modifier.testTag("info"))
        }
        onNodeWithTag("info").assertTextContains("[INFO]", substring = true)
    }
}

このテストをいずれかのターゲットプラットフォームで実行すると、テスト結果が表示されます（また、この場合は、タイポの検出と修正の支援もあります！）。

iOS アクセシビリティのサポート

iOS の Compose Multiplatform では、障害を抱えたユーザーがネイティブ UI と同程度の快適さで Compose UI を操作できるようになりました。

• スクリーンリーダーと VoiceOver は Compose Multiplatform UI のコンテンツにアクセスできます。
• Compose Multiplatform UI は、ネイティブ UI と同じナビゲーションと操作のジェスチャーをサポートしています。

これは、Compose Multiplatform のセマンティックデータが自動的にアクセシビリティツリーにマッピングされるために可能となっています。 また、このデータを Accessibility Services に公開し、XCTest フレームワークによるテストに使用することもできます。

現在のアクセシビリティサポートの実装と制限についての詳細は、ドキュメントページをご覧ください。

@Preview annotation for Fleet

1.6.0 では Compose Multiplatform に共通の @Preview アノテーションが導入されました（以前は Android とデスクトップでのみ使用可能でした）。 このアノテーションは JetBrains Fleet（Fleet 1.31 以降）によってサポートされています。 @Composable 関数に @Preview を追加すると、ガターアイコンを通じてプレビューを開くことができます。

Kotlin Multiplatform ウィザードで生成されたプロジェクトで試してみましょう！

Fleet は現在、パラメーターのない @Composable 関数の @Preview アノテーションをサポートしています。 この共通アノテーションを使用するには、実験的な compose.components.uiToolingPreview ライブラリを依存関係に追加します（デスクトップと Android の場合は compose.uiTooling です）。

ポップアップ、ダイアログ、およびドロップダウンメニューのプラットフォーム別のビュー

Compose Multiplatform と SwiftUI を併用する場合、Compose を使用して特定の画面の一部のウィジェットのみをレンダリングしたい場合があります。 バージョン 1.6 以降ではこのようなシナリオで Dialog、Popup、または Dropdown コンポーザブルを作成する場合、個別のウィジェットの範囲を超えて、さらには画面全体に展開することが可能です！

これはデスクトップターゲットでも可能ですが、現時点では実験的機能です。

その他の注目すべき変更点

このリリースに含まれるその他の変更については、以下をご覧ください。

• Compose Multiplatform 1.6.0 の新機能ページでは、1.6.0 で導入された改善と機能をより詳しく説明しています。
• GitHub の Compose Multiplatform リリースノートには、マージされた 1.6.0 のプルリクエストの全リストが記載されています。

その他の記事と動画

• Compose Multiplatform の基礎 – チュートリアル

• Compose Multiplatform による iOS、Android、およびデスクトップ用アプリの構築 – 動画

オリジナル（英語）ブログ投稿記事の作者：

Sebastian Aigner

Aleksey Zamulla

Subscribe to Kotlin Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!