WinForms アプリでの WebView2 の使用を開始する

この記事では、WinForms で最初の WebView2 アプリの作成を開始し 、WebView2の主な機能について説明します。 個々の API について詳しくは、「API リファレンス」 をご覧ください。

手順 0 - 前提条件

手順を実行する前に、次の前提条件をインストールします。

  1. Visual Studio 2017 以降。

  2. WebView2 ランタイム、またはサポートMicrosoft Edgeオペレーティング システム(OS)にインストールされている Insider (プレビュー) チャネル (Beta、Dev、または Canary) の 1 つ。 現在サポートされている OS リストは、Windows 11、Windows 10、Windows 8.1、Windows 7 です。

    注意

    WebView2 チームでは、Canary チャネルの使用をお勧めします。 必要な最小バージョンは 82.0.488.0 です。

手順 1 - シングル ウィンドウ アプリを作成する

1 つのメイン ウィンドウを含む基本的なデスクトップ プロジェクトから開始します。

  1. Visual Studio を開きます。

  2. [ファイル > 新しいファイルProject] > をクリックします

  3. [新 しいプロジェクトの作成] をクリックします

    [Visual Studio] パネルには、[新しいプロジェクト カードの作成] が表示されます。

  4. [C# Windowsフォーム アプリ (.NET Framework) を選択し、[次へ] をクリックします

    [新しいプロジェクトの作成] パネルで、[フォーム アプリ (C# > Windows) を.NET Frameworkします。

  5. [プロジェクト名][場所] の値を入力します。 [フレームワーク ] ドロップダウンリストで、[.NET Framework 4.7.2 以降] を選択します。

    [新しいプロジェクトを構成する] パネルに入力します。

  6. [作成] をクリックします。

手順 2-WebView2 SDK をインストールする

NuGet を使用して、WebView2 SDK をプロジェクトに追加します。

  1. ソリューションエクスプローラーで、 プロジェクト名を右クリックし、[パッケージの管理] NuGetします

    パッケージNuGet管理します。

  2. [Browse] をクリックします。

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

  4. 検索バーで WebView2 、「Microsoft.Web.Web.WebView2」と入力してクリックします

    NuGet

  5. 既定のバージョンを受け入れ、[インストール] を 選択します

    変更のプレビュー

  6. [OK] をクリックして続行します。

  7. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  8. F5 キーを押してプロジェクトをビルドして実行します。

    実行中のプロジェクトに空のウィンドウが表示されます。

    サンプル アプリでは、空のウィンドウが表示されます。

手順 3-1 つの WebView を作成する

WebView2 コントロールをアプリに追加します。

  1. [フォームProject > 追加 ] ([フォームWindows] をクリックします

  2. [新しいアイテムの追加] パネル、[Visual C# Web フォームWindowsフォーム > **** > **** > ] (Windows) をクリックし、[追加] をクリックします

  3. [ツールボックスの表示 > ] をクリックします

  4. [ツールボックス ]、[WebView2 Windowsフォーム コントロール] をクリックして、オプションを展開します。

    注意

    2017 Visual Studioを使用している場合、既定ではWebView2はツールボックスに表示されませんWebView2 をツールボックスに表示するには、[**** ツール オプション**** 全般] を選択し、[ツールボックス>設定] を > **** > **** に設定します**** True

  5. WebView2 コントロールをフォーム アプリWindowsドラッグします。

    WebView2 が表示されたツールボックス

  6. [プロパティ ] パネル で、(Name) プロパティ webView に設定します。 プロパティを検索するには、必要****に応じて[分類] および [アルファベット順] の並べ替えオプションを使用します。

    WebView2 コントロールのプロパティ

  7. Source プロパティ は、WebView2 コントロールに表示される初期 URI を設定します。 Source プロパティ をに設定 します https://www.microsoft.com

  8. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  9. F5 キーを押してプロジェクトをビルドして実行します。

  10. WebView2 コントロールが表示されます https://www.microsoft.com

    サンプル アプリには、Microsoft Web サイトが表示されます。

    注意

    高解像度モニターで作業している場合は、高 DPI サポート用に Windowsフォーム アプリを構成する必要がある場合があります

手順 4 - コントロールを追加し、ウィンドウのサイズ変更イベントを処理する

ツールボックスからフォームにコントロールWindows追加し、次のようにウィンドウのサイズ変更イベントを処理します。

  1. [ツールボックスの表示 > ] をクリックします

  2. ツールボックスで 、[共通コントロール] をクリックします

  3. TextBoxコントロールをフォーム アプリWindowsドラッグします。

  4. [プロパティ ] パネル で、(Name) を addressBar に変更します

  5. Button コントロールをフォームアプリWindowsドラッグします。

  6. [プロパティ ] パネル で、(Name) goButton に変更します

  7. Text プロパティ を Go変更します。

  8. 必要に応じてボタンのサイズを変更して、テキストを表示します。

  9. 次に示すように、テキスト ボックスをボタンの左側に配置します。

    WinForms デザイナー

  10. 次に示すように、テキスト ボックスのサイズを変更します。

    WinForms デザイナーのテキスト ボックスとボタン

  11. [コードの > 表示] をクリックしてファイルを Form1.cs 開きます。

    Form_Resize のように、アプリ ウィンドウのサイズを変更するときにコントロールを配置する定義を行います。

  12. 次のコードを削除します。

        public Form1()
    {
        InitializeComponent();
    }
    
  13. このコード スニペットをコピーして同じ場所に貼り付けます。

    public Form1()
    {
        InitializeComponent();
        this.Resize += new System.EventHandler(this.Form_Resize);
    }
    
    private void Form_Resize(object sender, EventArgs e)
    {
        webView.Size = this.ClientSize - new System.Drawing.Size(webView.Location);
        goButton.Left = this.ClientSize.Width - goButton.Width;
        addressBar.Width = goButton.Left - addressBar.Left;
    }
    
  14. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  15. F5 キーを押してプロジェクトをビルドして実行します。

    アプリが次の画像のように表示されます。

アプリ

ステップ 5-ナビゲーション

ユーザーが WebView2 コントロールに表示される URL を変更するには、アプリにアドレス バーを追加します。

  1. 前のセクションに示 Form1 すように、アプリが表示されます。

  2. Form1.cs 、上部に CoreWebView2 次のコードを挿入して名前空間を追加します。

    using Microsoft.Web.WebView2.Core;
    
  3. [フォームWindowsで、ボタンをダブルクリックして、 Go! ファイルに goButton_Click メソッドを作成 Form1.cs します。 次のスニペットをコピーして、そのメソッド内に貼り付けます。

    private void goButton_Click(object sender, EventArgs e)
    {
        if (webView != null && webView.CoreWebView2 != null)
        {
            webView.CoreWebView2.Navigate(addressBar.Text);
        }
    }
    

    これで、 goButton_Click 関数は WebView2 コントロールをアドレス バーに入力された URI に移動します。

  4. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  5. F5 キーを押してプロジェクトをビルドして実行します。

  6. アドレス バーに新しい URL を入力し [実行]を選択します。 たとえば、https://www.bing.com と入力します。 WebView2 コントロールが URL に移動します。

注意

アドレス バーに完全な URL を入力します。 URL が http:// または以下で開始する場合は、ArgumentExceptionがスローされます。 https://

bing.com

ステップ 6-ナビゲーション イベント

Web ページのナビゲーション中に、WebView2 コントロールはイベントを発生させます。 WebView2 コントロールをホストするアプリは、次のイベントをリッスンします。

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

詳細については 、「WebView2 のナビゲーション イベント」を参照してください

ナビゲーション イベント

エラーが発生すると、次のイベントが発生し、エラー Web ページへのナビゲーションに依存する可能性があります。

  • SourceChanged
  • ContentLoading
  • HistoryChanged

注意

HTTP リダイレクトが発生した場合、1 行に複数の NavigationStarting イベントがあります。

イベントを使用する方法を示す場合は、まず、HTTPS を使用しない要求をキャンセルするハンドラーを登録 NavigationStarting します。

  1. ファイルで Form1.cs 、次のコード スニペットに一致するコンストラクターを更新し、次のように EnsureHttps 関数を追加します。

    public Form1()
    {
        InitializeComponent();
        this.Resize += new System.EventHandler(this.Form_Resize);
    
        webView.NavigationStarting += EnsureHttps;
    }
    
    void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
    {
        String uri = args.Uri;
        if (!uri.StartsWith("https://"))
        {
            args.Cancel = true;
        }
    }
    

    コンストラクターでは EnsureHttps 、WebView2 コントロール上のイベントの NavigationStarting イベント ハンドラーとして登録されます。

  2. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  3. F5 キーを押してプロジェクトをビルドして実行します。

  4. HTTP サイトに移動するときに、WebView2 コントロールが変更されていない状態を維持してください。 HTTPS サイトに移動し、WebView2 が HTTPS サイトを開きます。

手順 7-スクリプト

ホスト アプリを使用すると、実行時に JavaScript コードを WebView2 コントロールに挿入できます。 WebView2 をタスクして任意の JavaScript を実行したり、初期化スクリプトを追加することができます。 挿入された JavaScript は、JavaScript が削除されるまで、すべての新しいトップ レベル ドキュメントとすべての子フレームに適用されます。 挿入された JavaScript は、特定のタイミングで実行されます。

  • グローバル オブジェクトの作成後に、挿入された JavaScript を実行します。
  • HTML ドキュメントに含まれる他のスクリプトを実行する前に、挿入された JavaScript を実行します。
  1. たとえば、ユーザーが HTTPS 以外のサイトに移動するときにアラートを送信するスクリプトを追加します。 以下に EnsureHttps 示すように 、ExecuteScriptAsync メソッドを使用する Web コンテンツにスクリプトを挿入する関数を変更します。

    void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
    {
        String uri = args.Uri;
        if (!uri.StartsWith("https://"))
        {
            webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
            args.Cancel = true;
        }
    }
    
  2. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  3. F5 キーを押してプロジェクトをビルドして実行します。

  4. HTTPS を使用しない Web サイトに移動すると、アプリに通知が表示されます。

https

手順 8-ホストと Web コンテンツ間の通信

ホストと Web コンテンツは、次のように postMessage 相互に通信するために使用できます。

  • WebView2 コントロールの Web コンテンツは、ホスト window.chrome.webview.postMessage にメッセージを投稿するために使用できます。 ホストは、ホストに登録されている WebMessageReceived のいずれかを使ってメッセージを処理します。
  • ホストはCoreWebView2.PostWebMessageAsString または CoreWebView2.PostWebMessageAsJSON を使用して WebView2 コントロールの Web コンテンツにメッセージを投稿します。 これらのメッセージは、window.chrome.webview.addEventListener に追加されているハンドラーによって検出されます。

通信メカニズムは、ネイティブ機能を使用して、Web コンテンツからホストにメッセージを渡します。

プロジェクトでは、WebView2 コントロールが URL に移動すると、アドレスバーに URL が表示され、WebView2 コントロールに表示される URLについて警告がユーザーに表示されます。

  1. ファイルで Form1.cs 、コンストラクターを更新し、次の InitializeAsync コード スニペットに一致する関数を作成します。

    public Form1()
    {
        InitializeComponent();
        this.Resize += new System.EventHandler(this.Form_Resize);
        webView.NavigationStarting += EnsureHttps;
        InitializeAsync();
    }
    
    async void InitializeAsync()
    {
        await webView.EnsureCoreWebView2Async(null);
    }
    

    CoreWebView2 の初期化は非同期であるため、InitializeAsync の関数はEnsureCoreWebView2Async を待機します。

  2. 初期化 CoreWebView2 後、に応答するイベント ハンドラーを登録します WebMessageReceived 。 ファイルで Form1.cs 、次のコード InitializeAsync スニペット UpdateAddressBar を使用して更新して追加します。

    async void InitializeAsync()
    {
        await webView.EnsureCoreWebView2Async(null);
        webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;
    }
    
    void UpdateAddressBar(object sender, CoreWebView2WebMessageReceivedEventArgs args)
    {
        String uri = args.TryGetWebMessageAsString();
        addressBar.Text = uri;
        webView.CoreWebView2.PostWebMessageAsString(uri);
    }
    
  3. WebView2 が Web メッセージの送信と応答を行う場合、初期化後、ホストは Web コンテンツ内のスクリプトを次のように CoreWebView2 挿入します。

    1. そして、postMessage を使って、ホストに URL を送信し ます。
    2. イベント ハンドラーを登録して、ホストから送信されたメッセージを出力します。
  4. ファイルで Form1.cs 、次の InitializeAsync コード スニペットに一致する更新プログラムを作成します。

    async void InitializeAsync()
    {
        await webView.EnsureCoreWebView2Async(null);
        webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;
    
        await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage(window.document.URL);");
        await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener(\'message\', event => alert(event.data));");
    }
    
  5. [ファイルの > 保存] (Ctrl + Shift + S) をクリックしてプロジェクトを保存します。

  6. F5 キーを押してプロジェクトをビルドして実行します。

  7. 新しい URI を開いた場合、WebView2 コントロールはアドレス バーに表示されます。

    アプリケーションは、アドレス バーに URI を表示します。

    アプリケーションは、アドレス バーに URI を表示します。 URI が表示 https://www.microsoft.com され、Microsoft Web サイトがウィンドウに表示されます。

おめでとうございます。最初の WebView2 アプリを作成しました。

次のステップ