#8「Web XRの今とこれから」

今回のミツエーテックラジオではWebでVRやARコンテンツを作る際に使うWebXR APIについて、ブラウザの実装状況や、現在進行形で策定が進んでいる仕様についてもお話ししました！

COVID-19の影響により、対面のコミュニケーションや、一か所に人が集まることができないこのご時世に、集まる場所はもしかしたら仮想空間かもしれません...！ぜひ聞いてみてください！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

板垣
こんにちは！
加藤
こんにちは！
板垣
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。本日の司会は設計チームの板垣が務めさせていただきます。ゲストは同じく設計チームの加藤さんです。よろしくお願いします！
加藤
よろしくお願いします！
板垣
今回のポッドキャストではですね、「WebXRの今とこれから」をテーマに、XR関連のAPIにはどういったものがあるのか？あとはこれからどうなっていくの？みたいなところをお話していければと思います。
加藤
いやぁ、XR楽しみですよね！
板垣
そうですね。WebのXRってなんなの？という方はですね、加藤さんが去年のミツエーリンクス Advent Calendarで書かれていた「WebXR Device APIの登場」という記事に簡単な概要がまとめられていますので、そちらをご覧になった後に、このポッドキャストを聞くことをオススメいたします。
加藤
XR関連の仕様は結構流動的で、1年前の情報をもとに書いた記事なので、もしかしたら古くなってる情報もあるかもしれないので、そこを注意してもらえればと思います！
板垣
はい！では、早速ですけれど、最近のWebのXRの周辺動向について聞いていければなと思うのですが、加藤さんが記事を書いた1年前から何か変化とかってあったりしましたか？
加藤
そうですね、WebXR APIの仕様は着々と整備が進んでいて、Web上のVRとかARコンテンツも少しずつ増えてきているなぁ…という印象はあります。たとえば最近で言うと、AppleさんがApple Eventを何度か開催していましたけど、イベントのWebページでARコンテンツを提供したりとかしてましたよね。
板垣
あー、あのイベントのロゴをARで見られるやつですよね！
加藤
そうですそうです。あれはWebXR APIではなくて「AR Quick Look」というOS独自のAR技術をつかっているので、iOSユーザー以外の方はもしかしたら知らないかもしれないんですけど、ただこのページのようにWebページから最低限の情報が得られるってのは前提として、一定の条件に当てはまったデバイスではさらにAR体験もできるという設計は参考になるなーと思います。
板垣
なるほど。まぁ、確かにこれからXRコンテンツを作ろうと思ってる人とかにとっては、そういう設計手法みたいなはじめの一歩としては良いのかなと思いました。ちなみに今ARの話をされたと思うんですけど、VRでいうとなにかあったりしますか？
加藤
あー、VRでいうと、Mozillaさんが提供しているHubsっていうサービスがおもしろいですし、実装としても非常に参考になると思います。
板垣
なるほど。Hubsっていうのは、なんなんでしょう？
加藤
簡単にいうとブラウザ上に展開できるソーシャルVR空間ですね。自分のアバターを仮想空間において、同じ空間にいる別の人とチャットしたりとか、会話したりとか、仮想空間上で一緒に写真を撮ったりとかできるサービスです。
板垣
あー、なるほど。じゃあここで忘年会とかできるかもしれないですね。
加藤
あーいいですね！
このHubsはWebXR APIを使って実装されているんですけど、WebXR API対応していないブラウザでももちろん体験はできます。たとえば、iOS Safariで見たときは画面上に仮想空間が展開されて、デバイスを動かしながら空間を見渡したりとか、ズームイン・アウトしたりとかもできます。
板垣
つまりVRデバイスがある人は、その空間にあたかもいるような体験ができるけど、デバイスがない人はブラウザでその空間をブラウジングできるみたいな、そういうことですかね。
加藤
そんなイメージですね！非常によくできていると思います。
板垣
はい。ちなみにWebXR APIの仕様周りでいうと、どういった状況になるんでしょうかね？
加藤
WebXR関連のAPIの仕様は基本的に「W3C Immersive Web Working Group」っていうところが策定を進めています。冒頭で少し話した「WebXR Device API」のほかにも「WebXR Gamepads Module」「WebXR Augmented Reality Module」はWorking Draftまで進んでいる状態ですね。
板垣
仕様策定自体は他にもいろいろ進んでますよね！
加藤
そうなんですよね！これまでのWebブラウジングとは環境とか、操作方法、体験の仕方まですべて大きく違うので、やっぱりいろいろ決めることがあるんだろうなーと思っています。その中でも、個人的には最近公開された「WebXR Hand Input」が気になってます。
板垣
なんだかその、Hand Inputって聞くとすごそうなAPIなんですけど、どういった機能を持ってるんでしょうか。
加藤
これはハンドトラッキングをサポートしているデバイスでないと使えないAPIなんですけど、手の状態を検知して骨格とか、指とか、関節の座標を取得したりできるAPIです。その情報をもとにXR上で手のモデルを表現したり、あとは手のジェスチャーを使って何かをしたい場合に利用できますね。
板垣
なるほど。
加藤
板垣君が注目しているAPIはありますか？
板垣
そうですね…、自分が気になっているので言うと、「WebXR DOM Overlays Module」とかですかね。
加藤
あーいいですね！すこし詳しく教えてもらってもいいですか？
板垣
分かりました。DOM Overlaysっていうのはですね、Web AR空間にテキストだとか、画面操作用の要素みたいなものをですね、DOMコンテンツとして表示する方法を提供してくれるAPIですね。ARコンテンツって実世界を映したレイヤーの上に3Dモデルとか、そういったコンテンツをオーバーレイすることで現実を拡張すると思うんですけど、それらの世界だとか、空間のレイヤーとは切り離した平面のUIレイヤーを一番手前に置くことで、常に表示したい情報だとか、操作用のコントローラーなどを置くことができるんですよ。
加藤
なにか最近のサービスとかでわかりやすい例とかってありますかね？
板垣
そうですね、最近のサービスでいうと、ポケモンGOのモンスターと対峙したときのUIみたいなのが一番わかりやすいのかなぁと思います。あれでいうと、逃げるボタンだとか、リュックボタンがまさにDOM Overlaysで再現できるようになるUIですね。
加藤
なるほどね！やっぱ、ARって今は「モデルを表示して終わり」みたいなコンテンツが多いので、そういう空間内の要素をコントロールできるようなUIってのを一緒に提供できるとより直感的な操作感を提供できるような気がしますね。
板垣
そうですね。
加藤
ちなみにDOM Overlaysってことは、私たちが普段Web制作で使っているDOMのAPIがそのまま活かせるってことでいいんですかね？
板垣
というと、どういうことなんでしょう？
加藤
XRセッション内で、3Dモデルをクリックしたときとかは基本的にselectイベントが発生するようになっているんですけど、DOM Overlaysを使って配置した要素をクリックしたときは、そのselectイベントじゃなくてDOMのクリックイベントが発火するイメージですか？
板垣
それでいうと、ほぼあってますね。DOMコンテンツをクリックした場合はselectイベントとDOM系のイベントの両方が発火するようになってますね。
加藤
あー、両方発火するんですね！
板垣
はい。ちなみにオーバーレイされているDOMコンテンツではbeforexrselectイベントというものも用意されていているんですけど、このイベントを活用することで、selectイベントが発火する前に任意の処理を実行することができるんですよ。もしですね、XRSession側のイベントを止めたいみたいなときがあったら、beforexrselectイベントのリスナー関数内でpreventDefaultメソッドを実行してあげます。そうすると、select系のイベントの発火を抑制できるようになるわけですね。
加藤
あーなるほど。覚えておきます！
板垣
ぜひ！これは覚えておいて損はないと思います。日頃使っているAPIを応用してコンテンツの拡張ができるので、学習コストを抑えることができると思ってます。あとは、XRコンテンツは基本WebGLを使って実装すると思うんですけど、WebGLだけだと提供が難しかった操作方法だとかDOM Overlaysを使えば実装できることもあるので、結果的にアクセシビリティの向上にもつながるのかなぁと思っています。
加藤
あーそれは結構大きな進歩ですね！
板垣
そうですね。
加藤
今アクセシビリティというキーワードが出たので、ここからXRとアクセシビリティについても少し話したいと思うんですけどいいですか？
板垣
はい！
加藤
というのも、VR空間とか、空間にあるオブジェクトをユーザーにどう伝えるのかとか、それをどう操作するかっていうのはけっこう大きな課題なのかなと個人的に思っているんですよね。
板垣
そうですね。確かに3Dモデルの情報を言語化したりするのって結構難しいイメージがありますね。ちょっと広い話にはなっちゃうんですけど、XRコンテンツのアクセシビリティについては、Accessible Platform Architectures Working Groupっていうところが公開してる「XR Accessibility User Requirements」っていうのを見ておくといいのかなぁと思います。
加藤
なるほど。それはどういったものですか？
板垣
これはですね、Web XRを利用するユーザーのニーズとそれに対する要件が書かれているドキュメントですね。たとえば、視覚障害のある方が持つニーズの一部を紹介すると、テキスト読み上げだとか、オブジェクトの位置などを音声でお知らせするみたいなものが挙げられてます。あと、これは視覚障害のある方ではなくて全員に当てはまるんですけど、なにかしらのアクションを実行したいときに、特定の体の動きを必要としないっていう、そういうのが求められていますね。たとえば、腕を大きく上に上げるジェスチャーをする必要があったとして、そういう場合って五十肩の人とかって腕が上がらなくて、目的を達成できないわけじゃないですか。
加藤
なるほど…。それはちょっとツラいですね…。
板垣
そうなんですよ。そういった場合はジェスチャーではなくて代替手段として、音声だとか、目の動きによる操作ができるようにしたほうがいいんじゃないの？ってことが書かれています。
加藤
逆に音声で操作することを前提としているコンテンツでは、声を出せない状況ってのを想定して、代替手段としてジェスチャーによる操作を提供したりする必要もありそうですね。
板垣
そうですね。まぁ、そう考えるとさっき加藤さんがおっしゃっていたHand Input APIとかそういったものを含めて、いろいろな操作方法が考えられていますので、特定の操作方法だけじゃなくてコントローラーだとか音声だとか、ジェスチャーみたいなものを基本セットで考えておくといいのかなぁと思います。
加藤
たしかに「The WebXR Hand Input」でも、GitHubのIssueで「指は5本とは限らないよね。」っていう議論がされていたんですよ。確かに指の骨を折ってしまったときとかって、包帯でぐるぐる巻きになったりとかするので、そういう状況とかを考えると、1つの操作方法をとっても考えるべきところがたくさんありそうだなと思いました。
板垣
そうですね～。確かに時と場合によっては一時的にですけど、自由な身動きが取れない環境だとか状況に至る場合ってのがあると思うので、こういったアクセシビリティ対応はあらかじめ考えておきたいなぁとは思っていますね。もしXRコンテンツを作る機会があればぜひ目を通していただきたいです！
加藤
分かりました！ じっくり読んでおきたいと思います！
板垣
はい。今回は加藤さんと一緒に、「WebXRの今とこれから」について、お話してきました。加藤さん的に、今後このWebXRがどう発展していくのかみたいなところ、あったりしますか？
加藤
そうですね、いろいろやっぱ想像は膨らみますね。たとえば、何かしらの部品、カメラのレンズキャップとかを想像してほしいんですけど、3DモデルデータをWebサイト上で購入できるようになって、さらに購入したデータをコンビニとかで3Dプリントできるようになった世界を想像してみると、レンズキャップってレンズによってキャップのサイズが違うので、実物と照らし合わせながらサイズが合ってるかどうかを確認したいんですよね。なのでその3Dデータを買うときに、レンズキャップをARで見て、実際に自分が持っているレンズとサイズが合ってるかっていうところを確認することができたらいいんじゃないかなって思ってます。
板垣
あ～、それは便利ですね！
はい、最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。また、このPodcastはApple Podcast、 Google Podcast、Spotifyで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。
それでは加藤さん、本日はありがとうございました！
加藤
ありがとうございましたー！