[C#] WebView2ランタイム配布モードでのアプリ作成

C#、VB.NET等でWebView2を利用する方法について

以前、WebView2ランタイムをインストールして使用する方法(アプリでエバーグリーン ブートストラップ)を紹介しました。
[C#] WebView2コントロールの利用方法

今回は、配布するアプリと一緒にランタイムを含める方法(修正済みバージョン)を紹介します。

それぞれのメリット、デメリットはこちらを参照。
Microsoft | 修正済みバージョンのランタイム配布モード

Evergreen ランタイム配布モード
利点:

  • 基盤となる Web プラットフォーム (WebView2 ランタイム) は、ユーザーの努力なしに自動的に更新されます。
  • WebView2 ランタイムは、クライアント上にあるすべての WebView2 アプリによって共有されるため、クライアント システム上の WebView2 ランタイムに必要なディスク容量は少なくなります。
  • 適格なシステムでは、Microsoft Edge と Evergreen WebView2 ランタイムのバイナリは、同じバージョン上にある場合、互いにハードリンクされます。 このリンクは、ディスクフットプリント、メモリ、およびパフォーマンスの利点を提供します。

欠点:

  • WebView2 アプリは、特定のバージョンの WebView2 ランタイムが必要であることを指定できません。

修正済みバージョンのランタイム配布モード
利点:

  • WebView2 ランタイムのバージョン管理を詳細に制御できます。 アプリで使用できる WebView2 ランタイムのバージョンを制御するため、アプリで使用できる WebView2 API がわかります。 アプリは、最新の API が存在するかどうかをテストする必要はありません。

欠点:

  • WebView2 ランタイムを自分で管理する必要があります。 WebView2 ランタイムはクライアントで自動的に更新されないため、最新の WebView2 API を使用するには、更新された WebView2 ランタイムと一緒にアプリを定期的に更新する必要があります。
  • 複数の WebView2 アプリがインストールされている場合は、クライアントにより多くのディスク容量が必要です。
  • インストーラーを使用して修正済みバージョン ランタイムをインストールすることはできません。

今回は、「修正済みバージョンのランタイム配布モード」の手順(C#:WinForms)を紹介します。

 

手順

アプリ作成、WebView2組み込み、ビルド、配布までの手順。

  1. Windowsフォームアプリ作成
    ①Visual Studioを起動
    ②「新しいプロジェクトの作成」ボタン選択
    ③「Windows フォームアプリケーション(.NET Framework)」を選択し「次へ」

    ④プロジェクト名等を必要に応じて修正し「作成」

  2. アプリにWebView2 SDKをインストール
    ①[ツール]>[NuGetパッケージマネージャ]>[ソリューションのNuGetパッケージ管理]メニューを選択

    ②パッケージソースで「nuget.org」を選択して、「参照」タブを選び、「WebView2」を検索し「Microsoft.Web.WebView2」をインストール

  3. WebView2をアプリケーションに組み込む
    ①デザイン画面(Form1.cs)を開き、ツールボックスから「WebView2」コントロールを選びフォームに貼り付け、WebView2の「Dock」プロパティを「None」から「」Fillに変更。

    ②WebView2のCoreWebView2InitializationCompletedのイベントを作成

    ③以下のソースを貼り付ける。

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.IO;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Forms;
    
    namespace WindowsFormsApp1
    {
        public partial class Form1 : Form
        {
            private string WebView2Path = Path.Combine(Directory.GetCurrentDirectory(), "Microsoft.WebView2.FixedVersionRuntime.107.0.1418.52.x64");
    
            public Form1()
            {
                InitializeComponent();
                InitializeAsync();
            }
            async void InitializeAsync()
            {
                var webView2Environment = await Microsoft.Web.WebView2.Core.CoreWebView2Environment.CreateAsync(WebView2Path);
                await webView21.EnsureCoreWebView2Async(webView2Environment);
            }
            private void webView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
            {
                webView21.CoreWebView2.Navigate("https://www.osadasoft.com/");
            }
        }
    }
    
  4. ビルド
    構成を「Debug」から「Release」に変更し、[ビルド]>[ソリューションのビルド]メニューを実行。

  5. WebView2 ランタイムをダウンロード
    Microsoft Edge WebView2」にアクセスし、「修正済みバージョン」の「ダウンロード」。
    ダウンロードしたファイルのサイズは200MB近くと大きい。

  6. ファイルの解凍
    ダウンロードしたcabファイルを解凍。
    ※エクスプローラーからファイル展開するとダメらしいです。
    コマンド実行か、解凍ツールを使用してください。
    参考:Microsoft | 修正済みバージョンランタイム配布モードの詳細

    expand {path to the package} -F:* {path to the destination folder}

  7. 解凍したランタイムをアプリ用フォルダにコピー
    Releaseフォルダ配下に、解凍したファイル(フォルダ)をコピー。

  8. 実行
    これで準備完了。
    作成したアプリ(ここではWindowsFormsApp1.exe)を実行する。

    ↑WebView2を使ってWebサイトが表示された。

  9. 配布
    別PCに配布する場合は、この「Release」フォルダ配下のファイルを持っていく。

    ↑ファイルサイズは468MB。
    zipに圧縮しても200MBぐらい。
    ちょっとでかいなぁ。

  10. 別PCで実行
    試しにWindows10サンドボックスで実行。

    WebView2をインストールしていない環境でも、無事表示することができた。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


*