jQueryで加速度センサー値の取得と使い方【iOS16対応】

jQueryで加速度センサー値の取得と使い方【iOS13以降対応】
この記事は約3分で読めます。

スマホの加速度センサーを利用する方法のご紹介です。
加速度センサーとは、傾きを取得するセンサー。
近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS(iOS13以降)は、ユーザーの許可が無いとセンサーの値を取得できないくらい厳しい。
では、iOSの方は少し面倒だが実際に「加速度センサーを許可」ボタンを押して数値を確認してみよう。
(リロードした場合、もう一度「加速度センサーを許可」ボタンを押すと値の取得ができます)

DEMO

PCでは、加速度センサーの取得ができませんので、スマホで確認していただけると嬉しいです。

加速度センサーを許可

左・右の傾き判定

奥・手前の傾き判定

手前
  • 0

jQuery

// 加速度センサーが使用可能だったら
if(window.DeviceOrientationEvent){
 //  ユーザーにアクセスの許可を求める関数があったら(iOS13以降の対応)
 if(DeviceOrientationEvent.requestPermission){
  $(".btn").on("click", function(){
   // 加速度センサーへのアクセス許可を申請する
   DeviceOrientationEvent.requestPermission().then(function(response){
    // リクエストが許可されたら
    if(response === "granted"){
     // 傾きの変化を検知する「devicemotion」を使い、「acceleration()」を実行
     $(window).on("devicemotion", acceleration);
    }
   });
  });
  // アクセスの許可を求める関数がなかったら
 }else{
  // 回転や傾きの変化を検知する「devicemotion」を使い、「acceleration()」を実行
  $(window).on("devicemotion", acceleration);
 }
}

// 加速度センサーの値を利用
function acceleration(){
  // 加速度センサーの値を各変数に格納(値が小さく比較しずらいので100倍に)
 var x = 100 * event.accelerationIncludingGravity.x;
 var z = 100 * event.accelerationIncludingGravity.z;
 var y = 100 * event.accelerationIncludingGravity.y;

 // 右・左の判定
 if(x < 0) {
  $(".tilt span").removeClass("color");
  $(".tilt span").eq(0).addClass("color");
 }else{
  $(".tilt span").removeClass("color");
  $(".tilt span").eq(1).addClass("color");
 }
 // 手前・奥の判定
 if(z < 0) {
  $(".depth span").removeClass("color");
  $(".depth span").eq(1).addClass("color");
 }else{
  $(".depth span").removeClass("color");
  $(".depth span").eq(0).addClass("color");
 }
 $(".result_acc span").html("加速度<br />" + "X:" + x.toFixed(2) + "<br />" + "Y:" + y.toFixed(2) +"<br />" + "Z:" + z.toFixed(2) +"<br />");
}

コメント

タイトルとURLをコピーしました