JSでスマホのジャイロセンサーを扱う

WEB制作
JSでスマホのジャイロセンサーを扱う

スマホのジャイロセンサーは、JSで簡単に取得することができます。

目次

対応状況

スマホは、ほぼ対応していますが、iOSはiframe越しに使用できないので、CodePenなどのサイトでは動作しない点に注意が必要です。

ソースコード

ジャイロセンサーの変化はdeviceorientationイベントで取得できます。ジャイロセンサーの値を取得後、何かしらイイ感じの処理を設計してあげましょう。

window.addEventListener("deviceorientation", handleOrientation, true);
 
function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
}

パラメータ

alphaの値は、z軸を中心にしたスマホの動きで、0～360°の範囲で算出されます。北極が0°で現れるので、スマホの向いている方角がわかります。

betaの値は、x軸を中心にしたスマホの動きで、-180～180°の範囲で算出されます。これでスマホの前後移動を取得できます。

gammaの値は、y軸を中心にしたスマホの動きで、-90～90°の範囲で算出されます。これで左右移動を取得できます。

参考文献