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

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

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

対応状況

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

ソースコード

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

パラメータ

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

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

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

参考文献