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

Kayce Basques

Sofia Emelianova

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

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

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

[センサー] タブを開く

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

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

   

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

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

多くのウェブサイトでは、ユーザーの位置情報を利用して、より関連性の高いユーザー エクスペリエンスを提供しています。たとえば、天気情報サイトでは、ユーザーが位置情報にアクセスする権限をウェブサイトに許可した場合、ユーザーの地域の天気予報が表示されます。

ユーザーの場所に応じて変化する UI を作成する場合、世界中のさまざまな場所でサイトが正しく動作するかどうか確認することをおすすめします。

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

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

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

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

• プリセットの向き（[縦向きの上下逆さ] など）。
• カスタムの向き: 独自の向きを指定します。

[カスタムの向き] を選択すると、[alpha]、[beta]、[gamma] の各フィールドが有効になります。これらの軸の仕組みについては、アルファ、ベータ、ガンマをご覧ください。

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

強制タッチ

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

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

1. [センサー] タブを開きます。
2. [タップ] プルダウン リストから [強制タッチ] を選択します。
3. 上部のプロンプトで [Reboot DevTools] をクリックします。

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

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

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

1. [センサー] タブを開きます。このチュートリアルは、こちらのデモページでお試しいただけます。

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

   

3. [Emulate Idle 検出機能の状態] プルダウンで、次のいずれかを選択します。

   • アイドル状態のエミュレーションなし
   • ユーザーはアクティブ、画面がロック解除されています
   • ユーザーはアクティブ、画面がロックされています
   • ユーザーはアイドル状態、画面のロックを解除
   • ユーザーはアイドル状態、画面がロックされています

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