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 Browser を次のように紹介しています。
「Oculus Browser は、最新のウェブ標準やその他のテクノロジーをサポートしており、ウェブ上で VR 体験を作成できます。Oculus Browser は Chromium レンダリング エンジンを搭載しているため、現在の 2D ウェブサイトが快適に動作します。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 に変わります。
ユーザー インターフェース
ブラウザのユーザー インターフェース（上記）には、次の機能があります（上段の左から右）。
- 戻るボタン
- 再読み込みボタン
- サイト情報
- URL バー
- [ブックマークを作成] ボタン
- サイズ変更ボタン（狭い、中、広い、ズーム機能）
- [モバイルサイトをリクエスト] ボタン
- 次のオプションを含むメニューボタン:
- プライベート モードに切り替える
- すべてのタブを閉じる
- 設定
- ブックマーク
- ダウンロード
- 履歴
- 閲覧データを削除
下段には次の機能があります。
- 閉じるボタン
- 最小化ボタン
- 戻る、進む、再読み込みのオプションが表示されたその他ボタン
リフレッシュ レートとデバイスのピクセル比
Oculus Quest 2 の場合、Oculus Browser は 2D ウェブページ コンテンツと WebXR の両方を 90 Hz のリフレッシュ レートでレンダリングします。全画面表示でメディアを視聴する場合、Oculus ブラウザは動画のフレームレート（24 fps など）に基づいてデバイスのリフレッシュ レートを最適化します。Oculus Quest 2 のデバイス ピクセル比は 1.5 で、テキストが鮮明に表示されます。
Oculus ブラウザと Oculus ストアの 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 Browser には、ユーザーがブラウザとインストール済みのアプリ エクスペリエンス間でパスワードを安全に保存、共有できるパスワード マネージャーが含まれています。
PWA のウィンドウ サイズ
ブラウザ ウィンドウとインストールされた PWA のウィンドウは、ユーザーが自由にサイズを変更できます。高さは 625 ～ 1,200 ピクセルの範囲で変動します。幅は 400 ～ 2,000 ピクセルの範囲で設定できます。デフォルトのサイズは 1,000 × 625 ピクセルです。
PWA の操作
PWA は、Oculus の左右のコントローラ、Bluetooth のマウスとキーボード、ハンド トラッキングで操作できます。スクロールは、Oculus コントローラのサムスティックを使用するか、親指と人差し指でつまんで目的の方向に動かすことで行います。何かを選択するには、ユーザーはポイントしてピンチします。
PWA の権限
Oculus Browser の権限は、Chrome とほぼ同じように機能します。状態は、ブラウザで実行されているアプリとインストール済みの PWA の間で共有されるため、ユーザーは同じ権限を再度付与することなく、2 つのエクスペリエンスを切り替えることができます。
多くの権限が実装されていますが、すべての機能がサポートされているわけではありません。たとえば、位置情報の利用許可のリクエストは成功しても、デバイスが実際に位置情報を取得することはありません。同様に、WebHID、Web Bluetooth などのさまざまなハードウェア API はすべて機能検出に合格しますが、ユーザーが Oculus をハードウェア デバイスとペア設定できる選択ツールは実際には表示されません。API の機能検出性は、ブラウザが成熟するにつれて改善されると思います。
Chrome DevTools を使用した PWA のデバッグ
デベロッパー モードを有効にすると、Android デバイスのリモート デバッグの説明に沿って、Oculus Quest 2 で PWA をデバッグできます。
- Oculus デバイスで、Oculus ブラウザを使用して目的のサイトに移動します。
- パソコンで Google Chrome を起動し、
chrome://inspect/#devicesに移動します。 - 該当する Oculus デバイスを見つけます。その下に、デバイスで現在開いている Oculus ブラウザのタブが表示されます。
- 目的の Oculus ブラウザタブで [inspect] をクリックします。
アプリの調査
ユーザーは、ブラウザ自体または Oculus Store を使用して 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 アプリ内の仮想環境ハブの受信トレイからすべて利用できます。
もう 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 を完全にはサポートしていませんが、バージョン 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 アプリ App Distribution プラットフォームに公開することもできます。
Oculus Platform Utility を使用して PWA をパッケージ化する
Oculus Platform Utility は、Oculus Rift および Meta Quest デバイス向けアプリを公開するために 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 のパッケージ化
PWABuilder を使用する方法は、現時点で Meta Quest 向けに PWA をパッケージ化する最も簡単な方法であり、推奨される方法です。
PWABuilder は、Microsoft が開発したオープンソース プロジェクトです。デベロッパーは、PWA をパッケージ化して署名し、Microsoft Store、Google Play ストア、App Store、Meta Quest ストアなどのさまざまなアプリストアに公開できます。
PWABuilder を使用して PWA をパッケージ化するには、PWA の URL を入力し、アプリのメタデータを入力または編集して、[Generate] ボタンをクリックするだけです。
PWABuilder では、Meta Quest デバイス向けに PWA をパッケージ化するために使用するツールをデベロッパーが選択できます。
[Meta Quest] オプションを選択すると、Oculus Platform Utility を使用できます。
[Android] オプションを選択して Bubblewrap を使用し、[Meta Quest compatible] チェックボックスをオンにします。
ADB を使用して PWA をインストールする
APK ファイルを作成したら、USB または Wi-Fi 経由で ADB を使用して Meta Quest デバイスにサイドローディングできます。
adb install app-release-signed.apk
PWA のパッケージ化に Bubblewrap CLI を使用している場合は、APK ファイルをサイドローディングするための便利なエイリアス コマンドが用意されています。
bubblewrap install
サイドローディングされたアプリは、アプリドロワーの [提供元不明のアプリ] セクションに表示されます。
アプリの送信
Oculus ストアへの PWA のアップロードと送信については、Oculus Developer Center のドキュメントで詳しく説明されています。
デベロッパーは、Oculus Store にアプリを送信するだけでなく、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 Browser は File System Access API をサポートしていませんが、フォールバック アプローチが役立ちます。機能しなかったのは、ピンチズームだけです。両方のコントローラのトリガー ボタンを押してから、コントローラを反対方向に動かすことで機能すると想定していました。それ以外は、埋め込みのスクリーンキャストで確認できるように、すべてがパフォーマンスに優れ、レスポンシブでした。
没入型 3D WebXR PWA
Oculus Quest での PWA のサポートは、フラットな 2D アプリに限定されません。デベロッパーは、WebXR API を使用して、VR 向けの没入型 3D エクスペリエンスを構築できます。
さまざまなプロンプト（PWA のインストール、権限のリクエスト、通知）が VR 内からどのように処理されるか（処理される場合）
以下は、Immersive Web Working Group の WebXR テストのユーザー エージェント プロンプト テストのスクリーンキャストです。
ご覧のとおり、VR モードに入るにはユーザーの許可が必要です。権限はオリジンごとに 1 回リクエストされます。権限をリクエストすると、没入モードが終了します。通知は現在サポートされていません。
ハンド トラッキング
WebXR Hand Input API と Meta の AI ベースのハンド トラッキング システムにより、没入モードで手を使って PWA を操作できます。
以下は、Immersive Web Working Group の WebXR サンプルのハンド トラッキング サンプルのスクリーンキャストです。
拡張現実 / 複合現実（パススルー）
Meta Connect 2022 で発表されたとおり、Meta Quest Browser は、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 の写真: Maximilian Prandstätter（Flickr）。Instagram、Facebook、Oculus Browser、Spike アプリの Oculus Store 画像、アプリの見つけやすさのイラスト、ハンド トラッキングのアニメーションは、Meta の提供によるものです。この投稿は Joe Medley がレビューしました。