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

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

アダプティブ アプリとは

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

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

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

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

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

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

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

Google Play

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

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

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

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

ご利用方法

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

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

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

ウィンドウ サイズクラス

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

コンテンツ ペイン

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

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

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

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

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

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 アプリを作成する