このページは Cloud Translation API によって翻訳されました。

アダプティブなアプリの作成

現在、タブレット、折りたたみ式デバイス、ChromeOS デバイス、自動車用ディスプレイ、テレビなど、3 億台を超える大画面 Android デバイスが使用されており、その数は増え続けています。増加の一途をたどる多様な大画面デバイスと標準のスマートフォンで最適なユーザーエクスペリエンスを提供するには、アダプティブアプリを作成します。

アダプティブアプリとは

アダプティブアプリは、アプリのディスプレイの変化（主にアプリウィンドウのサイズ）に応じてレイアウトを変更します。ただし、アダプティブアプリは、テーブルトップやブックの形状など、折りたたみ式デバイスの形状の変化や、画面密度やフォントサイズの変化にも対応します。

アダプティブアプリは、さまざまなウィンドウサイズに応じて UI 要素を伸ばしたり縮めたりすることなく、レイアウトコンポーネントを置き換えてコンテンツを表示または非表示にします。たとえば、標準のスマートフォンではアダプティブアプリがボトムナビゲーションバーを表示し、大画面ではナビゲーションレールを表示する場合があります。大画面では、アダプティブアプリは 2 ペインのリストと詳細のレイアウトなど、より多くのコンテンツを表示します。小画面では、リストまたは詳細のいずれか、より少ないコンテンツを表示します。

図 1. アダプティブアプリは、さまざまなウィンドウサイズに合わせてレイアウトを最適化します。

急速に変化するスマートフォン中心の時代、アプリは全画面表示で動作していました。現在、アプリはデバイスの画面サイズに関係なく、任意のサイズのウィンドウでマルチウィンドウモードで実行されます。ユーザーはいつでもウィンドウサイズを変更できます。そのため、1 つのデバイスタイプであっても、アプリは適応型でなければなりません。

適応型アプリは、あらゆるデバイスで、あらゆる設定で、見栄えがよく、適切に動作します。

アダプティブ UI を構築する理由

ユーザーは、アプリがすべてのデバイスで問題なく動作し、大画面で機能が強化されることを期待しています。ユーザーはマルチウィンドウモードでマルチタスクを実行し、アプリのエクスペリエンスと生産性を高めることができます。

標準のスマートフォンでシングルタスクに制限されているアプリは、多様な可能性を持つ拡大するユーザーベースを逃しています。

Google Play

Google Play では、タブレットや折りたたみ式デバイスに固有のアプリコレクションとおすすめのアプリを提供しています。これにより、ユーザーは質の高いアプリを見つけることができます。

Play では、大画面向けに最適化されたアプリやゲームが、最適化されていないアプリよりも上位にランク付けされます。ランキングは、大画面アプリの品質に関するガイドラインに基づいています。ランキングを上げると、マルチデバイスのユーザーが大画面専用の評価やレビューを自分のスマートフォンで表示できるようになり、ユーザーの目に留まりやすくなります。

Play ストアの大画面の品質基準を満たしていないアプリには、アプリの詳細ページに警告が表示されます。この警告は、大画面デバイスでアプリのパフォーマンスが低下する可能性があることをユーザーに知らせます。

適応型アプリを作成して、Google Play での見つけやすさを広げ、アプリをダウンロードできるデバイスの数を最大化しましょう。

ご利用方法

計画からデプロイまで、アプリ開発のすべての段階でアダプティブデザインを検討します。グラフィックデザイナーに適応型デザインについて伝えます。アダプティブなアプリを設計すれば、管理と拡張が可能で、将来のフォームファクタやウィンドウモードに対応できるアプリを構築できます。

すべてのディスプレイのサイズと設定をサポートするアダプティブアプリを作成する手順は次のとおりです。

ウィンドウサイズクラスを使用してレイアウトを決定する
Compose マテリアル 3 アダプティブライブラリでビルドする
タップ以外の入力をサポートする
すべてのデバイスタイプでテストする

ウィンドウサイズクラス

アプリが全画面表示の場合でも、アプリのウィンドウのサイズはデバイスによって異なる場合があります（折りたたみ式デバイスの場合は同じデバイスでも異なる場合があります）。デバイスの向きによってアスペクト比が異なります。マルチウィンドウモードでは、アプリのウィンドウサイズ、アスペクト比、向きがデバイス画面とは異なる場合があります。

アダプティブアプリは、レイアウトをレンダリングする際にアプリウィンドウのみを考慮することで、ウィンドウサイズ、アスペクト比、向きの決定と管理の問題を簡素化し、一般化します。これはアプリウィンドウが全画面表示のときも機能します。

ウィンドウサイズクラスは、ウィンドウの幅または高さに基づいて、アプリウィンドウをコンパクト、中程度、拡大に分類します。

コンパクト、中程度、拡大の幅のウィンドウサイズクラスの描画。 — **図 3.** ディスプレイの幅に基づくウィンドウサイズクラス。

Compose マテリアル 3 適応ライブラリの currentWindowAdaptiveInfo() トップレベル関数を使用して、アプリの WindowSizeClass を計算します。この関数は、windowSizeClass を含む WindowAdaptiveInfo のインスタンスを返します。アプリは、ウィンドウサイズクラスが変更されるたびに更新を受け取ります。

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClassAdaptiveLayoutSnippets.kt

コンテンツペイン

アクティビティのレイアウトは、画面と呼ばれることもあります。たとえば、アプリにホーム画面、リスト画面、アイテムの詳細画面がある場合、この用語は、各アクティビティがデバイス画面全体に表示されることを示しています。

ただし、拡張幅のウィンドウサイズクラスをサポートできるほど大きいデバイス画面では、複数のアクティビティの画面を同時に表示できます。ペインは、個々のアクティビティのコンテンツ表示をより正確に表す用語です。

ウィンドウサイズクラスを使用すると、マテリアルデザインで指定されているように、マルチペインレイアウトに表示するコンテンツペインの数を決定できます。

デバイスの画面がペインに分割されている（コンパクトと中程度のウィンドウサイズクラスで 1 つのペイン、拡大のウィンドウサイズクラスで 2 つのペイン）。 — **図 4.** ウィンドウサイズクラスあたりのコンテンツペイン数。

パネルは移動可能です。コンパクトと中程度のウィンドウサイズクラスでは、アプリは 1 つのペインを表示します。そのため、任意のリンク先に移動すると 1 つのペインが表示されます。

拡大ウィンドウサイズクラスでは、アプリは関連するコンテンツを複数のペイン（リストと詳細のレイアウトなど）に表示できます。いずれかのペインに移動すると、2 ペインレイアウトが表示されます。ウィンドウサイズがコンパクトまたは中程度に変更された場合、適応型アプリは、ナビゲーションデスティネーション（リストまたは詳細）のペインのみを表示します。

図 5. リストペインをナビゲーションターゲットとするリストと詳細レイアウト。

図 6. 詳細ペインをナビゲーションターゲットとするリストと詳細レイアウト。

Compose マテリアル 3 アダプティブ

Jetpack Compose は、複数のレイアウトファイルの重複やメンテナンスの負担なしで、アダプティブアプリを構築するための最新の宣言型アプローチです。

Compose Material 3 アダプティブライブラリには、ウィンドウサイズクラス、ナビゲーションコンポーネント、マルチペインレイアウト、折りたたみ式デバイスの向きとヒンジの位置を管理するコンポーザブルが含まれています。次に例を示します。

NavigationSuiteScaffold: アプリのウィンドウサイズクラスとデバイスの向きに応じて、ナビゲーションバーとナビゲーションレールを自動的に切り替えます。
ListDetailPaneScaffold: リスト詳細の正規レイアウトを実装します。

レイアウトをアプリのウィンドウサイズに合わせて調整します。展開されたウィンドウサイズクラスで横並びのペインにリストアイテムのリストと詳細を表示しますが、コンパクトおよび中程度のウィンドウサイズクラスではリストまたは詳細のみを表示します。
SupportingPaneScaffold: 補助ペインの正規レイアウトを実装します。

拡大幅のウィンドウサイズクラスではメインコンテンツペインと補助ペインを表示し、コンパクト幅と中程度幅のウィンドウサイズクラスではメインコンテンツペインのみを表示します。

Compose Material 3 アダプティブライブラリは、アダプティブアプリを開発する際に必須の依存関係です。

構成と連続性

適応型アプリは、構成の変更中に継続性を維持します。

構成の変更は、アプリウィンドウのサイズ変更、折りたたみ式デバイスの形状の変更、画面の密度やフォントの変更が行われたときに発生します。

デフォルトでは、構成変更によりアプリのアクティビティが再作成され、アクティビティの状態はすべて失われます。継続性を維持するため、適応型アプリはアクティビティの onSaveInstanceState() メソッドまたは ViewModel に状態を保存します。

ポスチャー

アダプティブアプリは、折りたたみ式デバイスの形状の変化に対応します。形状には、テーブルトップとブックの形状があります。

Jetpack WindowManager の WindowInfoTracker インターフェースを使用すると、デバイスの DisplayFeature オブジェクトのリストを取得できます。ディスプレイ機能には、デバイスが完全に開いているか半開きかを示します。FoldingFeature.State

Compose マテリアル 3 適応ライブラリには、currentWindowAdaptiveInfo() トップレベル関数があります。この関数は、windowPosture を含む WindowAdaptiveInfo のインスタンスを返します。

