WPF アプリでの WebView2 の概要

この記事では、開発ツールを設定し、Windows Presentation Foundation (WPF) 用の初期 WebView2 アプリを作成する方法と、その過程で WebView2 の概念について学習する方法について説明します。

このチュートリアルでは、WPF アプリケーションまたは WPF アプリ (.NET Framework) プロジェクト テンプレートを使用して WPF アプリを作成し、プロジェクトの WebView2 SDK をインストールして WebView2 を追加します。

完了したプロジェクト

このチュートリアル プロジェクトの完成したバージョン は、 WebView2Samples リポジトリで入手できます。

  • サンプル名: WPF_GettingStarted
  • リポジトリ ディレクトリ: WPF_GettingStarted
  • ソリューション ファイル: WPFSample.sln

手順 1 - .NET サポートを使用して Visual Studio をインストールする

このチュートリアルでは、Microsoft Visual Studio Code ではなく Microsoft Visual Studio が必要です。 この記事では、主に Visual Studio 2022 の使用について説明します。

  1. Visual Studio をインストールします 必要なプロジェクト テンプレートを取得するには、 次のように .NET デスクトップ開発 サポートをインストールします。

  2. Visual Studio のスタートアップ画面にいる場合は、[ 新しいプロジェクトの作成 ] ダイアログの下部までスクロールし、[ コードなしで開く] リンクをクリックします。 Visual Studio が開きます。

  3. Visual Studio で、[ツール] [ツール][ツール>と機能の取得] の順に選択します。 [Visual Studio インストーラー] ウィンドウが開き、[変更] ダイアログが開きます。

  4. .NET デスクトップ開発ワークロードを選択して、チェックマークが表示されるようにします。

  5. 右側の [インストールの詳細>.NET デスクトップ開発>] セクションで、.NET デスクトップ開発ツール.NET Framework 4.7.2 開発ツールが表示されていることを確認し、その横にチェックマークを付けます。

  6. 右側の [ インストールの詳細>.NET デスクトップ開発>オプション ] セクションで、次の手順を実行します。

    • Visual Studio 2022 を使用している場合は、 .NET 用の開発ツール が選択されていることを確認します。

    Visual Studio 2022 '変更' ダイアログを使用して '.NET デスクトップ開発' 用のテンプレートをインストールする

    • Visual Studio 2019 を使用している場合は、 .NET 開発ツール が選択されていることを確認します。

    Visual Studio 2019 '.NET デスクトップ開発' 用のテンプレートをインストールするための [変更] ダイアログ

  7. [ 変更 ] ボタンをクリックします。

このチュートリアルは、Visual Studio 2017 でも機能します。 Visual Studio の古いダウンロードに関するページを参照してください。 上記の手順と同様に、必要なプロジェクト テンプレートを取得するには、.NET サポートをインストールします。

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

  1. サポートされているオペレーティング システム (OS) で Microsoft Edge Insider (プレビュー) チャネル (ベータ、開発、またはカナリア) をダウンロードします。

    • Windows 10
    • Windows 11

    Microsoft Edge のカナリア チャネルを使用することをお勧めします。 最低限必要なバージョンは 82.0.488.0 です。

手順 3 - 単一ウィンドウ WebView2 アプリを作成する

まず、1 つのメイン ウィンドウを含む基本的なデスクトップ プロジェクトを作成します。

  1. .NET Core/5/6 プロジェクト (新しい) または WPF アプリ (.NET Framework) プロジェクト (古い) のどちらを作成するかを決定します。 詳細については、以下を参照してください:

  2. 以下の該当するセクションに従ってください。

.NET Core/5/6 プロジェクトの作成

