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 ソフトウェアとも動作できます。6 GB の RAM を搭載したチップ上に Qualcomm Snapdragon XR2 システムを使用しています。Quest 2 のディスプレイは、1 眼の解像度が 1,832 × 1,920 ピクセルの単一の高速スイッチ LCD パネルであり、最大 120 Hz のリフレッシュ レートで動作します。
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 ブラウザの現在のバージョン 18.1.0.2.46.337441587 は Chrome 95.0.4638.74 をベースとしています。これは、Chrome の現在の安定版（96.0.4664.110）より 1 つ前のバージョンです。ユーザーがモバイルモードに切り替えると、VR は Mobile VR に変わります。
ユーザー インターフェース
ブラウザのユーザー インターフェース（上図）には次の機能があります（一番上の行から右の順）。
- 戻るボタン
- [再読み込み]ボタン
- サイト情報
- URL バー
- ブックマーク作成ボタン
- 狭、中、広のオプションとズーム機能を備えたサイズ変更ボタン
- [モバイルサイトをリクエスト] ボタン
- 次のオプションを含むメニューボタン:
- プライベート モードにする
- すべてのタブを閉じる
- 設定
- ブックマーク
- ダウンロード
- History
- 閲覧データの消去
一番下の行には、次の機能があります。
- [閉じる] ボタン
- 最小化ボタン
- 戻る、進む、再読み込みのオプションが表示された 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 ブラウザと PWA の間で共有されるため、ユーザーは Oculus ブラウザと PWA をシームレスに切り替えることができます。当然、Facebook ログインはすぐに使用できます。Oculus ブラウザにはパスワード マネージャーが含まれており、ユーザーはブラウザとインストール済みのアプリ間でパスワードを安全に保存して共有できます。
PWA のウィンドウ サイズ
インストールされている PWA のブラウザ ウィンドウとウィンドウは、ユーザーが自由にサイズ変更できます。高さは 625 ～ 1,200 ピクセルの範囲で指定できます。幅は 400 ～ 2,000 ピクセルの範囲で設定できます。デフォルトのサイズは 1,000 × 625 ピクセルです。
PWA の操作
PWA は、Oculus の左右のコントローラ、Bluetooth のマウスとキーボード、ハンド トラッキングで制御できます。スクロールは、Oculus コントローラのサムスティックを使用するか、親指と人差し指をつまんで目的の方向に動かすことで機能します。何かを選択するには ピンチ操作を行います
PWA の権限
Oculus ブラウザの権限は、Chrome とほぼ同じように機能します。この状態は、ブラウザで実行されているアプリとインストールされた PWA の間で共有されるため、ユーザーは同じ権限を再度付与することなく 2 つのエクスペリエンスを切り替えることができます。
多くの権限が実装されていますが、すべての機能がサポートされているわけではありません。たとえば、位置情報の利用許可のリクエストは成功しますが、デバイスが実際に位置情報を取得することはありません。同様に、WebHID、ウェブ Bluetooth などのさまざまなハードウェア API はすべて特徴検出に合格しますが、ユーザーが Oculus とハードウェア デバイスをペア設定するための選択ツールは実際には表示しません。ブラウザが成熟したら、API の機能検出可能性が改良されると思っています。
Chrome DevTools を使用した PWA のデバッグ
デベロッパー モードを有効にすると、Android デバイスのリモート デバッグの説明とまったく同じように、Oculus Quest 2 で PWA をデバッグできます。
- Oculus デバイスの Oculus ブラウザで、目的のサイトを参照します。
- パソコンで Google Chrome を起動して、
chrome://inspect/#devicesにアクセスします。 - 問題の Oculus デバイスを見つけます。次に、そのデバイスで現在開いている Oculus ブラウザのタブが表示されます。
- 目的の Oculus Browser タブで [inspect] をクリックします。
アプリの調査
ユーザーはブラウザ自体または Oculus Store を使用して PWA を見つけることができます。他のブラウザと同様に、インストール済みの PWA はタブで実行されるウェブサイトとして Oculus ブラウザでも動作します。ユーザーがサイトにアクセスすると、Oculus ストアでアプリが利用可能な場合に限り、Oculus ブラウザがアプリを見つけることができます。すでにアプリをインストールしているユーザーは、Oculus Browser を使用することで、必要に応じて簡単にアプリに切り替えられます。
Oculus Quest 2 の PWA の例
Meta による PWA
Instagram や Facebook など、複数のメタ部門が Oculus Quest 2 用の PWA を作成しています。これらの PWA は、URL バーがなく、サイズを自由に変更できるスタンドアロン アプリ ウィンドウで実行されます。
他のデベロッパーの PWA
このドキュメントの作成時点で、Oculus Store の Oculus Quest 2 用の PWA は少数ながら増加しています。Spike を使用すると、ユーザーは Spike アプリの仮想環境ハブで、メール、チャット、通話、メモ、タスク、To-Do リストなどの重要な作業ツールを受信トレイからすべて利用できます。
もう 1 つの例は、Smartsheet です。これは、プロジェクト管理、ワークフローの自動化、新しいソリューションの迅速な構築を提供する動的ワークスペースです。
2021 年の Facebook の Connect カンファレンスでリリースされた Jacob Rossi をフィーチャーした動画でも紹介されているように、Slack、Dropbox、Canva などの PWA がさらに登場しています。
Oculus 用の PWA の作成
必要な手順については、Meta のドキュメントをご覧ください。一般に、Chrome にインストール可能な PWA は、Oculus でそのまま機能することがよくあります。
ウェブアプリ マニフェストの要件
Chrome のインストール要件とウェブアプリ マニフェストの仕様にはいくつかの重要な違いがあります。たとえば、Oculus は現在、左から右に記述する言語のみをサポートしていますが、ウェブアプリ マニフェストの仕様ではそのような制約は適用されません。別の例として start_url があります。これは Chrome ではアプリをインストール可能にするために厳密に必要ですが、Oculus では省略可能です。Oculus には、デベロッパーが Oculus Quest 2 用の PWA を作成できるコマンドライン ツールが用意されています。このツールを使用すると、ウェブアプリ マニフェストで欠落しているパラメータを渡す（または既存のパラメータをオーバーライドする）ことができます。
Oculus には、PWA のエクスペリエンスのカスタマイズに使用できるオプション独自のウェブアプリ マニフェスト フィールドがいくつかあります。
Bubblewrap CLI を使用して PWA をパッケージ化する
Bubblewrap は、Node.js 用のオープンソースのライブラリ セットとコマンドライン ツール（CLI）です。Bubblewrap は Google Chrome チームが開発し、PWA を Trusted Web Activity（TWA）として起動する Android プロジェクトを生成、ビルド、署名できるようにします。
Meta Quest Browser は現在、TWA を完全にはサポートしていませんが、Bubblewrap はバージョン 1.18.0 以降、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 プラットフォーム ユーティリティで PWA をパッケージ化する
Oculus Platform Utility は、Oculus Rift および MetaQuest デバイス用のアプリを公開するために Meta が開発した公式のコマンドライン ツールです。
また、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 フィールドをマニフェストに追加するのではなく、--package-name パラメータを使用して逆ドメイン名表記の値（com.company.app.pwa など）を指定します。
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 のパッケージ化
作成者の視点から見ると、現時点で Meta のクエスト用に PWA をパッケージ化するには、PWABuilder を使用するのが最も簡単な方法です。
PWABuilder は Microsoft が開発したオープンソース プロジェクトです。デベロッパーは PWA をパッケージ化して署名し、Microsoft Store、Google Play Store、App Store、Meta Quest Store などのさまざまなストアに公開できます。
PWABuilder を使用して PWA をパッケージ化するのは、PWA の URL を入力し、アプリのメタデータを入力または編集して、[Generate] ボタンをクリックするだけです。
PWABuilder を使用すると、デベロッパーは、Meta Quest デバイス用の PWA のパッケージ化に使用する内部ツールを選択できます。
[Meta Quest] オプションを選択して、Oculus プラットフォーム ユーティリティを使用できます。
Bubblewrap を使用するには、[Android] オプションを選択し、[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 ストアへの送信については、Oculus Developer Center のドキュメントで説明されています。
デベロッパーは、Oculus ストアにアプリを送信するだけでなく、ストアの承認なしで、SideQuest などのプラットフォームを介して安全かつ確実に消費者に直接アプリを配布することもできます。これにより、開発初期や試験運用版のアプリ、特定のユーザー層を対象としていても、アプリをエンドユーザーに直接提供できます。
マルチタブ アプリのテスト
マルチタブ アプリをテストするため、さまざまなリンク機能（新しい PWA 内タブを開く、現在のタブにとどまる、新しいブラウザ ウィンドウを開く、現在のタブに残る WebView で開く）を示す簡単なテスト PWA を作成しました。マシンで次のコマンドを実行して、このアプリのローカルにインストール可能なコピーを作成します。
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 ファイル output.apk は Google ドライブからダウンロードできます。パッケージを詳しく調べたい場合は、逆コンパイルされたバージョンも用意しています。ビルド手順は package.json で確認できます。
Oculus でアプリを使用して、ファイルを開いたり保存したりできるようになりました。Oculus ブラウザはファイル システム アクセス API をサポートしていませんが、フォールバック アプローチを使用できます。機能しなかったのはピンチズームだけです。両方のコントローラのトリガーボタンを押してから、コントローラを反対方向に動かすとうまくいくと思っていました。それ以外はすべて、埋め込みのスクリーンキャストからわかるように、パフォーマンスと応答性に優れていました。
没入型 3D WebXR PWA
Oculus Quest での PWA のサポートは、フラットな 2D アプリに限定されません。デベロッパーは WebXR API を使用して、VR 用の没入感のある 3D 体験を構築できます。
さまざまなプロンプト（PWA インストール、権限リクエスト、通知）が VR 内からどのように処理されるか教えてください。
以下は、Immersive Web Working Group の WebXR Tests で発表された User Agent Prompts テストのスクリーンキャストです。
ご覧のとおり、VR モードを開始するにはユーザーの許可が必要です。権限はオリジンごとに 1 回リクエストされます。権限をリクエストすると没入モードが終了します。通知は現在サポートされていません。
手を計測
WebXR Hand Input API と Meta の AI ベースのハンド トラッキング システムにより、没入モードで手を使って PWA を操作できます。
Immersive Web Working Group の WebXR サンプルのハンド トラッキング サンプルのスクリーンキャストを次に示します。
拡張現実/複合現実（パススルー）
Meta Connect 2022 で発表されたように、Meta Quest Browser は、Meta Quest 2 デバイスと MetaQuest 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 で特に気に入っているのは、単なる通常の PWA であり、ブラウザタブまたはシン APK ラッパーで変更されずに使用できることです。プラットフォーム固有の API は必要ありません。同じコードで複数のプラットフォームをターゲットにすることが、かつてないほど容易になりました。次はウェブでの VR や AR での PWA です未来は明るい！
謝辞
Oculus Quest 2 の写真（作成者: Maximilian Prandstätter、Flickr）。Instagram、Facebook、Oculus Browser、Spike アプリの Oculus Store の画像。アプリの見つけやすさのイラストとハンド トラッキングのアニメーション（Meta 提供）。ヒーロー画像 by Arnau Marín i Puig 氏この投稿は Joe Medley によってレビューされました。