HoloLens 2 Unity アプリでの WebView2 の概要 (プレビュー)

このチュートリアルは、イマーシブ HoloLens 2 Unity アプリケーションで WebView2 を使用する開発者向けです。

HoloLens 2の WebView2 と Unity 用 WebView プラグインはどちらもプレビュー段階であり、一般公開前に変更される場合があります。

WebView2 は、Windows 11更新プログラムを実行しているHoloLens 2デバイスでのみサポートされます。 詳細については、「Update HoloLens 2」を参照してください。

HoloLens 2での WebView2 対応 2D アプリケーションについては、「WinUI 2 (UWP) アプリでの WebView2 の概要」を参照してください。

このチュートリアルでは、次の操作を行います。

• WebView2 を使用して Web コンテンツを表示HoloLens 2 Unity アプリを作成するための開発ツールを設定します。
• Mixed Reality機能ツールを使用して、Mixed Reality ツールキットをインストールします。
• HoloLens 2開発用の初期 Unity プロジェクトを作成します。
• Mixed Reality機能ツールを使用して、Unity 用の Microsoft Mixed Reality WebView プラグインを追加します。
• HoloLens 2 アプリに Web ページ コンテンツを表示する WebView プレハブを構成します。
• Unity での WebView2 の概念と相互作用について説明します。

完了したプロジェクト

このはじめに プロジェクトの完成したバージョンは、WebView2Samples リポジトリで入手できます。 完成したプロジェクト (リポジトリから、または以下の手順に従って) をベースラインとして使用して、HoloLens 2 Unity アプリにさらに WebView2 機能やその他の機能を追加できます。

このチュートリアル プロジェクトの完成したバージョンは、 WebView2Samples リポジトリで入手できます。

• サンプル名: HoloLens2_GettingStarted
• リポジトリ ディレクトリ: HoloLens2_GettingStarted
• Unity プロジェクト フォルダー: HoloLens2GetStartedApp

以下の主要なステップセクションを順番に実行します。

HoloLens 2、Unity、Mixed Reality機能ツール、Mixed Reality ツールキット、および WebView プラグインについて

HoloLens 2、Unity、Mixed Reality Toolkit、および Unity 用 WebView プラグインを組み合わせることで、Web コンテンツをシームレスに統合するイマーシブ Mixed Reality エクスペリエンスを作成できます。

HoloLens 2

HoloLens 2は、ハンズフリーでイマーシブな Mixed Reality エクスペリエンスを提供する画期的な、非接続のホログラフィック デバイスです。 HoloLens 2は、デジタル情報を現実世界にシームレスにオーバーレイし、所定の位置に留まり、対話に自然に応答する高精細ホログラムをレンダリングします。

Unity ゲーム エンジンと Visual Studio を使用して、HoloLens 2 プロジェクトを作成できます。

統一

汎用性の高いゲーム エンジンである Unity は、拡張現実 (AR)、仮想現実 (VR)、Mixed Reality (MR) の広範な機能と堅牢な機能により、HoloLens 2 デバイス用の Mixed Reality エクスペリエンスを含む 3D アプリケーションを作成するための一般的な選択肢です。

Mixed Reality機能ツール (MRFT)

Mixed Reality機能ツール (MRFT) は、開発者が Mixed Reality 機能パッケージを検出し、更新し、Unity プロジェクトに追加するための新しい方法です。 名前またはカテゴリでパッケージを検索し、その依存関係を確認し、インポートする前にプロジェクト マニフェスト ファイルに対する提案された変更を表示することもできます。 マニフェスト ファイルは、プロジェクトのすべてのパッケージを定義する JSON ファイルです。 含めるパッケージを検証すると、Mixed Reality機能ツールによって自動的に選択した Unity プロジェクトにパッケージがダウンロードされます。 このガイドでは、MRFT を使用して、Mixed Reality Toolkit と Microsoft Mixed Reality WebView プラグインを Unity 用にインストールします。

Mixed Reality ツールキット (MRTK)

Mixed Reality ツールキット (MRTK) は、Mixed Reality エクスペリエンスを開発するための重要なコンポーネントと機能を提供することで、Unity での Mixed Reality アプリケーションの開発を加速させる Microsoft 主導のオープンソース プロジェクトです。 MRTK には、HoloLens 2 デバイスでパフォーマンスが高く直感的な Mixed Reality エクスペリエンスを作成するのに役立つ、特に設計されたスクリプト、コンポーネント、プレハブのコレクションが用意されています。

Unity 用 Microsoft Mixed Reality WebView プラグイン

Unity 用の Microsoft Mixed Reality WebView プラグインを使用すると、WebView2 機能を HoloLens 2 アプリに統合できます。 この Unity 用 WebView プラグインは、WebView2 コントロールをラップし、レンダリングを自動的に処理し、入力を WebView2 コントロールに自動的に送ることで、WebView2 機能を HoloLens 2 アプリに統合することを簡素化します。

また、このプラグインは Unity と WebView2 の間の相互運用を管理し、メッセージやイベントを介して JavaScript と Unity 間の通信を可能にします。

Unity では、Mixed Reality機能ツールを使用して、Unity 用の Microsoft Mixed Reality WebView プラグインをインストールできます。

手順 1 - Visual Studio をインストールする

このチュートリアルでは、Unity 2021.3 LTS 以降と Visual Studio 2019 バージョン 16.9 以降がインストールされていることを前提としています。 Visual Studio 2017 はサポートされていません。 この手順では、HoloLens 2開発用に Visual Studio 環境を設定することから始めます。Mixed Reality ツールのインストール ガイドに従います。 この記事では、Visual Studio やユニバーサル Windows プラットフォーム開発ワークロードなど、必要なツールのインストールと構成について説明します。

また、「WebView2 用の開発環境を設定する」の手順に従って、 WebView2 の開発環境を設定します。

セットアップが完了したら、このページに戻り、次の手順に進んで Unity をインストールします。

手順 2 - HoloLens 2開発用に Unity をインストールする

WebView2 を使用してHoloLens 2 アプリの開発を開始する前に、Unity をインストールする必要があります。 「Unity バージョンと XR プラグインの選択」の手順に従って、Mixed Reality アプリケーションをビルドするために必要なツールセットのインストールを完了します。

手順 3 - Mixed Reality開発用に Unity プロジェクトを構成する

ツールをインストールしたら、プロジェクトを作成して構成する準備が整います。 HoloLens 2開発を開始する最も簡単な方法は、プロジェクトで Mixed Reality Toolkit を使用することです。

Mixed Reality機能ツールを使用すると、Mixed Reality ツールキットや Unity プロジェクトのパッケージなど、Mixed Reality 機能を検出、インストール、管理するプロセスが簡略化されます。 Mixed Reality機能ツールのインストールに関する詳細なガイダンスについては、「Mixed Reality機能ツールへようこそ」を参照してください。

1. まず、Microsoft ダウンロード センターからMixed Reality機能ツールをダウンロードします。

2. ダウンロードしたMixed Reality Feature Tool 実行可能ファイルを実行し、プロンプトに従って、Mixed Reality ツールキットと、開発に必要な追加のパッケージHoloLens 2インストールします。

   Mixed Reality機能ツールを使用すると、Mixed Reality ツールキットの適切なバージョンを選択して、その他の Mixed Reality 機能と共に Unity プロジェクトに直接インストールできます。

Mixed Reality機能ツールを使用してMixed Realityツールキットをインストールすると、ツールキットのアセットとプレハブが Unity プロジェクトに表示されます。 Mixed Reality ツールキットでは、プロジェクトの Open XR プラグインを構成する方法について説明します。

Unity プロジェクトの構成の詳細な手順については、「MRTK を使用して 新しい OpenXR プロジェクトを設定する」を参照してください。

手順 4 - Mixed Reality機能ツールを使用して Unity 用の WebView プラグインをインストールする

この手順では、上記のように、Mixed Reality機能ツールを使用して、Unity 用の Microsoft Mixed Reality WebView プラグインをインストールします。 これにより、HoloLens 2と互換性のある特定のバージョンの WebView2 NuGet パッケージがインストールされます。

1. Mixed Reality機能ツール (上記でインストールした) を起動します。 Mixed Reality機能ツール for Unity の [スタート] ページが開き、設定を構成するオプションとドキュメントを表示するためのオプションが含まれています。

   

2. 歯車ボタンをクリックします。 [ 設定] ウィンドウが開きます。

3. [ 機能 ] タブをクリックし、[ プレビュー リリースの表示 ] チェック ボックスがオンになっていることを確認します。

   

