Win32 サンプルアプリ

[アーティクル]
08/16/2023

WebView2APISample アプリは、WebView2 コントロールと WebView2 API を使用して、Win32 C++ アプリに機能を追加する方法を示しています。

サンプル名: WebView2APISample
リポジトリディレクトリ: WebView2APISample
ソリューションファイル: WebView2Samples.sln (親ディレクトリにあります \SampleApps\)
ソリューションエクスプローラーのプロジェクト名: WebView2APISample

WebView2APISample は、Win32 ネイティブアプリケーション内に WebView2 コントロールを埋め込みます。

このサンプルは、Win32 Visual Studio 2019 プロジェクトとして構築されています。 WebView2 環境では、C++ と HTML/CSS/JavaScript が使用されます。

WebView2APISample では、ネイティブの Win32 アプリケーションが WebView2 コントロールと直接やり取りできるようにする、WebView2 のイベントハンドラーと API メソッドの選択を紹介します。

このサンプルとそのソリューションファイルは一意です。ソリューションエクスプローラーには、他のサンプルのコピーが含まれています。

WebView2APISample は、Microsoft Edge WebView2 コントロールを使用して構築されたハイブリッドアプリケーションです。つまり、このアプリはネイティブ側とブラウザー Web アプリ側を組み合わせたものになります。 「Microsoft Edge WebView2 の概要」の「ハイブリッドアプリのアプローチ」を参照してください。

実行中の WebView2APISample アプリウィンドウには、WebView2 SDK のバージョンと、WebView2 ランタイムのバージョンとパスも表示されます。多くの便利なメニューとメニュー項目が用意されています。

WebView2APISample アプリウィンドウに、WebView2 SDK のバージョンと WebView2 ランタイムのバージョンとパスが表示されている

WebView を初めて使用する場合は、最初にチュートリアル「Win32 アプリでの WebView2 の概要」に従うことをお勧めします。このチュートリアルでは、WebView2 アプリを作成する方法について説明し、WebView2 の基本的な機能について説明します。この特定のチュートリアルは、プロジェクトテンプレートを使用して新しい Win32 プロジェクトを作成することから始まるわけではありません。代わりに、WebView2Samples リポジトリの完成したプロジェクトから始まり、追加された WebView2 コードについて説明します。

WebView2 のイベントと API ハンドラーの詳細については、「 WebView2 API リファレンス」を参照してください。

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

次に、サポートされている OS にインストールされている Microsoft Edge のプレビューチャネルを確認します。現在、最新バージョンの Canary チャネルをお勧めします。

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

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

Microsoft Visual Studio が必要です (最小バージョン: Visual Studio 2019)。このサンプルでは、Microsoft Visual Studio Code はサポートされていません。このリポジトリサンプルは、Visual Studio 2019 プロジェクトです。このサンプルは、Visual Studio 2022 を使用して開くこともできます。

Visual Studio がまだ C++ サポートと共にインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 用の開発環境をセットアップする」の「Visual Studio のインストール」を参照してください。そのセクションの手順に従って、C++ サポートを使用して Visual Studio をインストールし、このページに戻り、以下の手順を続行します。

Visual Studio 2017 を使用する場合は、Visual Studio 2017 でソリューションを開いた後、プロジェクトの [プロパティ ] [構成] > プロパティ > [全般 > プラットフォームツールセット] でプロジェクトのプラットフォームツールセットを変更します。

Visual Studio 2017 を使用するには、コンピューターに最新の Windows SDK をインストールする必要がある場合もあります。

手順 3 - WebView2Samples リポジトリを複製する

まだ完了していない場合は、リポジトリを WebView2Sample ローカルドライブに複製します。別のウィンドウまたはタブで、「 WebView2 の開発環境をセットアップする」の「WebView2Samples リポジトリをダウンロードする」を参照 してください。そのセクションの手順に従って、このページに戻り、以下に進みます。
以前にリポジトリを複製した場合は、最新のコミットをリポジトリのローカルコピーにプルします。

