webview2で専用ブラウザーを作ってみよう! 一回目

WebBrowserコントロールの後継がWebview2になります。
ご紹介するアプリ作成方法はインストラーからパッケージを導入する方法です。アプリ専用のWebView2を利用する方法になるため、Systemに依存しないことで安定して動くと思います。

 

webview2で専用ブラウザーを作ってみよう! 二回目

 

Webview2のランタイムをアプリに組み込むためファイルは大きくなります。230M バイトくらいのボリュームです。
https://developer.microsoft.com/ja-jp/microsoft-edge/webview2/

 

パッケージタイプは「修正済みバージョン」をダウンロードします。
バージョンは最新のものをアーキテクチャは環境に合わせます。
タブレットはarm64すし32ビットはx86ですね!

今回はX86で問題は無いと思います。
(64ビットバージョンもOKです。)

ダウンロードしてRAR等で解凍しましょう。バージョンの部分は不要なので次のように短くします。

 

新規でプロジェクトを作成します。
Windowsフォームプロジェクトの作成

 

 

この状態から始めますね!
先ほどダウンロードしたMicrosoft.WebView2.FixedVersionRuntimeのパッケージを導入します。NuGetパッケージの管理から導入します。

 

 

検索からWebview2を検索してインストールします。

 

 

導入すると次のようになりましたか?

 

 

フォームデザイナーを開いてツールボックスからWebview2をドロップします。

 

 

ラベルのようなものが画面に張り付きましたね!

 

 

このコントロールを画面いっぱいに広げるためにDockの設定でFillを選択します。次のように画面いっぱいに広がりましたね!

 

 

次にMicrosoft.WebView2.FixedVersionRuntimeのパッケージを組み込みましょう!
フォルダーをドラッグ&ドロップでプロジェクトのtestにドラッグする感じで組み込みます。

 

 

次にめんどくさいのですが、このランタイムをコンテンツとして取り組むために次のようにファイルを選択して出力ディレクトリーに「新しい場合はコピーする」に設定を変更します。ファイルの取りこぼしがないようにビルドして出力先にランタイムがコピーされるか確認しましょう

 

 

どんどん変更しましょう!

 

 

次のようにファイル情報をそれぞれ開いてファイルの数を確認しましょう!

 

次回「webview2で専用ブラウザーを作ってみよう! 二回目」では、Webview2を利用するためにはイニシャライズ(初期化)です。
ランタイムへの紐づけとインターネット初期ユーザーデータの保存場所の定義になります。