4. [ OK ] ボタンをクリックして、開始ページに戻ります。

5. [ スタート ] ボタンをクリックして、機能パッケージの検出を開始します。

6. Mixed Reality機能ツールを Unity プロジェクトにポイントします。 これを行うには、[プロジェクト パス] フィールドの右側にある [プロジェクト フォルダーの参照 ] (...) ボタンをクリックします。

   

7. ファイルの選択ダイアログで、Unity プロジェクト フォルダーを選択し、[ 開く ] ボタンをクリックします。

8. [ プロジェクトの選択 ] ダイアログで、[ 機能の検出 ] ボタンをクリックします。

9. [機能の検出] ページで、[その他の機能] セクションを展開し、[Microsoft Mixed Reality WebView] チェック ボックスをオンにします。

   

   これにより、インストール用の Unity 用 WebView プラグインがマークされます。 [ バージョン ] ドロップダウン リストで、既定では、プラグインの最新バージョンが選択されています。

10. [ 機能の取得 ] ボタンをクリックします。 これにより、必要なパッケージがダウンロードされます。

11. パッケージがダウンロードされたら、[ インポート ] ボタンをクリックします。

    

12. [ レビューと承認] ページで、プロジェクト ファイルに加えられる変更を調べ、プロジェクト manifest.json にコピーされるファイル (パッケージなど .tgz ) の一覧を調べます。

    

13. [ 承認 ] ボタンをクリックして変更を確定します。

14. Unity プロジェクトのプロジェクトの Assets フォルダーで、WebView プレハブを検査します。

Unity 用の Microsoft Mixed Reality WebView プラグインがインストールされ、インポートされました。 次の手順に進みます。

詳細については、「Mixed Reality機能ツールへようこそ」を参照してください。

手順 5 - Unity シーンで WebView プレハブを設定する

Unity 用 WebView プラグインがインストールされ、インポートされたので、次のように Unity シーンに WebView プレハブを設定します。

1. Unity エディターで、[プロジェクト] ウィンドウに移動し、[パッケージ>] [Microsoft Mixed Reality WebView (プレビュー)][ランタイム プレハブ] > の順に移動して WebViewプレハブを>見つけます。

2. WebView プレハブをシーンにドラッグします。

3. [階層] ウィンドウで WebView プレハブを選択した状態で、シーン内の適切な開始位置 (ノードの下MixedRealitySceneContentなど) に移動し、既定のカメラが表示されていることを確認します。

4. [インスペクター] ウィンドウでは、WebView プレハブによって読み込まれる初期 URL を変更できます。 これを行うには、[ 現在の URL ] テキスト ボックスを見つけて、目的の URL を入力します。 既定では、プレハブは を読み込みます https://www.microsoft.com。

   

手順 6 - プロジェクトをテストする

WebView プラグインをシーンに追加したので、プロジェクトをテストすることをお勧めします。

1. Unity エディターでプロジェクトを直接テストするには、[ 再生 ] ボタンをクリックします。

   

2. 実際のデバイスでプロジェクトをテストするには、「 HoloLens にビルドしてデプロイする」の手順に従います。

次に、次の手順に進みます。

手順 7 - WebView2 機能を拡張する

プレハブは 1 つのプロパティのみを公開しますが、スクリプトには追加の機能が WebView 公開されています。 この機能の一部をプロジェクトで公開する方法を見てみましょう。 まず、スクリプトを WebView 調べて、使用可能な内容を確認します。

ヒント

既定のコード エディターでスクリプトの内容を表示するには、[ インスペクター] ウィンドウでスクリプトの名前をダブルクリックします。

コードを確認 WebView したので、サンプルの機能を拡張しましょう。 この手順の残りの部分では、ユーザーが [戻る ] ボタン、 Go ボタン、カスタム URL に移動するためのテキスト フィールドを持つ基本的な機能をいくつか追加します。

入力フィールドとボタンを追加する

1. シーン階層を次のように変更します。

   1. の下MixedRealitySceneContentに、新しい入力コンポーネントを追加します (UI>入力フィールド - TextMeshPro を右クリックします>)。 これにより、コンポーネントの親 Canvas が自動的に追加されます。
   2. 新しい Canvasの下に、2 つの新しいButtonコンポーネントを追加します (右クリック UI>>ボタン - TextMeshPro)。
   3. コンポーネントを WebView 並べ替えて、コンポーネントの Canvas 子にします。

   

