JS 加速度検知

スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。

このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。

スマホを上下左右に振ってください

サンプルのスクリプトは以下の通りです。


function ClickRequestDeviceSensor(){
  //デバイスのイベントへのリクエスト許可確認
  DeviceOrientationEvent.requestPermission().then( function( response ){
    if( response === 'granted' ){
      //許可されたらイベントを実行する
      window.addEventListener("devicemotion", devicemotionHandler);
      //許可ボタンを消す
      $('#sensorrequest').css( 'display', 'none' );
    }
  }).catch( function( e ){
    console.log( e );
  });
}


$(function(){


if( window.DeviceOrientationEvent ){
  if( DeviceOrientationEvent.requestPermission && typeof DeviceOrientationEvent.requestPermission === 'function' ){

var banner = '<div  onclick="ClickRequestDeviceSensor();" class="btn" id="sensorrequest">加速度センサーの有効化</div>';
    $('#demo_info').append( banner );

}else{
window.addEventListener("devicemotion", devicemotionHandler);
}
}

});

function devicemotionHandler(event) {
  // X軸
  var x = event.acceleration.x;
  // Y軸
  var y = event.acceleration.y;
  // Z軸
  var z = event.acceleration.z;

    var l = 5;
    if (x > l) {
    $('#demo_data span').html('<b>右</b>に振りました！');
    }
    else if (x < -l) {
    $('#demo_data span').html('<b>左</b>に振りました！');
    }
    else if (y > l) {
    $('#demo_data span').html('<b>上</b>に振りました！');
    }
    else if (y < -l) {
    $('#demo_data span').html('<b>下</b>に振りました！');
    }
    else return;
}

このサンプルはjQueryを組み合わせて実装しています。