Web 側コードからネイティブ側 WinRT コードを呼び出す

Visual Studio のインストール

• Visual Studio 2015 以降がまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 の開発環境を設定する」で「Visual Studio のインストール」を参照してください。 そのセクションの手順に従って、このページに戻って以下の手順に進みます。 この記事では、Visual Studio Community Edition 2022 のスクリーンショットを示します。

Microsoft Edge のプレビュー チャネルをインストールする

• Microsoft Edge のプレビュー チャネル (Beta、Dev、または Canary) がまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 の開発環境を設定する」で「Microsoft Edge のプレビュー チャネルをインストールする」を参照してください。 そのセクションの手順に従って、このページに戻って以下の手順に進みます。

基本的な WebView2 プロジェクトを作成または開く

1. 次のいずれかの方法を実行して、WebView2 コントロールを埋め込む WebView2 コードが 2 行含まれるベースライン スターター プロジェクトを取得します。

   • 提供されたベースライン サンプル ソリューションを使用します。 まだ行っていない場合は、 WebView2Samples リポジトリをローカル ドライブに複製またはダウンロードします。 別のウィンドウまたはタブで、「WebView2 の開発環境を設定する」の「WebView2Samples リポジトリのダウンロード」を参照してください。 そのセクションの手順を実行し、このページに戻り、以下に進みます。 この方法では、 https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln のローカル コピーを使用します。

   • Visual Studio でプロジェクト テンプレートを使用して、基本的な UWP アプリを作成し、WebView2 コントロールを追加します。 「 WinUI 2 (UWP) アプリでの WebView2 の使用を開始する 」の手順を実行して、WebView2 コントロールを埋め込む WebView2 コードを 2 行含むベースライン スターター プロジェクトを作成します。

   • 既存のコード ベースを使用します。 独自のアプリ コード ベースが既にある場合は、そのプロジェクトを Visual Studio で開くことができます。

2. ローカル ドライブで、サンプル リポジトリ ソリューションなど、上記で入手した .sln ファイルを開きます。

   • <your-repos-directory>/WebView2Samples-main/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln
   • <your-repos-directory>/WebView2Samples/GettingStartedGuides/WinUI2_GettingStarted/MyUWPGetStartApp.sln

   サンプル ソリューションが Visual Studio で開きます。

   

3. Visual Studio で、[デバッグ>デバッグの開始] を選択します。 これによりプロジェクトがビルドされ、プロジェクトのベースライン バージョンが実行されます。 MyUWPGetStartApp ウィンドウなどのベースライン アプリが開きます。

   

   表示されているのは、WebView コントロールが追加された WinUI 2 (UWP) アプリで、最初に Bing.com に移動するように設定されています。 これは、「 WinUI 2 (UWP) アプリでの WebView2 の使用を開始する」の手順を実行した結果のアプリです。

4. アプリ ウィンドウを閉じます。

1. Visual Studio プロジェクト テンプレートを使用して、新しいソリューションとプロジェクトを作成します。 これを行うには、「WinUI 3 (Windows アプリ SDK) アプリでの WebView2 の使用を開始する」の手順を実行し、次に続行します。

   または、既に独自のアプリ コード ベースがある場合は、そのプロジェクトを Visual Studio で開き、以下に示すように WinRTAdapter プロジェクトを追加できます。

   この時点で、Visual Studio は次のようになります。

   

   また、 WinUI デスクトップ アプリは次のようになります。

   

2. WinUI デスクトップ アプリが実行されている場合は、そのアプリを閉じます。

3. 次の Visual Studio ダイアログが表示される場合があります。 これらのデバッガー ダイアログは既知のバグです。 これらのダイアログを閉じるには、[ OK ] ボタンをクリックし、[ キャンセル ] ボタンをクリックします。

   

1. [ プロジェクト名 ] テキスト ボックスで、プロジェクトに (具体的には WinRTAdapter) という名前を付けます。 メモ: 現時点では、この特定のプロジェクト名を使用する必要があります。

   

   上のスクリーンショットのパスは、サンプル リポジトリを複製する方法を反映しています。

2. [作成] ボタンをクリックします。

   [ 新しい Windows プロジェクト ] ダイアログが開きます。

   

3. [ OK ] ボタンをクリックします。

   WinRTAdapter プロジェクトが作成され、ソリューション エクスプローラーでメイン プロジェクトの横に追加されます。

   

4. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. [ プロジェクト名 ] テキスト ボックスで、プロジェクトに (具体的には WinRTAdapter) という名前を付けます。 メモ: 現時点では、この特定のプロジェクト名を使用する必要があります。

   

2. [作成] ボタンをクリックします。

   [ 新しい Windows プロジェクト ] ダイアログが開きます。

   

3. [ OK ] ボタンをクリックします。

   WinRTAdapter プロジェクトが作成され、ソリューション エクスプローラーでメイン プロジェクトの横に追加されます。

   

4. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 Visual Studio で [NuGet パッケージ マネージャー] ウィンドウが開きます。

2. [NuGet パッケージ マネージャー] ウィンドウで、[参照] タブをクリックします。

3. [NuGet パッケージ マネージャー] ウィンドウの [検索] ボックスに「Windows 実装ライブラリ」と入力し、[Windows 実装ライブラリ] カードを選択します。

   

4. [ インストール] ボタンをクリックします。 [ 変更のプレビュー ] ダイアログが開きます。

   

5. [ OK ] ボタンをクリックします。

6. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 Visual Studio で [NuGet パッケージ マネージャー] ウィンドウが開きます。

2. [NuGet パッケージ マネージャー] ウィンドウで、[参照] タブをクリックします。

3. [NuGet パッケージ マネージャー] ウィンドウの [検索] ボックスに「Windows 実装ライブラリ」と入力し、[Windows 実装ライブラリ] カードを選択します。

   

4. [ インストール] ボタンをクリックします。

5. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 [NuGet パッケージ マネージャー] ウィンドウが開きます。

2. [NuGet パッケージ マネージャー] ウィンドウで、[参照] タブをクリックします。

3. [ プレリリースを含める ] チェック ボックスをオンにします。

4. [ 検索 ] ボックスに「 WebView2」と入力します。

5. Microsoft.Web.WebView2 カードをクリックします。 ウィンドウの中央に詳細情報が表示されます。

6. [ バージョン] ドロップダウン リストで、WebView2 SDK の プレリリース バージョンを選択するか、[ 最新のプレリリース ] が選択されていることを確認します。 バージョンは 1.0.1243.0 以降である必要があります。 選択したバージョン番号をメモします。

   

7. [ インストール] ボタンをクリックします。 [ 変更のプレビュー ] ダイアログが開きます。

   

8. [ OK ] ボタンをクリックします。

9. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 [NuGet パッケージ マネージャー] ウィンドウが開きます。

2. [NuGet パッケージ マネージャー] ウィンドウで、[参照] タブをクリックします。

3. [ プレリリースを含める ] チェック ボックスをオンにします。

4. [ 検索 ] ボックスに「 WebView2」と入力します。

5. Microsoft.Web.WebView2 カードをクリックします。 ウィンドウの中央に詳細情報が表示されます。

6. [ バージョン] ドロップダウン リストで、WebView2 SDK の プレリリース バージョンを選択するか、[ 最新のプレリリース ] が選択されていることを確認します。 バージョンは 1.0.1243.0 以降である必要があります。 選択したバージョン番号をメモします。

   

7. [ インストール] ボタンをクリックします。

8. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

MyUWPGetStartApp などのメイン プロジェクトでは、次のように、WinRTAdapter プロジェクト用にインストールしたのと同じプレリリース版の WebView2 SDK をインストールします。

1. ソリューション エクスプローラーで、MyUWPGetStartApp などのメイン プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 [NuGet パッケージ マネージャー] ウィンドウが開きます。

2. [ プレリリースを含める ] チェック ボックスをオンにします。

3. [ 参照 ] タブを選択します。

4. [ 検索 ] ボックスに「 WebView2」と入力します。

5. Microsoft.Web.WebView2 カードをクリックします。 ウィンドウの中央領域に詳細情報が表示されます。

6. [ バージョン] ドロップダウン リストで、WebView2 SDK の プレリリース バージョンを選択するか、[ 最新のプレリリース ] が選択されていることを確認します。 WinRTAdapter プロジェクトで使用されているものと同じバージョンを使用してください。WinUI 2 (UWP) を対象とする WinRT WebView2 アプリの場合、WinRTAdapter プロジェクトと同じバージョンである必要があります。 バージョンは 1.0.1243.0 以降である必要があります。