2. [ 階層 ] ペインで [キャンバス] を選択し、[ インスペクター ] ウィンドウで次の変更を行って、Canvas プロパティを更新します。

   1. [幅] と [高さ] をそれぞれ 600,400 に変更します。
   2. X、Y、Z のスケールを 0.001、0.001、0.001 に変更します。

   

3. [ 階層 ] ペインで入力フィールドのプロパティを選択し、[ インスペクター ] ウィンドウで次の変更を行って、入力フィールドのプロパティを更新します。

   1. 名前を "AddressField (TMP)" に変更する
   2. Pos X、Pos Y、Pos Z をそれぞれ -2、178、-5 に変更します。
   3. [幅] と [高さ] をそれぞれ 390、30 に変更します。

   

4. [ 階層 ] ペインで最初のボタンのプロパティを選択し、[ インスペクター ] ウィンドウで次の変更を行って、最初のボタンのプロパティを更新します。

   1. 名前を "戻るボタン" に変更する
   2. Pos X、Pos Y、Pos Z をそれぞれ -248、178、-5 に変更します。
   3. [幅] と [高さ] をそれぞれ 75,30 に変更します。

   

5. 2 つ目のボタンのプロパティを更新するには、[ 階層 ] ペインで選択し、[ インスペクター ] ウィンドウで次の変更を行います。

   1. 名前を "Go ボタン" に変更する
   2. Pos X、Pos Y、Pos Z をそれぞれ 242、178、-5 に変更します。
   3. [幅] と [高さ] をそれぞれ 75,30 に変更します。

   

6. [ 階層 ] ペインで WebView のプロパティを選択し、[ インスペクター ] ウィンドウで次の変更を行って、WebView のプロパティを更新します。

   1. 位置>X、Y、Z をそれぞれ 0、-16、-5 に変更します。
   2. スケール>X、Y、Z をそれぞれ 570、340、1 に変更します。

   

7. キャンバスに背景画像を追加します。

   1. [ 階層 ] ペインで [キャンバス] を選択します。
   2. [インスペクター] ウィンドウの下部にある [コンポーネントの追加] ボタンをクリックします。
   3. 「Image」と入力し、一覧で上位の結果を選択します。
   4. 画像の [色 ] ウェルをクリックし、背景色を選択します。 この例では、灰色を選択しました。 (これは、キャンバス内の異なるコントロール間のコントラストを示すだけです)。

   

8. [ 階層 ] ペインの [ 戻る] ボタンで、[ テキスト (TMP)] を選択します。 次に、[ インスペクター ] ウィンドウで、[ テキスト入力 ] を [戻る] に変更します。

   

9. Go ボタンに対して上記のプロセスを繰り返し、Go をテキストに置き換えます。

   これで、次のようなシーンが作成されます。

   

ボタンをフックするコードを追加する

UI が設計されたので、ボタンをフックするコードを作成します。 これを行うには、 から Microsoft.MixedReality.WebView派生する新しいスクリプトを作成します。

1. WebView の [インスペクター ] ウィンドウで、[ コンポーネントの追加] をクリックし、[ 新しいスクリプト] を選択し、「 WebViewBrowser」と入力して、[ 作成して追加] をクリックします。 新しいコンポーネントが [インスペクター] ウィンドウに追加されます。

2. [ インスペクター ] ウィンドウで、スクリプトを WebViewBrowser ダブルクリックしてスクリプトを編集します。