タップ以外の入力

ユーザーは、多くの場合、外部キーボード、トラックパッド、マウス、タッチペンを大画面デバイスに接続します。周辺機器は、ユーザーの生産性、入力精度、自己表現、ユーザー補助を強化します。ほとんどの ChromeOS デバイスには、キーボードとトラックパッドが組み込まれています。

アダプティブアプリは外部入力デバイスをサポートしますが、ほとんどの処理は Android フレームワークによって行われます。

Jetpack Compose 1.7 以降: キーボードのタブナビゲーション、マウスまたはトラックパッドのクリック、選択、スクロールがデフォルトでサポートされています。
Jetpack androidx.compose.material3 ライブラリ: ユーザーがタッチペンを使用して任意の TextField コンポーネントに書き込むことができます。
キーボードショートカットヘルパー: Android プラットフォームとアプリのキーボードのショートカットをユーザーが見つけられるようにします。onProvideKeyboardShortcuts() ウィンドウコールバックをオーバーライドして、アプリのキーボードショートカットをキーボードショートカットヘルパーに公開します。

あらゆるサイズのフォームファクタを完全にサポートするため、アダプティブアプリはすべてのタイプの入力をサポートします。

アダプティブアプリをテストする方法

さまざまな画面とウィンドウサイズ、さまざまなデバイス構成をテストします。ホストサイドのスクリーンショットや Compose プレビューを使用して、アプリのレイアウトを確認します。Android Studio エミュレータと、Google データセンターでホストされているリモート Android デバイスでアプリを実行します。

大画面アプリの品質に関するガイドライン

大画面アプリの品質に関するガイドラインでは、タブレット、折りたたみ式デバイス、ChromeOS デバイスでアダプティブアプリが適切に動作するようにすることを推奨しています。ガイドラインには、クリティカルユーザージャーニーのアプリ機能を検証できるテストが含まれています。ガイドラインは主に大画面を対象としていますが、すべての画面サイズに対応しています。

複数の構成

Compose 1.7 以降の DeviceConfigurationOverride インターフェースを使用すると、デバイス構成のさまざまな要素をオーバーライドできます。この API は、テストするコンポーザブルコンテンツに応じて、ローカライズされた方法でさまざまなデバイス構成をシミュレートします。たとえば、1 つのデバイスまたはエミュレータでテストスイートを 1 回実行するだけで、複数の任意の UI サイズをテストできます。

DeviceConfigurationOverride.then() 拡張関数を使用すると、複数の構成パラメータ（フォントサイズ、ロケール、テーマ、レイアウトサイズなど）を同時にテストできます。

ホスト側のスクリーンショット

ホストサイドのスクリーンショットテストは、アプリレイアウトの視覚的な外観を迅速かつスケーラブルに検証する方法です。ホスト側のスクリーンショットを使用して、UI をさまざまな表示サイズでテストします。

詳細については、Compose プレビューのスクリーンショットテストをご覧ください。

Compose プレビュー

Compose プレビューを使用すると、Android Studio のデザインビューでアプリの UI を確認できます。プレビューでは、@PreviewScreenSizes、@PreviewFontScale、@PreviewLightDark などのアノテーションを使用して、さまざまな構成でコンポーザブルコンテンツを確認できます。プレビューを操作することもできます。

Android Studio では、ボタンやテキストフィールドの幅が広すぎるなど、プレビューで一般的なユーザビリティの問題もハイライト表示されます。

詳細については、コンポーザブルプレビューを使用して UI をプレビューするをご覧ください。

エミュレータ

Android Studio には、さまざまなレイアウトサイズをテストするためのさまざまなエミュレータが用意されています。

サイズ変更可能なエミュレータ: スマートフォン、タブレット、折りたたみ式デバイスをエミュレートし、それらのデバイスをその場で切り替えることができます。
Google Pixel Fold エミュレータ: 大画面の折りたたみ式スマートフォン Google Pixel Fold をエミュレートします。
Google Pixel Tablet エミュレータ: Google Pixel Tablet の大画面デバイスをエミュレートします。
デスクトップエミュレータ: フリーフォームウィンドウ、マウスのホバー、キーボードショートカットのテストが可能

リモートデバイスのストリーミング

Google データセンターでホストされているリモート Android デバイスに安全に接続し、最新の Google Pixel デバイスと Samsung デバイスでアプリを実行できます。アプリのインストールとデバッグ、ADB コマンドの実行、デバイスの回転や折りたたみを行うことで、アプリがさまざまな実際のデバイスで適切に動作することを確認できます。

リモートデバイスストリーミングが Android Studio に統合されています。詳細については、Firebase による Android デバイスストリーミングをご覧ください。

参考情報

I/O プレゼンテーション: アダプティブな Android アプリを作成する