Chrome OS 向けのアプリの最適化

Android アプリは、最新のコンピューティングの外観と操作性を大画面で実現するという、大きな役割を担っています。とはいえ、スマートフォン アプリを Chromebook で実行するだけでは、最適なユーザー エクスペリエンスは得られません。このページでは、ノートパソコン型とコンバーチブル型のフォーム ファクタ向けにユーザー エクスペリエンスを調整するいくつかの方法について詳しく説明します。これらのデバイスでアプリの互換性をテストする方法の詳細については、テストの包括的なリストをご覧ください。

フリーフォーム マルチウィンドウの活用

Android アプリを Chrome OS に実装する場合は、基本的なマルチウィンドウがサポートされます。Android は、Chrome OS でアプリを常に全画面表示するのではなく、デバイスに適したフリーフォームのウィンドウ コンテナにレンダリングします。

図 1 に示すように、ユーザーは Android アプリが表示されるウィンドウのサイズを変更できます。ユーザーがフリーフォーム ウィンドウのサイズをスムーズに調整してコンテンツ全体を表示できるようにするには、ウィンドウ管理のガイドラインをご確認ください。

図 1. サイズ変更が可能なアプリ ウィンドウ

Chrome OS でアプリを実行する場合、次のベスト プラクティスがユーザー エクスペリエンスの向上に役立ちます。

  • マルチウィンドウ モードでアクティビティのライフサイクルを正しく処理し、アプリが最上位のフォーカスされたウィンドウでない場合でも継続的に UI を更新します。
  • ユーザーがウィンドウのサイズを変更するたびに、アプリのレイアウトが適切に調整されるようにします。
  • 起動サイズを指定することにより、アプリ ウィンドウの初期サイズをカスタマイズします。
  • アプリのルート アクティビティの向きはアプリのウィンドウすべてに影響するため、ルート アクティビティ ルールに注意します。

詳細については、ウィンドウ管理をご覧ください。

トップバーの色のカスタマイズ

Chrome OS は、アプリのテーマを使用して、アプリの上部に表示されるトップバーに色を付けます。これは、ユーザーがウィンドウ コントロールと戻るボタンを押したときに表示されます。アプリの外観を Chrome OS 向けにカスタマイズされた洗練されたものにするには、アプリのテーマに colorPrimary と（可能であれば）colorPrimaryDark の値を定義します。後者はトップバーの色に使用されます。colorPrimary のみを定義した場合、Chrome OS はその色を暗くしたバージョンをトップバーに使用します。詳細については、マテリアル テーマの使用をご覧ください。

キーボード、トラックパッド、マウスのサポート

すべての Chromebook には物理キーボードとトラックパッドが搭載されており、一部の機種にはタッチスクリーンも搭載されています。ノートパソコンからタブレットに形状を変換できるデバイスもあります。

Chrome OS 向けのアプリはすべて、マウス、トラックパッド、キーボードをサポートし、タッチスクリーンがなくても使用できなければなりません。多くのアプリでは、マウスとトラックパッドが最初からサポートされており、追加の作業なしで利用できます。ただし、マウス向けにアプリの動作を適切にカスタマイズすることは常に効果的であり、マウス入力とタッチ入力は別個にサポートする必要があります。マウスのサポートの詳細については、Chromebook の入力互換性をご覧ください。

以下の点を確認してください。

  • すべてのターゲットがマウスでクリックできること
  • タッチでスクロールできるすべてのサーフェスがマウスホイール イベントでスクロールできること
  • ユーザーを驚かせない程度に UI を識別しやすくするため、明確な意図と最適な判断のもとでマウスオーバー状態が実装されていること

図 2. マウスホイールによるスクロール

図 3. ボタンのマウスオーバー状態

状況に応じて、マウス入力とタッチ入力を差別化する必要があります。たとえば、あるアイテムを長押しすると複数選択 UI が表示され、同じアイテムを右クリックするとオプション メニューが表示されるようにします。

カスタム カーソル

アプリの操作可能な UI 要素とその操作方法を示すために、マウスカーソルをカスタマイズする必要があります。setPointerIcon() メソッドを呼び出すことにより、ユーザーがビューを操作するときに使用される PointerIcon を設定できます。

アプリは以下の UI 要素を表示する必要があります。

  • テキスト領域における I ビームポインタ。
  • サイズ変更が可能なレイヤの四隅におけるサイズ変更ハンドル。
  • クリック＆ドラッグ操作で移動できるコンテンツにおける開いた手と閉じた手のポインタ。
  • 処理中であることを示すスピナー。

PointerIcon クラスには、カスタム カーソルの実装に使用できる定数が用意されています。

キーボード ショートカットとナビゲーション

すべての Chromebook には物理キーボードが搭載されています。ユーザーの生産性を高めるため、ホットキーを用意してください。たとえば、アプリが印刷をサポートしている場合、Ctrl+P キーで印刷ダイアログを開くことができます。同様に、すべての重要な UI 要素をタブ ナビゲーションでも操作できるようにする必要があります。これは、ユーザー補助機能において特に重要です。ただし、ユーザー補助標準を満たすには、すべての UI サーフェスを、フォーカスされていることが明確にわかる、標準に準拠した状態にする必要があります。

図 4. タブによる移動

図 5. スワイプ操作の代わりとして、カーソルを合わせるとコントロールが表示されるようにする

