アダプティブ アプリを使ってみる

現在、タブレット、折りたたみ式デバイス、Googlebook、ChromeOS デバイス、車載ディスプレイ、テレビなど、3 億台以上の Android 大画面デバイスが使用されており、今後も増え続けることが予想されます。標準的なスマートフォンだけでなく、数も種類も増えている大画面デバイスでも最適なユーザー エクスペリエンスを提供するには、アダプティブ アプリを構築します。

アダプティブ アプリとは

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

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

以前は、アプリは通常、全画面表示で実行されていました。現在、アプリはデバイスの画面サイズとは無関係に、任意のサイズのウィンドウでマルチウィンドウ モードで実行されます。ユーザーはいつでもウィンドウ サイズを変更できます。そのため、1 種類のデバイスでも、アプリはアダプティブである必要があります。

アダプティブ アプリは、あらゆる構成のあらゆるデバイスで適切に表示され、動作します。

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

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

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

Google Play

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

Google Play では、大画面向けに最適化されたアプリやゲームが、最適化されていないアプリよりも上位にランク付けされます。Google Play は、大画面アプリの品質に関するガイドラインに基づいてランキングを決定します。ランキングが上がると、マルチデバイス ユーザーがスマートフォンで大画面固有の評価やレビューを確認できるようになり、見つけやすさが向上します。

Google Play ストアの大画面の品質基準を満たしていないアプリは、アプリの詳細ページに警告が表示されます。この警告は、大画面デバイスではアプリが適切に動作しない可能性があることをユーザーに通知するものです。

アダプティブ アプリを構築して、Google Play での見つけやすさを高め、アプリをダウンロードできるデバイスの数を最大化します。

ご利用方法

計画からデプロイまで、アプリ開発のすべてのフェーズでアダプティブ デザインについて考えてください。グラフィック デザイナーにアダプティブ デザインについて説明する。アプリをアダプティブに設計することで、管理しやすく、拡張可能で、将来のフォーム ファクタやウィンドウ モードに対応できるアプリを構築できます。

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

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

android skills add adaptive

ウィンドウ サイズクラス

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

コンテンツ ペイン

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

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

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

ペインはナビゲーション可能です。コンパクトと中程度のウィンドウ サイズクラスでは、アプリは 1 つのペインを表示します。そのため、どのデスティネーションに移動しても 1 つのペインが表示されます。

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

Compose Material 3 Adaptive

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

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

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

• ListDetailPaneScaffold: リストと詳細の正規レイアウトを実装します。

  アプリのウィンドウ サイズに合わせてレイアウトを調整します。拡大幅のウィンドウ サイズクラスでは、リストとリストアイテムの詳細を並べて表示しますが、コンパクト幅と中幅のウィンドウ サイズクラスでは、リストまたは詳細のみを表示します。

• SupportingPaneScaffold: サポート ペインの正規 レイアウトを実装します。

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

Compose Material 3 Adaptive ライブラリは、アダプティブ アプリを開発するための重要な依存関係です。

構成と連続性

アダプティブ アプリは、構成の変更時に継続性を維持します。

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

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

ポスチャー

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

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

Compose Material 3 Adaptive ライブラリには、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 アプリの構築