Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebでのARには ハードル(闇)がいっぱいある話

55 views

Published on

XR Tech Tokyoでお話しした内容です。
Web上でのARのデバッグの大変さに対してのtipsを共有します。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

WebでのARには ハードル(闇)がいっぱいある話

  1. 1. WebでのARには ハードル(闇)がいっぱいある話 @kyasbal_1994
  2. 2. @kyasbal_1994 東京工業大学 情報理工学院 修士2年 AltLayer株式会社 代表取締役社長 未踏ジュニアPM(2018年〜) 未踏2016 スーパークリエータ 未踏Adv 2018イノベータ 主な技術分野 Realtime CG Web 基本はWebGL周りのエンジニア
  3. 3. Hyper realityはご存知の方が多いはず… この画面は何によって管理されているのか? AR用のOS? 街を歩くためのアプリ?
  4. 4. Hyper realityはご存知の方が多いはず… ユーザが実行している アプリケーション? 店が掲載している広告? この画面は何によって管理されているのか? AR用のOS? 街を歩くためのアプリ?
  5. 5. ARコンテンツ用セキュリティサンドボックス ブラウザの次の形? センサ技術や空間認識技術の発展 この世界のARコンテンツはどう作り、どう管理されている? 今 好きな場所にアプリケーションをおける (Windows MRが提案している概念) 未来
 (本当に欲しいもの) 場所、時間、状況に合わせて表示されるべき コンテンツが自動で解決され、 安全に実行される環境 好きな場所にアプリケーションをおける +
  6. 6. 実は色々存在するImmersive Webブラウザ Mozilla Mixed Reality Blog “Progressive WebXR” https://blog.mozvr.com/progressive-webxr-ar-store/
  7. 7. Mozillaの提案するxR時代なWeb Mozilla Mixed Reality Blog “Progressive WebXR” https://blog.mozvr.com/progressive-webxr-ar-store/
  8. 8. Web技術上のARコンテンツ きっとこれから来そう!
  9. 9. 使えるかどうか試した 目的: WebARへのユーザの反応の検証、クラッシュログなどの収集 UU: 2400強 (4日) クラッシュレート: 7%程度(内4%がカメラアクセスの拒否) ユーザの反応: QRコードは読めるが、ARマーカを読むことが難しい
 ゴミQRコードリーダを使っている人がいて辛い
 (URLが勝手に翻訳されてひらけない、 何が何でもSafariで開かせてくれないQRリーダ)
  10. 10. WebでのARには ハードル(闇)がいっぱいある話 (闇編)
  11. 11. そもそもWebARってどうやって作る? 表示 three.jsやBabylon.jsなど (現状ではUnityやPlaycanvasは使えなさそう) マーカーベース 床認識ベース AR.js or jsArtoolkit 8thwall 認識技術(現状) 認識技術(将来) WebXR device API (W3CのImmersive Web WGが仕様策定中)
  12. 12. iOS辛い問題 (その1 / 3) カメラを使うデバッグ環境がめっちゃしんどい ブラウザ上でカメラはhttpsなアドレスからしかとれない
 (ただしlocalhostは除く) AndroidはPCのローカルサーバにlocalhostで接続できる(超便利) iOSはできない… 解決策その1 ngrok(開発用プロキシサーバサービス)を使う (でもjsがでかくなるととっても重くてしんどい、開くまでに5秒とかかかる) 解決策その2 一度自己署名CA証明書を作っておき、iOSに信頼させる ローカルサーバを建てる際に毎回ローカルIPを取得し、 そのCA証明書で署名した証明書を自動生成しhttps環境を用意する 闇が多いので色々教訓がありますがそういう会じゃないので詳しく聞きたい方は後で。
  13. 13. iOS辛い問題 (その2 / 3) アプリ内ブラウザだとカメラが取れない iOSではSafari以外のブラウザではカメラが取れない (Chrome、LINE内ブラウザも、Facebook内ブラウザも全部そう) SafariじゃないならSafariにリダイレクトさせたい QRコードリーダアプリには要注意 (UAを書き換えてSafariであると言い張ってくる) SafariかどうかはUserAgentを見ればわかる Step 1. Safariに飛ばす Step 2. そんなに甘くない
  14. 14. iOS辛い問題 (その2 / 3) アプリ内ブラウザだとカメラが取れない SafariじゃないならSafariにリダイレクトさせたい Safariに飛ばす Step 2. Chromeならchrome://のアドレスで飛ばせる Safariはsafari://なんてない
 Safariはhttp://XXX、https://YYY、ftp://ZZZのみを受け取るが、 http://とhttps://はアプリ内ブラウザがキャッチしてしまう ftp://を使って無理やりリダイレクトする QRコードリーダアプリには要注意 (UAを書き換えてSafariであると言い張ってくる) SafariかどうかはUserAgentを見ればわかる Step 1.
  15. 15. iOS辛い問題 (その2 / 3) アプリ内ブラウザだとカメラが取れない SafariじゃないならSafariにリダイレクトさせたい SafariかどうかはUserAgentを見ればわかる QRコードリーダアプリには要注意 (UAを書き換えてSafariであると言い張ってくる) Step 1. Safariに飛ばす Step 2. ftp://を使って無理やりリダイレクトする 例: Safariでhttps://XXXを開かせたい ftp://YYY/XXXでアクセスできるftpサーバを用意して以下のようなHTMLを返す
  16. 16. iOS辛い問題 (その3 / 3) iOS12.2からデフォでジャイロセンサーが取れない (New!) Safariのデフォルトの設定でジャイロセンサー の取得が弾かれるようになった 現状ではこれを認識してダイアログ を出すしか方法がない
  17. 17. 基本、WebARの 開発環境はAndroidがオススメ
  18. 18. 宣伝 WebARにおけるWordpress AltLayer 1.テーマを選ぶ 2.フォームを埋める 3.WebARがデプロイされる 3ステップでWebARコンテンツが完成! @altlayer_inc 公開時に上記アカウントで情報を発信するのでフォロー等よろしくお願いします。 ベータ公開準備中(出展もしてます)

×