Oculus Quest 2 の PWA

Oculus Quest 2 は、Meta の部門である Oculus が開発したバーチャル リアリティ（VR）ヘッドセットです。デベロッパーは、Oculus Quest 2 のマルチタスク機能を利用して、2D および 3D のプログレッシブ ウェブアプリ（PWA）を構築して配信できるようになりました。

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Thomas Steiner

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 x 1,920 ピクセルの解像度を持ち、最大 120 Hz のリフレッシュ レートで動作する単一の高速スイッチ LCD パネルです。

コントローラ付きの Oculus Quest 2 デバイス。

Oculus ブラウザ

現在、Oculus Quest 2 で利用できるブラウザは 3 つあります。Wolvic、Firefox Reality の後継、組み込みの Oculus ブラウザです。この記事では、後者について説明します。Oculus ウェブサイトでは、Oculus ブラウザについて次のように紹介しています。

「Oculus Browser は、ウェブで VR エクスペリエンスを作成するために、最新のウェブ標準やその他のテクノロジーをサポートしています。Oculus Browser は Chromium レンダリング エンジンを搭載しているため、最新の 2D ウェブサイトは Oculus Browser で快適に動作します。Oculus ヘッドセット向けにさらに最適化されており、最高のパフォーマンスを実現し、ウェブ デベロッパーが WebXR などの新しい API を使用して VR の可能性を最大限に活用できるようにしています。WebXR によって、ウェブの新たな境界が開かれます。」

3 つのブラウザウィンドウが開いている Oculus ブラウザ。

ユーザー エージェント

執筆時点でのブラウザのユーザー エージェント文字列は次のとおりです。

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 に変わります。

Oculus ブラウザの [概要] ページ。

ユーザー インターフェース

ブラウザのユーザー インターフェース（上記）には、次の機能があります（上段左から右）。

  • 戻るボタン
  • [再読み込み]ボタン
  • サイト情報
  • URL バー
  • [ブックマークを作成] ボタン
  • 狭い、中程度、広いオプションとズーム機能があるサイズ変更ボタン
  • [モバイルサイトをリクエスト] ボタン
  • 次のオプションを含むメニューボタン:
    • プライベート モードを開始する
    • すべてのタブを閉じる
    • 設定
    • ブックマーク
    • ダウンロード
    • 履歴
    • 閲覧データの消去

下段には次の機能があります。

  • 閉じるボタン
  • 最小化ボタン
  • 戻る、前へ、再読み込みのオプションがあるその他アイコン

更新速度とデバイスのピクセル比

Oculus Quest 2 の場合、Oculus Browser は、2D ウェブページ コンテンツと WebXR の両方を 90 Hz のリフレッシュ レートでレンダリングします。全画面表示のメディアを視聴する場合、Oculus Browser は、動画のフレームレート（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 ブラウザと 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 の機能検出が改良されると思います。

Oculus ブラウザの権限。

Chrome DevTools を使用した PWA のデバッグ

デベロッパー モードを有効にすると、Oculus Quest 2 で PWA をデバッグする方法は、Android デバイスをリモートでデバッグするの説明とまったく同じです。

  1. Oculus デバイスで、Oculus ブラウザで目的のサイトに移動します。
  2. パソコンで Google Chrome を起動し、chrome://inspect/#devices に移動します。
  3. 該当する Oculus デバイスを見つけます。デバイスで現在開いている Oculus ブラウザのタブが表示されます。
  4. 該当する Oculus ブラウザタブで [検査] をクリックします。

Oculus Quest 2 で実行されているアプリを Chrome DevTools で調査している様子。

アプリの調査

ユーザーはブラウザ自体または Oculus Store を使用して PWA を見つけることができます。他のブラウザと同様に、インストールされた PWA は、タブで実行されるウェブサイトとして Oculus Browser でも機能します。ユーザーがサイトにアクセスしたときに、Oculus ストアで入手可能なアプリが Oculus ブラウザに表示されます（ただし、アプリが Oculus ストアで入手可能である場合に限られます）。アプリをすでにインストールしているユーザーは、必要に応じて Oculus ブラウザからアプリに簡単に切り替えることができます。

MyEmail アプリをインストールするように促すプロンプトでユーザーを誘っている Oculus ブラウザ。

Oculus Quest 2 での PWA の例

Meta による PWA

Instagram や Facebook など、複数の Meta 部門が Oculus Quest 2 用の PWA を作成しています。こうした PWA は、URL バーがなく、自由にサイズ変更できるスタンドアロンのアプリ ウィンドウで実行されます。

Facebook Oculus Quest 2 アプリ。

Instagram Oculus Quest 2 アプリ

他のデベロッパーの PWA

執筆時点では、Oculus Store には Oculus Quest 2 向けの PWA が少数ですが、増えています。Spike では、メール、チャット、通話、メモ、タスク、ToDo リストなど、仕事に欠かせないすべてのツールを、Spike アプリの仮想環境ハブ内の受信トレイから利用できます。

Oculus Quest 2 アプリの急増。

別の例として、Smartsheet があります。これは、プロジェクト管理、自動化されたワークフロー、新しいソリューションの迅速な構築を提供する動的ワークスペースです。

2021 年の Facebook の Connect カンファレンスで公開された Jacob Rossi の動画で示唆されているように、Slack、Dropbox、Canva などの PWA がさらに登場します。

Oculus 向けの PWA を作成する

必要な手順については、Meta のドキュメントをご覧ください。一般に、Chrome にインストールできる PWA は、多くの場合、Oculus ですぐに機能します。

ウェブアプリ マニフェストの要件

Chrome のインストール可能条件や Web App Manifest の仕様とはいくつかの重要な違いがあります。たとえば、Oculus は現在のところ左から右の言語のみをサポートしていますが、Web App Manifest の仕様ではそのような制約は適用されません。別の例として、start_url があります。これは、アプリをインストール可能にするために Chrome では厳密に必須ですが、Oculus ではオプションです。Oculus には、デベロッパーが Oculus Quest 2 用に PWA を作成できるコマンドライン ツールが用意されています。これにより、ウェブアプリ マニフェストに不足しているパラメータを渡したり、既存のパラメータをオーバーライドしたりできます。

名前 説明
name （必須）PWA の名前。現在、Oculus の名前には、左から右に表記する言語のみがサポートされています。
display （必須）"standalone" または "minimal-ui"。現在のところ、Oculus では他の値はサポートされていません。
short_name （必須）アプリ名の短縮版（必要に応じて）。
scope （省略可）アプリの一部と見なされる URL またはパス。
start_url （省略可）アプリの起動時に表示される URL。

Oculus には、PWA のカスタマイズに使用できるオプションの独自のウェブアプリ マニフェスト フィールドがいくつかあります。

名前 説明
ovr_package_name （省略可）PWA 用に生成された APK のパッケージ名を設定します。これはリバース ドメイン名の表記にする必要があります（例: "com.company.app.pwa"。設定されていない場合は、パラメータ --package-name を使用して、コマンドライン ツールにパッケージ名を指定する必要があります。
ovr_multi_tab_enabled （省略可）true の場合、このブール値フィールドにより、Oculus ブラウザに似たタブバーが PWA に追加されます。マルチタブ PWA では、新しいタブ（target="_new" または target="_blank"）をターゲットとする内部リンクは、PWA ウィンドウ内の新しいタブで開きます。これは、そのようなリンクが Oculus ブラウザ ウィンドウで開くシングルタブ PWA とは異なります。この機能は現在、タブ形式のアプリケーション モードとして標準化されています。
ovr_scope_extensions （省略可）PWA に、ウェブ アプリケーションのスコープ内により多くのウェブページを含めることができます。拡張機能の URL またはワイルドカード パターンを含む JSON 辞書で構成されます。この機能は現在、ウェブアプリのスコープ拡張機能として標準化されています。

Bubblewrap CLI を使用して PWA をパッケージ化する

Bubblewrap は、Node.js 用のオープンソースのライブラリ セットとコマンドライン ツール（CLI）です。Bubblewrap は Google Chrome チームによって開発されたもので、デベロッパーが Trusted Web Activity（TWA）として PWA を起動する 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 Store、Google Play ストア、または他の Android アプリ配信プラットフォームに公開できます。

Oculus Platform Utility を使用して PWA をパッケージ化する

Oculus Platform Utility は、Oculus Rift デバイスと Meta Quest デバイス用のアプリを公開するために Meta が開発した公式コマンドライン ツールです。

また、create-pwa コマンドを使用して Meta Quest デバイス用の PWA をパッケージ化し、Meta Quest Store と 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 のパッケージ化

現時点で Meta Quest の PWA をパッケージ化するには、PWABuilder を最も簡単にパッケージ化することをおすすめします。

PWABuilder は、Microsoft が開発したオープンソース プロジェクトです。デベロッパーは、PWA をパッケージ化して署名し、Microsoft Store、Google Play ストア、App Store、Meta Quest ストアなど、さまざまなストアに公開できます。

PWABuilder で PWA をパッケージ化するのは、PWA の URL を入力し、アプリのメタデータを入力または編集して、[生成] ボタンをクリックするだけです。

PWABuilder では、Meta Quest デバイス向けの PWA のパッケージ化に使用する内部ツールをデベロッパーが選択できます。

Oculus Platform Utility を使用するには、[Meta Quest] オプションを選択します。

PWABuilder のパッケージ オプション。

バブルラップを使用するには、[Android] オプションを選択し、[Meta Quest 互換] チェックボックスをオンにします。

Bubblewrap を使用して PWABuilder で PWA をパッケージ化する。

ADB を使用して PWA をインストールする

APK ファイルを作成したら、USB または Wi-Fi 経由で ADB を使用して、Meta Quest デバイスにサイドローディングできます。

adb install app-release-signed.apk

Bubblewrap CLI を使用して PWA をパッケージ化する場合は、APK ファイルをサイドローディングするための便利なエイリアス コマンドがあります。

bubblewrap install

サイドローディングされたアプリは、アプリ ドロワーの [提供元不明] セクションに表示されます。

アプリの送信

Oculus Store への PWA のアップロードと送信については、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

以下に、テストアプリのスクリーンキャストを示します。

Oculus バージョンの SVGcode

手順を試すために、最新の PWA である SVGcode の Oculus バージョンを作成しました。生成された APK ファイルは、私の Google ドライブからダウンロードできます。 output.apkパッケージをさらに調査したい場合は、逆コンパイルされたバージョンも使用できます。ビルド手順は package.json をご覧ください。

Oculus でアプリを使用すると、ファイルの開閉や保存など、問題なく動作します。Oculus ブラウザは File System Access API をサポートしていませんが、フォールバック アプローチは有効です。機能しなかったのは、ピンチズームのみです。両方のコントローラのトリガーボタンを押して、コントローラを反対方向に動かすと機能すると期待していました。それ以外は、埋め込まれたスクリーンキャストからわかるように、すべてパフォーマンスとレスポンスが良好でした。

没入型 3D WebXR PWA

Oculus Quest での PWA のサポートは、フラットな 2D アプリに限定されません。デベロッパーは WebXR API を使用して、VR 向けの没入型 3D エクスペリエンスを構築できます。

VR 内でさまざまなプロンプト（PWA のインストール、権限リクエスト、通知）がどのように処理されるか、または処理されるかどうかをご確認ください。

以下は、Immersive Web Working Group の WebXR Tests のユーザー エージェント プロンプト テストのスクリーンキャストです。

ご覧のとおり、VR モードに入るにはユーザーの許可が必要です。権限はオリジンごとに 1 回求められます。権限をリクエストすると、没入モードが終了します。通知は現在サポートされていません。

ハンド トラッキング

WebXR Hand Input API と Meta のAI ベースの手追跡システムにより、没入モードで PWA を手で操作できます。

以下は、Immersive Web Working Group の WebXR Samples の 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 Store 画像、および Meta 提供のアプリの見つけやすさのイラストとハンドトラッキングのアニメーション。ヒーロー画像: Arnau Marín i Puig によるもの。この投稿は Joe Medley が確認しました。