デバイス センサーのエミュレート

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

センサー ツール

概要

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

モバイル デバイスのビューポートをシミュレートし、ネットワークと 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 を構築している場合は、世界中のさまざまな場所でサイトが正しく動作することを確認する必要があります。

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

  • 東京のような事前設定された都市の 1 つ。
  • [その他] を選択してカスタムの経度と緯度座標を入力します。
  • [ 場所を利用できない ] を選択すると、ユーザーの位置情報が利用できない場合のサイトの動作が表示されます。

[場所] リストから [東京] を選択する

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

モバイル デバイスには、物理的な方向を検出できるセンサーが搭載されています。 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 プレッシャー] セクションまで下にスクロールし、人間が判読できるプレッシャー状態のいずれかを選択します。

    • オーバーライドなし
    • Nominal
    • 普通
    • 深刻
    • 重大

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

    '重大な' CPU 負荷のエミュレート

関連項目

MDN：

デモ:

Emscripten:

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Kayce Basques と Sofia Emelianova によって作成されています。

Creative Commons ライセンス この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

  • 最終更新: