TECH SCAPE

AR関連多め(HoloLens, AzureKinect、SparkAR)

必要な画面(ローディング・エラー)まとめ

8thwall WebAR

※ この記事は撤退予定のQiitaからの移植です。 ※ 2019年12月05日に投稿

背景

8thWallを用いてWebAR制作すると、メインコンテンツ以外に用意しなくてはいけない画面(ローディング、エラー、PC画面)がたくさんあります。 中には「iOSの特定のバージョンだけ出すエラー」といった限定的なものもあり、かなりややこしく感じました。

開発途中に「やっぱりこの画面も必要でした！」とならないように、まとめておきます。

公式サンプルのローディング・エラー画面

以下サンプルをみると、8thWallが用意してくれている画面が表示されます。 https://github.com/8thwall/web/tree/master/examples

これらはXRExtrasの loadingmodule と runtimeerrormodule が表示してくれているものです。(開発の話は別記事で投稿予定) 本記事ではサンプルのスクリーンショットを交えつつ、オリジナルで画面を作る場合の注意点を書いていきます。

iOS、Android 共通

ローディング

サンプルでは8thWallロゴが回転する画面が出ます。 ローディングが完了すると、フェードアウトしてカメラ映像が表示されます。

loading.jpg

オリジナルで制作する場合 全画面を覆うデザインであれば基本的に自由です。

ただし、商用公開時には「Powerd By 8thWall」のマークを入れる必要があるでしょう。 私が8thWall社に商用公開の連絡をした際にお願いされたことや、スパイダーバースARなど過去事例でも入っていることから確定事項かなと思います。

共通エラー

  • 起動後(onStart後)にエラーが起きた時
  • リアカメラのみ使用可能なSLAM(空間認識)をフロントカメラで使おうとした場合

に表示する画面です。主にお世話になるのは前者です。

cameraSelectionWorldTrackingError.jpg

オリジナルで制作する場合 「エラーが起きました」という内容とともに、リロードを促すようにしましょう。

userPromptErrpr

XR8(8thWallのAPI)プロンプトがユーザー側から拒否されている時に出るエラーのようです。 いろんな端末を使用しましたが、出たことのないんですよね...(自分だけでしょうか？)

userPromptError.jpg

オリジナルで制作する場合

リロードを促しましょう。正直、共通エラー画面と一緒のデザインにしてしまってもいいかなと思います。

Android限定

カメラ許可エラー

Chromeの設定で「サイトの設定 -> カメラ」という項目があります。 デフォルトでは「最初に確認する」になっていますが、ユーザーが意図的にOFFにしている(もしくはアドレスをBlockしている)とこのエラーが出ます。

cameraPermissionsErrorAndroid.jpg

オリジナルで制作する場合

  1. 右上メニューから設定を開く
  2. サイト設定を開く
  3. カメラを開く
  4. アクセス拒否を解除

という誘導をしましょう

iOS限定

カメラ許可エラー

先ほど書いたAndroidカメラエラーのiOSバージョンです。 「設定アプリ -> Safari」で「カメラとマイクのアクセス」がOFFになっていると、この画面が出ます(デフォルト設定ではON)。

cameraPermissionsErrorApple.jpg

オリジナルで制作する場合

Safari設定の変更を促す&リロードしてもらう内容にしましょう。

モーションセンサーエラー

これが一番厄介なエラー。iOS11以下、iOS12、iOS13でパターンが変わります。

iOS11以下

motionPermissionsErrorApple.jpg

iOS11以下では、モーションセンサー機能はデフォルトでONです。 バージョンによっては、設定アプリにモーションセンサーON/OFFの項目がありませんでした。

オリジナルで制作する場合

「設定アプリ -> Safari」を見直してもらって、リロードしてもらいましょう。

iOS12

deviceMotionErrorApple.jpg

iOS12では、デフォルトでモーションセンサーが拒否されている問題があります。 参考 : iOS 12.2でWebVRとWebARが半ば終わった件について

ほとんどのユーザーが直面するエラーのためか、8thWallサンプルも詳細に設定手順が書かれています。

オリジナルで制作する場合

サンプル同様、細かく設定を促すことをお勧めします。

  1. 設定アプリを開く
  2. Safariを開く
  3. 「モーションと画面の向きのアクセス」をON
  4. リロードする

iOS13

ios13.jpg

iOS13では改善されて、モーションセンサーへのアクセスが初期状態で許可されています！

...と思いきや、「一度ユーザーの承諾を得る必要がある」という仕様が加わりました。ボタンを押す必要があり、結局用意する画面が1つ増えてしまいました。 サンプルでは、ローディング画面の上にモーダルが出て、「Continue」を押すとさらにモーションセンサー許可に進めます。

ちなみにこのモーダルだけ、XEExtrasではなくXR8で生成されている模様です。

参考 : iOS13でWebARとWebVRにおけるデバイスモーション設定が改善しました！ iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか

オリジナルで制作する場合

承諾ボタンを搭載したモーダルか画面を用意しましょう。 ボタンの挙動は上記記事を参考に、DeviceMotionEvent.requestPermission()とDeviceOrientationEvent.requestPermission()を使用しましょう。

PC

スクリーンショット 2019-12-04 19.10.38.png

8thWallはPCでの使用ができません。 QRコードを載せつつ、スマートフォンでのアクセスを誘導する画面を用意しましょう