WPF アプリでの WebView2 の概要

[アーティクル]
03/29/2023

この記事では、開発ツールを設定し、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 の使用について説明します。

Visual Studio をインストールします。必要なプロジェクトテンプレートを取得するには、 次のように .NET デスクトップ開発 サポートをインストールします。
Visual Studio のスタートアップ画面にいる場合は、[ 新しいプロジェクトの作成 ] ダイアログの下部までスクロールし、[ コードなしで開く] リンクをクリックします。 Visual Studio が開きます。
Visual Studio で、[ツール] [ツール][ツール>と機能の取得] の順に選択します。 [Visual Studio インストーラー] ウィンドウが開き、[変更] ダイアログが開きます。
.NET デスクトップ開発ワークロードを選択して、チェックマークが表示されるようにします。
右側の [インストールの詳細>.NET デスクトップ開発>] セクションで、.NET デスクトップ開発ツールと .NET Framework 4.7.2 開発ツールが表示されていることを確認し、その横にチェックマークを付けます。
右側の [ インストールの詳細>.NET デスクトップ開発>オプション ] セクションで、次の手順を実行します。
- Visual Studio 2022 を使用している場合は、 .NET 用の開発ツール が選択されていることを確認します。
- Visual Studio 2019 を使用している場合は、 .NET 開発ツール が選択されていることを確認します。
[ 変更 ] ボタンをクリックします。

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

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

サポートされているオペレーティングシステム (OS) で Microsoft Edge Insider (プレビュー) チャネル (ベータ、開発、またはカナリア) をダウンロードします。
- Windows 10
- Windows 11
Microsoft Edge のカナリアチャネルを使用することをお勧めします。最低限必要なバージョンは 82.0.488.0 です。

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

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

.NET Core/5/6 プロジェクト (新しい)、または WPF アプリ (.NET Framework) プロジェクト (古い) のどちらを作成するかを決定します。詳細については、以下を参照してください:
- .NET の履歴概要と概要。
- ウィキペディアの .NET 。
以下の該当するセクションに従ってください。

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

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

Visual Studio 2022 などの Microsoft Visual Studio を開きます。
開くパネルで、[ 新しいプロジェクトの作成] をクリックします。または、メイン Visual Studio ウィンドウで、[ファイル>] [新しい>プロジェクト] を選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。
[ テンプレートの検索 ] テキストボックスに「」と入力します WPF Application。 [ 新しいプロジェクトの作成 ] パネルには、入力したテキストに一致するインストール済みのプロジェクトテンプレートが表示されます。この記事では、VB ダイアログではなく C# を示します。どちらの言語も WebView2 でサポートされています。
Visual Studio 2022 を使用している場合は、 タイトル WPF アプリケーション と説明テキスト .NET WPF アプリケーションを作成するためのプロジェクトを含むプロジェクトテンプレートをクリックします。

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

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

[ 新しいプロジェクトの構成: WPF アプリケーション ] ダイアログが開きます。
[ プロジェクト名 ] テキストボックスに、 MyWpfDotnetCoreWv2App などのプロジェクト名を入力します。
[ 場所 ] テキストボックスで、ローカルドライブのパス (など C:\Users\myusername\Documents\MyProjects) を選択し、[ 次へ ] ボタンをクリックします。

[ 追加情報 ] ダイアログが表示され、[ ターゲットフレームワーク ] ドロップダウンリストが表示されます。
.NET 6.0 など、.NET Core 3.1 以降を選択します。 ( .NET Core 3.0 を選択しないでください)。次に、[ 作成 ] ボタンをクリックします。

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

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

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

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

Visual Studio 2022 などの Microsoft Visual Studio を開きます。
開くパネルで、[ 新しいプロジェクトの作成] をクリックします。または、メイン Visual Studio ウィンドウで、[ファイル>] [新しい>プロジェクト] を選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。
[ テンプレートの検索 ] テキストボックスに「」と入力します WPF App。 [ 新しいプロジェクトの作成 ] パネルには、入力したテキストに一致するインストール済みのプロジェクトテンプレートが表示されます。この記事では、VB ダイアログではなく C# を示します。どちらの言語も WebView2 でサポートされています。
タイトル WPF App (.NET Framework) と説明テキストを含むプロジェクトテンプレートWindows Presentation Foundationクライアントアプリケーションをクリックします。

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

[新しいプロジェクトの構成: WPF アプリ (.NET Framework)] ダイアログが開きます。
[ プロジェクト名 ] テキストボックスに、 MyWpfDotnetFwkWv2App などのプロジェクト名を入力します。
[ 場所 ] テキストボックスで、ローカルドライブのパス (など C:\Users\myusername\Documents\MyProjects) を選択します。
[フレームワーク] ドロップダウンリストで、[.NET Framework 4.6.2 以降] を選択します。
[作成] ボタンをクリックします。

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

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

