デバイスの傾き、方角、加速度を取得できる「Device Orientation Event」
スマートフォンをはじめとする最近のデバイスには、様々なセンサーが搭載されています。今回の記事ではジャイロスコープ、コンパス、加速度センサーのリアルタイム情報をJavaScriptで取得する方法を紹介します。これを使えば、コンパスアプリや水平機、傾けてボールを転がすゲームなどが作れるようになります。
方角を取得しよう
![](https://img.antytle.com/games/matome/eeb0c97c-da46-4384-ac6f-c42b8f384c3a.jpg)
デバイスの頭を基準にして方角の値(0~360)が取得されます。
・0 – 北
・90 – 西
・180 – 南
・270 – 東
・0 – 北
・90 – 西
・180 – 南
・270 – 東
10行目の「deviceorientation」というイベント名は、デバイスの方角や傾きの値が変化したときに発火されます。小数点以下15桁という微小の変化で発火されるので、ほぼ止まることなく値が取得され続けることになります。
上下方向の傾きを取得しよう
![](https://img.antytle.com/games/matome/cf718eb6-d165-4c94-a278-6526db95a6e6.jpg)
デバイスの上下方向の傾きの値を取得します。
・0 – 水平
・-90または90 – 垂直
・0 – 水平
・-90または90 – 垂直
左右方向の傾きを取得しよう
![](https://img.antytle.com/games/matome/3b41edea-149c-4dbc-b402-9c96b235463f.jpg)
デバイスの左右方向の傾きの値を取得します。
・0 – 水平
・-90または90 – 垂直
・0 – 水平
・-90または90 – 垂直
加速度を取得しよう
![](https://img.antytle.com/games/matome/40e7e2fa-9ac9-4214-9012-fce957090845.jpg)
デバイスを振ったときの加速度を取得します。
・x軸 – 上下方向
・y軸 – 左右方向
・z軸 – 前後方向
・x軸 – 上下方向
・y軸 – 左右方向
・z軸 – 前後方向
重力ありの「accelerationIncludingGravity」では、物理の授業で習った重力加速度が加算されます。基本は9.8m/s2ですが、場所によって重力加速度は異なります。
デバイスを机に置いてみてください。一番下の「前後方向の加速度」の値がプルプルと震えているはずです。これがその場所の重力加速度ということになります(私が住んでいる石川県野々市市では10.01~10.06m/s2でした)。
デバイスを机に置いてみてください。一番下の「前後方向の加速度」の値がプルプルと震えているはずです。これがその場所の重力加速度ということになります(私が住んでいる石川県野々市市では10.01~10.06m/s2でした)。
回転速度を取得しよう
![](https://img.antytle.com/games/matome/4b184a21-8e8c-4bc0-8921-6646be8bed67.jpg)
デバイスを回転したときの速度を取得します。時計回りは正の値、反時計回りは負の値を取りますので、プログラミングの際は注意してください。
・alpha – 縦に起こしたり倒したりする方向
・beta – 横に起こしたり倒したりする方向
・gamma – 水平のまま回転する方向
・alpha – 縦に起こしたり倒したりする方向
・beta – 横に起こしたり倒したりする方向
・gamma – 水平のまま回転する方向
こんなのが作れるようになる!
Compass – Chris Haynes
参考
執筆者Writer
![](https://img.antytle.com/users/AnTytle.jpg)
AnTytle
コメントComment