7. [ インストール] ボタンをクリックします。 [変更のプレビュー] ダイアログが開き、WebView2 がメイン プロジェクトに追加されます。

8. [ OK ] ボタンをクリックします。

   Visual Studio は上記の手順セクションと似ていますが、現在、WinRTAdapter プロジェクトではなく、メイン プロジェクト用に NuGet パッケージ マネージャーが開かれている点が異なります。

9. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

これで、メイン プロジェクト用に WebView2 プレリリース SDK がインストールされました。

アプリが WinUI 3 (Windows アプリ SDK) を対象とする場合は、次の理由からこの手順をスキップしてください。

• WinUI 3 には WebView2 SDK がバンドルされているため、WebView2 SDK を別途ダウンロードする必要はありません。

• WinUI 3 は、プレリリース版 WebView2 SDK をサポートしていません。

MyUWPGetStartApp などのメイン プロジェクトで、次のように WinRTAdapter プロジェクトを指す参照を追加します。

1. ソリューション エクスプローラーで、MyUWPGetStartApp などのメイン プロジェクトを展開し、[参照設定] を右クリックして、[参照の追加] を選択します。 「 参照マネージャ」(Reference Manager ) ダイアログが開きます。

2. 左側のツリーで、[ プロジェクト] を選択します。 [ WinRTAdapter ] チェック ボックスをオンにします。

   

3. [ OK ] ボタンをクリックして、[ 参照マネージャ] ダイアログを閉じます。

4. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

MyWebView2WinUI3 などの非アダプター メイン プロジェクトで、次のように WinRTAdapter プロジェクトを指す参照を追加します。

1. ソリューション エクスプローラーで、MyWebView2WinUI3 などのメイン プロジェクトを選択します。 次に、メニュー バーで、[ プロジェクト]>[プロジェクト参照の追加] を選択します。 「 参照マネージャ」(Reference Manager ) ダイアログが開きます。

2. 左側のツリーで、[ プロジェクト] を選択します。 [ WinRTAdapter ] チェック ボックスをオンにします。

   

3. [ OK ] ボタンをクリックして、[ 参照マネージャ] ダイアログを閉じます。

4. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

アプリが WinUI 2 (UWP) 用の場合は、この手順をスキップします。

OS ターゲットの更新

このセクションは、WinUI 3 (Windows アプリ SDK) 専用です。

1. 次のように、.csproj ファイル内のTargetFrameworkを更新または検査します。

   メイン プロジェクトをビルドすると、[エラー リストの表示] ウィンドウに次のような警告が表示される>。

   "MSB3851 このプロジェクトは "Windows, Version=10.0.19041.0" を対象としていますが、"UAP,Version=10.0.22000.0" をターゲットとする "WinRTAdapter.winmd" を参照しようとしています。これは無効です。"

   

   次のようにその警告を修正するか、値を検査します。

1. WinRTAdapter の対象となるバージョンを決定する: WinRTAdapter プロジェクトを右クリックし、[プロパティ] を選択し、[構成プロパティ>全般] を展開して選択し、[ターゲット プラットフォーム バージョン] フィールドを確認します。

   

2. ターゲット プラットフォームのバージョンをメモし、[OK] ボタンをクリックして [プロパティ ページ] ダイアログを閉じます。

1. Visual Studio で、[ファイル]>開く>ファイルの順に選択します。 [ ファイルを開く ] ダイアログが開きます。

2. MyWebView2WinUI3.csproj などの.csprojファイルを開きます。

3. Visual Studio のコード エディターに行番号が表示されない場合は、必要に応じて行番号をオンにします。 これを行うには、[ツール] >[オプション] >[テキスト エディター]> [すべての言語>行番号] を選択します。 次に、[ OK ] ボタンをクリックします。

4. .csproj ファイルで、行 <TargetFramework>net6.0-windows10.0.19041.0</TargetFramework> のバージョン番号を、上で取得した WinRT アダプターのバージョンと同じになるように更新します。

   たとえば、行を次のように変更します。

   <TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
   

   変更後:

   <TargetFramework>net6.0-windows10.0.22000.0</TargetFramework>
   

5. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

OS ターゲットが更新されました。

プロジェクト ファイルに CsWinRT と WinRTAdapter を追加する

このセクションは、WinUI 3 (Windows アプリ SDK) 専用です。

