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 ソフトウェアとして動作できます。Qualcomm の Snapdragon XR2 システム オン チップと 6 GB の RAM を搭載しています。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 ブラウザでも機能します。ユーザーがサイトにアクセスすると、Oculus ストアで入手可能なアプリが Oculus ブラウザに表示されます（ただし、アプリが Oculus ストアで入手可能である場合のみ）。アプリをすでにインストールしているユーザーは、必要に応じて Oculus ブラウザからアプリに簡単に切り替えることができます。

Oculus ブラウザで、MyEmail アプリをインストールするようユーザーに求めるメッセージが表示されている様子。

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 のインストール可能条件や ウェブアプリ マニフェスト仕様とはいくつかの重要な違いがあります。たとえば、Oculus は現在のところ左から右の言語のみをサポートしていますが、ウェブアプリ マニフェスト仕様ではそのような制約は適用されません。別の例として、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 の場合、このブール値フィールドにより、PWA に Oculus ブラウザに似たタブバーが追加されます。マルチタブ 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 のパッケージ化

著者としては、現時点では PWABuilder を使用するのが最も簡単な方法であるため、Meta Quest 向けの PWA をパッケージ化する方法として推奨しています。

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

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

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

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

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

Bubblewrap を使用するには、[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 を作成しました。具体的には、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

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

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 のインストール、権限リクエスト、通知）がどのように処理されるか、または処理されるかどうかを尋ねる

没入型ウェブ ワーキング グループの WebXR テストのユーザー エージェント プロンプト テストのスクリーンキャストをご覧ください。

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

ハンド トラッキング

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

以下は、Immersive Web ワーキング グループの WebXR サンプルのハンド トラッキング サンプルのスクリーンキャストです。

拡張現実/複合現実（パススルー）

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 が確認しました。