ウェブ用センサー

Generic Sensor API を使用すると、加速度計、ジャイロスコープ、磁力計などのデバイス上のセンサーにアクセスできます。

Alex Shalamov
Alex Shalamov
Mikhail Pozdnyakov
Mikhail Pozdnyakov
Thomas Steiner

現在、センサーデータは、次のようなユースケースを実現するために、多くのプラットフォーム固有のアプリケーションで使用されています。 没入型ゲーム、フィットネス記録、拡張現実やバーチャル リアリティの 3 つがあります。橋渡しをするのは面白くないでしょう。 プラットフォーム固有のアプリケーションとウェブ アプリケーションのギャップ[ Generic Sensor API、ウェブ用

Generic Sensor API とは

Generic Sensor API は、この API 呼び出しを行う センサーデバイスをウェブプラットフォームに接続しますこの API は、基盤となる Sensor インターフェースと、 センサークラスです。ベース インターフェースを使用することで実装と仕様を簡素化できる プロセスをご覧ください。たとえば、 Gyroscope クラス。すごく小さい！「 コア機能はベース インターフェースによって指定され、Gyroscope は単に 3 つの 角速度を表す属性です。

一部のセンサークラスは、実際のハードウェア センサー（加速度計や ジャイロスコープクラスですこれらは低レベルセンサーと呼ばれます。他のセンサーは 融合センサー、複数の低レベルのデータを統合する センサーを使用して、スクリプトが計算する必要のある情報をエクスポーズします。たとえば、 AbsoluteOrientation センサー モデルは、モデルから取得したデータに基づいて、すぐに使える 4 行 4 行列の 加速度計、ジャイロスコープ、磁力計です。

ウェブ プラットフォームですでにセンサーデータが提供されているとお考えかもしれませんが、そのとおりです。対象 インスタンス、DeviceMotion、 DeviceOrientation モーション センサー データをエクスポーズします。では、なぜ新しい API が必要なのでしょうか。

既存のインターフェースと比べて、Generic Sensor API には次のような多くの利点があります。

  • Generic Sensor API は、新しいセンサークラスとセンサーを使って簡単に拡張できるセンサー フレームワークです。 これらの各クラスは汎用インターフェースを維持します。1 つのセンサータイプ用に記述されたクライアント コード ほんのわずかな変更を加えるだけで、別のデータセットに再利用できます。
  • センサーを構成できます。たとえば、環境に適したサンプリング頻度を 対応できます。
  • プラットフォーム上でセンサーが利用できるかどうかを確認できます。
  • センサー測定値のタイムスタンプの精度が高いため、他のセンサーとの同期が改善されます アクティビティの数を減らします。
  • センサーのデータモデルと座標系が明確に定義されているため、ブラウザ ベンダーは ソリューションを実装できます
  • 汎用センサーベースのインターフェースは DOM にバインドされていない（つまり、navigator でもない） window オブジェクトも）保存されるため、将来的にサービス内で API を使用する機会が またはヘッドレス JavaScript ランタイム（埋め込みなど）に実装するか、 できます。
  • セキュリティとプライバシーの側面は汎用センサーの最優先事項である センサー API であり、古いセンサー API に比べてセキュリティが大幅に向上しています。Google Cloud サービスと Permissions API。
  • 画面座標との自動同期: Accelerometer、Gyroscope、LinearAccelerationSensor、 AbsoluteOrientationSensor、RelativeOrientationSensor、Magnetometer。

利用可能な汎用センサー API

本書の執筆時点では、試せるセンサーがいくつかあります。

モーション センサー:

  • Accelerometer
  • Gyroscope
  • LinearAccelerationSensor
  • AbsoluteOrientationSensor
  • RelativeOrientationSensor
  • GravitySensor

環境センサー:

  • AmbientLightSensor（Chromium の #enable-generic-sensor-extra-classes フラグの背後にある）
  • Magnetometer（Chromium の #enable-generic-sensor-extra-classes フラグの背後にある）

機能検出

ハードウェア API の機能検出は、ブラウザとハードウェアの両方が そのインターフェースをサポートしているかどうか、および対応するセンサーがデバイスに搭載されているかどうか。審査中 ブラウザがインターフェースをサポートしているかどうかは簡単です。（Accelerometer は次のいずれかに置き換えます） 上記のその他のインターフェース。）

if ('Accelerometer' in window) {
  // The `Accelerometer` interface is supported by the browser.
  // Does the device have an accelerometer, though?
}

意味のある機能検出結果を得るには、センサーにも接続する必要があります。 この例は、その方法を示しています。

let accelerometer = null;
try {
  accelerometer = new Accelerometer({ frequency: 10 });
  accelerometer.onerror = (event) => {
    // Handle runtime errors.
    if (event.error.name === 'NotAllowedError') {
      console.log('Permission to access sensor was denied.');
    } else if (event.error.name === 'NotReadableError') {
      console.log('Cannot connect to the sensor.');
    }
  };
  accelerometer.onreading = (e) => {
    console.log(e);
  };
  accelerometer.start();
} catch (error) {
  // Handle construction errors.
  if (error.name === 'SecurityError') {
    console.log('Sensor construction was blocked by the Permissions Policy.');
  } else if (error.name === 'ReferenceError') {
    console.log('Sensor is not supported by the User Agent.');
  } else {
    throw error;
  }
}

ポリフィル

Generic Sensor API をサポートしていないブラウザの場合、 polyfill が利用可能です。ポリフィルを使うと 関連するセンサーのみをあります。

// Import the objects you need.
import { Gyroscope, AbsoluteOrientationSensor } from './src/motion-sensors.js';

// And they're ready for use!
const gyroscope = new Gyroscope({ frequency: 15 });
const orientation = new AbsoluteOrientationSensor({ frequency: 60 });

これらすべてのセンサーとは何ですか？使用方法

センサーについては、簡単に紹介する必要があるかもしれません。センサーに精通している場合は、 ハンズオン コーディングのセクションに進んでください。そうでない場合は、サポートされている 詳しく見ていきます。

加速度計と直線加速度センサー

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 加速度計センサーの測定

Accelerometer センサー は、センサーをホストするデバイスの加速度を 3 軸（X、Y、Z）で測定します。このセンサーは 慣性センサーです。つまり、デバイスが直線的自由落下にあるときに、 加速度は 0 m/s2 で、テーブルの上にデバイスを平らに置いたときの加速度は 上向き（Z 軸）は地球の重力に等しくなります。すなわち g 約 +9.8 m/s2 テーブルを上方に押す力を測定します。デバイスを 右から、X 軸の加速度は正になります。 作成します。

加速度計は歩数計測、モーション検知、シンプルなデバイスなどに使用可能 方向です。多くの場合、加速度計の測定値は他のソースからのデータと組み合わされて、 方向センサーなどの融合センサーを作成します。

「 LinearAccelerationSensor センサーをホストしているデバイスに加えられる加速度を測定します。 重力ですテーブルの上に平らに置いてあるなど、デバイスが静止しているとき、センサーは 3 軸で約 0 m/s2 の加速度。

重力センサー

ユーザーは、重力センサーの値に近い測定値を、 Accelerometer と LinearAccelerometer の値を手動で検査しますが、面倒になる場合があります センサーから提供される値の精度に依存します。Android などのプラットフォームでは、 重力測定値を提供するオペレーティング システムなので、 計算、ユーザーのハードウェアに応じたより正確な値の提供、 API エルゴノミクスについて学びました。「 GravitySensor は効果を返します。 重力によるデバイスの X、Y、Z 軸に沿った加速度。

ジャイロスコープ

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ジャイロスコープ センサーの測定

Gyroscope センサーは、以下を測定します。 デバイスの X、Y、Z 軸を中心とした角速度（ラジアン/秒）。ほとんどの消費者 機械（MEMS）を持つデバイス ジャイロスコープは、さまざまなセンサーに起因して 慣性コリオリ力。MEMS ジャイロスコープは 重力に対するセンサーの変形によって生じるドリフトに 機械的なシステムです。ジャイロスコープは、数十 kHz、 他のセンサーよりも消費電力が大きくなる可能性があります。

方向センサー

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 絶対方向センサーの測定

「 AbsoluteOrientationSensor 地球の座標系を基準としてデバイスの回転を測定するフュージョン センサーです。 一方、 RelativeOrientationSensor モーション センサーをホストしているデバイスの静止状態からの回転を表すデータを提供します。 参照座標系です。

最新の 3D JavaScript フレームワークはすべて四元数をサポート 回転を表す回転行列 ただし、WebGL を直接使用する場合は、OrientationSensor に quaternion プロパティ および populateMatrix()メソッドを使用します。 スニペットは次のとおりです。

three.js

let torusGeometry = new THREE.TorusGeometry(7, 1.6, 4, 3, 6.3);
let material = new THREE.MeshBasicMaterial({ color: 0x0071c5 });
let torus = new THREE.Mesh(torusGeometry, material);
scene.add(torus);

// Update mesh rotation using quaternion.
const sensorAbs = new AbsoluteOrientationSensor();
sensorAbs.onreading = () => torus.quaternion.fromArray(sensorAbs.quaternion);
sensorAbs.start();

// Update mesh rotation using rotation matrix.
const sensorRel = new RelativeOrientationSensor();
let rotationMatrix = new Float32Array(16);
sensor_rel.onreading = () => {
  sensorRel.populateMatrix(rotationMatrix);
  torus.matrix.fromArray(rotationMatrix);
};
sensorRel.start();

BABYLON

const mesh = new BABYLON.Mesh.CreateCylinder('mesh', 0.9, 0.3, 0.6, 9, 1, scene);
const sensorRel = new RelativeOrientationSensor({ frequency: 30 });
sensorRel.onreading = () => mesh.rotationQuaternion.FromArray(sensorRel.quaternion);
sensorRel.start();

WebGL

// Initialize sensor and update model matrix when new reading is available.
let modMatrix = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
const sensorAbs = new AbsoluteOrientationSensor({ frequency: 60 });
sensorAbs.onreading = () => sensorAbs.populateMatrix(modMatrix);
sensorAbs.start();

// Somewhere in rendering code, update vertex shader attribute for the model
gl.uniformMatrix4fv(modMatrixAttr, false, modMatrix);

方向センサーにより、没入型ゲーム、拡張ゲーム、仮想ゲームなど、さまざまなユースケースに対応 あります。

モーション センサー、高度なユースケース、要件について詳しくは、 モーション センサーの説明 ドキュメント。

画面座標との同期

デフォルトでは、空間センサーの測定値は デバイスにバインドされ、画面の向きを考慮しないローカル座標系です。 あります。

<ph type="x-smartling-placeholder">
</ph> デバイスの座標系
デバイス座標系

ただし、ゲームや拡張現実、バーチャル リアリティなどの多くのユースケースでは、センサーの読み取り値を 画面の向きにバインドされた座標系で解決されます。

<ph type="x-smartling-placeholder">
</ph> 画面座標系
画面座標系

これまで、センサー測定値を画面座標に再マッピングするには、JavaScript で実装する必要がありました。 この方法は非効率的で、ウェブの複雑さも著しく増大します。 アプリケーション コードウェブ アプリケーションは画面の向きの変化を監視し、座標を センサー測定値の変換も行いますが、オイラー角や 四元数。

Generic Sensor API は、はるかにシンプルで信頼性の高いソリューションです。ローカル座標系は、 定義済みのすべての空間センサークラスに対して構成可能: Accelerometer、Gyroscope、 LinearAccelerationSensor、AbsoluteOrientationSensor、RelativeOrientationSensor、 Magnetometer。センサー オブジェクト コンストラクタに referenceFrame オプションを渡すことで、ユーザーは 返された測定値を device または 画面座標。

// Sensor readings are resolved in the Device coordinate system by default.
// Alternatively, could be RelativeOrientationSensor({referenceFrame: "device"}).
const sensorRelDevice = new RelativeOrientationSensor();

// Sensor readings are resolved in the Screen coordinate system. No manual remapping is required!
const sensorRelScreen = new RelativeOrientationSensor({ referenceFrame: 'screen' });

コーディングを始めましょう。

Generic Sensor API はとてもシンプルで、簡単に使用できます。センサーのインターフェースは start()、 センサーの状態を制御する stop() メソッドと、 センサーのアクティベーション、エラー、新しく利用可能になったことを知らせる通知を受け取るためのイベント ハンドラ あります。通常、具体的なセンサークラスは、固有の読み取り属性をベースに追加します。 クラスです。

開発環境

開発中は、localhost を通じてセンサーを使用できます。Google Cloud 向けの モバイル デバイス、セットアップ ポート転送 ローカルサーバーにインストールし、準備は完了です。

コードの準備ができたら、HTTPS をサポートするサーバーにデプロイします。 GitHub ページは HTTPS で配信されるため、リソースを共有するのに最適な場所 できます。

3D モデルの回転

このシンプルな例では、絶対方向センサーのデータを使用して回転を修正します。 四元数を計算します。model は 3.js Object3D クラス インスタンスで、 quaternion プロパティ。「 次のコード スニペットを 画面の向き（スマートフォン） は、絶対方位センサーを使用して 3D モデルを回転させる方法を示しています。

function initSensor() {
  sensor = new AbsoluteOrientationSensor({ frequency: 60 });
  sensor.onreading = () => model.quaternion.fromArray(sensor.quaternion);
  sensor.onerror = (event) => {
    if (event.error.name == 'NotReadableError') {
      console.log('Sensor is not available.');
    }
  };
  sensor.start();
}

デバイスの向きは、WebGL シーン内の 3D model 回転に反映されます。

<ph type="x-smartling-placeholder">
</ph> センサーが 3D モデルの向きを更新する
センサーが 3D モデルの向きを更新する

パンチメーター

次のコード スニペットは、 Punchmeter デモ 直線加速度センサーを使用して、 初期状態では静止していると仮定して動作します。

this.maxSpeed = 0;
this.vx = 0;
this.ax = 0;
this.t = 0;

/* … */

this.accel.onreading = () => {
  let dt = (this.accel.timestamp - this.t) * 0.001; // In seconds.
  this.vx += ((this.accel.x + this.ax) / 2) * dt;

  let speed = Math.abs(this.vx);

  if (this.maxSpeed < speed) {
    this.maxSpeed = speed;
  }

  this.t = this.accel.timestamp;
  this.ax = this.accel.x;
};

現在の速度は、加速度関数の積分への近似として計算されます。

<ph type="x-smartling-placeholder">
</ph> パンチ速度測定用のデモ ウェブ アプリケーション
パンチ速度の測定

Chrome DevTools を使用したデバッグとセンサー オーバーライド

Generic Sensor API の使用に実機が不要な場合もあります。Chrome DevTools 優れたサポートが デバイスの向きをシミュレートします。

<ph type="x-smartling-placeholder">
</ph> 仮想スマートフォンのカスタムの向きデータをオーバーライドするために Chrome DevTools が使用される
Chrome DevTools を使用してデバイスの向きをシミュレートする

プライバシーとセキュリティ

センサー測定値はセンシティブ データであり、悪意のあるウェブページからさまざまな攻撃を受ける可能性があります。 Generic Sensor API を実装すると、いくつかの制限が適用され、セキュリティが低下する可能性がある プライバシーリスクの軽減につながります。使用をお考えのデベロッパーは、 簡単にリストアップしましょう

HTTPS のみ

Generic Sensor API は高度な機能であるため、ブラウザでは安全なコンテキストでのみ許可されます。イン Generic Sensor API を使用するには、HTTPS 経由でページにアクセスする必要があるということです。 開発中は http://localhost で移動できますが、本番環境では 必要があります。ベスト プラクティスについては、安全かつセキュアのコレクションをご覧ください。 説明します。

権限ポリシーの統合

汎用の権限ポリシーの統合 センサー API は、フレームのセンサーデータへのアクセスを制御します。

デフォルトでは、Sensor オブジェクトはメインフレーム内または同一オリジン サブフレーム内でのみ作成できます。 これにより、クロスオリジンの iframe が無許可でセンサーデータを読み取ることを防止できます。このデフォルトの動作 これを変更するには、対応するモジュールを明示的に有効または無効にして ポリシー制御機能。

以下のスニペットは、クロスオリジン iframe への加速度計データへのアクセスの付与を示しています。 これで、Accelerometer または LinearAccelerationSensor オブジェクトをそこに作成できるようになりました。

<iframe src="https://third-party.com" allow="accelerometer" />

センサー測定値の配信は一時停止できます

センサー測定値には、目に見えるウェブページ、つまりユーザーが実際に やり取りできますさらに、ユーザーが操作を実行した場合、センサーデータは親フレームに提供されません。 クロスオリジン サブフレームにフォーカスが移ります。これにより、親フレームがユーザー入力を推測しなくなります。

次のステップ

近い将来実装される、すでに指定されている一連のセンサークラスがあります。 周囲光センサー 近接センサーただし、Google Cloud の優れた拡張性により、 汎用的なセンサー フレームワークですが、さまざまなモデルを表す新しいクラスが登場すると予想されます。 備えています。

今後の作業でもう一つ重要な分野として、Generic Sensor API 自体の Generic Sensor API の改善があります。 センサーの仕様は現在推奨候補となっているため、まだ時間がある 開発者が必要とする新機能を 追加できるようになります

ぜひご協力ください。

センサーの仕様に達しました 候補への推奨事項 そのため、ウェブ デベロッパーやブラウザのデベロッパーからのフィードバックは大いに参考になります。Google に どの機能を追加すればよいか、 現在の API。

仕様に関する問題もお気軽にお知らせください。 バグとして報告してください。

リソース

謝辞

この記事は Joe Medley によってレビューされ、 Kayce Basques。ヒーロー画像: Misko 経由 Wikimedia Commons。