146

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

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

どのデバイス (ラップトップ、携帯電話、タブレット) で動作することが知られていますか?

NB : 実は、この質問に対する答え (の一部) は既に知っているので、すぐに投稿します。ここに質問を投稿する理由は、加速度計のデータが(特定のデバイスで) Javascript で利用できることを他の人に知らせ、この件に関する新しい発見を投稿するようコミュニティに呼びかけるためです。現在、これらの機能に関するドキュメントはほとんどないようです。

4

4 に答える 4

183

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

  • 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、どちらも各軸xに 、y、の 3 つのフィールドがあります。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 つのイベントの読み取り値を最初のイベントの読み取り値と「一致させる」ために使用されますが、これらは決して正確な表現ではありません。この単純な「おもちゃ」プロジェクトでは問題なく動作しますが、もう少し深刻なことにデータを使用する必要がある場合は、さまざまなイベントで提供される値の単位に慣れ、それらを尊重して扱う必要があります:)

于 2010-12-07T15:38:01.990 に答える
22

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

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

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に簡単な作業コードがあります

于 2014-10-06T13:10:51.887 に答える
1

便利なフォールバックはこちら: 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);
于 2016-03-02T11:46:48.903 に答える