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

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

DEMO

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 />");
}