ChromeOS 向けにアプリを最適化する

Android アプリは、最新のコンピューティングの外観と操作性を大画面で実現するという、大きな役割を担っています。しかし、Chromebook でモバイルアプリを実行するだけでは、最適なユーザー エクスペリエンスは得られません。

このページでは、ノートパソコンやコンバーチブル型のフォーム ファクタに合わせてエクスペリエンスをカスタマイズする方法について説明します。これらのデバイスでアプリの互換性をテストする方法の詳細については、テストの包括的なリストをご覧ください。

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

ChromeOS に Android アプリを実装すると、基本的なマルチウィンドウがサポートされます。ChromeOS 上の Android では、アプリが常に全画面表示されるのではなく、自由形式のウィンドウ コンテナにレンダリングされます。このコンテナは、これらのデバイスに適した自由形式のウィンドウ コンテナです。

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

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

以下のおすすめの方法を実践することで、ChromeOS 上でアプリを実行する場合のユーザー エクスペリエンスを改善できます。

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

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

ChromeOS では、アプリのテーマを使用して、アプリの上部に表示されるトップバーに色を付けます。この色は、ユーザーがウィンドウ コントロールと [戻る] ボタンを押したときに表示されます。アプリを ChromeOS 用に洗練させ、カスタマイズされた外観にするには、アプリのテーマで colorPrimary を定義し、可能であれば colorPrimaryDark 値を定義します。

colorPrimaryDark はトップバーに色を付けるために使用します。colorPrimary のみが定義されている場合、ChromeOS では上部のバーを暗くしたバージョンが使用されます。詳細については、スタイルとテーマをご覧ください。

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

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

ChromeOS 向けのアプリでは、マウス、トラックパッド、キーボードからの入力をサポートし、タッチスクリーンなしでアプリを使用できるようにします。多くのアプリはすでにマウスとトラックパッドをサポートしており、特別な作業は必要ありません。ただし、アプリの動作をマウスに合わせて適切にカスタマイズし、マウス入力とタップ入力のサポートと区別を行うことをおすすめします。

次の点を確認します。

  • すべてのターゲットはマウスでクリック可能です。
  • 図 2 に示すように、タッチでスクロール可能なすべてのサーフェスは、マウスホイール イベントでスクロールします。
  • 図 3 に示すように、ユーザーに負担をかけることなく UI が見つかりやすくなるように、ホバー状態は慎重に判断して実装されます。

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

図 3. ボタンのカーソルを合わせた状態。

必要に応じて、マウス入力とタップ入力を区別します。たとえば、アイテムを長押しすると複数選択 UI がトリガーされ、同じアイテムを右クリックするとオプション メニューがトリガーされます。

カスタム カーソル

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

アプリでは、以下のすべてを表示します。

  • テキストにおける I ビームポインタ
  • サイズ変更可能なレイヤの端にあるサイズ変更ハンドル
  • クリックとドラッグのジェスチャーでパンまたはドラッグできるコンテンツの手の開きおよび閉じたポインタ
  • 処理中であることを示すスピナー

PointerIcon クラスは、カスタム カーソルの実装に使用できる定数を提供します。

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

Chromebook には物理キーボードが搭載されているため、ユーザーの生産性を高めるためにホットキーを提供します。たとえば、アプリが印刷をサポートしている場合、Ctrl+P キーで印刷ダイアログを開くことができます。

同様に、重要な UI 要素はすべて、タブ ナビゲーションを使用して処理します。これは、ユーザー補助機能において特に重要です。ユーザー補助の基準を満たすには、次の図に示すように、すべての UI サーフェスが、フォーカス状態を明確にして、ユーザー補助を遵守する必要があります。

図 4. 横方向タブ処理。

図 5. スワイプ操作を、カーソルを合わせたときに表示されるコントロールに置き換えます。

長押し操作、スワイプ、その他のマルチタッチ ジェスチャーなど、タップ固有の操作の下に隠れているコア機能には、キーボードやマウスの代替を実装します。その解決策の一例として、サーフェスにカーソルを合わせたときに表示されるボタンを用意します。

キーボード、トラックパッド、マウスのサポートについて詳しくは、 大画面での入力の互換性をご覧ください。

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

アプリでデスクトップ レベルの機能を実現するには、生産性を重視した以下の入力を検討してください。

コンテキスト メニュー

Android のコンテキスト メニューは、ユーザーをアプリの機能に誘導するもう一つのアクセラレータであり、マウスまたはトラックパッドのセカンダリ ボタンのクリック、またはタッチスクリーンの長押しによってトリガーできます。

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

ドラッグ＆ドロップ

次の図のようなドラッグ&ドロップ操作を作成すると、効率的で直感的な生産性向上機能をアプリで利用できます。詳しくは、ドラッグ&ドロップをご覧ください。

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

タッチペンのサポート

描画アプリやメモ作成アプリでは、タッチペンのサポートが不可欠です。タッチペン入力の使用方法に合わせたインタラクションを実装することで、タッチペン搭載の Chromebook とタブレットに対するサポートを強化します。

タッチペンによる操作を設計する際には、さまざまなタイプのタッチペン ハードウェアを考慮する必要があります。タッチペン API の概要については、 大画面での入力の互換性をご覧ください。

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

アプリの表示状態（全画面、縦向き、横向き、ウィンドウ表示）に関係なく、アプリが利用できる画面領域を有効に活用します。スペースの適切な使用例として、次のようなものがあります。

  • ディスプレイ アプリ アーキテクチャ
  • テキストの長さと画像サイズを最大幅に制限します。
  • アプリのツールバーのスペースを有効活用します。
  • つまみではなくマウスの使用にアプリを適応させることで、UI アフォーダンスの配置を改善します。
  • 動画や画像のサイズを最適化し、すべてのメディアで最大の幅と高さを設定して、読みやすさと読みやすさを最大化します。
  • レスポンシブな列システムを実装します。詳しくは、レスポンシブ レイアウト グリッドをご覧ください。
  • 必要に応じて、カラムシステムを使用して UI のサイズ変更と修正を行います。新しいウィンドウを開かないようにしてください。
  • 水平スクロール コンポーネントを削除するか、その重要性を下げます。
  • 全画面表示のモーダル UI を使用しない。重要性の低いアクションには、進行状況インジケーターやアラートなどのインライン UI を使用します。
  • マウス、キーボード、大画面用に設計された日時選択ツール、テキスト フィールド、メニューなど、改善された UI コンポーネントを使用します。
  • 小規模から中規模の編集機能では、新しいアクティビティの代わりにインライン編集、追加の列、モーダル UI を使用します。
  • フローティング アクション ボタン（FAB）を削除または変更して、キーボード ナビゲーションを改善します。デフォルトでは、FAB はタブ移動順の最後に配置されます。代わりに、メインのアクションであるため最初に行うか、別の上位レベルのアフォーダンスに置き換えます。

図 8. スマートフォンとデスクトップ サイズの画面で表示された、レスポンシブ レイアウトのモック。

システムレベルの戻るボタンは、もともとは Android のハンドヘルドでの使用を前提としたナビゲーション パターンで、パソコンでの使用にはあまり適していません。

アプリをノートパソコン環境向けにさらにカスタマイズするのに合わせて、[戻る] ボタンを強調しないナビゲーション パターンに移行することを検討してください。アプリ内の戻るボタン、パンくずリスト、その他のエスケープ ルート（閉じるボタンやキャンセル ボタンなど）を大画面の UI の一部として提供することで、アプリで独自の履歴スタックを処理できるようにします。

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

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

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

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

互換性モードにより、ChromeOS でシステムによるイベント（向きの変更など）の処理方法が変更されます。これにより、カメラを間違った向きで使用する場合の問題を回避できます。互換モードを有効にするには、次の条件を満たす必要があります。

  • ターゲットを Android 7.0（API レベル 24）以上にします。最小 SDK レベルは低くできます。
  • アプリのサイズを変更できるようにしてください。

デバイス設定の処理

ChromeOS で実行されるアプリについては、次のデバイスの設定について検討してください。

音量を変更する

ChromeOS デバイスは固定音量デバイスです。音声を再生するアプリには独自の音量コントロールがあります。固定音量デバイスの操作のガイドラインに従ってください。

画面の明るさの変更

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

その他の学習教材

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

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