2019年9月20日

iOS13でWebARとWebVRにおけるデバイスモーション設定が改善しました!

目次

  1. はじめに
  2. iOS12.2で発生した問題
  3. iOS13の対応方法
  4. まとめ

はじめに

bageleeの運営母体の株式会社palan では、「Webの最新技術を追求する」一環から、Web上でAR・VRが実現可能なWebAR・WebVRの開発を早くから取り組んでいました。

当初はじめた2年前はどこも開発されていなかったですが、最近だと特にWebARの会社さんが増えてきましたし、少しずつ認知度も高まってきた頃かと思います。

そんな中、iOSのバージョン12.2で入ったsafariの問題があったのですが、無事本日(2019年9月20日)にリリースされたiOSの13で改善しました🎉
ずっと開発者バージョンを追ってきたのですが、ようやく反映されて、ほっとしました。

今回はWebAR、WebVRでの対応方法も含め解説していきます。

iOS12.2で発生した問題

2019年3月にリリースされたiOSの12.2でモーションデータの取得が困難になりました。
正確に言えばsafariの設定上で、こちらの設定をオンにすれば良いのですが、デフォルトの設定がオフなので、ユーザーにわざわざ設定をオンにするお願いをする必要がありました。
手軽さが売りのWebAR/WebVRにとってこれは致命的な問題でした。

Image from iOS (18).png (380.3 kB)

モーションデータにアクセスできないとどうなるのか

そもそも、モーションデータにアクセスできないとなぜ問題なのでしょうか。
わかりやすいのでVRで説明をします。
スマートフォンにおけるWebVRというものは、 スマートフォンをかざしそれを上下左右に動かすことで360度の背景も連動して動く 、というものです。

自社サンプル(寿司ぽっぷ)より

スマートフォンを動かすことでのVR体験を実現する為には、端末を動かした向きやそのスピードを取得する必要があります。
つまり、「この方向にこれくらいのスピードでスマートフォンを動かしたよ」という情報を得ることで、Webページ上で360度画像のどの部分を見せるか制御している、ということです。

その情報が得られなくなると、「どの方向を向いているのか」「どれくらいのスピードで動かしているのか」がわからないので、360度画像のどの部分を見せれば良いか、わからなくなるということです。

また、WebARにおいても360度を使ったものは利用できなくなります。
こちらのWebAR水族館についても、自分の真後ろや真横などに魚がいるにも関わらず、それを見ることができなくなります。
また、床を認識し、そこにロボットをおき、移動させるという8th wallのサンプルについても、一回置いたロボットの位置を加速度を利用することでカメラを動かしても固定することができるのですが、それもできなくなります。

なぜAppleはモーションデータの設定をオフにしたか

こちらについては、クッキーの情報なしでユーザーを特定できるようにするフィンガープリンティングというものが要因とのことですが、今ひとつ納得できないものです。

こちらの記事でも言及されています。
参考:iOS 12.2でWebVRとWebARが半ば終わった件について

iOS13の対応方法

さて、そんなモーションデータのアクセスですが、iOS13で「ユーザーの承諾を得ること」でアクセスが可能になりました🎉

このように、承諾のボタンを用意することで実現が可能です。

※途中から承諾することで横の魚も見ることができています。

実装方法

実装については、至って簡単でDeviceMotionEventとDeviceOrientationEventを使用します。

こんな感じです。

document.getElementById("request_permission").addEventListener("click", function(){
  if (
    DeviceMotionEvent &&
    DeviceMotionEvent.requestPermission &&
    typeof DeviceMotionEvent.requestPermission === 'function'
  ) {
    DeviceMotionEvent.requestPermission();
  }
  if (
    DeviceOrientationEvent &&
    DeviceOrientationEvent.requestPermission &&
    typeof DeviceOrientationEvent.requestPermission === 'function'
  ) {
    DeviceOrientationEvent.requestPermission();
  }
})

こちらのMDNMDNもご参照ください。

React360の場合

弊社ではReact360でWebVRを開発することも多いのですが、このように書くことができます。

    onClick={() => {
      if (
        DeviceMotionEvent &&
        DeviceMotionEvent.requestPermission &&
        typeof DeviceMotionEvent.requestPermission === 'function'
      ) {
        DeviceMotionEvent.requestPermission();
      }
      if (
        DeviceOrientationEvent &&
        DeviceOrientationEvent.requestPermission &&
        typeof DeviceOrientationEvent.requestPermission === 'function'
      ) {
        DeviceOrientationEvent.requestPermission();
      }
      props.click()
    }}

まとめ

以上、今までのデバイスモーション規制に関する流れと対処法でした。
弊社でも、モーションデータを使用しない任意の画像をブラウザだけで認識する技術を独自開発したり、AppleによるUSDZファイルのARとするなど、様々な工夫をしてiOS12.2以降を乗り越えてきました。

どうしてもブラウザやOSの影響を受けやすい技術なので、常にGitHubのissueやW3CやMDNなどのドキュメントに常に目を通すことをおすすめします。

参考までに私がよく見るリポジトリなどです。
https://github.com/immersive-web/webxr/
https://github.com/mozilla/webxr-api
https://www.w3.org/TR/webxr/

4

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

CONTACT PAGE TOP