建築CGとWEBとアプリ開発の制作スタジオ

  1. システム開発
  2. 960 view

[360VR] Panolens.jsをiOS13以降のジャイロセンサーに対応させる

iOS13でジャイロセンサーが使えない?

センサーの利用許可が必要になった

iOS12.2以降でジャイロセンサーは、カメラと同じくユーザーがアクセス許可しなければ使えない仕様に変わりました。iOS12はユーザー自らアプリ設定を変更する必要があるのですが、iOS13ではユーザーにアクセス許可を求めるダイアログを出せる様になりました。

2020年5月29日現在のPanolens.jsはこの仕様変更に対応していない為、iOS12.2以降で正しく動作しません。そこで、下記メソッドを追加して利用許可をリクエストする機能を追加します。

追加するメソッドは2つ

  • DeviceMotionEvent.requestPermission()
  • DeviceOrientationEvent.requestPermission()

ジャイロセンサーには「動作」(移動検知)と「方向」(回転検知)の2種類あり、DeviceMotion~は「動作」の利用許可リクエストで、DeviceOrientation~は「回転検知」 の利用許可リクエストを行います。

iOS13対応の為に追加するコード

下記コードを<script>~</script>内に追加します。

index.php
//Panorama (パノラマのインスタンスを作成)
var panorama = new PANOLENS.ImagePanorama('ここにパノラマ画像ファイルを設定');

//iOS13対応(画面タッチすると許可を求めるダイアログを出す)
        panorama.addEventListener("click", function () {
            //iOS13以降を検出したら移動検知センサー使用許可を求める
            if (DeviceMotionEvent && DeviceMotionEvent.requestPermission && typeof DeviceMotionEvent.requestPermission === 'function') {
                DeviceMotionEvent.requestPermission();
            }
            //iOS13以降を検出したら回転検知センサー使用許可を求める
            if (DeviceOrientationEvent && DeviceOrientationEvent.requestPermission && typeof DeviceOrientationEvent.requestPermission === 'function') {
                DeviceOrientationEvent.requestPermission();
            }
        });

このメソッド自体にも利用条件があるので注意

  • SSL化された「https~」のアドレスである事
  • 下記メソッドはユーザー操作で呼び出す事(onClickイベントなど)

上のコードは、panoramaにイベントリスナーを追加する方法で書いています。この様に、ユーザーが画面をタッチしたら呼び出される様な仕組みにしないと機能しないので、注意が必要です。

システム開発の最近記事

  1. Apple整備済製品の入荷を音で知らせてくれるプログラム

  2. [360VR] Panolens.jsをiOS13以降のジャイロセンサーに対応させる

  3. [360VR] Panolens.jsで、クリックした位置に動的にホットスポットを追加する…

  4. 無料のPanolens.jsで360VRを作成する

  5. 【AI】画像解析AI「Google Cloud Vision」でパースを解析する

関連記事