次の方法で共有

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

  • [アーティクル]

Web 側の JavaScript コードは、 wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) の助けを借りて、ネイティブ側の WinRT メソッドとプロパティにアクセスできます。 wv2winrt ツールは、JavaScript コードに必要なコード ファイルを生成し、次のような任意の WinRT API のメソッドとプロパティを使用できるようにします。

  • WebView2 ホスト アプリの WinRT API。
  • Windows WinRT API。
  • サード パーティの WinRT API。

Web 側の JavaScript コードが WinRT ホスト アプリのメソッドとプロパティにアクセスできるようにする理由の詳細については、「Web 側コード からネイティブ側コードを呼び出す」の概要を参照してください。

WinRT と .NET が異なるアプローチを使用する理由

この記事は WinRT WebView2 API 用であり、.NET WebView2 API 用ではありません。 この記事の C# コードは、.NET WebView2 API 用にビルドされますが、実行されません。 .NET WebView2 API に対してこの記事の C# コードを使用してを呼び出 AddHostObjectToScript すと、エラー メッセージが生成されます。

WinRT は WinRT オブジェクトを投影するときに wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) が必要です。これは、WinRT では WinRT IDispatch オブジェクトを動的に検査して操作するメカニズムがないためです。これは、WebView2 の Win32 および .NET プラットフォームでサポートされています。 の .NET の AddHostObjectToScript使用については、この記事の代わりに Web 側コードからネイティブ側コードを呼び出す 方法に関するページを参照してください。

WinUI 3 と WinUI 2 のセットアップの違い

WinRT WebView2 アプリが WinUI 2 (UWP) ではなく WinUI 3 (Windows アプリ SDK) を対象とする場合は、以下に示す WinUI 3 固有の手順の概要を次に示します。

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

  • にを追加 WinRTAdapter します CsWinRTIncludes。

  • WinUI 3 (Windows アプリ SDK) アプリの場合、メイン アプリ プロジェクトには WinAppSDK への参照があり、WebView2 SDK ファイルの独自のコピーが直接含まれているため、エラー メッセージを生成せずに、メイン アプリ プロジェクトに WebView2 SDK への参照を含めることはできません。

  • プロジェクト アダプターのバージョンが一致する必要はありません。

  • Visual Studio 2022 Community エディションの "既定の" オプションをインストールした後、Visual Studio インストーラーで .NET カードをクリックし、右側の [C# テンプレート] Windows アプリ SDKチェック ボックスをオンにします。

  • 正しいプロジェクト テンプレートがまだ表示されない場合は、Visual Studio インストーラーで UWP カードをクリックして選択し、右側の [v143 C++ ツール] チェック ボックスをオンにして、[変更] ボタンをクリックします。

この例の戦略と最終目標

戦略

この記事では、次のメイン手順について説明します。

  1. wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) の WinRTAdapter プロジェクトを作成します。

  2. この例では、プロジェクション用に次のホスト側 API を指定します。

  3. wv2winrt ツールを実行して、選択した名前空間またはクラスの C++/WinRT ソース コードを生成します。

  4. メイン WinUI プロジェクトで AddHostObjectToScript を呼び出します。

  5. Web 側の JavaScript コード (または DevTools コンソールから) からホスト オブジェクトのメソッドとプロパティを呼び出します。

目標の終了

まず、JavaScript コードから呼び出すことに関心がある WinRT API をいくつか選択します。 この例では、Windows UWP アプリケーションの名前空間にある Windows.Globalization WinRT Language クラスを使用します。 Windows.Globalization.Language クラスを使用すると、クライアントのネイティブ OS から言語情報を取得できます。

WebView2 ホスト アプリでは、Web 側の JavaScript コードは、ネイティブ側のコード内にあるオブジェクトの Language メソッドとプロパティにアクセスできます。

DevTools コンソールを使用して投影された API にアクセスする

このチュートリアルの最後では、Microsoft Edge DevTools の コンソール を使用して、クラスのホストのプロパティの displayName 読み取りを Language テストします。

const Windows = chrome.webview.hostObjects.sync.Windows;
(new Windows.Globalization.Language("en-US")).displayName;

その後、DevTools コンソールは、Web 側の JavaScript コードからネイティブ側コードを呼び出したことを示す、または別の言語表示名を出力 English (United States)します。

DevTools コンソールを使用して、Web 側コードからのネイティブ側コードの呼び出しをテストする

同様に、 Windows.System.UserProfile 名前空間 メンバーにアクセスできます。

ソース コード ファイルを使用して投影された API にアクセスする

同様に、DevTools コンソールではなくソース コード ファイルでは、投影されたホスト オブジェクトにアクセスできます。 まず、スクリプトのセットアップ コードを実行します。

// early in setup code:
const Windows = chrome.webview.hostObjects.sync.Windows;

次に、コードのメイン本文で、次のような投影オブジェクトへの呼び出しを追加します。

(new Windows.Globalization.Language("en-US")).displayName;

同様に、 Windows.System.UserProfile 名前空間 メンバーにアクセスできます。

では、始めましょう。

手順 1: 基本的な WebView2 プロジェクトを作成または取得する

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 コントロールを埋め込む 2 行の WebView2 コードを含むベースライン スターター プロジェクトを取得するには、次のいずれかの方法を実行します。

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

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

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

    wv2winrt ツールの新しいプロジェクトの追加

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

    WebView2 WinUI 2 UWP サンプル ウィンドウ

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

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

手順 2: wv2winrt ツールの WinRTAdapter プロジェクトを追加する

次に、wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) の WinRTAdapter プロジェクトを作成します。 このプロジェクトは、ツールを実行して生成されたコードからライブラリを構築します。 この生成されたコードにより、WinRT API を WebView2 コントロールで公開できます。

次のように、wv2winrt ツールのプロジェクトを追加します。

  1. Visual Studio で、前の手順から WinUI プロジェクトを開きます。

  2. ソリューション エクスプローラーで、ソリューション (プロジェクトではなく) を右クリックし、[新しいプロジェクトの追加>] を選択します。 [ 新しいプロジェクトの追加] ダイアログが開きます。

  3. [検索] ボックスに、「Windows ランタイム コンポーネント (C++/WinRT)」と入力します。

    別の方法:以下の番号付き手順で説明されているように、Windows ランタイム コンポーネント (C++/WinRT) のプロジェクト テンプレートを使用してプロジェクトを追加しない場合は、代わりに、UWP アプリケーション>の「C++/WinRT の概要」の手順に従って、ユニバーサル Windows プラットフォーム開発ワークロードをインストールする必要があります。

  4. Windows ランタイム コンポーネント (C++/WinRT) カードを選択し、[次へ] ボタンをクリックします。

    [新しいプロジェクトの追加] ダイアログでWindows ランタイム コンポーネント (C++/WinRT) カードを選択する

    メモ： テンプレートの名前に "C++/WinRT" が含まれていることを確認します。 このテンプレートが一覧にない場合は、Visual Studio インストーラー内からユニバーサル Windows プラットフォーム開発ワークロードをインストールします。 Visual Studio 2019 を使用していてもテンプレートが見つからない場合は、Visual Studio > 拡張機能>管理拡張機能から VS2019 拡張機能の C++/WinRT テンプレートとビジュアライザーをインストールします。

    [ 新しいプロジェクトの構成] ウィンドウが開きます。

プロジェクトの構成と作成

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

    [新しいプロジェクトの構成] ウィンドウで、プロジェクトに

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

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

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

    [新しい Windows プロジェクト] ダイアログ

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

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

    新しく作成された WinRTAdapter プロジェクト

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

wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) は、この WinRTAdapter プロジェクトで実行されます。 次の手順では、このプロジェクトで選択したクラスのコードを生成します。

手順 3: WinRTAdapter プロジェクト用の Windows 実装ライブラリをインストールする

WinRTAdapter プロジェクトで、次のように Windows 実装ライブラリ (WIL) をインストールします。

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

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

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

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

    WinRTAdapter プロジェクトの WIL の [変更のプレビュー] ダイアログ

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

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

WinRTAdapter プロジェクト用に WIL がインストールされました。 Windows 実装ライブラリ (WIL) は、WINDOWS の COM コーディングを簡単に使用するためのヘッダー専用の C++ ライブラリです。 Windows COM コーディング パターン用の読み取り可能な型セーフな C++ インターフェイスを提供します。

手順 4: WinRTAdapter プロジェクト用の WebView2 プレリリース SDK をインストールする

WinRTAdapter プロジェクトでは、次のようにプレリリース バージョンの WebView2 SDK もインストールします。

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

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

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

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

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

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

    WinRTAdapter プロジェクトの WebView2 SDK パッケージを選択する NuGet パッケージ マネージャー

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

    WebView2 SDK を WinRTAdapter プロジェクトに追加するための [変更のプレビュー] ダイアログ

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

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

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

手順 5: WebView2 プレリリース SDK をインストールする (WinUI 2 のみ)

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 がインストールされました。

手順 6: 選択したホスト API のソース コードを生成する

次に、使用する WinRT クラスを組み込むように wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) を構成します。 これにより、コンパイルされるソース ファイルが生成されます。 これらの API のコードを生成すると、Web 側の JavaScript コードでこれらの API を呼び出できるようになります。

次の手順の例では、2 つの Windows 名前空間を指定します。 wv2winrt ツールは、これらの名前空間の下にある API のみのソース コードを生成します。

後でサンプル アプリが実行されている場合は、DevTools コンソールからこれらの API を呼び出して、これらの指定されたホスト側 API を Web 側のコードから呼び出すことができることを示します。

名前空間とクラスを次のように指定します。

  1. ソリューション エクスプローラーで、WinRTAdapter プロジェクトを右クリックし、[プロパティ] を選択します。 [WinRTAdapter プロパティ ページ] ダイアログが開きます。

  2. 左側で、[ 共通プロパティ>] [WebView2] を展開して選択します。

  3. [WebView2 WinRT API を使用する] を[いいえ] に設定します。 そのため、WebView2 SDK は WebView2 WinRT コンポーネントをプロジェクトの出力にコピーしません。 この WinRTAdapter プロジェクトは WebView2 WinRT API を呼び出していないため、WinRT コンポーネントは必要ありません。

  4. [ wv2winrt ツールを使用する ] を [はい] に設定します。

  5. [ JavaScript ケースを使用する ] を [はい] に設定します。

  6. [ フィルターを含める ] 行で、右側の列をクリックし、そのセルのドロップダウン メニューをクリックし、[ 編集] をクリックします。 [ フィルターを含める ] ダイアログが開きます。

  7. 一番上のテキスト ボックスに、先頭または末尾の空白を使用せずに、次の文字列を個別の行に貼り付けます。

    Windows.System.UserProfile
Windows.Globalization.Language

    [フィルターを含める] ダイアログ

    上記のように、名前空間またはクラスの完全な名前を指定する必要があります。

  8. [ OK ] ボタンをクリックして、[ フィルターを含める ] ダイアログを閉じます。

  9. このチュートリアルでは、[ WinRTAdapter プロパティ ページ] ダイアログが次のように表示されていることを確認します。

    [WinRTAdapter プロパティ ページ] ダイアログが展開され、

  10. [ OK ] ボタンをクリックして、[ プロパティ ページ] ダイアログを 閉じます。

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

アダプター プロジェクトを指す参照の追加

次に、アダプター プロジェクトをポイントして、メイン プロジェクトに参照を追加します。

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

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

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

    メイン プロジェクトの [参照マネージャー] ダイアログの [WinRTAdapter] チェック ボックス

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

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

API コードを生成する

次に、API コードを生成します。

  1. WinRTAdapter プロジェクトを右クリックし、[ビルド] を選択します。

    ソース コードは、wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) の [フィルターを含める] ダイアログで指定した名前空間またはクラスに対して生成されます。

    • Windows.System.UserProfile 名前空間
    • Windows.Globalization.Language クラス

  2. ビルドが完了したら、[ ファイル>をすべて保存] (Ctrl + Shift + S) を選択します。

重要

WebView2 SDK のリリース バージョンをインストールし、ビルドが で error MIDL2011: [msg]unresolved type declaration [context]: Microsoft.Web.WebView2.Core.ICoreWebView2DispatchAdapter [ RuntimeClass 'WinRTAdapter.DispatchAdapter' ]失敗した場合、これは WebView2 SDK のリリース バージョンの問題であり、上記の手順で [WebView2 WinRT API の使用] を[はい ] に変更する必要があります。

または、プロジェクト ファイルWinRTAdapter.vcxprojの最後</ItemGroup>のの後に次を追加します。

<ItemGroup Condition="'$(WebView2UseDispatchAdapter)' == 'true'">
 <Reference Include="$(WebView2SDKPath)lib\Microsoft.Web.WebView2.Core.winmd">
   <!-- wv2winrt needs Dispatch Adapter metadata to generate code -->
 </Reference>