プロジェクト ファイルに CsWinRT パッケージと WinRTAdapter パッケージを追加します。

1. Visual Studio で、[ファイル]>開く>ファイルの順に選択します。

   [ ファイルを開く ] ダイアログが開きます。

2. MyWebView2WinUI3.csproj などの.csprojファイルを開きます。

3. いくつかの<PackageReference>要素が既に含まれている<ItemGroup>要素内で、次の<PackageReference>要素を他の<PackageReference>要素の下に追加します。

   <ItemGroup>
       ...
       <PackageReference Include="Microsoft.Windows.CsWinRT" Version="1.6.4"/>
       ...
   </ItemGroup>
   

4. <PropertyGroup>要素に、次のプロパティ グループ参照を追加します。 その要素の一番下に追加できます。

   <PropertyGroup>
       ...
       <CsWinRTIncludes>WinRTAdapter</CsWinRTIncludes>
   </PropertyGroup> 
   

5. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

単一プロジェクトの MSIX パッケージ化ツールをインストールする

このセクションは、WinUI 3 (Windows アプリ SDK) 専用です。

1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[ビルド] を選択します。

2. [エラー一覧>表示] を選択します。

3. ソリューション エクスプローラーで、メイン プロジェクトを右クリックし、[ビルド] を選択します。

4. [エラー一覧>表示] を選択します。

   次のエラーが表示される場合があります。

   "WinRTAdapter.winmd を参照できません。 .NET 5 以上をターゲットにするときに Windows メタデータ NETSDK1コンポーネントを直接参照することはサポートされていません。」

   

5. このエラーを修正するには、 VS 2022 用の単一プロジェクトの MSIX パッケージ化ツールをダウンロードしてインストールします。 これらのパッケージ ツールがないと、プロジェクトはビルドされますが、実行されません。

ダウンロードしたファイルをダブルクリックした後の VSIX インストーラー ダイアログ

[ インストールの完了] ダイアログ:

1. アプリがパッケージ化されていないアプリの場合は、「Windows ランタイム コンポーネントを使用してパッケージ化されていないデスクトップ アプリの強化」の手順も実行する必要があります。

2. ソリューション エクスプローラーで、メイン プロジェクトを右クリックし、[ビルド] を選択します。

3. [エラー一覧>表示] を選択します。

4. [デバッグ>デバッグの開始] (F5) を選択します。

   WinUI 3 アプリが開きます。

   

5. アプリを閉じます。

6. 次の Visual Studio ダイアログが表示される場合があります。 これらのデバッガー ダイアログは既知のバグです。 これらのダイアログを閉じるには、[ OK ] ボタンをクリックし、[ キャンセル ] ボタンをクリックします。

   

7. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

1. ソリューション エクスプローラー で、メイン プロジェクト (MyUWPGetStartApp など) を展開し、MainPage.xaml を展開して、[MainPage.xaml.cs] を選択します。

