IOS 13 deviceorientation

提供: ディーズガレージ wiki
移動先: 案内検索

iOS 12.2以降、デフォルトでセンサー値取得が不可になっています。
センサーを使用する全てのWebVR・WebARに影響が出ているものと思われます。

iOS 12.2と13でセンサー値取得方法が変更されたのでスクリプトの修正方法を探ってみます。
IOS 12.2 deviceorientationに追加する形で探ってみます。

必要な追加関数

参考: iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか - Qiita

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

実行可能なパターン

confirm

失敗する

            if (confirm("センサーを有効にします")) {
                request_permission();
            } else {
                alert("起動できません");
            };

失敗するがアラート表示しない

button

成功する

	<button onclick="request_permission()">センサーを有効にします</button>

べたなタッチイベントをAppleは要求してるように見える
都合いいことにセンサー値取得に失敗してる状態でも有効に切り替えできる

alertもどき

成功する

  • iOS13以上はalertもどきhtml要素を挿入 > 表示
  • センサーを有効にします > OK
  • OKボタンをタッチイベントにしてrequest_permission()を実行
  • ”動作と方向”へのアクセスを求めています > 許可
  • 一度有効にしたドメインは次回有効になってる
  • ↑iOS 12.2と同じsetTimeout後のセンサー値で判断

動作確認

スマホdeVR deviceorientation devicemotion
宇宙マイクロ波背景放射VR universal deviceorientation geolocation
スマホDEバーチャルモデル universal deviceorientation devicemotion
shake! universal deviceorientation devicemotion
SpaceColony universal deviceorientation
V-Ray for Unity Babylon universal deviceorientation

まとめ

ライブラリ

https://dz.plala.jp/svr/iOSdeviceorientationCheck.js
https://dz.plala.jp/svr/iOSdeviceorientationCheck.css

設置

<script src="jquery-3.x.x.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script src="iOSdeviceorientationCheck.js"></script>
<link rel="stylesheet" iOSdeviceorientationCheck.css">