</ItemGroup>

を、WebView2 SDK がインストールされたディレクトリに置き換えます。最後は に\置き換えます$(WebView2SDKPath)。 (例: ..\<sample-directory>\packages\Microsoft.Web.WebView2.1.0.1264.42\)。

手順 7: ターゲット フレームワークを更新する (WinUI 3 のみ)

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

手順 8: メイン プロジェクトにホスト オブジェクトを追加する

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

  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. コンストラクターの下this.InitializeComponent();にMainPage、次のコードを追加します。

    InitializeWebView2Async();

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

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

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

    WebView2 WinUI 2 UWP アプリ

ホスト アプリの Web 側コード (および DevTools コンソール) は、指定された名前空間またはホスト オブジェクトのクラスのメソッドとプロパティを呼び出すようになりました。

手順 9: Web 側 JavaScript からホスト オブジェクトのメソッドとプロパティを呼び出す

DevTools コンソールを使用して投影された API にアクセスする

次に、DevTools コンソールを使用して、Web 側コードが wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) で指定されたホスト側 API を呼び出すことができることを示します。

  1. アプリが実行されていない場合は、Visual Studio で F5 キーを押してサンプル アプリを実行します。

  2. WebView2 サンプル アプリ ウィンドウのメイン部分をクリックしてフォーカスを設定し、Ctrl キーを押しながら Shift キーを押しながら I キーを押して Microsoft Edge DevTools を開きます。 または、ページを右クリックし、[ 検査] を選択します。

    [Microsoft Edge DevTools] ウィンドウが開きます。

  3. Microsoft Edge DevTools ウィンドウが表示されない場合は、 Alt キーを押しながら Tab キーを押して表示します。

  4. [ DevTools ] ウィンドウで、[ コンソール ] タブを選択します。

  5. [ コンソールのクリア ] (コンソール のクリア アイコン) ボタンをクリックするか、 コンソール を右クリックして [ 本体のクリア] を選択します。 コンソールにメッセージが定期的に表示される場合があります。

  6. DevTools コンソールで、次の Windows.Globalization.Language クラス コードを貼り付け、 Enter キーを押します。

    const Windows = chrome.webview.hostObjects.sync.Windows;
(new Windows.Globalization.Language("en-US")).displayName;

    コンソールは、 などの English (United States)言語名文字列を出力し、アプリのホスト側 (ネイティブ側) コードを Web 側の JavaScript コードから呼び出すことができることを示します。

    DevTools コンソールを使用した Web 側コードからのネイティブ側コードの呼び出しのテスト

  7. かっこを省略してみてください。 DevTools コンソールで、次のステートメントを入力します。

    new Windows.Globalization.Language("en-US").displayName;

    コンソールは、 などの English (United States)言語名の文字列を出力します。

    同様に、 Windows.System.UserProfile 名前空間 メンバーにアクセスできます。

  8. [DevTools] ウィンドウを閉じます。

  9. アプリを閉じます。

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

ソース コード ファイルを使用して投影された API にアクセスする

上記では、DevTools コンソールを使用して、投影されたホスト オブジェクトにアクセスする JavaScript ステートメントを実行しました。 同様に、ソース コード ファイル内から投影されたホスト オブジェクトにアクセスできます。 これを行うには、まずスクリプトのセットアップ コードを実行します。

// early in setup code:
const Windows = chrome.webview.hostObjects.sync.Windows;

次に、コードのメイン本文で、次のような投影オブジェクトへの呼び出しを追加します。

(new Windows.Globalization.Language("en-US")).displayName;

同様に API メンバーにアクセス Windows.System.UserProfile できます。

これはチュートリアルの手順の最後です。 次のセクションでは、WebView2 WinRT アプリに関する一般的な情報を示します。

カスタム (サード パーティ製) WinRT コンポーネント

wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) では、ファースト パーティ製の OS WinRT API に加えて、カスタムのサード パーティの WinRT コンポーネントもサポートされています。

wv2winrt ツールを使用したサードパーティの WinRT コンポーネント

