センサー: デバイス センサーをエミュレートする

Kayce Basques

Sofia Emelianova

[センサー] パネルを使用して、任意のデバイスのセンサー入力をエミュレートします。

概要

[センサー] パネルでは、次のことができます。

• 位置情報をオーバーライドする。
• 向きをシミュレートする。
• 強制タップ。
• アイドル検出機能の状態をエミュレートする。

キーポイント: モバイル デバイスのビューポートをシミュレートし、ネットワークと CPU をスロットリングするには、Device Mode をご覧ください。

[センサー] パネルを開く

1. オペレーティング システムに応じて、次のキーを押してコマンド メニューを開きます。

   • macOS の場合は、Command+Shift+P
   • Windows、Linux、ChromeOS の場合: Ctrl+Shift+P

   

2. 「sensors」と入力し、[センサーを表示] を選択して Enter キーを押します。DevTools ウィンドウの下部に [センサー] パネルが開きます。

位置情報をオーバーライドする

多くのウェブサイトでは、ユーザーに関連性の高いエクスペリエンスを提供するためにユーザーの位置情報を利用しています。たとえば、ユーザーがウェブサイトに位置情報へのアクセス権を付与すると、ウェブサイトにユーザーの地域のローカル予報が表示されます。

ユーザーの現在地に応じて変化する UI を構築する場合は、世界中のさまざまな場所でサイトが正しく動作するようにする必要があります。

位置情報をオーバーライドするには、[センサー] パネルを開き、[位置情報] リストから次のいずれかを選択します。

• 事前設定された都市のいずれか（東京など）。
• カスタム ロケーション: カスタムの経度と緯度の座標を入力します。
• [位置情報の利用不可] を選択すると、ユーザーの位置情報が利用できない場合にサイトがどのように動作するかを確認できます。

デバイスの向きをシミュレートする

さまざまなデバイスの向きをシミュレートするには、[センサー] パネルを開くと、[向き] リストから次のいずれかを選択します。

• 縦向き（上下逆）などのプリセットの向きのいずれか。
• カスタム オリエンテーション: 独自の正確な向きを指定します。

[カスタム オリエンテーション] を選択すると、[alpha]、[beta]、[gamma] フィールドが有効になります。これらの軸の仕組みについては、Alpha、Beta、Gamma をご覧ください。

[向きモデル] をドラッグして、カスタムの向きを設定することもできます。Shift キーを押しながらドラッグすると、α 軸に沿って回転します。

フォース タップ

ウェブサイトでタップ イベントをテストするには、タッチスクリーンのないデバイスでテストする場合でも、クリックではなく強制タップを使用できます。

ポインタでタッチイベントをトリガーするには:

1. [センサー] パネルを開きます。
2. [タップ] プルダウン リストで [強制タップ] を選択します。
3. 上部のプロンプトで [DevTools を再読み込み] をクリックします。

アイドル検出機能の状態をエミュレートする

Idle Detection API を使用すると、非アクティブなユーザーを検出し、アイドル状態の変化に応答できます。DevTools を使用すると、実際のアイドル状態の変化を待たずに、ユーザー状態と画面状態の両方のアイドル状態の変化をエミュレートできます。

アイドル状態をエミュレートするには:

1. [センサー] パネルを開きます。このチュートリアルでは、こちらのデモページで試すことができます。

2. [Ephemeral] の横にあるチェックボックスをオンにして、プロンプトでデモページにアイドル状態検出の権限を付与します。ページを再読み込みします。

   

3. [アイドル検出機能の状態をエミュレートする] プルダウンで、次のいずれかを選択します。

   • アイドル状態のエミュレーションなし
   • ユーザー アクティブ状態、画面ロック解除
   • ユーザー アクティブ状態、画面ロック中
   • ユーザー アイドル状態、画面ロック解除
   • ユーザー アイドル状態、画面ロック中

この例では、DevTools はユーザーがアイドル状態、画面がロックされている状態をエミュレートします。この場合、デモページはキャンバスを消去するための 10 秒間のカウントダウンを開始します。

ハードウェアの並行処理をエミュレートする

プロセッサ コア数の異なるデバイスでウェブサイトのパフォーマンスをエミュレートするには、navigator.hardwareConcurrency プロパティによって報告される値をオーバーライドします。一部のアプリケーションでは、このプロパティを使用してアプリケーションの並列処理の程度を制御します。たとえば、Emscripten pthread プールサイズを制御します。

ハードウェアの同時実行をエミュレートするには:

1. [センサー] パネルを開きます。
2. パネルの下部にある [ハードウェアの同時実行] check_boxをオンにします。
3. 数値入力ボックスに、エミュレートするコア数を入力します。

注意: デフォルト値の 12 を超えると、パフォーマンスが低下する可能性があります。

デフォルト値に戻すには、[元に戻す] [リセット] ボタンをクリックします。