【iOS13対応】iOS Safariでジャイロセンサーが動かない問題+解決法

本記事では、iOS Safariでモーションセンサー(ジャイロセンサー・加速度センサー)が動かない問題についての解説記事です。

iOSのSafariにおいて、VRの3Dマップ(360°のパノラマ画像)などのジャイロセンサー・加速度センサーを使ったツールなどが動作しない場合は、本問題が原因である可能性があります。

原因:iOS 12.2からのSafariの仕様変更

本問題の原因は、iOS 12.2からのSafariの仕様変更によるものです。

プライバシー保護の観点から、モーションセンサー(ジャイロセンサー・加速度センサー)の利用制限が強化されました。

影響:Web サイトがユーザの同意なくセンサー情報にアクセスできる可能性がある。

説明:モーションや方向のデータの処理に、アクセス権の問題がありました。この問題は、制限を強化することで解決されました。

参考 iOS 12.2のセキュリティコンテンツについてAppleサポート

本件はiOSのアップデートによるSafariの仕様変更なので、同じiOSでもChromeやFirefoxなどの他のブラウザアプリではこれまで通り動作しています。

ここからは、iOS12とiOS13、それぞれの解決法を紹介していきます。

iOS12の解決法:端末の設定「モーションと画面の向きのアクセス」をONにする

iOS12では、端末の設定からモーションと画面の向きのアクセスをONにすることで解決します。

STEP 1
「設定」アプリを開く

まずはiOSアプリの「設定」アプリを開きます。

STEP 2
「Safari」をタップ
下の方に送っていくと「Safari」という項目があるので、それをタップします。
STEP 3
モーションと画面の向きのアクセスをON(緑色)にする

下の方に送っていくと「プライバシーとセキュリティ」という設定一覧があります。

その中にある「モーションと画面の向きのアクセス」をON(緑色)にします。

STEP 4
ジャイロセンサーを使っているページを開き直す

あとはSafariでページを開き直せば、ジャイロセンサーを使ったコンテンツを使えつようになります。

iOS13の解決法:「モーションと画面の向きのアクセス」が無い?! コンテンツ側からアクセス許可をする形式に変更された

iOS 13では「モーションと画面の向きのアクセス」がなくなり、コンテンツ側(JavaScript)でセンサーのアクセスの許可をリクエストする形式に変更されました。

ボタンを押したときなどをトリガーとして、アクセス許可のポップアップ(下画像)を出し、許可された場合のみセンサーを利用できます。

下記の例は、id="sensor_contents" な要素(センサーを使ったコンテンツの領域)をタップしたときに、アクセスの許可をリクエストするJavaScriptのサンプルです。

// ジャイロセンサーが有効か?
if(window.DeviceOrientationEvent){
    // ★iOS13向け: ユーザーにアクセスの許可を求める関数があるか?
    if(DeviceOrientationEvent.requestPermission){
        var sensor_contents= document.getElementById("sensor_contents");
        // id="sensor_contents" な要素がクリックされたら
        sensor_contents.addEventListener("click", function(){
            // ★ジャイロセンサーのアクセス許可をリクエストする
            DeviceOrientationEvent.requestPermission().then(function(response){
                // リクエストが許可されたら
                if(response === "granted"){
                    // deviceorientationが有効化されるのでaddEventListener
                    window.addEventListener("deviceorientation", deviceorientationHandler);
                }
            }).catch(function(e){
                console.log(e);
            });
        });
    // iOS13以外
    }else{
        // 通常通り、イベントハンドラを追加
        window.addEventListener("deviceorientation", deviceorientationHandler);
    }
}

// センサーの値を取得+値が変わるたびにおこなう処理
function deviceorientationHandler(){
    // ※※※※※※※※※※※※※※※※
    //   ここに従来の処理を書いていく
    // ※※※※※※※※※※※※※※※※
}

ちなみに、Appleが公表している開発者向けの情報によると、2020年1月現在の直近4年間に発売されたiPhoneデバイス(※)のiOSのシェア率は、iOS13が77%、iOS12が17%です。

参考 App Store SupportApple Developer

iOS 12では利用者側の設定が必要になるので、もうしばらくはiOS 12向けに設定変更をうながす文言を追加しておくと良いでしょう。