【サンプル付き】WebView2で自作アプリにブラウザを組み込もう！インストールから使い方を解説

2024年3月19日

当ページのリンクには広告が含まれています。

デスクトップアプリにWebブラウザを組み込むと、Webサイトのコンテンツを画面に表示したり、様々な操作が可能になります。

そして、WebView2を使うことで、自作アプリにMicrosoft Edgeブラウザと同等の機能を組み込むことができます。

この記事では、WebView2の概要、インストール方法と基本的な使い方をコード付きで紹介します。

WebView2で自作アプリにブラウザを組み込んで、Webとネイティブの融合を体験しましょう！

WebView2とは

WebView2とは、Microsoft Edgeのレンダリングエンジンを利用して、デスクトップアプリにWebコンテンツを表示できるコントロールであり、その内部にはオープンソースのブラウザ向けコードベース「Chromium」が使われています。

WebView2は、Win32 C/C++、.NET Framework、.NET Core、.NET 5、.NET 6、WinUI 2.0、WinUI 3.0などのプログラミング環境で使用でき、Windows 10とWindows 11のほとんどのバージョンで動作します。

WebView2には、2種類の配布モードが用意されており、１つは定期的に最新のChromiumに更新される「Evergreen」モード、もう１つは特定のChromiumバージョンに固定して組み込む「Fixed」です。

Chromiumとは

Chromiumとは、ブラウザを開発する上で必要なプログラムコードの集まり、通称「コードベース」であり、Googleによって開発とメンテナンスが行なわれています。

Chromiumはオープンソースとして公開されており、Google Chromeはもとより、Microsoft Edge、brage、Opera、VIVALDIなど多くのブラウザで利用されています。

WebViewとWebView2について

WebViewとは、アプリ内にブラウザのような機能を埋め込み、アプリの中でWebサイトを表示できるようにする技術のことです。

WebViewは、主にスマートフォンやタブレットなどのモバイルデバイス向けのアプリで使用されています。アプリ内にWebページを表示することで、アプリの機能拡張やユーザーエクスペリエンスの向上を図ることができます。

具体的な例としては、以下のようなものに活用されています。

ショッピングアプリで商品の詳細ページを表示する
ニュースアプリで最新ニュースを表示する
ゲームアプリでWeb広告を表示する
地図アプリでGoogleマップを表示する

WebView2 は WebView の技術を、内部に Chromium を使ってWindows向けに開発したものです。ちなみに、Androidも Chromium を採用していますが、iOSはWebViewとWebKitと呼ばれるコードベースが採用されています。

WebView2の特徴とメリット

WebView2の特徴とメリットを簡単にまとめておきます。

特徴	メリット
Chromiumベースの最新のWeb技術をサポート	最新のWebブラウザと同等のWebコンテンツを表示できる
ネイティブアプリに組み込むことができる	ネイティブアプリにWebコンテンツを埋め込むことで、アプリの機能拡張やユーザーエクスペリエンスの向上が可能
エバーグリーン配布が可能	アプリの更新時にWebView2ランタイムも自動的に更新されるため、開発者はアプリの更新に伴うWebView2ランタイムの更新作業をする必要がない
ネイティブ機能への制御されたアクセスが可能	WebView2アプリは、ネイティブ機能への制御されたアクセスを許可することで、強力で安全なアプリケーションを構築できる

WebView2の動作環境

WebView2が動作するOSは次の通りです。

Windowsのバージョン
Windows 11
Windows 10
Windows 10 IoT Enterprise LTSC x32 2019
Windows 10 IoT Enterprise LTSC x64 2019
Windows 10 IoT Enterprise 21h1 x64
Windows Server 2022
Windows Server 2019
Windows Server 2016

SDKとVisual Studioのバージョンは次の通りです。

SDK	必要なVisual Studioのバージョン
Win32 C/C++ SDK	Visual Studio 2015以降
.NET Framework SDK	Visual Studio 2017以降
.NET Core SDK	Visual Studio 2019以降
.NET 5 SDK	Visual Studio 2019以降
.NET 6 SDK	Visual Studio 2022以降
WinUI 2.0 SDK	Visual Studio 2019以降
WinUI 3.0 SDK	Visual Studio 2019以降

WebView2のインストール方法

Nugetから WebView2 を検索し、「Microsoft.Web.WebView2」を選らんでインストールして下さい。Nugetに関する詳細と使い方については「Visual Studio のパッケージ管理機能 NuGetとは？」の記事で解説しています。

インストールが完了したら、レイアウトエディタからWebView2を選んで画面にドラッグ＆ドロップするだけです。

WebView2の基本的な使い方

WebView2を使う場合は以下の手順が必要です。

WebView2に対して、Navigateメソッドに移動先のURLを指定することでページが表示されます。

ページの読み込みは非同期で行われるため、初期化のタイミングでページ読み込み完了のイベントハンドラを登録しておきます。

ページ読み込みが完了したら、ExecuteScriptAsyncメソッドで任意のJavaScriptを実行します。これにより、WebView2が表示しているDOM（Document Object Model）から情報を取得したり、値の設定やクリックなどの制御を行います。

WebView2のコード例

まずは、URLを入力するテキストボックスと、WebView2コントロールを張り付けただけの画面を使って基本的な使い方を解説します。

WebView2コントロールに "uxWebBrowser" 、アドレス入力用テキストボックスに "uxAddressBar" という名前を付けていることを前提に説明します。

初期化処理は非同期で行う必要があります。このため直接コンストラクタに記述できないので、下記のようなメソッドにしてコンストラクタ、又は Loadedイベントの中で呼び出します。

async void InitializeAsync()
{
    // CoreWebView2が初期化されるまで待機
    await uxWebBrowser.EnsureCoreWebView2Async(null);
    // ナビゲーションが完了したときのイベントハンドラーを追加
    uxWebBrowser.NavigationCompleted += uxWebBrowser_NavigationCompleted;
}

async void InitializeAsync()

{

// CoreWebView2が初期化されるまで待機

await uxWebBrowser.EnsureCoreWebView2Async(null);

// ナビゲーションが完了したときのイベントハンドラーを追加

uxWebBrowser.NavigationCompleted += uxWebBrowser_NavigationCompleted;

}

ナビゲーション（ページ読み込み）が完了した時に呼ばれるイベントハンドラ内で、e.IsSuccessプロパティが trueになっていることを確認します。この例では、遷移先のURLを画面のテキストボックス(uxAddressBar)に表示しています。

private void uxWebBrowser_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
     //読み込み結果を判定
    if (e.IsSuccess)
    {
        // ナビゲーションが成功した場合、現在のURLをアドレスバーに表示
        uxAddressBar.Text = uxWebBrowser.CoreWebView2.Source;
    }
}

private void uxWebBrowser_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)

{

//読み込み結果を判定

if (e.IsSuccess)

{

// ナビゲーションが成功した場合、現在のURLをアドレスバーに表示

uxAddressBar.Text = uxWebBrowser.CoreWebView2.Source;

}

任意のページに移動するにはCoreWebView2.Navigate() メソッドを使います。引数にURLをセットするのですが、下記のサンプルはそれをメソッド化した例になります。

public void Navigate(string url)
{
    // ウェブブラウザで指定されたURLにナビゲート
    uxWebBrowser.CoreWebView2.Navigate(url);
}

public void Navigate(string url)

{

// ウェブブラウザで指定されたURLにナビゲート

uxWebBrowser.CoreWebView2.Navigate(url);

}

サンプルプログラムの全ソースコード

XAMLのサンプル全体は次の通りです。

<Window
    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:WebView2Demo"
    xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WebView2Demo.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel LastChildFill="True">
         <TextBox  x:Name="uxAddressBar" TextWrapping="NoWrap" Text="https://google.com" KeyDown="uxAddressBar_KeyDown" DockPanel.Dock="Top" Margin="5"/>
         <Wpf:WebView2 x:Name="uxWebBrowser"/>
        </DockPanel>
    </Grid>
</Window>

<Window

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:WebView2Demo"

xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WebView2Demo.MainWindow"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Wpf:WebView2 x:Name="uxWebBrowser"/>

</DockPanel>

</Grid>

</Window>

C#のサンプル全体は次の通りです。

using Microsoft.Web.WebView2.Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Metadata;
using System.Security.Policy;
using System.Text;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Linq;
using static System.Net.Mime.MediaTypeNames;

namespace WebView2Demo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            // XAMLコンポーネントの初期化
            InitializeComponent();

            // 非同期での初期化処理を実行
            InitializeAsync();
        }

        /// <summary>
        /// WebView2の初期化処理
        /// </summary>
        async void InitializeAsync()
        {
            // CoreWebView2が初期化されるまで待機
            await uxWebBrowser.EnsureCoreWebView2Async(null);
            // ナビゲーションが完了したときのイベントハンドラーを追加
            uxWebBrowser.NavigationCompleted += uxWebBrowser_NavigationCompleted;
        }


        /// <summary>
        /// 指定されたURLにナビゲートします。
        /// </summary>
        /// <param name="url">ナビゲート先のURL。</param>
        public void Navigate(string url)
        {
            // ウェブブラウザで指定されたURLにナビゲート
            uxWebBrowser.CoreWebView2.Navigate(url);
        }

        /// <summary>
        /// ナビゲーションが完了したときに呼び出されるイベント処理 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void uxWebBrowser_NavigationCompleted(object? sender, CoreWebView2NavigationCompletedEventArgs e)
        {
             //読み込み結果を判定
            if (e.IsSuccess)
            {
                // ナビゲーションが成功した場合、現在のURLをアドレスバーに表示
                uxAddressBar.Text = uxWebBrowser.CoreWebView2.Source;
            }
        }

        /// <summary>
        /// キーが押された時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void uxAddressBar_KeyDown(object sender, KeyEventArgs e)
        {
            if(e.Key == Key.Enter)
            {
                Navigate(uxAddressBar.Text);
            }
        }
    }
}

using Microsoft.Web.WebView2.Core;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Reflection.Metadata;

using System.Security.Policy;

using System.Text;

using System.Text.Json;

using System.Threading;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Xml.Linq;

using static System.Net.Mime.MediaTypeNames;

namespace WebView2Demo

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

// XAMLコンポーネントの初期化

InitializeComponent();

// 非同期での初期化処理を実行

InitializeAsync();

}

/// <summary>

/// WebView2の初期化処理

/// </summary>

async void InitializeAsync()

{

// CoreWebView2が初期化されるまで待機

await uxWebBrowser.EnsureCoreWebView2Async(null);

// ナビゲーションが完了したときのイベントハンドラーを追加

uxWebBrowser.NavigationCompleted += uxWebBrowser_NavigationCompleted;

}

/// <summary>

/// 指定されたURLにナビゲートします。

/// </summary>

/// <param name="url">ナビゲート先のURL。</param>

public void Navigate(string url)

{

// ウェブブラウザで指定されたURLにナビゲート

uxWebBrowser.CoreWebView2.Navigate(url);

}

/// <summary>

/// ナビゲーションが完了したときに呼び出されるイベント処理

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void uxWebBrowser_NavigationCompleted(object? sender, CoreWebView2NavigationCompletedEventArgs e)

{

//読み込み結果を判定

if (e.IsSuccess)

{

// ナビゲーションが成功した場合、現在のURLをアドレスバーに表示

uxAddressBar.Text = uxWebBrowser.CoreWebView2.Source;

}

/// <summary>

/// キーが押された時の処理

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void uxAddressBar_KeyDown(object sender, KeyEventArgs e)

{

if(e.Key == Key.Enter)

{

Navigate(uxAddressBar.Text);

}

WebView2の応用的な使い方

次は応用例として、表示されたウェブページから、自動的にLink,img,input,head,body タグを抜き出して表示すると共に、任意のJavaScriptを実行するサンプルプログラムについて紹介します。

尚、開発ツールとFrameworkは次の通りです。

開発ツール	Visual Studio Community 2022 (64bit) Version 17.8.2
Framework	.NET Core 6.0

あくまでもサンプルなので、アドレスバーでエンターキーを押す操作に対応していなかったり、何らかの操作でエラーになるかもしれませんがご容赦下さい。

プロジェクトは下記からダウンロードできます。ダウンロードしたら、WebView2をNugetからインストールしてお使いください。

WebView2Demoプロジェクト

1 ファイル 175.73 KB

ダウンロード

サンプルソース一式

今回はMicrosoftから配布されているVisual Studio用のアイコンを使っています。プロジェクトの中に同梱しています。

<Window
    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:WebView2Demo"
    xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WebView2Demo.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!-- ボタンのスタイルを定義 -->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5"/>
                                <Setter Property="Background" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="LightGray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="104*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="55*"/>
        </Grid.ColumnDefinitions>
        <DockPanel LastChildFill="True" Grid.Column="0" Background="#efefff">
            <DockPanel DockPanel.Dock="Top">
            <!-- 各ボタンのインスタンスを作成し、Styleと画像を指定 -->
            <Button Command="{x:Static local:MainWindow.GoBackCommand}">
                <Image Source="Image/arrow_Previous_16xLG_color.png" />
            </Button>
            <Button Command="{x:Static local:MainWindow.GoForwardCommand}">
                <Image Source="Image/arrow_Next_16xLG_color.png" />
            </Button>
            <Button Command="{x:Static local:MainWindow.RefreshCommand}">
                <Image Source="Image/Refresh_grey_16x.png" />
            </Button>
                <Button Command="{x:Static local:MainWindow.NavigateCommand}" DockPanel.Dock="Right">
                    <Image Source="Image/Search_glyph71GrayNoHalo_16x.png" />
                </Button>
                <TextBox  x:Name="uxAddressBar" TextWrapping="NoWrap" Text="https://google.com" VerticalAlignment="Center" Margin="5"  />
            </DockPanel>
            <Wpf:WebView2 x:Name="uxWebBrowser"/>
        </DockPanel>
        <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"></GridSplitter>
        <DockPanel Grid.Column="2" Margin="5">
            <Button DockPanel.Dock="Top" Command="{x:Static local:MainWindow.ExecJavaScriptCommand}"
                    HorizontalAlignment="Left" Width="120" Height="20" BorderThickness="1">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="JavaScriptの実行" Margin="0,0,5,0"></TextBlock>
                    <Image Source="Image/Run_16x.png"></Image>
                </StackPanel>
            </Button>
            <TextBlock  Text="スクリプト" DockPanel.Dock="Top" ></TextBlock>
            <TextBox x:Name="uxJavaScript" Height="100" AcceptsReturn="True"  DockPanel.Dock="Top"
                     VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
            <TabControl>
                <TabItem Header="結果">
                    <TextBox  x:Name="uxResult" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
                <TabItem Header="Link">
                    <TextBox  x:Name="uxLinkTag" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
                <TabItem Header="Image">
                    <TextBox  x:Name="uxImageTag" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
                <TabItem Header="Input">
                    <TextBox  x:Name="uxInputTag" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
                <TabItem Header="head">
                    <TextBox  x:Name="uxHead" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
                <TabItem Header="body">
                    <TextBox  x:Name="uxBody" AcceptsReturn="True" 
                             VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>
                </TabItem>
            </TabControl>
        </DockPanel>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

<Window

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:WebView2Demo"

xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WebView2Demo.MainWindow"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Window.Resources>

<Setter.Value>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">

</Border>

<ControlTemplate.Triggers>

</Trigger>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Button>

</Button>

</Button>

</Button>

</DockPanel>

<Wpf:WebView2 x:Name="uxWebBrowser"/>

</DockPanel>

<Button DockPanel.Dock="Top" Command="{x:Static local:MainWindow.ExecJavaScriptCommand}"

HorizontalAlignment="Left" Width="120" Height="20" BorderThickness="1">

</StackPanel>

</Button>

<TextBox x:Name="uxJavaScript" Height="100" AcceptsReturn="True" DockPanel.Dock="Top"