The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

センサーのエミュレート: 位置情報と加速度計

GPS チップと加速度計は、ほとんどの PC に搭載されていないので、テストが難しい場合があります。Chrome DevTools のセンサー エミュレーション ペインでは、一般的なモバイル端末センサーをエミュレートすることによって、テストのオーバーヘッドを削減できます。

TL;DR

  • 位置情報の座標をエミュレートして位置情報のオーバーライドをテストします。
  • 端末画面の向きをシミュレートして加速度計データをテストします。

センサー コントロールへのアクセス

Chrome DevTools センサー コントロールにアクセスするには、次のようにします。

  1. DevTools のメインメニューを開きます。
  2. [More Tools] の [Sensors] をクリックします。
[Sensors] パネルへの移動

注: アプリで、JavaScript（Modernizr など）を使用してセンサーの読み込みが検出された場合、ページを再読み込みする前に、センサー エミュレータを有効にしてください。

位置情報データのオーバーライド

PC とは異なり、モバイル端末では一般的に GPS ハードウェアを使用して位置を検出します。[Sensors] ペインでは、Geolocation API で使用する位置情報の座標をシミュレートできます。

位置情報エミュレーションを有効にするには、エミュレーション ドロワーの [Sensors] ペインで [Emulate geolocation coordinates] チェックボックスをオンにします。

位置情報エミュレーションを有効化

このエミュレータを使用して、navigator.geolocation の位置の値をオーバーライドしたり、位置情報データが利用できないケースをシミュレートしたりできます。

加速度計（端末画面の向き）のエミュレート

Orientation API から得られた加速度計データをテストするには、[Sensors] ペインで [Accelerometer] チェックボックスをオンにして加速度計エミュレータを有効にします。

加速度計コントロール

操作できる画面の向きのパラメータは次のとおりです。

α
z 軸周りの回転。
β
左から右へのチルト。
γ
前面から背面へのチルト。

モデル加速度計をクリックして目的の画面の向きにドラッグすることもできます。

この端末画面の向きのデモを使用して加速度計エミュレータを試してください。