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

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

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

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

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

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

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

次のベスト プラクティスを実施すると、ChromeOS でアプリを実行する際のユーザー エクスペリエンスを向上させることができます。

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

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

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

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

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

すべての 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 settingsWindowManager.LayoutParams に対する呼び出しは無視されます。

その他の学習教材

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