手順 4 - Visual Studio でソリューションを開く

ローカルドライブで、Visual Studio でファイルを .sln 開きます。
- <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln
または:
- <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln

WebView2APISample サンプルとプロジェクトは、win32 サンプルメインです。

他のいくつかのサンプルとは異なり、サンプルリポジトリディレクトリには、このサンプルの Readme を含む専用 .sln ファイルはありません。代わりに、このサンプルの .sln ファイル (他のサンプルプロジェクトも含む) が親ディレクトリにあります。

ソリューションエクスプローラーのソリューション内のすべてのプロジェクト

手順 5 - プロンプトが表示されたらワークロードをインストールする

Visual Studio ワークロード - メッセージが表示されたら、要求されたすべての Visual Studio ワークロードをインストールします。別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio ワークロードをインストールする」を参照してください。そのセクションの手順に従って、このページに戻り、以下に進みます。

次の手順を続行します。

手順 6 - 開いているプロジェクトを表示する

ローカルドライブで、セットアップしたのと同じバージョンの Visual Studio で WebView2Samples ソリューションをもう一度開きます。
- <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln
または:
- <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln
[OK] ボタンをクリック します 。 [ プロジェクトの再ターゲット] ダイアログが開く場合があります。

インストールされているバージョンの例:
[OK] ボタンをクリック します 。

ソリューションエクスプローラーは、WebView2APISample プロジェクトを含むいくつかのプロジェクトを示しています。

ソリューションエクスプローラーの WebView2APISample プロジェクト

手順 7 - インストールされている SDK バージョンを使用してプロジェクトをビルドする

Visual Studio の上部で、次のようにビルドターゲットを設定します。

[ ソリューション構成] ドロップダウンリストで、[ デバッグ ] または [リリース] を選択 します。
[ ソリューションプラットフォーム ] ドロップダウンリストで、 x86、 x64、または ARM64 を選択します。
ソリューションエクスプローラーで、WebView2APISample プロジェクトを右クリックし、[ビルド] を選択します。

これにより、プロジェクトファイル SampleApps/WebView2APISample/WebView2APISample.vcxprojがビルドされます。

手順 8 - プロジェクトを実行 (デバッグ) する

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

トラブルシューティング: ビルド手順をスキップし、デバッグ開始デバッグ (F5) をすぐに選択>すると、"プログラムを起動できません: 指定したパスが見つかりません" というダイアログが表示される場合があります。

この問題を解決するには、ソリューションエクスプローラーで WebView2APISample プロジェクトを右クリックし、[ビルド] を選択します。

WebView2APISample アプリウィンドウが開きます。
Visual Studio で、[デバッグ] [ デバッグ>の停止] の順に選択します。 Visual Studio はアプリを閉じます。

手順 9 - プレリリース WebView2 SDK を更新する

次に、WebView2 SDK を更新し、プロジェクトをビルドし直します。

GitHub の WebView2APISample アプリのリポジトリのコピーにインストールされている WebView2 SDK のバージョンをすばやく確認する場合は、「 packages.config」を参照してください。

このサンプルのリポジトリバージョンには、プレリリースバージョンの WebView2 SDK がインストールされています。以下では、WebView2 SDK の最新のプレリリースバージョンに更新するか、最新の SDK がインストールされていることを確認します。プレリリース SDK を使用すると、最新の機能にアクセスできます。

次のように、インストールされている NuGet パッケージを調べて更新する必要があります。

ソリューションエクスプローラーで、(その上のソリューションノードではなく) WebView2APISample プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。

Visual Studio で [NuGet パッケージマネージャー ] パネルが開きます。
検索テキストボックスの右側にある [プレリリース前のチェックを含める] ボックスを選択します。
NuGet パッケージマネージャーで、[インストール済み] タブをクリックします。各パッケージの右側で、新しいバージョン番号と既存のバージョン番号が一覧表示されているかどうかをチェックします。
[ 更新 ] タブをクリックします。WebView2 または WIL パッケージで更新プログラムが利用可能な場合は、必要に応じて、ここでパッケージを更新できます。
右側の [ バージョン ] ドロップダウンリストで、最新の API を試すことができる場合は、[ 最新のプレリリース ] が選択されていることを確認します。
[ 更新 ] ボタンをクリックします。