wv2winrt ツールでカスタム (サード パーティ製) WinRT コンポーネントを使用するには、上記の手順に加えて、次の手順も実行します。

  1. WinRT クラスを実装する Visual Studio ソリューションに、3 つ目のプロジェクト (メイン アプリと WinRTAdapter プロジェクト以外) を追加します。

  2. WinRTAdapter プロジェクトに、WinRT クラスを含む新しい 3 番目のプロジェクトへの "参照の追加" を作成します。

  3. プロパティで WinRTAdapter プロジェクトの Include フィルターを更新して、新しいクラスも含めます。

  4. に行 InitializeWebView2Async を追加して、winrt クラスの名前空間を追加します。

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

  5. Web からのメソッド呼び出しを簡単に行う場合は、必要に応じて名前空間同期プロキシをスクリプトのグローバル オブジェクトとして追加します。 以下に例を示します。

    window.MyCustomNamespace = chrome.webview.hostObjects.sync.MyCustomNamespace;

この例については、次の WebView2 サンプルを参照してください。

非同期 WinRT メソッド

上記のガイドの手順に従って、同期プロキシを使用できるはずです。 非同期メソッド呼び出しの場合は、 を使用 chrome.webview.hostObjects.options.forceAsyncMethodMatchesする必要があります。

プロパティは forceAsyncMethodMatches 正規表現の配列であり、正規表現が同期プロキシのメソッド名と一致する場合、メソッドは代わりに非同期的に実行されます。 を に [/Async$/] 設定すると、サフィックス で終わる任意のメソッドと一致します Async。 その後、一致するメソッド呼び出しは非同期プロキシのメソッドと同様に機能し、待機できる約束を返します。

例:

const Windows = chrome.webview.hostObjects.sync.Windows;
chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/];

let result = await Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri('https://contoso.com/'));

詳細については、CoreWebView2.AddHostObjectToScript メソッドの行を参照してくださいforceAsyncMethodMatches。

WinRT イベントのサブスクライブ

WinRT イベントは、スクリプト プロキシを介して公開されます。 および メソッドを使用して、インスタンス WinRT イベントと静的 WinRT イベントのイベント ハンドラーをaddEventListener(string eventName, function handler)removeEventListener(string eventName, function handler)追加および削除できます。

これらのメソッドは、同じ名前の DOM メソッドと同様に機能します。 addEventListener最初のパラメーターとしてサブスクライブする WinRT イベントの文字列名と、イベントが発生するたびに呼び出される関数コールバックを使用してを呼び出します。 同じパラメーターを使用した呼び出し removeEventListener は、そのイベントのサブスクライブを解除します。 以下に例を示します。

const Windows = chrome.webview.hostObjects.sync.Windows;
const coreApplication = Windows.ApplicationModel.Core.CoreApplication;
const coreApplicationView = coreApplication.getCurrentView();
const titleBar = coreApplicationView.titleBar;
titleBar.addEventListener('IsVisibleChanged', () => {
    console.log('titlebar visibility changed to: ' + titleBar.isVisible);
});

イベント引数を提供する WinRT イベントの場合、これらはイベント ハンドラー関数の最初のパラメーターとして提供されます。 たとえば、イベントには Windows.Foundation.Collections.PropertySet.MapChangedIMapChangedEventArgs<string, object> event arg オブジェクトがあり、そのオブジェクトはコールバックのパラメーターとして提供されます。

const Windows = chrome.webview.hostObjects.sync.Windows;
const propertySet = new Windows.Foundation.Collections.PropertySet();
propertySet.addEventListener('MapChanged', eventArgs => {
    const key = eventArgs.key;
    const collectionChange = eventArgs.collectionChange;
    // ...
});

イベント args オブジェクトには、さらに次のプロパティがあります。

プロパティ名 説明
target イベントを発生させたオブジェクト
type イベントの文字列名
detail WinRT デリゲートに提供されるすべてのパラメーターの配列

AddHostObjectToScript JavaScript プロキシを他の JavaScript API と同様に動作させる

AddHostObjectToScript は既定では非同期プロキシと詳細プロキシを使用しますが、JavaScript プロキシを他の JavaScript API と同様に動作させることができます AddHostObjectToScript 。 その既定の動作の詳細については AddHostObjectToScript 、「 AddHostObjectToScript」を参照してください。 また、JavaScript UWP アプリの JavaScript WinRT プロジェクションからホスト アプリを移行する場合、または EdgeHTML ベースの WebView からホスト アプリを移行する場合は、以前の動作に合わせて次の方法を使用できます。

JavaScript プロキシを他の AddHostObjectToScript JavaScript API と同様に動作するには、次のプロパティを設定します。

  • chrome.webview.hostObjects.option.defaultSyncProxy - プロキシは非同期または同期のいずれかです。 通常、同期プロキシでメソッドを呼び出すときに、結果も同期プロキシである必要があることはわかっています。 ただし、場合によっては、ネイティブ コードへの関数への参照を提供する場合や、後でその関数を呼び出すネイティブ コードなど、そのコンテキストが失われることがあります。 このような場合、このプロパティが設定されていない限り、プロキシは非同期になります。

  • chrome.webview.hostObjects.options.forceAsyncMethodMatches - これは正規表現の配列です。 同期プロキシでメソッドを呼び出した場合、メソッド名がこの配列内の文字列または正規表現と一致する場合、メソッド呼び出しは実際には非同期的に実行されます。 この値を [/Async$/] に設定すると、で終わる Async 任意のメソッドが非同期メソッド呼び出しになります。 非同期メソッドがここで一致せず、強制的に非同期でない場合、メソッドは同期的に呼び出され、呼び出し元の JavaScript の実行がブロックされ、promise を返すのではなく、promise の解決が返されます。

  • chrome.webview.hostObjects.options.ignoreMemberNotFoundError - プロキシのプロパティの値を取得しようとして、対応するネイティブ クラスにプロパティが存在しない場合は、例外が発生します。このプロパティを に true設定しない限り、動作は Chakra WinRT プロジェクション動作 (および一般的な JavaScript 動作) と一致し、エラーなしで返 undefined されます。

Chakra WinRT プロジェクションは、WinRT 名前空間をルート オブジェクトに直接配置します。 それに対して：

  • AddHostObjectToScript 非同期ルート プロキシを に配置します chrome.webview.hostObjects。
  • AddHostObjectToScript では、同期ルート プロキシが に配置されます chrome.webview.hostObjects.sync。

Chakra WinRT プロジェクション コードが想定されるルート プロキシにアクセスするには、ルート プロキシの WinRT 名前空間の場所をルート オブジェクトに割り当てることができます。 以下に例を示します。

window.Windows = chrome.webview.hostObjects.sync.Windows;

このすべてを設定する JavaScript が他の何よりも前に実行されるようにするには、上記のステートメントを JavaScript に追加するか、メソッドを使用 CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync して、他のスクリプトを実行する前に上記のステートメントを挿入するように WebView2 に指示します。

次の例では、上記の手法を示します。

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;" +
                    "}" +
                "})();");

WebView2 プロパティに関する情報を取得する

WebView2 プロパティに関する情報は、次の 2 つの場所で入手できます。

  • WinRTAdapter プロジェクトのプロパティ ページ。
  • wv2winrt.exe コマンド ライン ヘルプ。 これは wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) です。

WinRTAdapter プロジェクトのプロパティ ページ

WinRTAdapter プロジェクトの [プロパティ ページ] で、プロパティに関するヘルプを表示するには、プロパティ行をクリックします。 ヘルプは、ダイアログの下部に表示されます。

WinRTAdapter プロパティ ページに一覧表示されるプロパティ

wv2winrt.exe プロパティのコマンド ライン ヘルプ

のコマンド ライン ヘルプ wv2winrt.exe は、 wv2winrt ツール (WebView2 WinRT JS プロジェクション ツール) のパラメーターに関する情報を提供します。 以下に例を示します。

パラメーター 説明
verbose 作成されたファイルとインクルードルールと除外ルールに関する情報を含む、標準に一部のコンテンツを一覧表示します。
include 上記のように一覧表示すると、名前空間とランタイム クラスは既定で除外されます (一覧を除く)。 インクルード宣言は、その名前空間内のすべてのものを含む名前空間、またはそのランタイムクラスのみを含むランタイムクラス名のいずれかです。
use-javascript-case 生成されたコードを変更して、Chakra JavaScript WinRT プロジェクションと同じ大文字と小文字のスタイルを使用するメソッド名、プロパティ名などを生成します。 既定では、winrt に一致する名前が生成されます。
output-path 生成されたファイルを書き込むパスを設定します。
output-namespace 生成された WinRT クラスに使用する名前空間を設定します。
winmd-paths コード生成のために調べる必要があるすべての winmd ファイルのスペース区切りのリスト。

関連項目

チュートリアルとサンプル:

API リファレンス:

.NET と同等の記事: