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

jQueryでジャイロセンサー値の取得と使い方【iOS13以降対応】 javascript
この記事は約3分で読めます。
スポンサーリンク

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

DEMO

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

ジャイロセンサーを許可
  • X軸(-90~270までの値)0
  • Y軸(-90~90までの値)0
  • Z軸(0~360までの値)0
  • スマホの向き:

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("縦");
  }
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

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

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

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

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

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

コメント

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