長押し、スワイプ、マルチタップ操作など、タッチスクリーン固有の操作が割り当てられた基本機能について、キーボードやマウスによる代替操作を割り当てる必要があります。たとえば、サーフェスにカーソルを合わせるとボタンが表示されるようにする、などの対応が考えられます。

その他のユーザー入力サポート

アプリにパソコン用としてふさわしい機能を実装するため、生産性向上の観点から以下の入力方法も検討してください。

コンテキスト メニュー

図 6. 右クリックで表示されるコンテキスト メニュー

Android には、ユーザーをアプリの機能にすばやく誘導する方法の 1 つとして、コンテキスト メニューがあります。これは、マウスまたはトラックパッドの第 2 ボタンをクリックするか、タッチスクリーンを長押しすると表示されます。

ドラッグ＆ドロップ

図 7. ファイルツリー インターフェースでのドラッグ＆ドロップ

ドラッグ＆ドロップ操作を構築すると、効率的で直感的な生産性向上機能をアプリに導入できます。詳細については、ドラッグ＆ドロップをご覧ください。

タッチペンのサポート

描画アプリとメモ作成アプリでは、タッチペンのサポートが不可欠です。タッチペン入力に合わせたインタラクションを実装することにより、タッチペンを装備した Chromebook とタブレットのサポートを強化してください。タッチペンによる操作を設計する際には、さまざまなタイプのタッチペン ハードウェアを考慮する必要があります。タッチペン API の概要については、Chromebook の入力互換性をご覧ください。

レイアウトのレスポンシブ化

図 8. スマートフォン サイズとパソコンサイズのレスポンシブ レイアウトのモック

アプリでは、表示状態（全画面、縦向き、横向き、ウィンドウ内）にかかわらず、画面領域を最大限に活用してください。画面領域の有効活用例としては、以下のようなものがあります。

  • アプリのアーキテクチャを表示する。
  • テキストの長さと画像サイズを最大幅以下に制限する。
  • アプリのツールバー内の領域を活用する。
  • 親指のタップ操作ではなくマウス操作に合わせて UI アフォーダンスの配置を改善する。
  • 動画と画像のサイズを最適化する。すべてのメディアの最大幅と高さのセットを規定する。読みやすさとスキャンしやすさを最大化する。
  • レスポンシブ カラム システムを実装する。詳細については、レスポンシブ UI をご覧ください。
  • 必要な場合はカラムシステムを使用して UI のサイズ調整と変更を行い、可能な限り新しいウィンドウを開かないようにする。
  • コンポーネントの横スクロールの必要性を除去または削減する。
  • 全画面表示用のモーダル UI を使用しない。すべての重要でないアクションに対して、進行状況インジケーターやアラートなどのインライン UI を使用する。
  • 日時の選択ツール、テキスト フィールド、プルダウンなど、マウス、キーボード、大画面用に設計された、より適切な UI コンポーネントを使用する。
  • 小規模から中規模の編集機能については、新しいアクティビティではなく、インライン編集、追加の列、モーダル UI を使用する。
  • キーボード ナビゲーションを向上させるため、フローティング操作ボタン（FAB）を削除または変更する。デフォルトでは、FAB はタブによる移動の順序の最後に配置されています。しかし、最優先のアクションであれば、移動順序の最初にすべきです。そうでないならば、より優先度の高い別のアフォーダンスに置き換えます。

アプリをある程度ノートパソコン環境向けにカスタマイズしたら、戻るボタンを使用しないナビゲーション パターンへの移行を検討してください。アプリ内の戻るボタン、パンくずリスト、その他のエスケープ経路（大画面用 UI に含まれる閉じるボタンやキャンセル ボタンなど）を用意することで、アプリがアプリ自身の履歴スタックを処理できるようにする必要があります。システムレベルの戻るボタンは、もともとは Android のハンドヘルドでの使用を前提としたナビゲーション パターンで、パソコンでの使用にはあまり適していません。

戻るボタンをアプリのウィンドウ内に表示するかどうかは、<activity> タグ内の設定で制御できます。true に設定すると、戻るボタンは非表示になります。

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

カメラ プレビュー画像の問題の解決

縦向きでのみ実行できるアプリをユーザーが横向き画面で実行すると、カメラの問題が発生する可能性があります。その場合、プレビューやキャプチャ結果が正しく回転しないことがあります。

互換モードを有効にすると、Chrome OS でイベント（向きの変更など）が処理される方法が変更されます。これにより、間違った向きでカメラが使用された場合に問題の発生を防ぐことができます。互換モードを有効にするには:

  • ターゲットを Android 7.0（API レベル 24）以上にします。SDK の最小レベルについては、それ以下を選択できます。
  • アプリをサイズ変更可能にします。

デバイス設定の処理

音量の変更

Chrome OS デバイスは、固定音量のデバイスです。音声を再生するアプリは、独自の音量コントロールを持つ必要があります。固定音量デバイスへの対応のガイドラインをご確認ください。

画面の明るさの変更

Chrome OS では、デバイスの画面の明るさを調整できません。system settings と WindowManager.LayoutParams に対する呼び出しは無視されます。

その他の学習教材

Android アプリを Chromebook 向けに最適化する方法について詳しくは、次のリソースをご覧ください。

前へ
Chrome OS 向けアプリの作成
次へ
開発環境の準備