[ 変更のプレビュー ] ダイアログが表示されます。

上の画像は別のプロジェクトからの画像ですが、似ています。
[OK] ボタンをクリック します 。

このプロジェクト用に WebView2 SDK の最新バージョンがインストールされました。

手順 10 - 更新された SDK を使用してプロジェクトをビルドして実行する

ソリューションエクスプローラーで、WebView2APISample プロジェクトを右クリックし、[ビルド] を選択します。
[ デバッグ>] [デバッグの開始] (F5) を選択します。

WebView2APISample アプリウィンドウが開きます。
WebView2APISample アプリを使用します。
Visual Studio で、[デバッグ] [ デバッグ>の停止] の順に選択します。 Visual Studio はアプリを閉じます。

これで、Win32 サンプルアプリをビルドして実行するための番号付き手順が完了します。次に、Visual Studio コードエディターで、次のセクションに従ってコードを検査します。

ハイブリッドアプリアーキテクチャ

WebView2APISample アプリは、Win32 ネイティブパーツと WebView パーツを備えたハイブリッドアプリケーションの例です。

Win32 パーツは、ネイティブ Windows API に直接アクセスできます。
WebView は、標準の Web テクノロジ (HTML、CSS、JavaScript) のコンテナーです。

ハイブリッドアプリ

セクション 1: WebView2APISample アプリの最上位部分は、C++ で記述された Win32 コンポーネントです。アプリケーションのこの部分では、ユーザーからの UI 入力を受け取り、それらを使用して WebView を制御します。
セクション 2: WebView2APISample アプリのメイン部分は、標準の Web テクノロジ (HTML/CSS/JavaScript) を使用して再利用できる WebView です。 Web サイトまたはローカルコンテンツに移動できます。

このハイブリッドアプローチを使用すると、ネイティブ機能を利用しながら、Web テクノロジを使用して迅速に作成および反復できます。 WebView2APISample アプリは、Win32 コンポーネントと WebView コンポーネントが相互に対話する方法を示しています。

この広範なサンプルアプリは、150 以上のメニュー項目を含むように成長し、Win32/C++ フレームワークで多数の WebView2 API を示しています。以降のセクションでは、ハイブリッドアプリの実装の基本について説明します。

プロジェクトファイル

このセクションでは、リポジトリ内のいくつかのキーファイルについて簡単に説明します。 WebView2APISample アプリは、水平ではなくコンポーネントに垂直方向に分割されます。各コンポーネントは、メニューコマンドのリッスンから WebView API メソッドを呼び出して実装するまで、機能例のカテゴリのワークフロー全体を実装します。

App.cpp

これは、 WebView2APISample アプリを実行する最上位のファイルです。コマンドラインオプションを読み取り、プロセス環境を設定し、アプリのスレッドモデルを処理します。

このファイルは、次の手順を実行して、アプリケーションウィンドウを実装します。

すべての Win32 コントロールを設定します。
WebView 環境と WebView を初期化します。
WebView にイベントハンドラーを追加し、アプリケーションのさまざまな機能を処理するすべてのコンポーネントを作成します。

クラスは AppWindow 、サンプルアプリの [ウィンドウ] メニューからコマンドを処理します。

このファイルの詳細については、以下の「AppWindow.cpp のキー関数」を参照してください。

このコンポーネントは、[ ファイル ] メニューのコマンド ( [終了] を除く) とイベントを DocumentTitleChanged 処理します。

このコンポーネントは、[ スクリプト ] メニューのコマンドを処理します。これには、JavaScript の挿入、WebMessage の投稿、Web ページへのネイティブオブジェクトの追加、Web ページとの通信に DevTools プロトコルの使用など、WebView との対話が含まれます。

