iOS13のSafariでデバイスの傾きを取得する

Web XRとかブラウザゲームとか、デバイスの傾きに応じて動くWebアプリは楽しい。iOS13のSafariは、傾きを取得する際ユーザーの許可が必要になった。ちょっと書き足すだけでできたので、手順をメモ。

使用したデバイス

• 10.5インチiPad Pro
  • iPadOS13.1

"動作と方向"へのアクセスを求める

下記サイトを参考にしました。DeviceMotionEvent.requestPermission()とDeviceOrientationEvent.requestPermission()でアクセスを求めます。

下記関数を傾きを使った処理の前に入れてあげればいいっぽい。

function request_permission(){
     if (
         DeviceMotionEvent &&
         DeviceMotionEvent.requestPermission &&
         typeof DeviceMotionEvent.requestPermission === 'function'
     ) {
         DeviceMotionEvent.requestPermission();
     }
     if (
         DeviceOrientationEvent &&
         DeviceOrientationEvent.requestPermission &&
         typeof DeviceOrientationEvent.requestPermission === 'function'
     ) {
         DeviceOrientationEvent.requestPermission();
     }
}

あとは今まで通りです。僕は下記サイト等を参考にさせていただきました。

ローカル環境をHTTPS通信で動作確認

上記の手法はHTTPS通信でないと使えない。ローカルで動作確認する際面倒なので調べたところ、ngrokを使えば解決できるそうです。下記サイトを参考にしました。

www.ryotaku.com

ローカルで立てたサーバーにランダムなURLを割り振ってインターネットに公開してくれるらしい。公開しちゃうのが恥ずかしいけど、アカウント登録すればパスワードも設定できるとのこと。

ちなみにローカルのサーバーはhttp-serverを使った。

アクセスしてみる

下記サイトの「傾」というボタンを押すと"動作と方向"にアクセスしてよろしいかと聞かれるはず。

こんな感じ。

おしまい。