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

Android アプリには、最新のコンピューティングによる表現を大画面用に定義しなおすという、重要な役割があります。というのも、スマートフォン用のアプリをそのまま Chromebook に移植するだけでは、優れたユーザー エクスペリエンスを提供できないからです。このページでは、ノートパソコンやコンバーチブルのフォーム ファクタに合うようユーザー エクスペリエンスを調整する方法について説明します。

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

Android アプリを Chrome OS に実装する場合は、基本的なマルチウィンドウがサポートされます。Chrome OS 上の Android アプリは、全画面表示に限定されず、フォーム ファクタに適したフリーフォームのウィンドウ内にも表示できます(図 1)。

図 1. アプリをさまざまなウィンドウ サイズで表示

ユーザーは、Android アプリのウィンドウ サイズを変更できます(図 2)。ユーザーがフリーフォーム ウィンドウのサイズをスムーズに調整して、コンテンツ全体を表示できるようにするには、Chromebook での画面サイズの互換性のガイドラインと注意事項をご確認ください。

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

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

  • ユーザーによるウィンドウ サイズの変更に応じて、常にアプリのレイアウトが適切に調整されるようにする。
  • 起動サイズを指定することにより、アプリ ウィンドウの初期サイズをカスタマイズする。
  • アプリのルート アクティビティの向きはすべてのアプリ ウィンドウに影響するため、ルート アクティビティ ルールに注意する。

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

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

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

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

すべての Chromebook には物理キーボードとトラックパッドが搭載されています。一部にはタッチスクリーンも搭載されています。ノートパソコンにもタブレットにもなるコンバーチブル デバイスもあります。

Chrome OS 向けのアプリはすべて、マウス、トラックパッド、キーボードをサポートし、タッチスクリーンがなくても使用できなければなりません。特に作業を行わなくても、多くのアプリでは最初からマウスとトラックパッドがサポートされています。ただし、マウスに合うようアプリの動作を適切にカスタマイズし、マウス入力とタッチ入力を分けてサポートすることをおすすめします。マウスのサポートについて詳しくは、Chromebook での入力の互換性をご覧ください。

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

  • ターゲットがすべてマウスでクリックできること
  • タップでスクロールできるサーフェスがすべてマウスホイール イベントでスクロールできること
  • ユーザーが容易に UI を識別できるよう、意図的かつ最適な判断のもとにカーソル合わせ状態が実装されていること

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

図 4. カーソル合わせ状態のボタン

状況に応じて、マウス入力とタッチ入力を区別する必要があります。たとえば、ある項目をタップした場合は複数選択 UI が表示され、クリックした場合はその項目 1 つが選択されるようにする、などです。

カスタム カーソル

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

アプリで表示すべき項目は以下のとおりです。

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

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

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

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

図 5. タブによる移動

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

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

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

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

コンテキスト メニュー

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

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

ドラッグ&ドロップ

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

ドラッグ&ドロップ操作は効率的かつ直感的なため、これを導入することでアプリの生産性が向上します。詳細については、ドラッグ&ドロップをご覧ください。

タッチペンのサポート

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

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

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

  • アプリの構成を表示する。
  • テキストの長さと画像サイズを最大幅に制限する。
  • アプリのツールバーの領域を活用する。
  • タップ操作ではなくマウス操作に合わせて 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 settingsWindowManager.LayoutParams の呼び出しは無視されます。

その他の学習教材

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