プロダクト ニュース

Android デバイスを接続されたディスプレイにシームレスに拡張

所要時間: 7 分
Francesco Romano
デベロッパー リレーション エンジニア、Android

Android でモバイルとデスクトップ コンピューティングをより緊密に統合するうえで、大きなマイルストーンとなる複数ディスプレイの接続サポートが、Android 16 QPR3 のリリースで一般提供を開始しました。

Google I/O 2025 で発表されたように、複数ディスプレイの接続により、Android デバイスを外部モニターに接続して、デスクトップ ウィンドウ環境にすぐにアクセスできるようになります。アプリはフリーフォーム ウィンドウまたは最大化されたウィンドウで使用でき、ユーザーはデスクトップ OS と同じようにマルチタスクを行うことができます。

Google と Samsung は、Android 16 を搭載し、外部ディスプレイに接続された Android エコシステムのデバイスで、シームレスでパワフルなデスクトップ ウィンドウ エクスペリエンスを実現するために協力してきました。 
対応する Google Pixel と Samsung のスマートフォンを外部モニターに接続できるユーザー向けに、対応するデバイス* で一般提供が開始されました。これにより、さまざまなフォーム ファクタに対応する、より魅力的で生産性の高いアプリ エクスペリエンスを構築する新たな機会が生まれます。

仕組み

対応する Android スマートフォンまたは折りたたみ式スマートフォンを外部ディスプレイに接続すると、接続されたディスプレイで新しいデスクトップ セッションが開始されます。

接続されたディスプレイでの操作感は、デスクトップでの操作感と似ています。アクティブなアプリを表示し、アプリを固定してすばやくアクセスできるタスクバーも表示されます。ユーザーは、接続されたディスプレイ上で、サイズを自由に調整できるウィンドウで複数のアプリを同時に並べて実行できます。

materialDisplay.gif

スマートフォンが外部ディスプレイに接続され、ディスプレイでデスクトップ セッションが実行されている間、スマートフォンは独自のステータスを維持します。

デスクトップ ウィンドウをサポートするデバイス(Samsung Galaxy Tab S11 などのタブレット)を外部ディスプレイに接続すると、デスクトップ セッションが両方のディスプレイに拡張され、さらに広大なワークスペースが実現します。2 つのディスプレイは 1 つの連続したシステムとして機能し、アプリ ウィンドウ、コンテンツ、カーソルをディスプレイ間で自由に移動できます。

materialDisplay2.gif

タブレットが外部ディスプレイに接続され、デスクトップ セッションが両方のディスプレイに拡張されている。

重要な理由

Android 16 QPR3 リリースでは、接続されたディスプレイ エクスペリエンスを定義するウィンドウ動作、タスクバー操作、入力互換性(マウスとキーボード)を確定しました。また、ディスプレイを切り替える際にウィンドウをスケーリングしてアプリの再起動を回避するための互換性処理も追加しました。


アプリがアダプティブ デザインの原則に基づいて構築されている場合、自動的にデスクトップ版と同じデザインと操作性になり、ユーザーは違和感なく使用できます。アプリが縦向きに固定されている場合や、タッチ専用のインターフェースを前提としている場合は、今こそ最新化のチャンスです。

特に、接続されたディスプレイで最適なアプリ エクスペリエンスを実現するための次の重要なベスト プラクティスに注意してください。

  • Display オブジェクトが一定であると想定しない: アプリのコンテキストに関連付けられた Display オブジェクトは、アプリのウィンドウが外部ディスプレイに移動された場合や、ディスプレイの構成が変更された場合に変化する可能性があります。アプリは、構成変更イベントを適切に処理し、ディスプレイ指標をキャッシュに保存するのではなく、動的にクエリする必要があります。
  • 密度構成の変更に対応する:外部ディスプレイのピクセル密度は、プライマリ デバイスの画面と大きく異なる場合があります。レイアウトとリソースがこれらの変更に正しく適応し、UI の明瞭さとユーザビリティが維持されるようにしてください。レイアウトに密度非依存ピクセル(dp)を使用し、密度固有のリソースを提供して、UI が適切にスケーリングされるようにします。
  • 外部周辺機器を正しくサポートする: ユーザーは、外部モニターに接続する際に、デスクトップのような環境を構築することがよくあります。多くの場合、外付けキーボード、マウス、トラックパッド、ウェブカメラ、マイク、スピーカーを使用します。キーボードマウスの操作のサポートを改善します。

最新のツールでデスクトップの未来を築く

Google では、パソコン向けのエクスペリエンスの構築に役立つツールをいくつか提供しています。コア アダプティブ ライブラリの最新のアップデートを振り返ってみましょう。

新しいウィンドウ サイズクラス: 大と特大

Jetpack WindowManager 1.5.0 の最大のアップデートは、Large と Extra-large という 2 つの新しい幅のウィンドウ サイズクラスが追加されたことです。

ウィンドウ サイズクラスは、アダプティブ レイアウトの設計と開発に役立つ、独自のビューポート ブレークポイントの公式セットです。1.5.0 では、一般的なタブレットのサイズを超える画面向けにこのガイダンスを拡張しています。

新しい幅のブレークポイントは次のとおりです。

  • 大: 幅が 1200 dp から 1600 dp の場合
  • 特大: 幅が 1,600 dp 以上の場合
windowClasses.png