3. そのファイルの内容を次のコードに置き換えます。

   using Microsoft.MixedReality.WebView;
   using UnityEngine.UI;
   using UnityEngine;
   using TMPro;
   using System;
   
   public class WebViewBrowser : MonoBehaviour
   {
      // Declare UI elements: Back button, Go button, and URL input field
      public Button BackButton;
      public Button GoButton;
      public TMP_InputField URLField;
   
      private void Start()
      {
         // Get the WebView component attached to the game object
         var webViewComponent = gameObject.GetComponent<WebView>();
         webViewComponent.GetWebViewWhenReady((IWebView webView) =>
         {
               // If the WebView supports browser history, enable the Back button
               if (webView is IWithBrowserHistory history)
               {
                  // Add an event listener for the Back button to navigate back in history
                  BackButton.onClick.AddListener(() => history.GoBack());
   
                  // Update the Back button's enabled state based on whether there's any history to go back to
                  history.CanGoBackUpdated += CanGoBack;
               }
   
               // Add an event listener for the Go button to load the URL that was entered in the input field
               GoButton.onClick.AddListener(() => webView.Load(new Uri(URLField.text)));
   
               // Subscribe to the Navigated event to update the URL input field whenever a navigation occurs
               webView.Navigated += OnNavigated;
   
               // Set the initial value of the URL input field to the current URL of the WebView
               if (webView.Page != null)
               {
                  URLField.text = webView.Page.AbsoluteUri;
               }
         });
      }
   
      // Update the URL input field with the new path after navigation
      private void OnNavigated(string path)
      {
         URLField.text = path;
      }
   
      // Enable or disable the Back button based on whether there's any history to go back to
      private void CanGoBack(bool value)
      {
         BackButton.enabled = value;
      }
   }
   

4. UI GameObjects を、先ほど記述した WebViewBrowser コードに接続します。

   1. WebViewBrowser を選択します。
   2. [階層] ウィンドウから [ 戻る] ボタン を、[インスペクター] の WebView ブラウザーの [戻る] ボタン 変数フィールドにドラッグします。
   3. [階層] ウィンドウから [ Go Button ]\(移動\) ボタンをインスペクターの WebView ブラウザーの [Go Button ]\(移動\) 変数フィールドにドラッグします。

   

5. Unity エディターでシーンをテストできるようになりました。 すべてがシーン内で配線された状態で、すべてが期待どおりに動作していることを確認できるはずです。 テキスト ボックスに AddressField 新しい URL を入力して (プロトコルを含む完全な URL にする必要があります)、 Go ボタンを押して、シーンをテストしてみてください。 [戻る] ボタンも機能することを確認します。

   HoloLens で実行されているアプリケーションをデバッグすると便利な場合があり、その手順は Visual Studio 内の標準デバッグとは若干異なります。 HoloLens または Unity エディター内で実行されているアプリケーションをセットアップして接続する方法の詳細については、「Unity での マネージド デバッグ」を参照してください。

関連項目:

• WebView2 API リファレンス
• Mixed Reality WebView プラグインの API リファレンス - WebView2 Unity プラグインのHoloLens 2用。

次の手順に進みます。

手順 8 - Unity での WebView2 イベントと相互作用について学習する

Unity 用の Microsoft Mixed Reality WebView プラグインには、Webview を操作するためのイベントが用意されています。

重要なイベントの 1 つは IWithPostMessage.MessageReceived、 です。これは、Web ビューから Unity アプリにメッセージが送信されるときに発生します。 イベントは MessageReceived インターフェイスで Microsoft.MixedReality.WebView.IWithPostMessage 定義されます。

IWithPostMessage また、Unity アプリから Web ビューにメッセージを送信するために使用できる メソッドも定義 PostMessage() します。

Webview を操作するためにこれらのイベントとメソッドを使用する方法の例を次に示します。

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IWithPostMessage
{
    private void Start()
    {
        var webViewComponent = gameObject.GetComponent<WebView>();

        if (Url != string.Empty)
        {
            Debug.Log("Loading URL: " + Url);
            webViewComponent.Load(new Uri(Url));
        }

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            // Add event listeners for WebView2 events
            ((IWithPostMessage)webView).MessageReceived += OnMessageReceived;
        });
    }

    // Handler for WebView2 OnPostMessage event
    void OnMessageReceived(string message)
    {
        Debug.Log("WebView2 message received: " + message);
    }
}

HoloLens 2での WebView2 に関するその他の考慮事項

制限事項と既知の問題

WebView2 を使用してHoloLens 2 Unity アプリを開発する場合は、いくつかの制限事項と既知の問題に注意してください。

• ポップアップ: HoloLens 2上の Unity アプリ内の WebView2 内ではポップアップがうまく機能しませんが、デバイス上の 2D XAML アプリでは正常に動作します。 ポップアップを避け、HTML、CSS、JavaScript を使用して WebView 内のカスタム ポップアップのような要素などの代替手法や UI デザインを使用します。

