iOS 12.1 以上のバージョンでは、これらの 2 つのイベントをブラウザや Web ビューで正常に使用することができません。以前はdeviceorientationを直接リッスンして、デバイスの傾き値を取得して実際のプロジェクトに適用することができました。たとえば、拡張デザイナーを使用してモバイル拡張を作成し、mBlock モバイルで適切なゲームを作成することができました。加速度センサーを使用して、さまざまな面白いことができます。
しかし、12.1 バージョンでは、公式にMotion & Orientation settingsが無効に設定されています。iPad または iPhone 12.1 + デバイスにアクセスして、設定 - Safari - プライバシーとセキュリティに移動し、Motion & Orientation Accessが有効に設定されているかどうかを確認できます。しかし、13 バージョンでは、公式にそのエントリが非表示になっています。どうやら見つけることができないようです。
しかし、心配する必要はありません。iOS 12.1 + バージョンでは、DeviceMotionEvent.requestPermission()|DeviceOrientationEvent.requestPermission()を使用してアクションと方向の許可を取得できます。この呼び出しにより、システムダイアログが表示され、その許可を取得するために使用されます。ユーザーが許可をクリックすると、deviceorientation|devicemotionをリッスンすることができます。これにより、問題が解決されます。また、ユーザーに設定をクリックするように案内することもできますが、これは 13 以下のバージョンにのみ適用されます。13 バージョンでは、そのエントリを見つけることができなくなりました。
実際の処理コードは、以下の例を参考にしてください。
const getDeviceOrientationEventPermission = function () {
if (DeviceOrientationEvent
&& DeviceOrientationEvent.requestPermission
&& typeof DeviceOrientationEvent.requestPermission === 'function'
) {
DeviceMotionEvent.requestPermission().then(permissionState => {
if(permissionState === "granted") {
window.addEventListener("devicemotion", function (e) {}, false);
} else if(permissionState === "denied") {
console.warn("ユーザーが許可しませんでした。");
}
});
}
if (DeviceOrientationEvent
&& DeviceOrientationEvent.requestPermission
&& typeof DeviceOrientationEvent.requestPermission === 'function'
) {
DeviceOrientationEvent.requestPermission().then(permissionState => {
if(permissionState === "granted") {
window.addEventListener("deviceorientation", function (e) {}, false);
} else if(permissionState === "denied") {
console.warn("ユーザーが許可しませんでした。");
}
});
}
}
また、注意する必要があります。許可が必要なウェブサイトは、適切なhttps証明書を持っている必要があります。そうでない場合、トリガー時にCall to requestPermission() failed, reason: Browsing context is not secure.エラーが発生します。iPad で Safari で開いているウェブサイトを直接デバッグすることができます。DeviceOrientationEvent.requestPermission()を直接入力するだけで、許可が与えられるかどうかがわかります。ただし、実際のアプリケーションでは、ユーザーがアクセス権を取得するためにアクティブになるように誘導する必要があります。そうしないと、Unhandled Promise Rejection: NotAllowedError: Requesting device orientation or motion access requires a user gesture to promptエラーが発生します。たとえば、document.getElementById('s_logo').onclick = getDeviceOrientationEventPermissionと入力すると、[baidu.com](http://baidu.com)を直接開いてシミュレーションできます。領域外をクリックするだけで、正常に許可ダイアログが表示されます。ユーザーが許可をキャンセルした場合、いかなるトリガー方法でも許可ウィンドウが再度表示されないことに気付くでしょう。ユーザーが許可しませんでした。というメッセージが表示されます。これは Chrome ブラウザと似ています。一度だけ表示でき、後続の設定はユーザー自身が行う必要があります。
iOS 12.1 + バージョンでは、アクションと方向のイベントの使用が非常に厳格になったため、Web ビューでこの機能を正常に使用するには、非常に困難になります。getDeviceOrientationEventPermissionを介して許可ウィンドウを開こうとしても、開くことはできません。したがって、Web ビューでアクションや方向のようなイベントを使用する場合、Web 側で許可を取得するだけでなく、ネイティブ側でも対応する必要があります。iOS 13 バージョンでは、DeviceMotionEventとDeviceOrientationのインターフェースが追加されました。
以上のことから、ユーザーが拡張デザイナーでモバイル拡張を作成し、アクションや方向のイベントを使用したい場合、実際にはすべてのデバイスでサポートされないことを認識する必要があります。したがって、ユーザーが拡張機能を使用する場合、実際のバージョンが 12.1 以上である場合、この機能を正常に使用できないことを通知する必要があります。
参考リンク
iOS13 にて javascript の devicemotion を取得する
Get device motion and orientation back on iOS 13