このコンポーネントは、[ プロセス ] メニューからコマンドを処理します。これには、ブラウザーのプロセスとの対話が含まれます。また、ブラウザープロセスまたはそのレンダリングプロセスの 1 つがクラッシュした場合、または応答しない場合にも、イベントが処理 ProcessFailed されます。

このコンポーネントは 、[設定] メニューからコマンドを処理します。このコンポーネントは、新しい WebView の作成時に古い WebView から設定をコピーする処理も担当します。インターフェイスと ICoreWebView2Settings 対話するほとんどのコードについては、こちらを参照してください。

このコンポーネントは、[ 表示 ] メニューのコマンドと、WebView のサイズ設定と表示に関連するすべての機能を処理します。アプリウィンドウのサイズが変更、最小化、または復元されると、 ViewComponent 応答として WebView のサイズ変更、非表示、または表示が行われます。イベントにも応答します ZoomFactorChanged 。

[ScenarioWebMessageシナリオ>Web メッセージング] メニュー項目を選択すると、コンポーネントが作成されます。このコンポーネントは、C++ パーツと HTML + JavaScript パーツを含むアプリケーションの例を実装します。これは、メッセージを非同期的に投稿して受信することで相互に通信します。

このコンポーネントについては、以下の ScenarioWebMessage (.html、.cpp、.h) で詳しく説明します。

このコンポーネントは、[ シナリオ>ホストオブジェクト ] メニュー項目を選択すると作成されます。ホストオブジェクトの挿入を使用して、ネイティブアプリと HTML Web ページ間の通信を示します。ホストオブジェクトのインターフェイスはで HostObjectSample.idl宣言され、オブジェクト自体はで HostObjectSampleImpl.cpp実装されます。

AppWindow.cpp の主要な関数

AppWindow.cpp は、次の手順を実行してアプリケーションウィンドウを実装します。

すべての Win32 コントロールを設定します。
WebView 環境と WebView を初期化します。
WebView にイベントハンドラーを追加し、アプリケーションのさまざまな機能を処理するすべてのコンポーネントを作成します。

クラスは AppWindow 、サンプルアプリの [ウィンドウ] メニューからコマンドを処理します。の主要な関数の一部を次に AppWindow.cpp示します。

InitializeWebView()

ではAppWindow.cpp、関数は CreateCoreWebView2EnvironmentWithOptions を使用して WebView2 環境を作成します。InitializeWebView()

これらの API 呼び出しの動作を確認するには、から InitializeWebView()次のコードを調べます。

HRESULT hr = CreateCoreWebView2EnvironmentWithOptions(
    subFolder, nullptr, options.Get(),
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        this, &AppWindow::OnCreateEnvironmentCompleted)
        .Get());
if (!SUCCEEDED(hr))
{
    if (hr == HRESULT_FROM_WIN32(ERROR_FILE_NOT_FOUND))
    {
        MessageBox(
            m_mainWindow,
            L"Couldn't find Edge installation. "
            "Do you have a version installed that's compatible with this "
            "WebView2 SDK version?",
            nullptr, MB_OK);
    }
    else
    {
        ShowFailure(hr, L"Failed to create webview environment");
    }
}

OnCreateEnvironmentCompleted()

環境を作成したら、を使用 CreateCoreWebView2Controllerして WebView を作成します。

OnCreateEnvironmentCompletedコールバック関数はで InitializeWebView()にCreateCoreWebView2EnvironmentWithOptions渡されます。コールバックは環境ポインターを格納し、それを使用して新しい WebView を作成します。

HRESULT AppWindow::OnCreateEnvironmentCompleted(
    HRESULT result, ICoreWebView2Environment* environment)
{
    CHECK_FAILURE(result);

    m_webViewEnvironment = environment;

    CHECK_FAILURE(m_webViewEnvironment->CreateCoreWebView2Controller(
        m_mainWindow, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                            this, &AppWindow::OnCreateCoreWebView2ControllerCompleted)
                            .Get()));
    return S_OK;
}

