jQueryでジャイロセンサー値の取得と使い方【iOS16対応】

スマホのジャイロセンサーを利用する方法のご紹介です。
ジャイロセンサーとは、回転や傾きを取得するセンサーでスマホでも、画面の向きの変化を取得するのに利用されている。
近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS（iOS13以降）は、ユーザーの許可が無いとセンサーの値を取得できないくらい厳しい。
以前までは、傾きを検知したら自動で取得していたが、それが出来なくなってしまった。
では、iOSの方は少し面倒だが実際に「ジャイロセンサーを許可」ボタンを押して数値を確認してみよう。
（リロードした場合、もう一度「ジャイロセンサーを許可」ボタンを押すと値の取得ができます）

DEMO

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

jQuery

// ジャイロセンサーが使用可能だったら
if(window.DeviceOrientationEvent){
  // ユーザーにアクセスの許可を求める関数があったら（iOS13以降の対応）
  if(DeviceOrientationEvent.requestPermission){
    $(".btn").on("click", function(){
      // ジャイロセンサーへのアクセス許可を申請する
      DeviceOrientationEvent.requestPermission().then(function(response){
        // リクエストが許可されたら
        if(response === "granted"){
        　// 回転や傾きの変化を検知する「deviceorientation」を使い、「gyro()」を実行
        　$(window).on("deviceorientation", gyro);
        }
      });
    });
    // アクセスの許可を求める関数がなかったら
  }else{
    // 回転や傾きの変化を検知する「deviceorientation」を使い、「gyro()」を実行
    $(window).on("deviceorientation", gyro);
  }
}
// 値の処理
function gyro(){
  // それぞれの値の小数点以下を切り捨てて格納
  var beta = Math.floor(event.beta);
  var gamma = Math.floor(event.gamma);
  var alpha = Math.floor(event.alpha);
  // 値を表示
  // X軸（-90~270までの値）
  $(".beta span").text(beta);
  // Y軸（-90~90までの値）
  $(".gamma span").text(gamma);
  // Z軸（0~360までの値）
  $(".alpha span").text(alpha);
  // 傾きアニメーション
  $(".img > span").css({transform: 'perspective(1200px) rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)'});
  // スマホの向き
  if(beta < 10) {
    $(".roll span").text("横");
  }else{
    $(".roll span").text("縦");
  }
}