JavaScriptから加速度計/ジャイロスコープデータにアクセスする方法

最近、ラップトップの加速度計またはジャイロスコープにアクセスして、向きや動きの変化を検出しているように見えるいくつかのWebサイトに出会いました。

これはどのように行われますか？windowオブジェクトで何らかのイベントをサブスクライブする必要がありますか？

これが機能することがわかっているデバイス（ラップトップ、携帯電話、タブレット）

^{注意：私は実際にこの質問への回答をすでに知っています（その一部です）。すぐに投稿します。私がここに質問を投稿する理由は、加速度計データが Javascriptで（特定のデバイス上で）利用可能であることを他の人に知らせ、このテーマに関する新しい発見を投稿するようコミュニティに挑戦するためです。現在、これらの機能のドキュメントはほとんどないようです。}

2019+でこれを行う方法は、DeviceOrientationAPIを使用することです。これは、デスクトップおよびモバイルのほとんどの最新ブラウザーで機能します。

window.addEventListener("deviceorientation", handleOrientation, true);

イベントリスナー（この場合は、handleOrientation（）と呼ばれるJavaScript関数）を登録した後、リスナー関数は更新された方向データで定期的に呼び出されます。

方向イベントには4つの値が含まれます。

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

イベントハンドラー関数は次のようになります。

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data
}

現在、クライアントデバイスの移動時にトリガーされる場合とトリガーされない場合のある3つの異なるイベントがあります。そのうちの2つは、向きと最後の動きに重点を置いています。

• ondeviceorientationはデスクトップバージョンのChromeで動作することが知られており、ほとんどのAppleラップトップはこれが動作するために必要なハードウェアを持っているようです。iOS 4.2を搭載したiPhone 4のMobile Safariでも動作します。イベントハンドラ関数では、あなたがアクセスすることができalpha、beta、gammaイベント・データの値は、関数への唯一の引数として指定しました。

• onmozorientationFirefox 3.6以降でサポートされています。繰り返しますが、これはほとんどのAppleラップトップで動作することが知られていますが、加速度計を備えたWindowsまたはLinuxマシンでも動作する可能性があります。イベントハンドラ関数では、一見x、y、zイベントデータのフィールドは、最初の引数として指定しました。

• ondevicemotioniPhone 3GS + 4とiPad（両方ともiOS 4.2）で動作することが知られており、クライアントデバイスの現在の加速に関するデータを提供します。イベントデータは、ハンドラ関数に渡されているaccelerationとaccelerationIncludingGravity、両方の各軸のための3つのフィールドを持っています：x、y、z

「地震検出」のサンプルWebサイトでは、一連のifステートメントを使用して、アタッチするイベントを（ある程度優先された順序で）判断し、受信したデータを共通のtilt関数に渡します。

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

定数係数2および50は、後者の2つのイベントの読み取り値を最初のイベントの読み取り値と「調整」するために使用されますが、これらは決して正確な表現ではありません。この単純な「おもちゃ」プロジェクトの場合は問題なく機能しますが、もう少し深刻なものにデータを使用する必要がある場合は、さまざまなイベントで提供される値の単位に慣れ、それらを尊重して処理する必要があります。

他の投稿の優れた説明にコメントを追加することはできませんが、優れたドキュメントソースがここにあることを説明したいと思います。

次のように、加速度計のイベント関数を登録するだけで十分です。

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

ハンドラーで：

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

磁力計の場合、次のイベントハンドラを登録する必要があります。

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

ハンドラー付き：

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

ジャイロスコープのモーションイベントで指定されたフィールドもありますが、それは普遍的にサポートされているようには見えません（たとえば、Samsung Galaxy Noteでは機能しませんでした）。

GitHubに簡単な作業コードがあります

ここで役立つフォールバック：https : //developer.mozilla.org/en-US/docs/Web/Events/MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener('deviceorientation',  orientationhandler, false);
window.addEventListener('MozOrientation',     orientationhandler, false);