ios13以降でA-FRAMEを使う時の注意点
こんにちは。
今年も年賀状を作ろうと思い、A-FRAMEを久々に使ったところ、思わぬところで躓いたのでメモしておきます。
去年のAR年賀状作成の記事はこちら↓
kabos.hatenablog.jp
発生した問題
オブジェクトを表示させた時に画面に張り付いてしまう。
こんな感じ↓ですね。
— すだち (@kabostrawberry) December 26, 2019
スマホのジャイロセンサーによるモーションデータを取得できていないことによりこうなってしまっているようです。
調べたところ、ios12.2からモーションデータを自動(ユーザーに無許可)でとってくれなくなったとのこと。
ios13では、カメラの使用許可などと同じようにポップアップ画面を出してユーザーに許可を取れば使えるそうなのですが、その画面を表示させることが難しい。
こちらやこちらのサイトを参考にJavaScriptを書いてみたのですがうまくいかず・・・
解決策
そこでA-FRAMEの公式ページで検索してみると、"device-orientation-permission-ui" というスクリプトが追加されているのを発見しました。これはデフォルトでモーションデータの使用許可を求める画面を表示してくれるようです。
つまり、解決策は、
A-FRAMEのバージョン1.0.0(以降)を使用する！
でした。
あっさり解決してしまった・・・このように↓ちゃんと張り付かず表示されています。
— すだち (@kabostrawberry) December 26, 2019
ちなみにこのリファレンスを見ていると、ポップアップ画面のボタンの色も変えられるそうです。
それから、これはSafariの仕様だと思うのですが一度許可したら設定を変更できないようですね・・・間違えて拒否しないように気をつけないといけませんね。
