[C#] WebBrowserコントロールからWebView2への切り替え

C#、VB.NET等で標準で使用できるWebブラウザ用の部品として、昔からWebBrowserを使用してきたけど、これがInternet Explorerベースの古い部品。

しかもIE7ベース。
これをIE11ベースに無理やり切り替える方法も昔試していた。

[C#] WebBrowserコントロールのレンダリングモードをデフォルトのIE7から最新IEモードに変更する

けど、さすがにIE11も限界。
 

最近のHTML5やJavaScriptを使用したページが表示できなかったり、セキュリティ更新もできなかったり問題が多すぎる。

そこで、今回最新ブラウザへの切り替え(WebBrowserからWebView2)を試してみたので覚え書き。

WebBrowserはIEベースだったけれども、このWebView2コントロールはMicrosoft Edge(Chromium)ベースでGoogle Chromeとほぼ同等。
WebView2の詳細は以下を参照。
Microsoft Edge WebView2 の概要

 
 

WebView2ランタイムのインストール

まずは、開発環境のPCにWebView2ランタイムをインストール。

Microsoft Edge WebView2

「エバーグリーン ブートストラップ」の「ダウンロード」をクリックしインストール。

 
 

WebView2 SDKのインストール

ここでは、C#によるフォームアプリケーション作成も兼ねたインストール方法を示します。

  1. Visual Studioを起動し、フォームアプリケーションのプロジェクトを新規作成。
    ①Visual Studioを起動
    ②新しいプロジェクトの作成
    ③フォームアプリケーションを選択し[次へ]ボタン

    ④保存先と.NET Frameworkのバージョンを選択し[作成]ボタン

     

  2. 作成したプロジェクトにWebView2をインストール。
    ①[ツール]>[NuGetパッケージマネージャ]>[ソリューションのNuGetパッケージ管理]メニューを選択

    ②パッケージソースで「nuget.org」を選択して「WebView2」を検索しインストール

     

 
 

WebView2をアプリケーションに組み込む

  1. ツールボックスから「WebView2」コントロールを選びフォームに貼り付ける。
    「WebBrowser」コントロールも比較用として、ついでに貼り付ける。

  2. 以下のソースを貼り付ける。
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Forms;
    
    namespace WindowsFormsApp1
    {
        public partial class Form1 : Form
        {
            string url = ”https://www.osadasoft.com/”;
    
            public Form1()
            {
                InitializeComponent();
                InitializeAsync();
            }
    
            async void InitializeAsync()
            {
                try
                {
                    await webView21.EnsureCoreWebView2Async(null);
                }
                catch (Exception)
                {
                    MessageBox.Show("WebView2ランタイムがインストールされていない可能性があります。", Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Warning);
                    this.Close();
                }
            }
    
            private void Form1_Load(object sender, EventArgs e)
            {
                webBrowser1.ScriptErrorsSuppressed = true;
                webBrowser1.Url = new Uri(url);
            }
    
            private void webView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
            {
                webView21.CoreWebView2.Navigate(url);
            }
        }
    }
    

 
 

実行

  1. [F5]でビルド&実行。

     ⇒同じサイトを表示した結果。
     [画面下側]WebBrowser(IE)では表示できないが、[画面上側]WebView2(Edge)では正常に表示することができた。

 
 

補足説明

上記C#ソースについて補足。

  • 20行目
    webView2コントロールの初期化は非同期で少し時間が掛かるため、後続のInitializeAsyncメソッドで待機。
     

  • 27行目
    EnsureCoreWebView2Asyncメソッドで初期化が完了を待機。

    ちなみに、作成したexeを他のPCに持って行きWebView2ランタイムがインストールされていない環境で実行すると、以下のような例外が発生する。

    Unhandled exception has occurred in your application.
    If you click Continue, the application will ignore this error and attempt to continue.
    If you click Quit, the application will close immediately.
    Object refarence not set to an instance of an object.

    さらに、ちなみに、Windows 11からはWebView2ランタイムは最初からインストールされているようなので、今後はあまり気にしないで良くなる模様。
     

  • 25~33行目
    上記例外が出るのは格好悪いので、例外が出ないようtry-catchで括り、WebView2ランタイムが無いとわかるような警告メッセージボックスを表示してアプリケーションを終了させる。

     

  • 38、39行目
    こちらは、比較用のWebBrowserコントロール。
    初期化は特に時間が掛からないため、普通にFormのLoad時に処理をいきなり書くことが出来る。
     

  • 42~45行目
    WebView2コントロールのURLを設定。
    こちらは、初期化に時間がかかり、FormのLoad時に呼び出すと例外が発生するため、WebView2の初期化が完了したときに発生するイベント(WebView2のCoreWebView2InitializationCompleted)の処理内で実行する。
     

 
 

コメント

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


*