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

jQueryで加速度センサー値の取得と使い方【iOS13以降対応】 javascript
この記事は約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 />");
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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