.NET Core/5/6 プロジェクトを作成する場合は、次の手順を実行します。 それ以外の場合は、「WPF アプリ (.NET Framework) プロジェクトの作成」に進みます。

  1. Visual Studio 2022 などの Microsoft Visual Studio を開きます。

  2. 開くパネルで、[ 新しいプロジェクトの作成] をクリックします。 または、Visual Studio のメイン ウィンドウで、[ファイル>] [新しい>プロジェクト] を選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。

  3. [ テンプレートの検索 ] テキスト ボックスに「」と入力します WPF Application。 [ 新しいプロジェクトの作成 ] パネルには、入力したテキストに一致するインストール済みのプロジェクト テンプレートが表示されます。 この記事では、VB ダイアログではなく C# を示します。どちらの言語も WebView2 でサポートされています。

  4. Visual Studio 2022 を使用している場合は、 タイトル WPF アプリケーション と説明テキスト .NET WPF アプリケーションを作成するためのプロジェクトを含むプロジェクト テンプレートをクリックします。

    2022 '新しいプロジェクトの作成' ダイアログでテンプレート 'WPF アプリケーション: .NET Core WPF アプリケーション' を選択する

    Visual Studio 2019 を使用している場合は、タイトル WPF アプリケーション と説明テキスト .NET Core WPF アプリケーションを作成するためのプロジェクトがあるプロジェクト テンプレートをクリックします。

    2019 年の [新しいプロジェクトの作成] ダイアログでテンプレート 'WPF アプリケーション: .NET Core WPF アプリケーション' を選択する

    上記のプロジェクト テンプレートが一覧にない場合は、「 手順 1 - 上記の .NET サポートを使用して Visual Studio をインストール する」を参照して、 .NET デスクトップ開発ツールをインストールします。

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

    [ 新しいプロジェクトの構成: WPF アプリケーション ] ダイアログが開きます。

    .NET Core/5/6 プロジェクトの [新しいプロジェクトの構成: WPF アプリケーション] ダイアログ

  6. [ プロジェクト名 ] テキスト ボックスに、 MyWpfDotnetCoreWv2App などのプロジェクト名を入力します。

  7. [ 場所 ] テキスト ボックスで、ローカル ドライブのパス (など C:\Users\myusername\Documents\MyProjects) を選択し、[ 次へ ] ボタンをクリックします。

    [ 追加情報 ] ダイアログが表示され、[ ターゲット フレームワーク ] ドロップダウン リストが表示されます。

    [ターゲット フレームワーク] ドロップダウン リストを含む [追加情報] ダイアログ

  8. .NET 6.0 など、.NET Core 3.1 以降を選択します。 ( .NET Core 3.0 を選択しないでください)。次に、[ 作成 ] ボタンをクリックします。

    Visual Studio で最初の .NET Core WPF アプリケーション プロジェクトが開きます。

    .NET Core WPF アプリケーション テンプレートを使用した Visual Studio 2022 の初期プロジェクト

「手順 4 - WebView2 を使用せずに最初のプロジェクトをビルドして実行する」に進みます。

WPF アプリ (.NET Framework) プロジェクトの作成

WPF アプリ (.NET Framework) プロジェクトを作成する場合は、次の手順を実行します。 それ以外の場合は、「 手順 4 - WebView2 を使用せずに最初のプロジェクトをビルドして実行する」に進みます。

  1. Open Microsoft Visual Studio, such as Visual Studio 2022.

  2. In the opening panel, click Create new project. Or, in the main Visual Studio window, select File>New>Project. The Create a new project dialog opens.

  3. In the Search for templates text box, type WPF App. The Create a new project panel shows the installed project templates that match your entered text. This article shows the C# rather than VB dialogs; both languages are supported for WebView2.

  4. タイトル WPF App (.NET Framework) と説明テキストを含むプロジェクト テンプレートWindows Presentation Foundationクライアント アプリケーションをクリックします。

    2022 '新しいプロジェクトの作成' ダイアログでテンプレート 'WPF アプリ' を選択する

    If the above project template isn't listed, see Step 1 - Install Visual Studio with .NET support above, to install .NET desktop development tools.

  5. Click the Next button.

    [新しいプロジェクトの構成: WPF アプリ (.NET Framework)] ダイアログが開きます。

    [新しいプロジェクトの構成: WPF アプリ (.NET Framework)]ダイアログ

  6. [ プロジェクト名 ] テキスト ボックスに、 MyWpfDotnetFwkWv2App などのプロジェクト名を入力します。

  7. [ 場所 ] テキスト ボックスで、ローカル ドライブのパス (など C:\Users\myusername\Documents\MyProjects) を選択します。

  8. [フレームワーク] ドロップダウン リストで、[.NET Framework 4.6.2 以降] を選択します。

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

    Visual Studio で最初の WPF アプリ (.NET Framework) プロジェクトが開きます。

    WPF アプリ (.NET Framework) テンプレートを使用した Visual Studio 2022 の初期プロジェクト

手順 4 - WebView2 を使用せずに最初のプロジェクトをビルドして実行する

  1. [ ファイルすべて>保存] を 選択してプロジェクトを保存します。

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

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

    WebView2 のない空のアプリ ウィンドウ

    選択した.NET Frameworkバージョンを次のようにインストールする必要がある場合があります。

  3. アプリが開かない場合は、[デバッグなしで デバッグ>の開始] を選択します。

    選択したバージョンの.NET Frameworkをインストールしていない場合は、次のダイアログが表示される場合があります。"このアプリケーションを起動できませんでした。 アプリケーションには、次のいずれかのバージョンの .NET Framework が必要です。NETFramework,Version=v4.8.1 - この.NET Frameworkバージョンを今すぐインストールしますか?

  4. このようなダイアログが表示された場合は、[.NET Frameworkのダウンロード] に移動し、必要なバージョンの Developer Pack (ランタイムではなく) をダウンロードしてインストールします。 たとえば、 にC:\Users\username\Downloadsダウンロードndp481-devpack-enu.exeし、ファイルをダブルクリックしてインストールします。

  5. メッセージが表示されたら、コンピューターを再起動します。

    再起動して.NET Frameworkをインストールする

  6. などのndp481-devpack-enu.exeC:\Users\username\Downloadsダウンロードしたファイルに移動し、ダウンロードしたファイルをもう一度ダブルクリックして、.NET Framework Developer Pack をインストールします。 [成功] ダイアログが表示されます。

    セットアップ .NET Frameworkのインストールに成功しました

  7. メッセージが表示されたら、コンピューターをもう一度再起動します。

  8. Visual Studio を開き、作成したソリューションを開きます。

  9. を押 F5 して、WebView2 SDK を含まない初期アプリ (上図) を実行します。

  10. 最初のアプリを閉じます。

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

Visual Studio で NuGet パッケージ マネージャーを使用して、次のように WebView2 SDK をプロジェクトに追加します。

  1. ソリューション エクスプローラーで、(.NET (Core) またはプロジェクト テンプレート.NET Framework基づいて) プロジェクト名を右クリックし、[NuGet パッケージの管理] を選択します。

    右クリック メニューの [NuGet パッケージの管理] コマンド

  2. 左上の [ 参照 ] タブをクリックします。検索バーに「」と入力 Microsoft.Web.WebView2し、 Microsoft.Web.WebView2 パッケージをクリックします。

    [NuGet パッケージ マネージャー] ダイアログには、 Microsoft.Web.WebView2 パッケージを含む検索結果が表示されます。 ダイアログにはバージョン番号と [インストール ] ボタンがあります。

    [NuGet パッケージ マネージャー] ダイアログに Microsoft.Web.WebView2 パッケージが表示されます

  3. 既定のバージョンをそのまま使用し、[ インストール ] ボタンをクリックします。

  4. [ 変更のプレビュー ] ダイアログで、[ OK ] ボタンをクリックします。

  5. [ ファイルすべて>保存] を 選択してプロジェクトを保存します。

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

    プロジェクトが実行され、空のウィンドウが表示されます。 これにより、WebView2 がインストールされ、動作していることを確認しますが、WebView2 には表示するコンテンツがまだありません。

    WebView2 SDK を使用した空のアプリ ウィンドウ

  7. アプリを閉じます。

手順 6 - 単一の WebView2 コントロールを作成する

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

  1. ファイルに MainWindow.xaml WebView2 XAML 名前空間を追加するには、タグ内に次の行を <Window/> 挿入します。

    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
    
  2. のコード MainWindow.xaml が次のコードのように表示されていることを確認します。

    <Window x:Class="WPF_Getting_Started.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:{YOUR PROJECT NAME}"
          xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
          mc:Ignorable="d"
          Title="MainWindow"
          Height="450"
          Width="800"
    >
       <Grid>
    
       </Grid>
    </Window>
    
  3. WebView2 コントロールを追加するには、タグを次の <Grid> コードに置き換えます。 プロパティは Source 、WebView2 コントロールに表示される初期 URI を設定します。

    <DockPanel>
       <wv2:WebView2 Name="webView"
                      Source="https://www.microsoft.com"
       />
    </DockPanel>
    
  4. Select File>Save All to save the project.

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

  6. WebView2 コントロールに が表示 https://www.microsoft.comされていることを確認します。

    WebView2 コントロール。microsoft.com から Web ページコンテンツを表示する

手順 7 - ナビゲーション

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

  1. ファイルに MainWindow.xaml 、WebView2 コントロールを含む 内の次のコード <DockPanel> をコピーして貼り付けて、アドレス バーを追加します。 既存のコードを新しいスニペットの下に置きます。

    <DockPanel DockPanel.Dock="Top">
        <Button x:Name="ButtonGo"
                  DockPanel.Dock="Right"
                  Click="ButtonGo_Click"
                  Content="Go"
        />
        <TextBox Name="addressBar"/>
    </DockPanel>
    
  2. ファイルのセクションが<DockPanel>MainWindow.xaml次のコードと一致していることを確認します。

    <DockPanel>
        <DockPanel DockPanel.Dock="Top">
            <Button x:Name="ButtonGo" DockPanel.Dock="Right" Click="ButtonGo_Click" Content="Go"/>
            <TextBox Name = "addressBar"/>
        </DockPanel>
        <wv2:WebView2 Name = "webView"
                      Source = "https://www.microsoft.com"
        />
    </DockPanel>
    
  3. MainWindow.xaml.cs名前空間を CoreWebView2 追加するには、ファイルの先頭に次のコードを挿入します。

    using Microsoft.Web.WebView2.Core;
    
  4. ファイルで MainWindow.xaml.cs、次のコードをコピーして メソッドを作成します ButtonGo_Click 。 このコードは、WebView2 コントロールをアドレス バーに入力された URL に移動します。

    private void ButtonGo_Click(object sender, RoutedEventArgs e)
    {
        if (webView != null && webView.CoreWebView2 != null)
        {
            webView.CoreWebView2.Navigate(addressBar.Text);
        }
    }
    
  5. 次のコードに示すように、宣言の Public MainWIndow 直後にコードを貼り付けます。

    namespace WpfApp1
    {
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window
       {
          public MainWindow()
          {
                InitializeComponent();
          }
          void ButtonGo_Click(object sender, RoutedEventArgs e)
          {
                if (webView != null && webView.CoreWebView2 != null)
                {
                   webView.CoreWebView2.Navigate(addressBar.Text);
                }
          }
       }
    }
    
  6. Select File>Save All to save the project.

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

  8. アドレス バーに新しい URL を入力し、[ Go] を選択します。 たとえば、「」と入力します https://www.bing.com

  9. 入力した URL が WebView2 コントロールで開いていることを確認します。

    アドレス バーに完全な URL を入力してください。 URL が または https://http://始まらない場合、アプリによって が生成ArgumentExceptionされます。

    サンプル アプリは、アドレス バーに URL を https://www.bing.com 含むBing Web サイトを表示します。

    アプリにBing Web サイトが表示されます

手順 8 - ナビゲーション イベント

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

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

新しいドキュメントからナビゲーション開始、ナビゲーション完了までのナビゲーション イベント

上の図は、イベント シーケンスを示しています。 ナビゲーション イベントは、新しいドキュメントから始まります。

成功パス

成功したパスには、イベントの完全なシーケンスが含まれます。

  1. ナビゲーションの開始。
  2. ソースが変更され、同じドキュメントからの入力が可能になりました。
  3. コンテンツの読み込み。
  4. 履歴の変更。
  5. ナビゲーションが完了しました。

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

エラー パス

エラーが発生した場合、エラー パスはナビゲーションの開始からナビゲーション完了まで直接進み、介在するイベントはスキップされます。

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

  • SourceChanged
  • ContentLoading
  • HistoryChanged

リダイレクト

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

ナビゲーション イベントのデモの例

イベントの使用方法を示すために、次のように、HTTPS 以外の要求を取り消す ハンドラー NavigationStarting を登録します。

  1. ファイルで MainWindow.xaml.cs 、次のコードの先頭部分に一致するようにコンストラクターを変更します。 コンストラクターの下に、 関数を EnsureHttps 追加します。

    public MainWindow()
    {
        InitializeComponent();
        webView.NavigationStarting += EnsureHttps;
    }
    
    void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
    {
        String uri = args.Uri;
        if (!uri.StartsWith("https://"))
        {
            args.Cancel = true;
        }
    }
    

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

  2. Select File>Save All to save the project.

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

  4. HTTP サイトを開こうとします。 WebView2 コントロールが変更されていないことを確認します。

  5. HTTPS サイトを開こうとします。 WebView2 コントロールを使用すると、HTTPS サイトを開きます。

手順 9 - スクリプト

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

挿入された JavaScript は、特定のタイミングで実行されます。

  • グローバル オブジェクトの作成後に実行します。
  • HTML ドキュメントに含まれる他のスクリプトが実行される前に実行します。

たとえば、次のように、ユーザーが HTTPS 以外のサイトに移動したときにアラートを送信するスクリプトを追加します。

  1. ExecuteScriptAsync メソッドをEnsureHttps使用する 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. Select File>Save All to save the project.

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

  4. HTTPS を使用しない Web サイトに移動するときに、アプリにアラートが表示されることを確認します。

    http: URL が安全でないことを示すメッセージ。代わりに https: URL を試すことをお勧めします

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

ホストと Web コンテンツは、 を使用して postMessage次の方法で通信できます。

  • WebView2 コントロールの Web コンテンツは、 を使用して window.chrome.webview.postMessageホストにメッセージを投稿できます。 ホストは、ホストに登録されている WebMessageReceived を使用してメッセージを処理します。

  • または を使用して、WebView2 コントロール内の Web コンテンツにメッセージを CoreWebView2.PostWebMessageAsString 投稿する CoreWebView2.PostWebMessageAsJSONホスト。 メッセージは、 に window.chrome.webview.addEventListener追加されたハンドラーによってキャッチされます。

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

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

  1. MainWindow.xaml.cs、コンストラクターを更新し、次の InitializeAsync コードに一致する関数を作成します。 の初期化CoreWebView2は非同期であるため、この関数は InitializeAsyncEnsureCoreWebView2Async を待機します。

    public MainWindow()
    {
       InitializeComponent();
       webView.NavigationStarting += EnsureHttps;
       InitializeAsync();
    }
    
    async void InitializeAsync()
    {
       await webView.EnsureCoreWebView2Async(null);
    }
    
  2. CoreWebView2 が初期化されたら、 に応答するイベント ハンドラーをWebMessageReceived登録します。 で MainWindow.xaml.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 メッセージを送信して応答するには、初期化後 CoreWebView2 にホストによって次の処理が行われます。

    1. ホストからメッセージを出力するハンドラーを登録するスクリプトを Web コンテンツに挿入します。
    2. URL をホストに投稿するスクリプトを Web コンテンツに挿入します。
  4. MainWindow.xaml.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. [ ファイルすべて>保存] を 選択してプロジェクトを保存します。

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

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

    サンプル アプリは、アドレス バーと Microsoft Web サイト https://www.microsoft.comの URI を表示します。

    サンプル アプリでは、アドレス バーと Microsoft Web サイトに URI が表示されます

これで、初めての WebView2 アプリが作成されました。

関連項目

developer.microsoft.com:

ローカル ページ:

Github: