「IOS 13 deviceorientation」の版間の差分

提供: ディーズガレージ wiki
移動先: 案内検索
 
(同じ利用者による、間の312版が非表示)
1行目: 1行目:
 
{| style="font-weight:100;float:right;"
 
{| style="font-weight:100;float:right;"
|__TOC__
+
|__NOTOC__
 +
|}
 +
再検討 2022年7月更新<br />
 +
センサーデバイス認証<br />
 +
https://dz.plala.jp/permit/
 +
[[ファイル:Compass_design.jpg|93px|border|link=]]  [[ファイル:qr20220704082524704.png|200px|border|link=]]
 +
未着手
 +
横画面の設定
 +
video映像の環境マッピング
 +
認証拒否した場合
 +
{| class="wikitable" style="width:540px;border:none;"
 +
| style="padding-left:10px;padding-right:10px;width:160px;"| スマホ
 +
| style="padding-left:10px;padding-right:10px;"| Geolocation, Orientation, Motion, Video
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| iPhone・safari, chrome
 +
| style="padding-left:10px;padding-right:10px;"| 再接続で再認証を確認, PWA再起動で再認証を確認<br />phpキャッシュバスター使用
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| iPad・safari, chrome
 +
| style="padding-left:10px;padding-right:10px;"| ?
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| Android
 +
| style="padding-left:10px;padding-right:10px;"| ?
 +
|}
 +
 
 +
{| class="wikitable" style="width:540px;border:none;"
 +
| style="padding-left:10px;padding-right:10px;width:160px;"| PC
 +
| style="padding-left:10px;padding-right:10px;"| Geolocation
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| Firefox
 +
| style="padding-left:10px;padding-right:10px;"| IP Geolocationで対応
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| Chrome
 +
| style="padding-left:10px;padding-right:10px;"| IP Geolocationで対応
 +
|-
 +
| style="padding-left:10px;padding-right:10px;"| Edge
 +
| style="padding-left:10px;padding-right:10px;"| IP Geolocationで対応
 
|}
 
|}
デバイス認証プログラム再検討
 
2022.06
 
DeviceOrientationEvent使用
 
phpでtimestamp付きjsに変更 ユニークにして認証拒否対応
 
geolocation認証も追加
 
テスト
 
https://dz.plala.jp/cmb/permit/test/
 
PWAアプリ
 
https://dz.plala.jp/cmb/permit/
 
[[ファイル:compass_design02.jpg|140px]]  [[ファイル:compass_design.jpg|140px]]
 
<br />
 
 
<br />
 
<br />
 +
----
 
この情報は古くなっています。
 
この情報は古くなっています。
  

2022年9月2日 (金) 20:57時点における最新版

再検討 2022年7月更新
センサーデバイス認証
https://dz.plala.jp/permit/

Compass design.jpg  Qr20220704082524704.png
未着手
横画面の設定
video映像の環境マッピング

認証拒否した場合

スマホ Geolocation, Orientation, Motion, Video
iPhone・safari, chrome 再接続で再認証を確認, PWA再起動で再認証を確認
phpキャッシュバスター使用
iPad・safari, chrome
Android
PC Geolocation
Firefox IP Geolocationで対応
Chrome IP Geolocationで対応
Edge IP Geolocationで対応



この情報は古くなっています。

iOS 13でセンサー値取得方法が変更されました。
IOS 12.2 deviceorientationに追加する形で探ってみます。

必要な追加関数

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

設置

<link rel="stylesheet" href="https://dz.plala.jp/svr/iOSdeviceorientationCheck.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script src="https://dz.plala.jp/svr/iOSdeviceorientationCheck.js"></script>