OnCreateCoreWebView2ControllerCompleted()

OnCreateCoreWebView2ControllerCompletedコールバック関数はで InitializeWebView()にCreateCoreWebView2Controller渡されます。このコールバック:

WebView 関連の状態を初期化します。
いくつかのイベントハンドラーを登録します。
アプリコンポーネントを作成します。

RegisterEventHandlers()

関数は RegisterEventHandlers 内で CreateCoreWebView2Controller呼び出されます。アプリケーションで使用されるイベントハンドラーの一部を設定し、WebView に追加します。

WebView2 のイベントハンドラーの詳細については、「 ICoreWebView2」を参照してください。

のコードスニペット RegisterEventHandlers()を次に示します。ここでは、イベントのイベントハンドラーを NewWindowRequested 設定します。このイベントは、Web ページの JavaScript がを呼び出 window.open()したときに発生します。 ICoreWebView2NewWindowRequestedEventHandlerは新AppWindowしいウィンドウを作成し、新しいウィンドウの WebView をブラウザーに渡して、呼び出しからwindow.open()返すことができます。との CreateCoreWebView2EnvironmentWithOptions 呼び出し CreateCoreWebView2Controllerとは異なり、コールバックのメソッドを提供する代わりに、C++ ラムダをすぐに提供します。

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html、.cpp、.h)

ファイルは ScenarioWebMessage 、Win32 ホストが WebView を変更する方法、WebView で Win32 ホストを変更する方法、および Win32 ホストからの情報にアクセスして WebView が自身を変更する方法を示しています。これは非同期的に行われます。

[ScenarioWebMessageシナリオ>Web メッセージング] メニュー項目を選択すると、コンポーネントが作成されます。コンポーネントは ScenarioWebMessage 、C++ パーツと HTML+JavaScript パーツを含むサンプルアプリケーションを実装します。これは、メッセージを非同期的に投稿して受信することで相互に通信します。

Web メッセージング: メッセージの投稿と受信

以降のセクションでは、 WebView2APISample アプリを使用して各個別関数がどのように機能するかを示し、この機能を実装する方法について説明します。

まず、サンプルアプリ内の ScenarioWebMessage Web アプリに移動します。

WebView2APISample アプリを開きます (実行)。
[ シナリオ ] メニューの [ Web メッセージング] を選択します。

WebView には、 WebMessage サンプルページ (ScenarioWebMessage.html) というタイトルの Web ページが表示されます。

機能を ScenarioWebMessage 調べるには、ページの指示に従うか、以下の手順に従います。

Win32 ホストから WebView へのメッセージの投稿

次の手順は、Win32 ホストが WebView を変更する方法を示しています。この例では、テキストを青に変えます。

上記のように WebMessage サンプルページ (ScenarioWebMessage.html) を開きます。
[ スクリプト ] メニューの [ Post Web Message JSON]\(Web メッセージ JSON の投稿\) を選択します。

事前に記述されたコード {"SetColor":"blue"} を含むダイアログが表示されます。
[OK] をクリックします。

ページの [ メッセージの投稿 ] セクションのテキストが黒から青に変わります。

メカニズム

で ScriptComponent.cpp、 PostWebMessageAsJson への呼び出しによって、ユーザー入力が Web アプリケーションに ScenarioMessage.html 投稿されます。

// Prompt the user for some JSON and then post it as a web message.
void ScriptComponent::SendJsonWebMessage()
{
   TextInputDialog dialog(
      m_appWindow->GetMainWindow(),
      L"Post Web Message JSON",
      L"Web message JSON:",
      L"Enter the web message as JSON.",
      L"{\"SetColor\":\"blue\"}");
   if (dialog.confirmed)
   {
      m_webView->PostWebMessageAsJson(dialog.input.c_str());
   }
}

Web アプリケーション内では、Web メッセージの受信と応答にイベントリスナーが使用されます。次のコードスニペットはです ScenarioWebMessage.html。引数が "SetColor" の場合、イベントリスナーはテキストの色を変更します。
```
window.chrome.webview.addEventListener('message', arg => {
   if ("SetColor" in arg.data) {
      document.getElementById("colorable").style.color = arg.data.SetColor;
   }
});
```

メッセージの受信 (WebView から Win32 ホストへ)

次の手順は、Win32 アプリのタイトルを変更することで、WebView が Win32 ホストアプリを変更する方法を示しています。

上記のように WebMessage サンプルページ (ScenarioWebMessage.html) を開きます。
アイコンの横にあるウィンドウの左上に表示される WebView2APISample アプリのタイトルに注意してください。最初は WebView2APISample - Microsoft Edge WebView2 です。
ページの [ 受信メッセージ ] セクションで、新しいタイトルを入力し、[ 送信 ] ボタンをクリックします。
WebView2APISample アプリのタイトルバーに表示される新しいタイトルに注意してください。

メカニズム

ではScenarioWebMessage.html、window.chrome.webview.postMessage() はユーザー入力をホストアプリケーションに送信します。

function SetTitleText() {
   let titleText = document.getElementById("title-text");
   window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
}

内では ScenarioWebMessage.cpp、 add_WebMessageReceived を使用してイベントハンドラーを登録します。イベントを受信すると、入力を検証した後、アプリウィンドウのタイトル (m_appWindow) が変更されます。

// Setup the web message received event handler before navigating to
// ensure we don't miss any messages.
CHECK_FAILURE(m_webview->add_WebMessageReceived(
   Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
      [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
{
   wil::unique_cotaskmem_string uri;
   CHECK_FAILURE(args->get_Source(&uri));

   // Always validate that the origin of the message is what you expect.
   if (uri.get() != m_sampleUri)
   {
      return S_OK;
   }
   wil::unique_cotaskmem_string messageRaw;
   CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));
   std::wstring message = messageRaw.get();

   if (message.compare(0, 13, L"SetTitleText ") == 0)
   {
      m_appWindow->SetTitleText(message.substr(13).c_str());
   }
   return S_OK;
}).Get(), &m_webMessageReceivedToken));

ラウンドトリップメッセージ (WebView からホストへ WebView に戻る)

次の手順は、WebView が Win32 ホストから情報を取得し、Win32 アプリのサイズを表示することによって自身を変更する方法を示しています。

上記のように WebMessage サンプルページ (ScenarioWebMessage.html) を開きます。
ページの [ ラウンドトリップ ] セクションで、[ GetWindowBounds ] ボタンをクリックします。

ボタンの下のテキストボックスには、 WebView2APISample アプリの境界が表示されます。

メカニズム

[ ウィンドウ境界の取得 ] ボタンをクリックすると、の GetWindowBoundsScenarioWebMessage.html 関数が呼び出されます。 GetWindowBoundswindow.chrome.webview.postMessage() を呼び出して、ホストアプリケーションにメッセージを送信します。
```
function GetWindowBounds() {
    window.chrome.webview.postMessage("GetWindowBounds");
}
```

では ScenarioWebMessage.cpp、 add_WebMessageReceived を使用して、受信したイベントハンドラーを登録します。入力を検証した後、イベントハンドラーはアプリウィンドウからウィンドウ境界を取得します。 PostWebMessageAsJson は、Web アプリケーションに境界を送信します。

if (message.compare(L"GetWindowBounds") == 0)
{
   RECT bounds = m_appWindow->GetWindowBounds();
   std::wstring reply =
      L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
      + L"\\nTop:" + std::to_wstring(bounds.top)
      + L"\\nRight:" + std::to_wstring(bounds.right)
      + L"\\nBottom:" + std::to_wstring(bounds.bottom)
      + L"\"}";
   CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
}

では ScenarioWebMessage.html、イベントリスナーがメッセージに WindowBounds 応答し、ウィンドウの境界を表示します。

