現在、タブレット、折りたたみ式デバイス、ChromeOS デバイス、車載ディスプレイ、テレビなど、3 億台を超える Android 大画面デバイスが使用されており、その数は増え続けています。増加し多様化する大画面デバイスと標準的なスマートフォンで最適なユーザー エクスペリエンスを提供するには、アダプティブ アプリをビルドします。
アダプティブ アプリとは
アダプティブ アプリは、アプリの表示（主にアプリ ウィンドウのサイズ）の変化に応じてレイアウトを変更します。また、折りたたみ式デバイスの形状の変化（テーブルトップ形状やブック形状など）、画面密度やフォントサイズの変更にも対応します。
アダプティブ アプリは、ウィンドウ サイズに応じて UI 要素を拡大縮小するだけでなく、レイアウト コンポーネントを置き換えたり、コンテンツを表示または非表示にしたりします。 たとえば、標準的なスマートフォンでは、アダプティブ アプリはボトム ナビゲーション バーを表示しますが、大画面ではナビゲーション レールを表示します。大画面では、アダプティブ アプリは 2 ペインのリストと詳細のレイアウトなど、より多くのコンテンツを表示します。小画面では、リストまたは詳細のいずれかを表示します。
以前は、アプリは通常全画面表示で実行されていました。現在、アプリはデバイスの画面サイズとは無関係に、任意のサイズのウィンドウでマルチウィンドウ モードで実行されます。ユーザーはウィンドウ サイズをいつでも変更できます。そのため、単一のデバイスタイプでも、アプリはアダプティブである必要があります。
アダプティブ アプリは、あらゆる構成のあらゆるデバイスで美しく表示され、適切に動作します。
アダプティブ UI をビルドする理由
ユーザーは、アプリがすべてのデバイスで問題なく動作し、大画面で機能が強化されることを期待しています。ユーザーは、マルチウィンドウ モードでマルチタスクを行うことで、アプリ エクスペリエンスを向上させ、生産性を高めます。
標準的なスマートフォンでのシングルタスクに限定されたアプリは、多様な可能性を秘めたユーザーベースの拡大の機会を逃しています。
Google Play
Google Play では、タブレットと折りたたみ式デバイスに特化したアプリのコレクションとおすすめが表示されるため、ユーザーは質の高いアプリを見つけることができます。
Google Play では、大画面向けに最適化されたアプリやゲームは、最適化されていないアプリよりも上位にランク付けされます。Google Play は、大画面アプリの品質に関するガイドラインに基づいてランキングを決定します。 ランキングが上がると、複数のデバイスを使用するユーザーがスマートフォンで大画面に特化した評価やレビューを確認できるようになるため、見つけやすくなります。
Google Play ストアの大画面の品質基準を満たしていないアプリは、アプリの詳細ページに警告が表示されます。この警告は、大画面デバイスでアプリが正常に動作しない可能性があることをユーザーに知らせます。
アダプティブ アプリをビルドして Google Play での見つけやすさを高め、アプリをダウンロードできるデバイスの数を最大限に増やしましょう。
ご利用方法
計画からデプロイまで、アプリ開発のすべての段階でアダプティブ デザインを検討します。グラフィック デザイナーにアダプティブ デザインについて説明します。アプリをアダプティブに設計することで、管理しやすく、拡張可能で、将来のフォーム ファクタやウィンドウ モードに対応できるアプリをビルドできます。
すべてのディスプレイ サイズと構成をサポートするアダプティブ アプリを作成するには、次の操作を行います。
- ウィンドウ サイズクラスを使用してレイアウトを決定する
- Compose マテリアル 3 アダプティブ ライブラリを使用してビルドする
- タップ以外の入力もサポートする
- すべてのデバイスタイプでテストする
ウィンドウ サイズクラス
アプリが全画面表示の場合でも、アプリ ウィンドウのサイズはデバイスによって異なる場合があります。折りたたみ式デバイスの場合は、同じデバイスでも異なる場合があります。 デバイスの向きが異なると、アスペクト比も異なります。マルチウィンドウ モードでは、アプリ ウィンドウのサイズ、アスペクト比、向きがデバイスの画面と異なる場合があります。
アダプティブ アプリは、レイアウトのレンダリング時にアプリ ウィンドウのみを考慮することで、ウィンドウ サイズ、アスペクト比、画面の向きの決定と管理の問題を簡素化し、一般化します。これは、アプリ ウィンドウが全画面表示の場合にも機能します。
ウィンドウ サイズクラスは、ウィンドウの幅または高さに基づいて、アプリ ウィンドウをコンパクト、中程度、または 拡大に分類します。
Compose マテリアル 3 アダプティブ ライブラリの Compose
Material 3 Adaptive library の
currentWindowAdaptiveInfo() 最上位関数を使用して、アプリの WindowSizeClass を計算します。この関数は、
WindowAdaptiveInfo を含む windowSizeClass のインスタンスを返します。ウィンドウ サイズクラスが変更されると、アプリは更新を受け取ります。
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
コンテンツ ペイン
アクティビティのレイアウトは、画面と呼ばれることもあります。 たとえば、アプリにホーム画面、リスト画面、アイテムの詳細画面があるとします。この用語は、各アクティビティがデバイスの画面全体を占めることを意味します。
ただし、拡大幅のウィンドウ サイズクラスをサポートするのに十分な大きさのデバイス画面では、複数のアクティビティ画面を同時に画面に表示できます。 個々のアクティビティのコンテンツ表示には、ペインという用語がより正確です。
ウィンドウ サイズクラスを使用すると、 マルチペイン レイアウトに表示するコンテンツ ペインの数を、マテリアル デザインで指定されているように決定できます。
ペインは移動可能です。コンパクトと中程度のウィンドウ サイズクラスでは、アプリは 1 つのペインを表示します。そのため、任意のデスティネーションに移動すると、1 つのペインが表示されます。
拡大幅のウィンドウ サイズクラスでは、アプリはリストと詳細のレイアウトなど、複数のペインに関連コンテンツを表示できます。どちらのペインに移動しても、2 ペインのレイアウトが表示されます。ウィンドウ サイズがコンパクトまたは中程度に変更された場合、アダプティブ アプリは、リストまたは詳細のいずれかのナビゲーション デスティネーションである 1 つのペインのみを表示します。
|
|
|
Compose マテリアル 3 アダプティブ
Jetpack Compose は、複数のレイアウト ファイルの重複やメンテナンスの負担を伴わずにアダプティブ アプリをビルドできる、最新の宣言型アプローチです。
Compose マテリアル 3 アダプティブ ライブラリには、 ウィンドウ サイズクラス、ナビゲーション コンポーネント、マルチペイン レイアウト、 折りたたみ式デバイスの形状とヒンジの位置などを管理するコンポーザブルが含まれています。
NavigationSuiteScaffold: アプリ ウィンドウのサイズクラスとデバイスの形状に応じて、ナビゲーション バーとナビゲーション レールを自動的に切り替えます。ListDetailPaneScaffold: リストと詳細の標準 レイアウトを実装します。レイアウトをアプリ ウィンドウのサイズに合わせます。拡大幅のウィンドウ サイズクラスでは、リストとリストアイテムの詳細を並べて表示しますが、コンパクトと中程度のウィンドウ サイズクラスでは、リストまたは詳細のみを表示します。
SupportingPaneScaffold: 補助ペインの標準 レイアウトを実装します。拡大幅のウィンドウ サイズクラスでは、メイン コンテンツ ペインと補助ペインを表示しますが、コンパクトと中程度のウィンドウ サイズクラスでは、メイン コンテンツ ペインのみを表示します。
Compose マテリアル 3 アダプティブ ライブラリは、アダプティブ アプリを開発するための重要な依存関係です。
構成と連続性
アダプティブ アプリは、構成の変更中も連続性を維持します。
構成の変更は、アプリ ウィンドウのサイズが変更されたとき、折りたたみ式デバイスの形状が変更されたとき、画面密度やフォントが変更されたときに発生します。
デフォルトでは、構成の変更によりアプリ アクティビティが再作成され、すべてのアクティビティの状態が失われます。連続性を維持するため、アダプティブ アプリは
アクティビティの onSaveInstanceState() メソッドまたは ViewModel に状態を保存します。
ポスチャー
アダプティブ アプリは、折りたたみ式デバイスの形状の変化に対応します。形状には、テーブルトップ形状やブック形状などがあります。
Jetpack WindowManager の WindowInfoTracker インターフェースを使用すると、デバイスの DisplayFeature オブジェクトのリストを
取得できます。ディスプレイ機能には、デバイスが完全に開いているか半開きかを示す FoldingFeature.State があります。
Compose マテリアル 3 アダプティブ ライブラリには、windowPosture を含む WindowAdaptiveInfo の
インスタンスを返す
currentWindowAdaptiveInfo() 最上位関数が用意されています。
タップ以外の入力
ユーザーは、多くの場合、外付けキーボード、トラックパッド、マウス、タッチペンを大画面デバイスに接続します。周辺機器を使用すると、ユーザーの生産性、入力精度、自己表現、アクセシビリティが向上します。ほとんどの ChromeOS デバイスには、キーボードとトラックパッドが組み込まれています。
アダプティブ アプリは外部入力デバイスをサポートしていますが、Android フレームワークが多くの作業を行います。
Jetpack Compose 1.7 以降: キーボードのタブ移動とマウスまたはトラックパッドのクリック、選択、スクロールはデフォルトでサポートされています。
Jetpack
androidx.compose.material3ライブラリ: ユーザーはタッチペンを使用して任意のTextFieldコンポーネントに書き込むことができます。キーボード ショートカット ヘルパー: Android プラットフォームとアプリのキーボード ショートカットをユーザーが見つけられるようにします。アプリのキーボード ショートカットを キーボード ショートカット ヘルパーに公開するには、
onProvideKeyboardShortcuts()ウィンドウ コールバックをオーバーライドします。
あらゆるサイズのフォーム ファクタを完全にサポートするため、アダプティブ アプリはあらゆる種類の入力をサポートしています。
アダプティブ アプリをテストする方法
さまざまな画面サイズとウィンドウ サイズ、さまざまなデバイス構成をテストします。 ホスト側のスクリーンショットと Compose プレビューを使用して、アプリのレイアウトを確認します。 Google データセンターでホストされている Android Studio エミュレータとリモート Android デバイスでアプリを実行します。
大画面アプリの品質に関するガイドライン
大画面アプリの品質に関するガイドラインは、アダプティブ アプリがタブレット、折りたたみ式デバイス、ChromeOS デバイスで適切に動作することを確認するのに役立ちます。このガイドラインには、重要なユーザー ジャーニーのアプリの機能を確認できるテストが含まれています。このガイドラインは主に大画面を対象としていますが、すべての画面サイズに対応しています。
複数の構成
Compose 1.7 以降の DeviceConfigurationOverride インターフェースを使用すると、デバイス構成のさまざまな側面をオーバーライドできます。
この API は、テストするコンポーザブル コンテンツに対して、さまざまなデバイス構成をローカライズされた方法でシミュレートします。たとえば、単一のデバイスまたはエミュレータでテストスイートを 1 回実行するだけで、複数の任意の UI サイズをテストできます。
DeviceConfigurationOverride.then() 拡張関数を使用すると、
フォントサイズ、ロケール、テーマ、
レイアウト サイズなど、複数の構成パラメータを同時にテストできます。
ホスト側のスクリーンショット
ホスト側のスクリーンショット テストは、アプリのレイアウトの視覚的な外観を確認するための高速でスケーラブルな方法です。ホスト側のスクリーンショットを使用して、さまざまなディスプレイ サイズで UI をテストします。
詳細については、Compose プレビューのスクリーンショット テストをご覧ください。
Compose プレビュー
Compose プレビューを使用すると、Android Studio のデザインビューでアプリの UI を確認できます。プレビューでは、@PreviewScreenSizes、
@PreviewFontScale、@PreviewLightDark などのアノテーションを使用して、さまざまな構成でコンポーザブル
コンテンツを表示できます。プレビューを操作することもできます。
Android Studio では、幅が広すぎるボタンやテキスト フィールドなど、一般的なユーザビリティの問題もプレビューでハイライト表示されます。
詳細については、コンポーザブル プレビューで UI をプレビューするをご覧ください。
エミュレータ
Android Studio には、さまざまなレイアウト サイズをテストするためのさまざまなエミュレータが用意されています。
- サイズ変更可能なエミュレータ: スマートフォン、タブレット、折りたたみ式デバイスをエミュレートし、それらをその場で切り替えることができます。
- Pixel Fold エミュレータ: Pixel Fold の大画面折りたたみ式スマートフォンをエミュレートします。
- Google Pixel Tablet エミュレータ: Google Pixel Tablet の大画面デバイスをエミュレートします。
- デスクトップ エミュレータ: 自由形式のウィンドウ、マウスオーバー、キーボード ショートカットをテストできます。
リモート デバイス ストリーミング
Google データセンターでホストされているリモート Android デバイスに安全に接続し、最新の Google Pixel デバイスと Samsung デバイスでアプリを実行します。アプリをインストールしてデバッグし、ADB コマンドを実行して、デバイスを回転させたり折りたたんだりして、さまざまな実際のデバイスでアプリが適切に動作することを確認します。
リモート デバイス ストリーミングは Android Studio に統合されています。詳細については、 Firebase を利用した Android デバイス ストリーミングをご覧ください。
参考情報
- I/O プレゼンテーション: アダプティブ Android アプリのビルド