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

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

センサー ツール

概要

センサー ツールを使用すると、次の操作を実行できます。

モバイル デバイスのビューポートをシミュレートし、ネットワークと CPU を調整するには、「 モバイル デバイスのエミュレート (デバイス エミュレーション)」を参照してください。

センサー ツールを開く

  1. 新しいウィンドウまたはタブで 、TODO アプリ のデモ ページなどの Web ページを開きます。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、DevTools の下部にあるクイック ビュー パネルが開きます。

  4. [クイック ビュー] パネルで、[その他のツール] ボタンをクリックし、[センサー] を選択します。

    センサー ツールは、DevTools の下部にある [クイック ビュー] パネルで開きます。

コマンド メニューを使用してセンサー ツールを開く

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

    • Windows、Linux、または ChromeOS では、 Control + Shift + P。
    • MacOS では、 Command + Shift + P。

    コマンド メニューを使用してセンサー ツールを開く

  2. センサーを入力し、[センサーの表示] を選択し、Enter キーを押します。

    センサー ツールは、DevTools の下部にあるクイック ビューで開きます。

位置情報を上書きする

多くの Web サイトでは、ユーザーにとってより関連性の高いエクスペリエンスを提供するために、ユーザーの場所を利用しています。 たとえば、ユーザーが自分の場所にアクセスするアクセス許可を Web サイトに付与すると、気象 Web サイトにユーザーの地域のローカル予測が表示される場合があります。 Web サイトからユーザーの位置情報にアクセスするには、MDN の Geolocation API に関するページを参照してください。

ユーザーが配置されている場所に応じて変更される UI を構築する場合は、サイトが世界中のさまざまな場所で正しく動作することを確認する必要があります。

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

  • 東京のようなプリセット都市の一つ。
  • その他 のカスタム経度と緯度座標を入力します。
  • [ 使用できない場所 ] を選択すると、ユーザーの位置情報が利用できない場合のサイトの動作を確認できます。

場所の一覧から東京を選択する

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

モバイル デバイスには、物理的な向きを検出できるセンサーがあります。 Web ベースのゲームやマッピング アプリケーションなどの Web サイトでは、デバイスの向きを利用してエクスペリエンスを向上させることができます。 デバイスの向きを検出する方法については、MDN の 「デバイスの向きイベント」を参照してください。

ユーザーのデバイスの向きに応じて変化する UI を構築する場合は、さまざまなデバイスの向きで UI をテストする必要があります。

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

  • 縦の逆さまのような、事前設定された向きの 1 つ:

    [向き] リストから [縦] を逆さまで選択する

  • 独自の正確な向きを提供するカスタムの向き。

    [カスタムの向き] を選択すると、アルファ、ベータ、ガンマの各フィールドが有効になります。 これらの軸のしくみを理解するには、次を参照してください。

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

    オリエンテーション モデル

クリック時にタッチ イベントをシミュレートする

タッチ スクリーンのないデバイスでテストしている場合でも、Web サイトでタッチ イベントをテストするには:

  1. 新しいウィンドウまたはタブで 、TODO アプリ のデモ ページなどの Web ページを開きます。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、DevTools の下部にあるクイック ビュー パネルが開きます。

  4. [クイック ビュー] パネルで、[その他のツール] ボタンをクリックし、[センサー] を選択します。

    センサー ツールは、DevTools の下部にある [クイック ビュー] パネルで開きます。

  5. センサー ツールで、[タッチ] ドロップダウン メニューまで下にスクロールし、[有効にする] を選択します。

    クリックではなくタッチを強制する

  6. DevTools の上部にある [ DevTools の再読み込み ] ボタンをクリックします。

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

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

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

  1. アイドル 検出デモなどの Web ページを新しいウィンドウまたはタブで開きます。

  2. ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、DevTools の下部にクイック ビューが開きます。

  4. クイック ビュー ツール バーで、[その他のツール] ボタンをクリックし、[センサー] を選択します。

    [クイック ビュー] パネルに [センサー] ツールが開きます。

  5. デモ ページで、[ アイドル状態の検出を開始する ] ボタンをクリックします。

    初めてのみ、[ 許可] ダイアログが開きます。

  6. [ 許可 ] ボタンをクリックします。

    デモ ページには、アイドル状態の検出アクセス許可が付与されます。

  7. DevTools の センサー ツールで、[ アイドル検出のエミュレート] 状態 ドロップダウンまで下にスクロールし、オプションを選択します。

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

    デモ ページには、エミュレートされたユーザーと画面の状態が表示されます。

    デモ ページでのアイドル状態とロック状態の選択

関連項目:

ハードウェアコンカレンシーをエミュレートする

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

ハードウェアコンカレンシーをエミュレートするには:

  1. 新しいウィンドウまたはタブで 、TODO アプリ のデモ ページなどの Web ページを開きます。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、DevTools の下部にあるクイック ビュー パネルが開きます。

  4. [クイック ビュー] パネルで、[その他のツール] ボタンをクリックし、[センサー] を選択します。

    センサー ツールは、DevTools の下部にある [クイック ビュー] パネルで開きます。

  5. センサー ツールで、[ハードウェアコンカレンシー] チェック ボックスまで下にスクロールし、それを選択します。

  6. 数値入力ボックスに、エミュレートするコアの数を入力します。

    コア数を 10 に設定して

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

既定値に戻すには、[ リセット ] (リセット アイコン) ボタンをクリックします。

CPU 負荷をエミュレートする

CPU またはコンピューティングの負荷 は、システムのコンピューティングが実行されているワークロードの量と、そのワークロードが制限に近いかどうかを把握できる一連の報告された状態です。 この情報を使用すると、ビデオ会議やビデオ ゲームなどのリアルタイム アプリケーションを適応させ、使用可能なすべての処理能力を活用しながら、ワークロードをリアルタイムで適応することでシステムの応答性を維持できます。

センサー ツールを使用すると、Compute Pressure API によって報告できる状態をエミュレートできます。

Web サイトの CPU 負荷をエミュレートするには:

  1. 新しいウィンドウまたはタブで 、TODO アプリ のデモ ページなどの Web ページを開きます。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、DevTools の下部にあるクイック ビュー パネルが開きます。

  4. [クイック ビュー] パネルで、[その他のツール] ボタンをクリックし、[センサー] を選択します。

    センサー ツールは、DevTools の下部にある [クイック ビュー] パネルで開きます。

  5. センサー ツールで、[CPU 圧力] セクションまで下にスクロールし、人間が判読できる圧力状態のいずれかを選択します。

    • オーバーライドなし
    • 名目
    • 市
    • 真面目
    • 重大

  6. DevTools の上部にある [ DevTools の再読み込み ] ボタンをクリックします。

関連項目

MDN：

デモ：

Emscripten:

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクとソフィア・エメリアノによって執筆されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

  • Last updated on