• 新しいウィンドウ: HoloLens 2の WebView2 インスタンスは、デスクトップとは異なり、既定で同じウィンドウ内を移動します。 この既定の動作に従って、ユーザー エクスペリエンスを向上させます。 さらに、DevTools ウィンドウを起動できません。

• エンタープライズ認証: OS レベルのトークンを利用する自動シングル Sign-On (SSO) は、現在、HoloLens 2の WebView2 ではサポートされていません。 ユーザーは、デバイス レベルの認証が必要な場合を除き、資格情報を指定してサインインできます。 Cookie ストレージは期待どおりに動作します。

• ユーザー操作: ネイティブ HoloLens 2 スレートとは異なり、WebView2 は遠距離相互作用ハンド レイを使用して操作するのが最適です。 タッチからスワイプ、スクロールの操作はサポートされていない可能性があります。

• パフォーマンス: JavaScript または高度なレンダリングを大量に使用する複雑な Web サイトは、システムのパフォーマンスやホスト アプリケーションのフレームレートに影響を与える可能性があります。 一般的なパフォーマンス関連の制限事項と推奨事項については、Mixed Reality のドキュメントの 「Mixed Reality のパフォーマンス について」を参照してください。 以下の 「パフォーマンスの最適化」も参照してください。

パフォーマンスの最適化

スムーズなユーザー エクスペリエンスを実現するには、HoloLens 2 Unity アプリでの WebView2 のパフォーマンスの最適化が不可欠です。 いくつかの推奨事項を次に示します。

• WebView2 インスタンスの数を制限する: Unity アプリ内で WebView2 のインスタンスを 1 つだけ使用することをお勧めします。 同じインスタンスを再利用するか、破棄し、必要に応じて新しいインスタンスを作成します。 シーンから WebView プレハブを削除しても、基になる WebView2 インスタンスが破棄されないことに注意してください。 ゲーム オブジェクトを Destroy() 適切に破棄するには、 メソッドを呼び出す必要があります。

• 一般的な Unity 最適化手法を適用する: WebView2 のパフォーマンスを最適化するには、オクルージョン カリングや更新レートの制限など、標準的な Unity 最適化アプローチを使用します。 詳細については、Mixed Reality ドキュメントの 「Unity のパフォーマンスに関する推奨事項 」を参照してください。

• WebView2 のパフォーマンスをプロファイリングおよび監視する: HoloLens 2 Unity アプリケーションのパフォーマンスをプロファイリングするには、いくつかの方法があります。

  • Unity Profiler: Unity の組み込みツールで、HoloLens 2を含むさまざまなプラットフォームでアプリケーションのパフォーマンスを測定および最適化できます。

  • Visual Profiler: アプリケーションのパフォーマンスのアプリケーション内ビューを提供する Mixed Reality Toolkit の機能。

  • PIX: HoloLens 2で Unity アプリケーションをプロファイリングするためにも使用できる Windows 用のパフォーマンス チューニングおよびデバッグ ツール。

ナビゲーション

手順 7 - WebView2 機能の拡張で、いくつかのナビゲーション メソッドについて触れました。 このセクションでは、学習内容について詳しく説明します。

関連項目:

• WebView2 API リファレンス
• Mixed Reality WebView プラグインの API リファレンス - WebView2 Unity プラグインのHoloLens 2用。

IWebView インターフェイス

インターフェイスは IWebView 、ページ ナビゲーションに関連するいくつかのメソッド、イベント、およびプロパティを公開します。 ここで公開されているメイン機能は、 を使用Load(Uri url)して特定の URL に移動する機能です。

public interface IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnNavigated Navigated;

    Uri Page { get; }

    void Load(Uri url);

    void Reload(bool ignoreCache);
}

IWithBrowserHistory インターフェイス

インターフェイスは IWithBrowserHistory 、ページ ナビゲーションに関連するいくつかのメソッドとイベントを公開します。 これは主に、一般的な Web 閲覧エクスペリエンスと同様に、開発者が前後に移動できるようにします。

public interface IWithBrowserHistory : IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnCanGoForwardUpdated CanGoForwardUpdated;

    event WebView_OnCanGoBackUpdated CanGoBackUpdated;

    void GoBack();

    void GoForward();
}

SetVirtualHostNameToFolderMapping と SetVirtualHostMapping

