プラットフォームごとのデフォルトのUI動作
Compose Multiplatformは、異なるプラットフォーム間で可能な限り同様に動作するアプリの作成を支援することを目的としています。 このページでは、Compose Multiplatformを使用して異なるプラットフォーム向けの共通UIコードを記述する際に想定される、回避不可能な違いや一時的な妥協点について説明します。
プロジェクト構造
ターゲットとするプラットフォームに関わらず、それぞれに専用のエントリポイントが必要です。
- Androidの場合、それは
Activityであり、共通コードからメインのコンポーザブル（composable）を表示する役割を担います。 - iOSアプリの場合、それはアプリを初期化する
@mainクラスまたは構造体です。 - JVMアプリの場合、それはメインの共通コンポーザブルを起動するアプリケーションを開始する
main()関数です。 - Kotlin/JSまたはKotlin/Wasmアプリの場合、それはメインの共通コードのコンポーザブルをウェブページにアタッチする
main()関数です。
アプリに必要な特定のプラットフォーム固有のAPIがマルチプラットフォームに対応していない場合があり、その場合はプラットフォーム固有のソースセットでこれらのAPIの呼び出しを実装する必要があります。 その前に、利用可能なすべてのKotlin Multiplatformライブラリを網羅的にカタログ化することを目指しているJetBrainsのプロジェクトである klibs.io を確認してください。 ネットワークコード、データベース、コルーチンなど、多くのライブラリが既に利用可能です。
入力方法
ソフトウェアキーボード
各プラットフォームは、テキストフィールドがアクティブになったときのキーボードの表示方法を含め、ソフトウェアキーボードをわずかに異なる方法で処理する場合があります。
Compose Multiplatformは、Composeのウィンドウインセット（window insets）のアプローチを採用しており、セーフエリア (safe areas)を考慮するためにiOS上でもそれを模倣しています。 実装によっては、iOS上でソフトウェアキーボードの配置が少し異なる場合があります。 どちらのプラットフォームでも、キーボードが重要なUI要素を覆い隠さないように確認してください。
タッチとマウスのサポート
現在のデスクトップ実装では、すべてのポインター操作をマウスジェスチャーとして解釈するため、マルチタッチジェスチャーをサポートしていません。 例えば、一般的なピンチ・トゥ・ズーム（pinch-to-zoom）ジェスチャーは、2つのタッチを同時に処理する必要があるため、デスクトップ向けのCompose Multiplatformでは実装できません。
UIの動作と外観
プラットフォーム固有の機能
一部の一般的なUI要素はCompose Multiplatformによってカバーされておらず、フレームワークを使用してカスタマイズすることはできません。 そのため、プラットフォームごとに見た目が異なることが予想されます。
ネイティブのポップアップビューがその一例です。 Compose Multiplatformのテキストフィールドでテキストを選択すると、Copy（コピー）や Translate（翻訳）などのデフォルトの推奨アクションは、アプリが実行されているプラットフォームに固有のものになります。
スクロールの物理挙動 (Scroll physics)
AndroidとiOSでは、スクロールの感覚は各プラットフォームに合わせて調整されています。 デスクトップでは、スクロールのサポートは（タッチとマウスのサポートで述べたように）マウスホイールに限定されています。
相互運用（Interop）ビュー
共通のコンポーザブル内にネイティブビューを埋め込みたい場合、またはその逆の場合は、Compose Multiplatformがサポートするプラットフォーム固有のメカニズムに精通する必要があります。
iOSについては、SwiftUI および UIKit との相互運用コードに関する個別のガイドがあります。
デスクトップについては、Compose Multiplatformは Swingとの相互運用性 をサポートしています。
戻るジェスチャー
Androidデバイスはデフォルトで戻るジェスチャーをサポートしており、すべての画面は何らかの形で 戻る ボタンに反応します。
iOSでは、デフォルトの戻るジェスチャーはありませんが、ユーザーエクスペリエンスの期待に応えるために、開発者は同様の機能を実装することが推奨されています。 iOS向けのCompose Multiplatformは、Androidの機能を模倣するために、デフォルトで戻るジェスチャーをサポートしています。
デスクトップでは、Compose Multiplatformは Esc キーをデフォルトの戻るトリガーとして使用します。
詳細については、こちら のセクションを参照してください。
テキスト
テキストに関しては、Compose Multiplatformは異なるプラットフォーム間でのピクセル単位での完全な一致を保証しません。
- フォントを明示的に設定しない場合、各システムはテキストに異なるデフォルトフォントを割り当てます。
- 同じフォントであっても、各プラットフォーム固有の文字アンチエイリアス（aliasing）メカニズムにより、目に見える違いが生じることがあります。
これはユーザーエクスペリエンスに大きな影響を与えるものではありません。それどころか、デフォルトのフォントは各プラットフォームで期待通りに表示されます。 しかし、ピクセルの違いは、例えばスクリーンショットテストに影響を与える可能性があります。
開発者体験
プレビュー (Previews)
プレビューは、@Preview アノテーションが付けられたコンポーザブルのレイアウト表示であり、IntelliJ IDEAやAndroid Studioで共有UIコードと並んでレンダリングできます。
プレビューには、明示的な依存関係を含む特定のプロジェクト構成が必要です。 プロジェクトでプレビューを有効にする方法については、Compose UIプレビュー を参照してください。
ホットリロード (Hot reload)
ホットリロードとは、追加の入力を必要とせずに、コードの変更を即座にアプリに反映させることを指します。 Compose Multiplatformでは、ホットリロード機能はJVM（デスクトップ）ターゲットに対してのみ利用可能です。 ただし、これを使用して問題を迅速にトラブルシューティングしてから、微調整のために目的のプラットフォームに切り替えることができます。
詳細については、Composeホットリロード の記事を参照してください。
次のステップ
以下のコンポーネントに関するCompose Multiplatformの実装について詳しくはこちらをご覧ください：