[VB.net]WebView2を使用してみる

2020年11月10日2021年1月17日

「WebView2」のインストール方法と使用方法を書いていきます。
・インストール方法
・使用方法とサンプルソース

・インストール方法
まず、「NuGetパッケージマネージャー」からWebView2をインストールします。
「ツール」→「NuGetパッケージマネージャー」→「ソリューションのNuGetパッケージの管理」を開き、
「参照」をクリック、検索ボックスに「WebView2」と入力するとおそらく一番上に表示されると思いますが
「Microsoft.Web.WebView2」を選択してください。
右側に表示される対象のプロジェクトにチェックボックスを入れるとインストールが可能になります。

緑枠で囲った「プレリリースを含める」というチェックボックスは最新版がうまく動かなかったりした場合に
過去のプレリリース版で試したりする際に入れてください。

実際に動かしたバージョンは「0.9.622.11」と「0.9.579-prerelease」ですが
公式サイトから最新のEdge(公式サイト様)をインストールした際に新しいバージョン(0.9.622.11)では機能が使えなかったので
自分はひとつ前の物を使用しております。
(最新版は試していませんがインストールとアンインストールはすぐに出来るので動かなければ試してみてください)

・使用方法とサンプルソース
まず、Windowsフォームアプリケーションのプロジェクトを作成します。

この説明でのフレームワークは「.NET 4.7.2」を使用します。

NuGetにてWebView2を説明したようにインストールし
From1.vbのデザイナ画面でツールボックスから[WebView2]をドラッグし、フォームに追加してください。

デザイナ画面でプロパティに存在する[Source]にURLを入れると
インスタンスがNewされた段階(フォーム表示後)に設定したURLが表示されます。

ここからはサンプルのソースを記載します。

Public Class Form1

Private Sub FrmMain_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'URLをセットし表示
Dim web_url As String = "https://twitter.com"
'Me.WebView21.CoreWebView2.Navigate(web_url)
'↑「Load時」と「Shown時」はまだWebView2がNewされていないのでこの段階でNavigateメソッドは使用不可

'Dim weburl As New System.Uri(web_url)
Me.WebView21.Source = New System.Uri(web_url)
'デザイン側のプロパティにもあるように「Source」にURLを設定するならここでも大丈夫です
End Sub

Private Sub FrmMain_Shown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shown
'URLをセットし表示
Dim web_url As String = "https://twitter.com"
'Me.WebView21.CoreWebView2.Navigate(web_url)
'↑「Load時」と「Shown時」はまだWebView2がNewされていないのでこの段階でNavigateメソッドは使用不可

'Dim weburl As New System.Uri(web_url)
Me.WebView21.Source = New System.Uri(web_url)
'デザイン側のプロパティにもあるように「Source」にURLを設定するならここでも大丈夫です
End Sub

Private Async Sub Reload_Start(sender As Object, e As EventArgs) Handles Button1.Click
'HTML取得
Dim html As String = Await Me.WebView21.ExecuteScriptAsync("document.documentElement.outerHTML")

'URLをセット
Dim web_url As String = "https://www.google.co.jp/"
Me.WebView21.CoreWebView2.Navigate(web_url)
'NavigateでURLを設定した場合は下記のリロードメソッドを呼ぶ必要はありません
'リロード
'Me.WebView21.Reload()
End Sub

End Class

フレームワークに入っている[WebView]はIE7ベースのおかげでTwitterなどのサイトからhtmlを取得できない問題が
このWebView2なら取得出来たりします。

htmlを取得する[ExecuteScriptAsync]はAwaitが付いた関数なのでメソッド名に[Async]を付加しなければいけませんが
その辺は調べれば沢山ヒットしますので割愛します。

ボタン名が「リロード」となっていますがGoogleに飛ぶボタンです(笑)
Google検索からMSのTwitterを開いてみた結果です。