CoreWebView2.SetVirtualHostNameToFolderMapping メソッドを使用すると、仮想ホスト名とフォルダー パス間のマッピングが可能になり、そのホスト名を使用して Web サイトからアクセスできるようになります。 このメソッドはローカル ドメイン名をローカル フォルダーにマップするため、WebView2 コントロールは、そのドメインのリソースにアクセスしようとしたときに、指定されたローカル フォルダーからコンテンツを読み込みます。

Unity 用 WebView プラグインでは、この機能がインターフェイスを IWithVirtualHost 介して公開されます。これには、1 つのメソッドがあります SetVirtualHostMapping(string hostName, string folderPath)。

public interface IWithVirtualHost : IWebView
{
    void SetVirtualHostMapping(string hostName, string folderPath);
}

メソッドをSetVirtualHostMapping使用するには、有効な URL 準拠文字列 (などwebview2.sample) に設定hostNameします。 folderPath は、絶対パスまたはアプリケーションの作業ディレクトリを基準としたパス (など Assets\Html) にすることができます。

というAssets\Html名前demo.htmlの HTML ファイルがあると仮定すると、次のコード スニペットは、Unity 用 WebView プラグインを使用した読み込みをdemo.html示しています。

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour
{
    private void Start()
    {
        var webViewComponent = gameObject.GetComponent<WebView>();

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            ((IWithVirtualHost)webView).SetVirtualHostMapping("webview2.sample", "Assets\\Html");

            // Navigate to our local content.
            webViewComponent.Load(new Uri("http://webview2.sample/demo.html"));
        });
    }
}

Input

Mixed Reality アプリケーションの Unity での入力を処理するには、さまざまな方法があります。

• 入力の概要 — MRTK2 - Mixed Reality Toolkit 2.8 アプリケーションに推奨されます。
• 入力 — MRTK3 - Mixed Reality Toolkit 3 アプリケーションに推奨されます。
• Unity 入力システム

Unity アプリケーション内で使用される入力システムに関係なく、さまざまなアプリケーション入力イベントと Unity 用 WebView プラグイン間の相互運用コードが必要です。 つまり、これらのイベント (Pointer イベントなど) をオブジェクトに WebViewMouseEventData 変換し、インターフェイスを介してそれらのイベントをプラグインに IWithMouseEvent 転送します。

public interface IWithMouseEvents : IWithInputEvents
{
    void MouseEvent(WebViewMouseEventData mouseEvent);
}

WebView2 は Unity の入力システムを認識していないので、Unity シーンとは異なる座標系を持つ可能性があります。 その結果、ポインターダウン イベントがある場合、その座標を WebView2 コントロールの座標系に変換する必要があります。 さらに、ポインターダウン イベントを適切な WebViewMouseEventData イベントの種類に変換する必要があります。

簡単な例:

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IPointerDownHandler
{
    // WebView setup steps skipped for brevity

    public void OnPointerDown(PointerEventData eventData)
    {
        IWithMouseEvents mouseEventsWebView = webView as IWithMouseEvents;

        // Call hypothetical function which converts the event's x, y into the WebView2's coordinate space.
        var hitCoord = ConvertToWebViewSpace(eventData.position.x, eventData.position.y);

        WebViewMouseEventData mouseEvent = new WebViewMouseEventData
        {
            X = hitCoord.x,
            Y = hitCoord.y,
            Type = WebViewMouseEventData.EventType.MouseDown,
            Button = WebViewMouseEventData.MouseButton.ButtonLeft,
            TertiaryAxisDeviceType = WebViewMouseEventData.TertiaryAxisDevice.PointingDevice
        };

        // Propagate the event to the WebView plugin.
        mouseEventsWebView.MouseEvent(mouseEvent);
    }
}

上の例では、ポインターダウン イベントはオブジェクトに WebViewMouseEventData 変換され、Unity 用 WebView プラグインに転送されます。 これは基本的にマウスダウン イベントに変換されます。 マウス クリック イベントを作成するには、ポインターアップ イベントも同様の方法で処理する必要があります。

上の例では、 ConvertToWebViewSpace は意図的に実装されていません。

関連項目

• WinUI 2 (UWP) アプリでの WebView2 の概要
• WebView2 API リファレンス
• Mixed Reality WebView プラグインの API リファレンス - WebView2 Unity プラグインのHoloLens 2用。