2. MainPage コンストラクターの下に、次の InitializeWebView2Async メソッドを追加します。

   private async void InitializeWebView2Async()
   {
      await WebView2.EnsureCoreWebView2Async();
      var dispatchAdapter = new WinRTAdapter.DispatchAdapter();
      WebView2.CoreWebView2.AddHostObjectToScript("Windows", dispatchAdapter.WrapNamedObject("Windows", dispatchAdapter));
   }
   

   このメソッドは AddHostObjectToScript を呼び出します。

   AddHostObjectToScript("Windows", ...行では、Windows は最上位の名前空間です。 他の最上位の名前空間がある場合は、次の例のように、 AddHostObjectToScriptに呼び出しを追加できます。

   WebView2.CoreWebView2.AddHostObjectToScript("RuntimeComponent1", dispatchAdapter.WrapNamedObject("RuntimeComponent1", dispatchAdapter));
   

   WrapNamedObject 呼び出しは、RuntimeComponent1 名前空間のラッパー オブジェクトを作成します。 AddHostObjectToScript 呼び出しでは、RuntimeComponent1 という名前を使用して、ラップされたオブジェクトをスクリプトに追加します。

   カスタム WinRT コンポーネントの使用方法に関する完全なガイダンスについては、以下の 「カスタム (サードパーティ) WinRT コンポーネント」をご覧ください。

3. MainPage コンストラクター (this.InitializeComponent();) に、次のコードを追加します。

   InitializeWebView2Async();
   

4. MyUWPGetStartApp などのメイン プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します。 太字はスタートアップ プロジェクトを示します。

5. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

6. F5 キーを押してサンプル アプリを実行します。 WebView2 対応 WinUI 2 (UWP) アプリが開きます。

   

次に、WinRT オブジェクトをホスト アプリのネイティブ側からホスト アプリの Web 側に渡します。 これを行うには、次のように AddHostObjectToScript を呼び出す InitializeWebView2Async メソッドを追加します。

1. ソリューション エクスプローラーで、メイン プロジェクト (MyWebView2WinUI3 など) を展開し、[MainWindow.xaml.cs] を選択します。

2. MainWindow コンストラクターの下に、次の InitializeWebView2Async メソッドを追加します。

   private async void InitializeWebView2Async()
   {
      await MyWebView.EnsureCoreWebView2Async();
      var dispatchAdapter = new WinRTAdapter.DispatchAdapter();
      MyWebView.CoreWebView2.AddHostObjectToScript("Windows", dispatchAdapter.WrapNamedObject("Windows", dispatchAdapter));
   }
   

   上記の 2 つの場所では、変数名 MyWebView が使用されていることに注意してください。 この名前は、ファイル内の他の場所で一致している必要があります。 一部のサンプルでは、ここでの名前 webView2 が代わりに使用されます。

   このメソッドは AddHostObjectToScript を呼び出します。

   AddHostObjectToScript("Windows", ...行では、Windows は最上位の名前空間です。 他の最上位の名前空間がある場合は、次の例のように、 AddHostObjectToScriptに呼び出しを追加できます。

   WebView2.CoreWebView2.AddHostObjectToScript("RuntimeComponent1", dispatchAdapter.WrapNamedObject("RuntimeComponent1", dispatchAdapter));
   

   WrapNamedObject 呼び出しは、RuntimeComponent1 名前空間のラッパー オブジェクトを作成します。 AddHostObjectToScript 呼び出しでは、RuntimeComponent1 という名前を使用して、ラップされたオブジェクトをスクリプトに追加します。

   カスタム WinRT コンポーネントの使用方法に関する完全なガイダンスについては、以下の 「カスタム (サードパーティ) WinRT コンポーネント」をご覧ください。

3. MainPage コンストラクターのMyWebView.NavigationStarting += EnsureHttps;行の下に、次のコードを追加します。

   InitializeWebView2Async();
   

4. MyWebView2WinUI3 などのメイン プロジェクトを右クリックし、[スタートアップ プロジェクトとして設定] を選択します。 太字はスタートアップ プロジェクトを示します。

5. [ファイル>すべて保存] (Ctrl+Shift+S) を選択します。

6. F5 キーを押してサンプル アプリを実行します。 WinUI デスクトップ ウィンドウが開きます。

   

おめでとうございます! これで、JavaScript コードから WinRT コードを呼び出すサンプル デモが完了しました。

• 次の Visual Studio ダイアログが表示される場合があります。 これらのデバッガー ダイアログは既知のバグです。 これらのダイアログを閉じるには、[ OK ] ボタンをクリックし、[ キャンセル ] ボタンをクリックします。

  

おめでとうございます! これで、JavaScript コードから WinRT コードを呼び出すサンプル デモが完了しました。

webview.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
            "(() => {" +
                    "if (chrome && chrome.webview) {" +
                        "console.log('Setting up WinRT projection options');" +
                        "chrome.webview.hostObjects.options.defaultSyncProxy = true;" +
                        "chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/,/AsyncWithSpeller$/];" +
                        "chrome.webview.hostObjects.options.ignoreMemberNotFoundError = true;"  +
                        "window.Windows = chrome.webview.hostObjects.sync.Windows;" +
                    "}" +
                "})();");

webView->CoreWebView2->AddScriptToExecuteOnDocumentCreatedAsync(
            LR"(
                (() => {
                    if (chrome && chrome.webview) {
                        console.log('Setting up WinRT projection options');
                        chrome.webview.hostObjects.options.defaultSyncProxy = true;
                        chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/,/AsyncWithSpeller$/];
                        chrome.webview.hostObjects.options.ignoreMemberNotFoundError = true;
                        window.Windows = chrome.webview.hostObjects.sync.Windows;
                    }
                })();
            )"));