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

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

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

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

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

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

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

以下のベスト プラクティスに従うことで、ChromeOS でアプリを実行する際のユーザー エクスペリエンスを改善できます。 プラクティス:

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

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. スワイプ操作の代わりに、カーソルを合わせたときに表示されるコントロールを使用します。

コアには、キーボードまたはマウスの代替手段を必ず実装してください。 タップ固有の操作（タップや保留アクション、 スワイプなどのマルチタッチ ジェスチャーです。ソリューションの例として、 カーソルを合わせるとサーフェスに表示されるボタンです。

キーボード、トラックパッド、マウスのサポートについて詳しくは、以下をご覧ください。 <ph type="x-smartling-placeholder"></ph> 大画面での入力の互換性。

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

アプリをパソコン向けの機能にするには、以下の点を考慮してください。 入力が効率化されます。

コンテキスト メニュー

Android のコンテキスト メニュー。ユーザーを マウスまたはトラックパッドの タップ操作と長押し:

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

ドラッグ＆ドロップ

次の図のようなドラッグ&ドロップ インタラクションを構築するには、 効率的で直感的な生産性をもたらす 実装する必要があります。詳しくは、ドラッグ&ドロップをご覧ください。

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

タッチペンのサポート

描画アプリやメモ作成アプリでは、タッチペンのサポートが不可欠です。高度な インタラクションを実装して、タッチペン搭載の Chromebook とタブレットをサポート タッチペン入力に合わせて調整されています

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

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

アプリに表示される画面スペースを有効に活用する 表示状態（全画面表示、縦向き、横向き、ウィンドウ表示）を選択します。たとえば 次のような用途があります。

  • ディスプレイ アプリのアーキテクチャ。
  • テキストの長さと画像サイズを最大幅に制限する。
  • アプリのツールバーのスペースを有効活用します。
  • マウスの使用にアプリを適応させることで、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 向けアプリの作成
次へ
開発環境の準備