[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。

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

選択した.NET Frameworkバージョンを次のようにインストールする必要がある場合があります。
アプリが開かない場合は、[デバッグなしで デバッグ>の開始] を選択します。

選択したバージョンの.NET Frameworkをインストールしていない場合は、次のダイアログが表示されることがあります。"このアプリケーションを起動できませんでした。アプリケーションには、次のいずれかのバージョンの .NET Framework が必要です。NETFramework,Version=v4.8.1 - この.NET Frameworkバージョンを今すぐインストールしますか?
このようなダイアログが表示された場合は、[.NET Frameworkのダウンロード] に移動し、必要なバージョンの Developer Pack (ランタイムではなく) をダウンロードしてインストールします。たとえば、にC:\Users\username\Downloadsダウンロードndp481-devpack-enu.exeし、ファイルをダブルクリックしてインストールします。
メッセージが表示されたら、コンピューターを再起動します。
などのndp481-devpack-enu.exeC:\Users\username\Downloadsダウンロードしたファイルに移動し、ダウンロードしたファイルをもう一度ダブルクリックして、.NET Framework Developer Pack をインストールします。 [成功] ダイアログが表示されます。
メッセージが表示されたら、コンピューターをもう一度再起動します。
Visual Studio を開き、作成したソリューションを開きます。
F5 キーを押して、WebView2 SDK を含まない初期アプリ (上図) を実行します。
最初のアプリを閉じます。

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

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

ソリューションエクスプローラーで、(.NET (Core) またはプロジェクトテンプレート.NET Framework基づいて) プロジェクト名を右クリックし、[NuGet パッケージの管理] を選択します。
左上の [ 参照 ] タブをクリックします。検索バーに「」と入力 Microsoft.Web.WebView2し、 Microsoft.Web.WebView2 パッケージをクリックします。

[NuGet パッケージマネージャー] ダイアログには、 Microsoft.Web.WebView2 パッケージを含む検索結果が表示されます。ダイアログにはバージョン番号と [インストール ] ボタンがあります。
既定のバージョンをそのまま使用し、[ インストール ] ボタンをクリックします。
[ 変更のプレビュー ] ダイアログで、[ OK ] ボタンをクリックします。
[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。

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

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

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

ファイルに MainWindow.xaml WebView2 XAML 名前空間を追加するには、タグ内に次の行を <Window/> 挿入します。
```
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
```

のコード 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>

WebView2 コントロールを追加するには、タグを次の <Grid> コードに置き換えます。プロパティは Source 、WebView2 コントロールに表示される初期 URI を設定します。
```
<DockPanel>
   <wv2:WebView2 Name="webView"
                  Source="https://www.microsoft.com"
   />
</DockPanel>
```
[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。
WebView2 コントロールにが表示 https://www.microsoft.comされていることを確認します。

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

ファイルに MainWindow.xaml 、WebView2 コントロールを含む内の次のコード <DockPanel> をコピーして貼り付けて、アドレスバーを追加します。既存のコードを新しいスニペットの下に置きます。
```
<DockPanel DockPanel.Dock="Top">
    <Button x:Name="ButtonGo"
              DockPanel.Dock="Right"
              Click="ButtonGo_Click"
              Content="Go"
    />
    <TextBox Name="addressBar"/>
</DockPanel>
```

ファイルのセクションが<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>

で MainWindow.xaml.cs名前空間を CoreWebView2 追加するには、ファイルの先頭に次のコードを挿入します。
```
using Microsoft.Web.WebView2.Core;
```
ファイルで 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);
    }
}
```

次のコードに示すように、宣言の 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);
            }
      }
   }
}

[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。
アドレスバーに新しい URL を入力し、[ Go] を選択します。たとえば、「」と入力します https://www.bing.com。
入力した URL が WebView2 コントロールで開いていることを確認します。

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

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

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

NavigationStarting
SourceChanged
ContentLoading
HistoryChanged
NavigationCompleted

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

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

成功パス

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

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

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

エラーパス

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

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

SourceChanged
ContentLoading
HistoryChanged

リダイレクト

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

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

ファイルで 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 イベントハンドラーとして登録されます。
[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。
HTTP サイトを開こうとします。 WebView2 コントロールが変更されていないことを確認します。
HTTPS サイトを開こうとします。 WebView2 コントロールを使用すると、HTTPS サイトを開きます。

手順 9 - スクリプト

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

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

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

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

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;
   }
}

[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。
HTTPS を使用しない Web サイトに移動するときに、アプリにアラートが表示されることを確認します。

手順 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 のユーザーにアラートが表示されます。

で MainWindow.xaml.cs、コンストラクターを更新し、次の InitializeAsync コードに一致する関数を作成します。の初期化CoreWebView2は非同期であるため、この関数は InitializeAsyncEnsureCoreWebView2Async を待機します。
```
public MainWindow()
{
   InitializeComponent();
   webView.NavigationStarting += EnsureHttps;
   InitializeAsync();
}

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
}
```

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);
}

WebView2 コントロールが Web メッセージを送信して応答するには、初期化後 CoreWebView2 にホストによって次の処理が行われます。
1. ホストからメッセージを出力するハンドラーを登録するスクリプトを Web コンテンツに挿入します。
2. URL をホストに投稿するスクリプトを Web コンテンツに挿入します。

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

[ ファイルすべて>保存] を 選択してプロジェクトを保存します。
F5 キーを押して、プロジェクトをビルドして実行します。
新しい URI を開くと、WebView2 コントロールによってアドレスバーに URI が表示されます。

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

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

WPF アプリでの WebView2 の概要

完了したプロジェクト

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

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

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

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

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

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

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

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

手順 7 - ナビゲーション

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

成功パス

エラーパス

リダイレクト

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

手順 9 - スクリプト

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

関連項目

その他のリソース

WPF アプリでの WebView2 の概要

完了したプロジェクト

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

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

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

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

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

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

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

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

手順 7 - ナビゲーション

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

成功パス

エラー パス

リダイレクト

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

手順 9 - スクリプト

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

関連項目

その他のリソース

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

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

エラーパス

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