Win32 サンプルアプリ

[アーティクル]
11/07/2024

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 - 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をインストールする必要がある場合もあります。

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

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

手順 3 - 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 ファイル (他のサンプルプロジェクトも含む) が親ディレクトリにあります。

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

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

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

次の手順を続行します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手順 8 - プレリリース 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 の最新バージョンがインストールされました。

手順 9 - 更新された 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のキー関数」を参照してください。

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

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

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

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

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

[シナリオ>Web メッセージング] メニュー項目を選択すると、ScenarioWebMessage コンポーネントが作成されます。このコンポーネントは、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では、InitializeWebView()関数は CreateCoreWebView2EnvironmentWithOptions を使用して WebView2 環境を作成します。

これらの 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 が自身を変更する方法を示しています。これは非同期的に行われます。

[シナリオ>Web メッセージング] メニュー項目を選択すると、ScenarioWebMessage コンポーネントが作成されます。 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 の呼び出しによって、ユーザー入力がScenarioMessage.html Web アプリケーションに投稿されます。

// 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 アプリの境界が表示されます。

メカニズム

[ウィンドウ境界の取得] ボタンをクリックすると、ScenarioWebMessage.htmlのGetWindowBounds関数が呼び出されます。 GetWindowBounds window.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 - Visual Studio をインストールする

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

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

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

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

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

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

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

手順 9 - 更新された 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 - Visual Studio をインストールする

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

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

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

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

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

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

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

手順 9 - 更新された 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 サンプルアプリ

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

プロジェクトファイル

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

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