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

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

デスクトップアプリに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種類の配布モードが用意されており、1つは定期的に最新のChromiumに更新される「Evergreen」モード、もう1つは特定の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++ SDKVisual Studio 2015以降
.NET Framework SDKVisual Studio 2017以降
.NET Core SDKVisual Studio 2019以降
.NET 5 SDKVisual Studio 2019以降
.NET 6 SDKVisual Studio 2022以降
WinUI 2.0 SDKVisual Studio 2019以降
WinUI 3.0 SDKVisual 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イベントの中で呼び出します。

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

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

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

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

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

WebView2の応用的な使い方

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

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

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

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

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

サンプルソース一式

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

下記がC#のプログラム全体です。

JavaScriptを使って値を取得する方法

CoreWebView2.ExecuteScriptAsyncメソッドの引数にJavaScriptを指定すると、結果が文字列として返されます。このメソッドは非同期なので注意して下さい。

尚、戻り値はJson形式で帰ってくるので、文字列に変換する必要があります。そこで、サンプルプログラムではJavaScriptの実行結果を文字列に変換して返すようにメソッド化しています。

下記は、表示中のウェブページからタグの内容を抽出し、画面右のタブコントロールに表示するメソッドです。templaeというローカル関数を作っているので、タグとプロパティを変更するだけで好きな情報が簡単に抜き出せます。

JavaScriptを使って値を設定する方法

ウェブページに値を設定する方法も、CoreWebView2.ExecuteScriptAsyncメソッドの引数にJavaScriptを指定します。

例えば、価格.COMのノートパソコン製品一覧ページで以下の操作を行うとしましょう。

  • 「フリーワード・一括件検索」欄に “HP”を入力
  • LenovoのノードPCの「チェックボックス」にチェック
  • 「絞り込み条件を一括追加・変更」ボタンをクリック

C#から WebView2にを使って直接JavaScriptを実行するには、次のように記述します。

サンプルプログラムではExecuteJavaScriptAsyncというメソッドを用意していますので、次の様に記述出来ます。

一方、サンプルプログラムの画面からJavaScriptを実行するには、次のように入力して「JavaScriptの実行」ボタンをクリックします。

自作アプリを他のPCで動作させるには

WebView2をターゲット環境で動作させるには WebView2 のランタイムをインストールする必要がありますが、Windows10/11 で Microsoft Edge がインストールされている場合、別途インストールする必要はありません。

ただ、アプリに張り付けたWebView2コントロールとMicrosoft Edgeではエンジン更新タイミングが異なるため、両者のバージョンが異なることで、将来何らかの不具合が発生する可能性はあります。

常に最新を保つためにはエバーグリーン配布モードを使う必要がありますので、詳細はマイクロソフトの公式ページでご確認下さい。

ランタイムのインストーラは、こちらの公式ページからダウンロード可能です。

一番簡単な方法は、下記のリンクを自作アプリの先頭で実行することです。これにより、小さなエバーグリーン配布用のプログラムがインストールされ、以降は自動更新されるようになります。

このリンクをWebView2 で表示してあげればランタイムのインストール画面が表示され、インストールできます。例えば uxWebBrowserという名前でWebView2のコントロールを張り付けている場合は、次の様に記述します。

WebView2のランタイムがインストールされていなくても、WebView2を組み込んだ自作アプリ自身は起動され、インストーラのダウンロードを促してくれます。

まとめ

今回はWebView2のインストールと使い方についてサンプルソースコードを交えて解説しました。

WebViewはアプリ内にブラウザのような機能を埋め込み、アプリの中でWebサイトを表示できるようにする技術のことで、Microsoft が Windowsアプリ向けに開発したものが WebView2です。

WebView2は内部に Chromium というベースコードが用いられており、アプリからは JavaScriptを通してDOMにアクセスすることが可能です。

WebView2を使うと、デスクトップの自作アプリにMicrosoft Edgeと同等のブラウザ機能を組み込んで、スクレイピングやWebアプリとの連携などが簡単に実現できます。

Webには様々なサービスが公開されていますので、自作アプリから画面を操作すると活用範囲が大幅に広がる事でしょう。

是非皆さんもチャレンジしてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次