「IOS 13 deviceorientation」の版間の差分

提供: ディーズガレージ wiki
移動先: 案内検索
(alertもどき)
(動作確認)
88行目: 88行目:
  
 
=='''動作確認'''==
 
=='''動作確認'''==
全てthree.js使用
+
three.js使用
 
{| class="wikitable" style="width:680px;"
 
{| class="wikitable" style="width:680px;"
 
| style="padding-left:10px;padding-right:10px;"| [https://dz.plala.jp/svr/ スマホdeVR]
 
| style="padding-left:10px;padding-right:10px;"| [https://dz.plala.jp/svr/ スマホdeVR]

2019年10月14日 (月) 17:01時点における版

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();
    };
};

実行可能なパターン

何も考えず成功してるもの

カメラを切り替えるタイミングで実行
Babylon.js使用

                        // iOS
                        document.getElementById("deviceOrientationCamera").addEventListener("click", function () {
                            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後のセンサー値で判断

動作確認

three.js使用

スマホdeVR deviceorientation devicemotion
宇宙マイクロ波背景放射VR universal deviceorientation geolocation
スマホDEバーチャルモデル universal deviceorientation devicemotion
shake! universal deviceorientation devicemotion
SpaceColony 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">