window.chrome.webview.addEventListener('message', arg => {
   if ("WindowBounds" in arg.data) {
      document.getElementById("window-bounds").value = arg.data.WindowBounds;
   }
});

Win32 サンプルアプリ

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

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

手順 3 - WebView2Samples リポジトリを複製する

手順 4 - Visual Studio でソリューションを開く

手順 5 - プロンプトが表示されたらワークロードをインストールする

手順 6 - 開いているプロジェクトを表示する

手順 7 - インストールされている SDK バージョンを使用してプロジェクトをビルドする

手順 8 - プロジェクトを実行 (デバッグ) する

手順 9 - プレリリース WebView2 SDK を更新する

手順 10 - 更新された SDK を使用してプロジェクトをビルドして実行する

ハイブリッドアプリアーキテクチャ

プロジェクトファイル

App.cpp

AppWindow.cpp (ウィンドウメニュー)

FileComponent.cpp ([ファイル] メニュー)

ScriptComponent.cpp ([スクリプト] メニュー)

ProcessComponent.cpp ([プロセス] メニュー)

SettingsComponent.cpp ([設定] メニュー)

ViewComponent.cpp ([表示] メニュー)

ScenarioWebMessage.cpp と ScenarioWebMessage.html ([シナリオ] メニュー)

ScenarioAddHostObject.cpp と ScenarioAddHostObject.html ([シナリオ] メニュー)

AppWindow.cpp の主要な関数

InitializeWebView()

OnCreateEnvironmentCompleted()

OnCreateCoreWebView2ControllerCompleted()

RegisterEventHandlers()

ScenarioWebMessage (.html、.cpp、.h)

Win32 ホストから WebView へのメッセージの投稿

メカニズム

メッセージの受信 (WebView から Win32 ホストへ)

メカニズム

ラウンドトリップメッセージ (WebView からホストへ WebView に戻る)

メカニズム

関連項目

その他のリソース

Win32 サンプル アプリ

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

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

手順 3 - WebView2Samples リポジトリを複製する

手順 4 - Visual Studio でソリューションを開く

手順 5 - プロンプトが表示されたらワークロードをインストールする

手順 6 - 開いているプロジェクトを表示する

手順 7 - インストールされている SDK バージョンを使用してプロジェクトをビルドする

手順 8 - プロジェクトを実行 (デバッグ) する

手順 9 - プレリリース WebView2 SDK を更新する

手順 10 - 更新された SDK を使用してプロジェクトをビルドして実行する

ハイブリッド アプリ アーキテクチャ

プロジェクト ファイル

App.cpp

AppWindow.cpp (ウィンドウ メニュー)

FileComponent.cpp ([ファイル] メニュー)

ScriptComponent.cpp ([スクリプト] メニュー)

ProcessComponent.cpp ([プロセス] メニュー)

SettingsComponent.cpp ([設定] メニュー)

ViewComponent.cpp ([表示] メニュー)

ScenarioWebMessage.cpp と ScenarioWebMessage.html ([シナリオ] メニュー)

ScenarioAddHostObject.cpp と ScenarioAddHostObject.html ([シナリオ] メニュー)

AppWindow.cpp の主要な関数

InitializeWebView()

OnCreateEnvironmentCompleted()

OnCreateCoreWebView2ControllerCompleted()

RegisterEventHandlers()

ScenarioWebMessage (.html、.cpp、.h)

Win32 ホストから WebView へのメッセージの投稿

メカニズム

メッセージの受信 (WebView から Win32 ホストへ)

メカニズム

ラウンド トリップ メッセージ (WebView からホストへ WebView に戻る)

メカニズム

関連項目

その他のリソース

Win32 サンプルアプリ

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

ハイブリッドアプリアーキテクチャ

プロジェクトファイル

AppWindow.cpp (ウィンドウメニュー)

ラウンドトリップメッセージ (WebView からホストへ WebView に戻る)