2017-10-21

JavaScript だけでブラウザ上からスマホの向きや動きを知る … 2 DeviceMotion 編

前回紹介した DeviceOrientation は「端末が現在どのような方角を向いていて、どのくらい傾いているか」が分かるシロモノだった。

JavaScript だけでブラウザ上からスマホの向きや動きを知る … 1 DeviceOrientation 編

今回は DeviceMotion、加速度センサー の情報を取得する。

これを使うと、一定の速度以上で端末を動かしたことを検知するとか、ユーザが端末を持ってジャンプした、とかいう動きを検知することができる。動きの種類に応じた処理を行いたい時に使えるだろう。

以下の GitHub Pages にサンプルを作ったので、コチラを見ながら読んでみてほしい。

iOS Safari Web Test

対象ブラウザがイベントを取得できるかの検知

対象のブラウザが DeviceMotion (加速度センサー) のイベントを取得できるかは、以下のように確認する。

if(DeviceMotionEvent in window) {
  // 加速度センサーが使える
}

こちらも DeviceOrientationEvent と同じように、 window.ondevicemotion というプロパティもあるので覚えておきたい。

DeviceMotionEvent の取得方法

以下のように window のイベントとして定義することで情報を取得できる。

window.addEventListener('devicemotion', function(event) {
  // Interval
  console.log('前回呼び出しからの経過時間 : ' + event.interval);
  
  // Acceleration : 端末の加速度
  console.log('x (左右) : ' + event.acceleration.x);
  console.log('y (上下) : ' + event.acceleration.y);
  console.log('z (前後) : ' + event.acceleration.z);
  
  // Acceleration Including Gravity : 端末の加速度 + 重力
  console.log('x (左右) : ' + event.accelerationIncludingGravity.x);
  console.log('y (上下) : ' + event.accelerationIncludingGravity.y);
  console.log('z (前後) : ' + event.accelerationIncludingGravity.z);
  
  // Rotation Rate : デバイスの回転速度
  console.log('alpha (縦回転)   : ' + event.rotationRate.alpha);
  console.log('beta  (横回転)   : ' + event.rotationRate.beta);
  console.log('gamma (水平回転) : ' + event.rotationRate.gamma);
});

コメントで大体説明してしまったが、加速度センサーやデバイスの回転方向を取得することができる。

interval

interval は前回情報を取得してから今回の呼び出しまでの経過時間を示す。大抵は0.001秒みたいな物凄い勢いで繰り返し呼び出されるので、ログ出力やパワーが必要な処理を高速で何度も呼び出さないように注意したい。

acceleration

acceleration は、端末の上下左右前後の加速度が分かる。端末をビュンと前に出したり、勢い良く高く上げたりすると、x・y・z の値が大きくなるのが分かると思う。

accelerationIncludingGravity

accelerationIncludingGravity は、acceleration が純粋に端末の位置移動による加速度を返していたのに対し、こちらはそれに加えて重力も加味した値が返される。

どちらかというと、accelerationIncludingGravity が重力加速度を含んだ生の加速度を返していて、acceleration はここから重力加速度を除いた情報として値を返しているようだ。

rotationRate

rotationRate はデバイスの回転速度。前後左右に傾けるような動きの速度が分かる。

かなり高速で繰り返しイベントが発火するので、情報の扱いが大変そう。閾値の設定も難しいところだが、JavaScript だけで特殊な処理なしにこうした情報が取得できるのは面白い。

参考文献

JavaScript で加速度センサーの値を取ってみる - はしくれエンジニアもどきのメモ

DeviceMotion・DeviceOrientation 両方のサンプルコードが載っているサイトたち。