Oculus Quest 2 は、Meta の一部門である Oculus が開発したバーチャル リアリティ（VR）ヘッドセットです。デベロッパーは、Oculus Quest 2 のマルチタスク機能を活用する 2D および 3D のプログレッシブ ウェブアプリ（PWA）を構築して配信できるようになりました。
Oculus Quest 2
Oculus Quest 2 は、Meta の一部門である Oculus が開発したバーチャル リアリティ（VR）ヘッドセットです。Oculus Quest の後継機種です。このデバイスは、内部の Android ベースのオペレーティング システムを備えたスタンドアロン ヘッドセットとして動作することも、USB または Wi-Fi 経由で接続されたときにデスクトップ パソコンで実行される Oculus 互換の VR ソフトウェアで動作することもできます。Qualcomm Snapdragon XR2 システム オン チップと 6 GB の RAM を搭載しています。Quest 2 のディスプレイは、1,832 × 1,920 ピクセルの解像度で最大 120 Hz のリフレッシュ レートで動作する単一の高速スイッチ LCD パネルです。
Oculus ブラウザ
現在、Oculus Quest 2 で利用できるブラウザは、Firefox Reality の後継である Wolvic と、組み込みの Oculus Browser の 3 つです。この記事では、後者に焦点を当てます。Oculus のウェブサイトでは、Oculus ブラウザを次のように紹介しています。
「Oculus Browser は、最新のウェブ標準やその他のテクノロジーをサポートしており、ウェブ上で VR 体験を作成するのに役立ちます。現在の 2D ウェブサイトは、Chromium レンダリング エンジンを搭載した Oculus ブラウザで問題なく動作します。また、Oculus ヘッドセット向けに最適化されており、最高のパフォーマンスを実現し、WebXR などの新しい API を使用してウェブ デベロッパーが VR の可能性を最大限に引き出せるようになっています。WebXR を通じて、ウェブの次のフロンティアへの扉を開きます。」
ユーザー エージェント
執筆時点でのブラウザのユーザー エージェント文字列は次のとおりです。
Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36
ご覧のとおり、Oculus Browser の現在のバージョン 18.1.0.2.46.337441587 は Chrome 95.0.4638.74 をベースとしており、Chrome の現在の安定版 96.0.4664.110 より 1 つ前のバージョンです。ユーザーがモバイルモードに切り替えると、VR は Mobile VR に変わります。
![Oculus Browser の [About] ページ。](https://web.dev/static/articles/pwas-on-oculus-2/image/oculus-browser-page-252580de30767.png?hl=ja)
ユーザー インターフェース
ブラウザのユーザー インターフェース（上記）には、次の機能があります（上段、左から右）。
- 戻るボタン
- 再読み込みボタン
- サイト情報
- URL バー
- [ブックマークを作成] ボタン
- [狭い]、[中]、[広い] のオプションとズーム機能があるサイズ変更ボタン
- モバイル ウェブサイトをリクエストするボタン
- 次のオプションを含むメニューボタン:
- プライベート モードを開始する
- すべてのタブを閉じる
- 設定
- ブックマーク
- ダウンロード
- 履歴
- 閲覧データの消去
下段には次の機能があります。
- 閉じるボタン
- 最小化ボタン
- 戻る、進む、再読み込みのオプションが表示された 3 つの点のボタン
更新頻度とデバイスのピクセル比
Oculus Quest 2 では、Oculus Browser は 2D ウェブページ コンテンツと WebXR の両方を 90 Hz のリフレッシュ レートでレンダリングします。Oculus ブラウザでフルスクリーン メディアを視聴すると、動画のフレームレート（24 fps など）に基づいてデバイスのリフレッシュ レートが最適化されます。Oculus Quest 2 のデバイス ピクセル比は 1.5 で、テキストが鮮明に表示されます。
Oculus Browser と Oculus Store の PWA
2021 年 10 月 28 日、Meta（Oculus）のプロダクト マネジメント リードである Jacob Rossi 氏は、Oculus Quest と Oculus Quest 2 に PWA が導入されることを発表しました。以下では、Oculus での PWA のエクスペリエンスについて説明し、Oculus Quest 2 で PWA をビルド、サイドローディング、テストする方法について説明します。
状態の共有
ログイン状態は Oculus Browser と PWA の間で共有されるため、ユーザーは 2 つの間をシームレスに切り替えることができます。当然ながら、Facebook ログインはすぐに使用できます。Oculus ブラウザには、ブラウザとインストール済みアプリのエクスペリエンス間でパスワードを安全に保存して共有できるパスワード マネージャーが含まれています。
PWA ウィンドウのサイズ
ブラウザ ウィンドウとインストールされた PWA のウィンドウは、ユーザーが自由にサイズ変更できます。高さは 625 ～ 1,200 ピクセルで可変です。幅は 400 ～ 2,000 ピクセルの範囲で設定できます。デフォルトのサイズは 1,000 × 625 ピクセルです。
PWA の操作
PWA は、Oculus の左右のコントローラ、Bluetooth マウスとキーボード、ハンド トラッキングで操作できます。スクロールは、Oculus コントローラのサムスティックを使用するか、親指と人差し指でつまんで目的の方向に動かすことで行えます。選択するには、ユーザーはポイントしてピンチできます。
PWA の権限
Oculus ブラウザの権限は、Chrome とほぼ同じように機能します。状態はブラウザで実行されているアプリとインストールされている PWA の間で共有されるため、ユーザーは同じ権限を再度付与することなく、2 つのエクスペリエンスを切り替えることができます。
多くの権限が実装されていますが、すべての機能がサポートされているわけではありません。たとえば、位置情報の権限のリクエストは成功しても、デバイスが実際には位置情報を取得しないことがあります。同様に、WebHID や Web Bluetooth などのさまざまなハードウェア API はすべて機能検出に合格しますが、ユーザーが Oculus をハードウェア デバイスとペア設定できるピッカーは実際には表示されません。ブラウザが成熟すれば、API の機能検出可能性は改善されると思います。
Chrome DevTools を使用した PWA のデバッグ
デベロッパー モードを有効にすると、Oculus Quest 2 での PWA のデバッグは、Android デバイスのリモート デバッグで説明されているとおりに機能します。
- Oculus デバイスで、Oculus ブラウザで目的のサイトに移動します。
- パソコンで Google Chrome を起動し、
chrome://inspect/#devicesに移動します。 - 問題の Oculus デバイスを見つけます。その後に、デバイスで現在開いている Oculus ブラウザのタブのセットが表示されます。
- 目的の Oculus Browser タブで [検査] をクリックします。
アプリの調査
ユーザーは、ブラウザ自体または Oculus ストアを使用して PWA を見つけることができます。他のブラウザと同様に、インストールされた PWA は Oculus Browser でもタブで実行されるウェブサイトとして動作します。ユーザーがサイトにアクセスすると、Oculus Browser は、そのアプリが Oculus Store で利用可能な場合にのみ、アプリを見つけられるようにします。アプリをすでにインストールしているユーザーは、必要に応じて Oculus ブラウザからアプリに簡単に切り替えることができます。
Oculus Quest 2 の優れた PWA
Meta の PWA
Meta の複数の部門が Oculus Quest 2 向けの PWA を作成しています。たとえば、Instagram や Facebook などです。これらの PWA は、URL バーがなく、自由にサイズ変更できるスタンドアロン アプリ ウィンドウで実行されます。
他のデベロッパーによる PWA
この記事の執筆時点では、Oculus Store には Oculus Quest 2 向けの PWA が少数ながらも増えつつあります。Spike を使用すると、メール、チャット、通話、メモ、タスク、ToDo リストなどの重要な仕事用ツールを、Spike アプリ内の仮想環境ハブの受信トレイから利用できます。
別の例として、Smartsheet があります。これは、プロジェクト管理、自動化されたワークフロー、新しいソリューションの迅速な構築を提供する動的なワークスペースです。
2021 年の Facebook の Connect カンファレンスに関連してリリースされた Jacob Rossi の動画で予告されているように、Slack、Dropbox、Canva などの PWA が今後も登場する予定です。
Oculus 向けの PWA を作成する
必要な手順については、Meta のドキュメントをご覧ください。一般的に、Chrome にインストール可能な PWA は、Oculus でそのまま動作することが多いです。
ウェブアプリ マニフェストの要件
Chrome のインストール条件や Web アプリ マニフェストの仕様と比較すると、重要な違いがいくつかあります。たとえば、Oculus は現在、左から右に書く言語のみをサポートしていますが、Web アプリ マニフェストの仕様にはそのような制約はありません。別の例として、Chrome ではアプリをインストール可能にするために厳密に必要とされる start_url が、Oculus ではオプションであるというものがあります。Oculus は、デベロッパーが Oculus Quest 2 用の PWA を作成できるコマンドライン ツールを提供しています。これにより、デベロッパーは Web アプリ マニフェストで不足しているパラメータを渡したり、既存のパラメータをオーバーライドしたりできます。
Oculus には、PWA のエクスペリエンスをカスタマイズするために使用できる、独自のウェブアプリ マニフェスト フィールドがいくつかあります。
Bubblewrap CLI を使用して PWA をパッケージ化する
Bubblewrap は、Node.js 用のオープンソースのライブラリとコマンドライン ツール（CLI）のセットです。Bubblewrap は、Google Chrome チームが開発したツールです。このツールを使用すると、デベロッパーは PWA を信頼できるウェブ アクティビティ（TWA）として起動する Android プロジェクトを生成、ビルド、署名できます。
Meta Quest ブラウザは現在 TWA を完全にサポートしていませんが、バージョン 1.18.0 以降では、Bubblewrap が Meta Quest デバイス向けの PWA のパッケージ化をサポートしています。
通常の Android デバイスでは TWA を開き、Meta Quest デバイスでは Meta Quest ブラウザを開くユニバーサル APK ファイルを生成できます。
Node.js がインストールされていることを前提として、Bubblewrap CLI は次のコマンドでインストールできます。
npm i -g @bubblewrap/cli
Bubblewrap を初めて実行すると、必要な外部依存関係（Java Development Kit（JDK）と Android SDK Build Tools）を自動的にダウンロードしてインストールするかどうかを尋ねられます。
PWA をラップする Meta Quest 互換の Android プロジェクトを生成するには、--metaquest フラグを指定して init コマンドを実行し、ウィザードの手順に沿って操作します。
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
プロジェクトが生成されたら、次のコマンドを実行してビルドし、署名します。
bubblewrap build
これにより、app-release-signed.apk という名前のファイルが出力されます。このファイルは、デバイスにインストールしたり、Meta Quest ストア、Google Play ストア、その他の Android アプリ配信プラットフォームに公開したりできます。
Oculus Platform Utility を使用して PWA をパッケージ化する
Oculus Platform Utility は、Meta が Oculus Rift デバイスと Meta Quest デバイス向けアプリを公開するために開発した公式のコマンドライン ツールです。
また、create-pwa コマンドを使用して Meta Quest デバイス用の PWA をパッケージ化し、Meta Quest ストアと App Lab に公開することもできます。
-o パラメータで出力ファイル名を設定し、--android-sdk パラメータで Android SDK のパスを設定します。
--web-manifest-url パラメータを使用して、ウェブアプリ マニフェストのライブ URL をツールに指定します。
ライブ PWA にマニフェストがない場合や、ライブ マニフェストをオーバーライドしたい場合でも、ローカル マニフェスト ファイルと --manifest-content-file パラメータを使用して PWA の APK を生成できます。
マニフェストをできるだけ純粋な状態にするには、独自の ovr_package_name フィールドをマニフェストに追加するのではなく、逆ドメイン名表記の値（com.company.app.pwa など）を指定した --package-name パラメータを使用します。
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
PWABuilder を使用して PWA をパッケージ化する
PWABuilder を使用することは、現時点では Meta Quest 向けに PWA をパッケージ化する最も簡単で推奨される方法であると著者は考えています。
PWABuilder は、Microsoft が開発したオープンソース プロジェクトです。デベロッパーは、このプロジェクトを利用して、Microsoft Store、Google Play ストア、App Store、Meta Quest ストアなどのさまざまなストアに公開する PWA をパッケージ化して署名できます。
PWABuilder で PWA をパッケージ化するには、PWA の URL を入力し、アプリのメタデータを入力/編集して、[生成] ボタンをクリックするだけです。
PWABuilder を使用すると、開発者は Meta Quest デバイス向け PWA のパッケージ化にどのツールを使用するかを選択できます。
Oculus Platform Utility を使用するには、[Meta Quest] オプションを選択します。
[Android] オプションを選択して Bubblewrap を使用し、[Meta Quest 対応] チェックボックスをオンにします。
ADB を使用して PWA をインストールする
APK ファイルを作成したら、USB または Wi-Fi 経由で ADB を使用して Meta Quest デバイスにサイドローディングできます。
adb install app-release-signed.apk
Bubblewrap CLI を使用して PWA をパッケージ化する場合、APK ファイルをサイドローディングするための便利なエイリアス コマンドが提供されます。
bubblewrap install
サイドローディングされたアプリは、アプリドロワーの [提供元不明のアプリ] セクションに表示されます。
アプリの送信
PWA を Oculus Store にアップロードして送信する方法については、Oculus Developer Center のドキュメントで詳しく説明しています。
Oculus Store にアプリを提出する以外にも、デベロッパーは SideQuest などのプラットフォームを介して、ストアの承認を必要とせずに、安全かつ確実にアプリを消費者に直接配信することもできます。これにより、開発の初期段階にあるアプリや試験運用中のアプリ、特定のユーザーを対象としたアプリでも、エンドユーザーに直接提供できます。
マルチタブ アプリをテストする
マルチタブ アプリをテストするために、さまざまなリンク機能をデモする小さなテスト PWA を作成しました。具体的には、新しい PWA タブを開く、現在のタブにとどまる、新しいブラウザ ウィンドウを開く、現在のタブにとどまる WebView で開く、といった機能です。マシンで次のコマンドを実行して、このアプリのローカルにインストール可能なコピーを作成します。
ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk
テストアプリのスクリーンキャストを次に示します。
SVGcode の Oculus バージョン
手順を試すために、最新の PWA である SVGcode の Oculus バージョンを作成しました。生成された APK ファイルは、私の Google ドライブからダウンロードできます。
output.apk
パッケージをさらに調査したい場合は、逆コンパイル バージョンもあります。ビルド手順については、package.json をご覧ください。
Oculus でのアプリの使用は、ファイルのオープンや保存を含め、問題なく動作します。Oculus Browser は File System Access API をサポートしていませんが、フォールバック アプローチが役立ちます。ピンチズームだけが機能しませんでした。両方のコントローラのトリガー ボタンを押してから、コントローラを反対方向に動かすことで機能することを期待していました。それ以外は、埋め込みのスクリーンキャストで確認できるように、パフォーマンスもレスポンスも良好でした。
没入型 3D WebXR PWA
Oculus Quest での PWA のサポートは、フラットな 2D アプリに限定されません。デベロッパーは、WebXR API を使用して、VR 向けの没入型 3D エクスペリエンスを構築できます。
VR 内でさまざまなプロンプト（PWA のインストール、権限リクエスト、通知など）がどのように処理されるか（または処理されないか）について質問します。
Immersive Web Working Group の WebXR Tests の User Agent Prompts test のスクリーンキャストを以下に示します。
ご覧のとおり、VR モードに入るにはユーザーの権限が必要です。権限はオリジンごとに 1 回リクエストされます。権限をリクエストすると、没入モードが終了します。現在、通知はサポートされていません。
ハンド トラッキング
WebXR Hand Input API と Meta のAI ベースの手のトラッキング システムにより、没入モードで PWA を操作できます。
これは、Immersive Web Working Group の WebXR サンプルの Hand Tracking Sample のスクリーンキャストです。
拡張現実/複合現実（パススルー）
Meta Connect 2022 で発表されたとおり、Meta Quest ブラウザは、Meta Quest 2 と Meta Quest Pro デバイスで WebXR 拡張現実（AR）（複合現実（MR）とも呼ばれます）のサポートを追加しました。
拡張現実用にモデルを縮小し、空と平面を非表示にした、少し変更された A-Frame のスターターの例を見てみましょう。
A-Frame は、宣言型で再利用可能なカスタム HTML 要素のみで 3D/VR/AR エクスペリエンスを構築するためのオープンソースのウェブ フレームワークです。読みやすく、理解しやすく、コピー＆ペーストも簡単です。
Meta Quest 2 でのこのデモのスクリーンキャストを以下に示します。
Meta Quest 2 にはモノクロカメラが搭載されているため、パススルーはグレースケールになります。一方、Meta Quest Pro にはカラーカメラが搭載されています。
まとめ
Oculus Quest 2 の PWA は非常に楽しく、将来性も高いです。画面を現在のタスクに最適なサイズに調整できる無限の仮想キャンバスは、将来の働き方を変える可能性を秘めています。VR でハンド トラッキングを使用して入力することはまだ始まったばかりで、少なくとも私にとってはまだ信頼性が低いですが、URL の入力や短いテキストの入力には十分です。
Oculus Quest 2 の PWA で最も気に入っている点は、プラットフォーム固有の API を使用せずに、ブラウザタブまたはシン APK ラッパーで変更なしで使用できる通常の PWA であることです。同じコードで複数のプラットフォームをターゲットに設定することが、かつてないほど簡単になりました。ウェブ上の VR と AR での PWA の利用拡大に向けて。未来は明るい！
謝辞
Oculus Quest 2 の写真: Flickr の Maximilian Prandstätter 氏Instagram、Facebook、Oculus Browser、Spike アプリの Oculus ストアの画像、アプリの検出可能性のイラスト、ハンド トラッキングのアニメーションは Meta の提供です。ヒーロー画像: Arnau Marín i Puigこの投稿は Joe Medley によってレビューされました。