2014/06/10

【JavaScript】スマートフォン搭載の各種センサー値を取得する方法

【JavaScript】スマートフォン搭載の各種センサー値を取得する方法 まとめ

スマートフォンやタブレットに搭載されている各種センサー類の値を取得する方法を紹介します.

スマートフォンやタブレットでWebアプリを制作する際に参考にしてみてください.

目次

タッチセンサ

スマートフォンやタブレットにおいて,スワイプなどの操作は指で行われることがほとんどで,タッチ数やタッチされた座標を求める場合に,タッチセンサの値を取得します.

window.addEventListener("touchstart", function(event) {
  //同時にタッチされた数を取得
  var touchCount = event.touches.length;

  //タッチされた位置座標を取得
  //クライアント座標
  var clientX = event.touches[0].clientX;
  var clientY = event.touches[0].clientY;
  //ページ上の座標
  var pageX = event.touches[0].pageX;
  var pageY = event.touches[0].pageY;
  //画面上の座標
  var screenX = event.touches[0].screenX;
  var screenY = event.touches[0].screenY;
}, false);

※複数箇所のタッチ座標を取得するには,touches配列の添字を変更し,配列の長さ分取得します.

加速度センサ

加速度センサを用いて,傾きや動き,衝撃,振動などを検知することが出来ます.

加速度センサの値を取得するには,devicemotionイベントを利用します.devicemotionイベントは,加速度センサの値に変化が起こると発生するようになっています.

window.addEventListener("devicemotion", function(event) {
    //加速度センサの3軸の値
    var xa = event.acceleration.x;
    var ya = event.acceleration.y;
    var za = event.acceleration.z;
    
    //重力加速度センサの3軸の値
    var xg = event.accelerationIncludingGravity.x;
    var yg = event.accelerationIncludingGravity.y;
    var zg = event.accelerationIncludingGravity.z;
}, false);

ジャイロセンサ

ジャイロセンサを使用すると,3軸の傾きを取得することが出来ます.

ジャイロセンサの値を取得するには,ジャイロセンサの値が変化した時に発生するdeviceorientationイベントを利用します.

イベント発生時に渡されるオブジェクトの各プロパティに軸の傾きを示す数値(角度)が入っており,以下の表のようになります.

プロパティ軸の方向数値の範囲
alpha ディスプレイ奥から手前方向 0~360
beta ディスプレイ横軸と同方向 -90~90
gamma ディスプレイ縦軸と同方向 -90~270

このプロパティの値を取得する方法が以下のようになります.

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

まとめ

スマートフォンやタブレットに搭載されている各種センサのうち,代表的なものを紹介しました.

こういったセンサの値を利用した新機軸のアプリケーションやゲームを制作してみてはいかがでしょうか.