10年以上前

デバイスの傾き、方角、加速度を取得できる「Device Orientation Event」

スマートフォンをはじめとする最近のデバイスには、様々なセンサーが搭載されています。今回の記事ではジャイロスコープ、コンパス、加速度センサーのリアルタイム情報をJavaScriptで取得する方法を紹介します。これを使えば、コンパスアプリや水平機、傾けてボールを転がすゲームなどが作れるようになります。

方角を取得しよう

デバイスの頭を基準にして方角の値(0~360)が取得されます。
・0 – 北
・90 – 西
・180 – 南
・270 – 東

スマホの方角を取得するサンプル

0:北
90:西
180:南
270:東

window.addEventListener('deviceorientation', function(event){ //デバイスの傾きや方角の値が変化したときに発火
document.getElementById('directions').innerHTML = event.alpha; // event.alphaで方角の値を取得
});

10行目の「deviceorientation」というイベント名は、デバイスの方角や傾きの値が変化したときに発火されます。小数点以下15桁という微小の変化で発火されるので、ほぼ止まることなく値が取得され続けることになります。

上下方向の傾きを取得しよう

デバイスの上下方向の傾きの値を取得します。
・0 – 水平
・-90または90 – 垂直

スマホの上下方向の傾きを取得するサンプル

0:水平
-90または90:垂直

window.addEventListener('deviceorientation', function(event){ //デバイスの傾きや方角の値が変化したときに発火
document.getElementById('beta').innerHTML = event.beta; // event.betaで上下方向の傾きの値を取得
});

左右方向の傾きを取得しよう

デバイスの左右方向の傾きの値を取得します。
・0 – 水平
・-90または90 – 垂直

スマホの左右方向の傾きを取得するサンプル

0:水平
-90または90:垂直

window.addEventListener('deviceorientation', function(event){ //デバイスの傾きや方角の値が変化したときに発火
document.getElementById('gamma').innerHTML = event.gamma; // event.gammaで左右方向の傾きの値を取得
});

加速度を取得しよう

デバイスを振ったときの加速度を取得します。
・x軸 – 上下方向
・y軸 – 左右方向
・z軸 – 前後方向

スマホの加速度を取得するサンプル

重力を含まない加速度

左右方向の加速度:
m/s²

上下方向の加速度:
m/s²

前後方向の加速度:
m/s²

重力を含む加速度

左右方向の加速度:
m/s²

上下方向の加速度:
m/s²

前後方向の加速度:
m/s²

window.addEventListener('devicemotion', function(event){ //デバイスが動いたときに発火
//▼重力なし
if(event.acceleration.x>5) document.getElementById('accelerationX').innerHTML = event.acceleration.x; // event.acceleration.xで上下方向の加速度取得
if(event.acceleration.y>5) document.getElementById('accelerationY').innerHTML = event.acceleration.y; // event.acceleration.yで左右方向の加速度取得
if(event.acceleration.z>5) document.getElementById('accelerationZ').innerHTML = event.acceleration.z; // event.acceleration.zで前後方向の加速度取得

//▼重力あり
if(event.accelerationIncludingGravity.x>5) document.getElementById('accelerationIncludingGravityX').innerHTML = event.accelerationIncludingGravity.x; // event.accelerationIncludingGravity.xで上下方向の加速度取得
if(event.accelerationIncludingGravity.y>5) document.getElementById('accelerationIncludingGravityY').innerHTML = event.accelerationIncludingGravity.y; // event.accelerationIncludingGravity.yで左右方向の加速度取得
if(event.accelerationIncludingGravity.z>5) document.getElementById('accelerationIncludingGravityZ').innerHTML = event.accelerationIncludingGravity.z; // event.accelerationIncludingGravity.zで前後方向の加速度取得
});

重力ありの「accelerationIncludingGravity」では、物理の授業で習った重力加速度が加算されます。基本は9.8m/s2ですが、場所によって重力加速度は異なります。
デバイスを机に置いてみてください。一番下の「前後方向の加速度」の値がプルプルと震えているはずです。これがその場所の重力加速度ということになります(私が住んでいる石川県野々市市では10.01~10.06m/s2でした)。

回転速度を取得しよう

デバイスを回転したときの速度を取得します。時計回りは正の値、反時計回りは負の値を取りますので、プログラミングの際は注意してください。

・alpha – 縦に起こしたり倒したりする方向
・beta – 横に起こしたり倒したりする方向
・gamma – 水平のまま回転する方向

デバイスの回転速度を取得するサンプル

デバイスの回転速度を取得

縦に起こしたり倒したりする方向の回転速度:
deg/s

横に起こしたり倒したりする方向の回転速度:
deg/s

水平のまま回転する方向の回転速度:
deg/s

window.addEventListener('devicemotion', function(event){
if(event.rotationRate.alpha>5) document.getElementById('rotationRateAlpha').innerHTML = event.rotationRate.alpha; //event.rotationRate.alphaで縦方向の回転速度取得
if(event.rotationRate.beta>5) document.getElementById('rotationRateBeta').innerHTML = event.rotationRate.beta; //event.rotationRate.betaで横方向の回転速度取得
if(event.rotationRate.gamma>5) document.getElementById('rotationRateGamma').innerHTML = event.rotationRate.gamma; //event.rotationRate.gammaで水平方向の回転速度取得
});