ディスプレイの幅に基づくさまざまなウィンドウ サイズクラス。

非常に大きなサーフェスでは、タブレットの拡張レイアウトを単に拡大するだけでは、必ずしも最適なユーザー エクスペリエンスが得られるとは限りません。たとえば、メール クライアントは、Expanded ウィンドウ サイズ クラスで 2 つのペイン(メールボックスとメッセージ)を快適に表示できます。しかし、特大のデスクトップ モニターでは、メール クライアントは 3 つまたは 4 つのペイン(メールボックス、メッセージ リスト、メッセージの全内容、カレンダー/タスク パネルなど)を同時に表示できます。

新しいウィンドウ サイズクラスをプロジェクトに含めるには、WindowSizeClass.BREAKPOINTS_V1 ではなく、WindowSizeClass.BREAKPOINTS_V2 セットから関数を呼び出すだけです。

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

アプリに少なくともそれだけのスペースがあることを確認してから、正しいレイアウトを適用します。

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Jetpack Navigation 3 でアダプティブ レイアウトを作成する

Navigation 3 は、Jetpack コレクションに追加された最新のライブラリです。Navigation 3 は、Compose と連携するように設計された強力なナビゲーション ライブラリで、最初の安定版リリースに達したばかりです。

Navigation 3 は、複数のデスティネーションを同時に表示し、レイアウトをシームレスに切り替えられるため、アダプティブ レイアウトを構築するうえでも優れたツールです。

アプリの UI フローを管理するこのシステムは、シーンに基づいています。シーンは、1 つ以上のデスティネーションを同時に表示するレイアウトです。SceneStrategy は、Scene を作成できるかどうかを判断します。SceneStrategy インスタンスを連結すると、さまざまな画面サイズとデバイス設定に対応したさまざまなシーンを作成して表示できます。

リストと詳細、サポート ペインなどの標準の正規レイアウトについては、Compose Material 3 Adaptive ライブラリの Scenes を使用できますバージョン 1.3 以降で利用可能)。

また、Scene レシピを変更するか、ゼロから始めることで、独自のカスタム Scenes を簡単に構築することもできます。たとえば、3 つのペインを横に並べて表示する Scene について考えてみましょう。

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

このシナリオでは、ウィンドウの幅が十分で、バックスタックのエントリが 3 ペイン シーンでの表示をサポートしていることを宣言している場合に 3 つのペインを表示する SceneStrategy を定義できます。

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

NavDisplay を作成する際に、ThreePaneSceneStrategy を他の戦略とともに使用できます。たとえば、3 つのペインを表示するのに十分なスペースがない場合に 2 つのペインを横並びで表示する TwoPaneStrategy を追加することもできます。

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

3 つまたは 2 つのペインを表示するのに十分なスペースがない場合、カスタム シーン戦略はどちらも null を返します。この場合、NavDisplaySinglePaneScene を使用して、バックスタックの最後のエントリをシングルペインで表示するようにフォールバックします。 

シーンと戦略を使用すると、アプリに 1 つ、2 つ、3 つのペイン レイアウトを追加できます。

adaptivepane.gif

ワイドスクリーンで 3 ペイン ナビゲーションを表示するアダプティブ アプリ。

詳しくは、Navigation 3 で Scene を使用してカスタム レイアウトを作成する方法に関するドキュメントをご覧ください。

スタンドアロンのアダプティブ レイアウト

スタンドアロン レイアウトが必要な場合は、Compose Material 3 アダプティブ ライブラリを使用すると、ウィンドウ サイズクラスやデバイスのポーズに基づいてウィンドウ構成に自動的に適応する、リストと詳細のレイアウトやサポート ペインのレイアウトなどのアダプティブ UI を作成できます。

幸いなことに、ライブラリはすでに新しいブレークポイントに対応しています。バージョン 1.2 以降、デフォルトのペイン スキャフォールディング ディレクティブ関数は、Large と Extra-large の幅のウィンドウ サイズクラスをサポートしています。

新しいブレークポイントを使用することを Gradle ビルドファイルで宣言するだけで、オプトインできます。

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

スタートガイド

最新バージョンの Android の接続ディスプレイ機能をご覧ください。サポート対象のデバイスで Android 16 QPR3 を入手し、外部モニターに接続して、今すぐアプリのテストを開始しましょう。

これらのベスト プラクティスの実装について詳しくは、マルチディスプレイのサポートウィンドウ管理に関する更新されたドキュメントをご覧ください。

フィードバック

皆様からのフィードバックは、接続されたディスプレイのデスクトップ エクスペリエンスを改善していくうえで非常に重要です。ご意見、ご要望、問題の報告は、公式のフィードバック チャネルからお送りいただけます。

Google は、ユーザーがアプリやデバイスを操作するさまざまな方法に対応できる汎用性の高いプラットフォームとして Android を提供することに尽力しています。接続されたディスプレイのサポートの改善も、その一環です。ユーザーは、皆様が構築するデスクトップ エクスペリエンスを気に入るはずです。


*注: この記事の執筆時点では、接続されたディスプレイは Google Pixel 8、Google Pixel 9、Google Pixel 10 シリーズと、Samsung S26、Samsung Fold7、Samsung Flip7、Samsung Tab S11 など、さまざまな Samsung デバイスでサポートされています。

作成者:

続きを読む