Subterranean Flower

Generic Sensor APIでJavaScriptから各種センサの値を読み取る

IT
JavaScript
プログラミング
2017/09/16
Author
古都こと
ふよんとえんよぷよぐやま！！！

Generic Sensor APIは、JavaScirptからセンサ類への、統一的な方法でのアクセスを可能にするAPIです。

今までもいくつかのセンサにアクセスするAPIは提供されてきましたが、APIが提供されるのに時間がかかり、値を読み取る方法もバラバラでした。Generic Sensor APIはそれらの問題を解決します。

各ブラウザの実装状況

Generic Sensor APIの実装状況は以下の通りです：

  • Chrome 62: Ambient Light Sensor（環境光センサ）のみ
  • Firefox 56: 未実装
  • Safari 11: 未実装
  • Edge 16: 未実装

Generic Sensor APIの基本的な使い方

Generic Sensor APIはセキュアなコンテキスト（https）でのみ利用可能です。

Generic Sensor APIの使い方は簡単です。対応するオブジェクトをnewして、イベントリスナを登録するだけです。ここではAmbient Light Sensor（環境光センサ）を例に説明します。

// センサオブジェクトをnewする
const sensor = new AmbientLightSensor();

// 有効になった時の動作
sensor.addEventListener('activate', (event) => {
  console.log('AmbientLightSensorは有効になりました。');
});

// 値が変わった時の動作
sensor.addEventListener('reading', (event) => {
  console.log(`${sensor.illuminance}ルクス`);
});

// エラーの時の動作
sensor.addEventListener('error', (event) => {
  console.log(event.error);
});

// 読み取り開始
sensor.start();

// 読み取り停止
// sensor.stop();

Generic Sensor APIでは、まず対応するオブジェクトをnewします。そして必要なイベントリスナを登録し、センサをstartします。必要に応じてstopすることもできます。

また、センサにはサンプリング周波数を指定することができます。

// センサオブジェクトをfrequencyを指定してnewする
const sensor = new AmbientLightSensor({ frequency: 60 });

ここでは環境光センサを例にしましたが、どのセンサを用いる場合でも、使い方はほぼ同じです。

詳しい仕様は以下のURLで確認できます。

Permissions APIと組み合わせる

各種センサは無条件に読み取ることができるとは限りません。ブラウザやセンサの種類にもよりますが、ユーザーの明示的な許可が必要になるかもしれません。

Permissions APIを利用すれば、センサへのアクセスが許可されているかどうかを調べることができます。

Permissions APIについては、詳しくはMDNのPermissions APIのページか、このブログの「Permissions APIでブラウザからの各種機能へのアクセス権限を確認・要求する」をご覧ください。

// パーミッションを調べる
navigator.permissions.query({name: 'ambient-light-sensor'})
    .then((result) => {
      if(result.state === 'granted') {
        console.log('AmbientLightSensorは利用可能です。');
      } else if(result.state === 'denied') {
        console.log('AmbientLightSensorは利用不可能です。');
      } else if (result.state === 'prompt') {
        console.log('AmbientLightSensorの利用には許可が必要です。');
      }

      // センサオブジェクトをnewする
      const sensor = new AmbientLightSensor();

      // 有効になった時の動作
      sensor.addEventListener('activate', (event) => {
        console.log('AmbientLightSensorは有効になりました。');
      });

      // 値が変わった時の動作
      sensor.addEventListener('reading', (event) => {
        console.log(`${sensor.illuminance}ルクス`);
      });

      // エラーの時の動作
      sensor.addEventListener('error', (event) => {
        console.log(event.error);
      });

      // 読み取り開始
      sensor.start();

      // 読み取り停止
      // sensor.stop();
    });

Generic Sensor APIで扱える各種センサ

加速度センサ（Accelerometer）

加速度センサはAccelerometerオブジェクトとして扱うことができます。センサはx、y、zの値を持ちます。

Permissions APIでの値は「accelerometer」です。

const sensor = new Accelerometer();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

線形加速度センサ（LinearAccelerationSensor）

線形加速度センサ（※加速度センサから重力を取り除いた値）はLinearAccelerationSensorオブジェクトとして扱うことができます。センサはx、y、zの値を持ちます。

Permissions APIでの値は「accelerometer」です。

const sensor = new LinearAccelerationSensor();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

重力センサ（GravitySensor）

重力センサはGravitySensorオブジェクトとして扱うことができます。センサはx、y、zの値を持ちます。

Permissions APIでの値は「accelerometer」です。

const sensor = new GravitySensor();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

ジャイロスコープ（Gyroscope）

ジャイロスコープはGyroscopeオブジェクトとして扱うことができます。センサはx、y、zの値を持ちます。

Permissions APIでの値は「gyroscope」です。

const sensor = new Gyroscope();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

絶対オリエンテーションセンサ（AbsoluteOrientationSensor）

絶対オリエンテーションセンサはAbsoluteOrientationSensorオブジェクトとして扱うことができます。絶対オリエンテーションセンサは、地球を基準にデバイスの回転を表すセンサです。センサはクォータニオンを表す値quaternionと、クォータニオンから回転行列に変換するメソッドpopulateMatrixを持ちます。

Permissions APIでの値は「accelerometer」「gyroscope」「magnetometer」の全てです。

const sensor = new AbsoluteOrientationSensor();
const mat4 = new Float32Array(16);

sensor.addEventListener('reading', () => {
  console.log(sensor.quaternion);
  sensor.populateMatrix(mat4);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

相対オリエンテーションセンサ（RelativeOrientationSensor）

相対オリエンテーションセンサはRelativeOrientationSensorオブジェクトとして扱うことができます。相対オリエンテーションセンサはデバイスの静止状態を基準に回転を表すセンサです。値quaternionとメソッドpopulateMatrixを持ちます。

Permissions APIでの値は「accelerometer」と「gyroscope」です。

const sensor = new RelativeOrientationSensor();
const mat4 = new Float32Array(16);

sensor.addEventListener('reading', () => {
  console.log(sensor.quaternion);
  sensor.populateMatrix(mat4);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

磁気センサ（Magnetometer）

磁気センサはMagnetometerオブジェクトとして扱うことができます。センサはx、y、zの値を持ちます。

Permissions APIでの値は「magnetometer」です。

const sensor = new Magnetometer();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

未キャリブレート磁気センサ（UncalibratedMagnetometer）

未キャリブレート磁気センサはUncalibratedMagnetometerオブジェクトとして扱うことができます。センサはx、y、zの値に加え、xBias、yBias、zBiasの値を持ちます。

Permissions APIでの値は「magnetometer」です。

const sensor = new UncalibratedMagnetometer();

sensor.addEventListener('reading', () => {
  console.log(sensor.x);
  console.log(sensor.y);
  console.log(sensor.z);
  console.log(sensor.xBias);
  console.log(sensor.yBias);
  console.log(sensor.zBias);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：

環境光センサ（AmbientLightSensor）

環境光センサはAmbientLightSensorオブジェクトとして扱うことができます。センサはilluminance（単位：ルクス）の値を持ちます。

Permissions APIでの値は「ambient-light-sensor」です。

const sensor = new AmbientLightSensor();

sensor.addEventListener('reading', () => {
  console.log(sensor.illuminance);
});

sensor.start();

詳しい仕様は以下のURLで確認できます：