C#のWebView2をデモアプリを作って試してみた。

弱視なのでQiitaの投稿画面の文字を大きくしてほしい系オタクです。
本題。Adsenseの管理画面を見るだけのソフトをWenView2を使い作ったのでご紹介します。

ダウンロード等は→**GitHubリポジトリ**

ソフトについて

動機

なぜこんな一見いらなそうなソフトを作ったのかと言うと分かる人はわかるアドセンスの問題として管理画面が面倒くさいって言うことが挙げられます。
別に見にくいとかじゃないんです。Adsenseにアクセスする際複数アカウントにログインしてたら入れないっていう問題なんです…
ブラウザで複数アカウントでログインした状態でAdsense管理画面にアクセスしようとすると以下の警告が。

このような問題があり、いちいちシークレットモードでログインしているんです。ですが最近とうとう苛ついてなんか解決法ないかなと思ってました。
とはいへAdsenseにログインするためだけに別のブラウザにインストールするのも嫌だなと思い、じゃぁC#で作ったろってことになたのです。
以外と30分でできたので良かったと思います。

アナリティクスと連結すればええやんって言えばそれまでなんですが私のメインとアドセンスのアカウントが分かれてるんでそういう訳にはいかないんですよ。
また、スマホだと専用アプリがあるのでこのような問題は発生しません。（もうサポート終了したんですけど一応まだ使えます。）

特徴

完全に他のブラウザとCookieやキャッシュ等の情報が乖離しているためアカウントの使い分けができます。
また、普通のブラウザ同様ログインセッションも維持されます。
Edgeベースなので右クリックメニューも豊富です。

まぁそれくらいなんですけどそれでも個人的にはありがたいんです…

開発関連知識

ソフトを作るに当たって**.NETアプリケーションで如何にWebページを表示するか**が課題です。
今現在Webページをソフト内に埋め込む(?)際には以下の方法があります。

• 標準機能のWebBrowserコントロール
• Chromiumブラウザコンポーネント(CefSharp)
• EdgeベースのWebViewコントロール(Microsoft.Toolkit.Win32.UI.Controls) 非推奨になりました。
• WebView2コントロール(Microsoft Chromium Edgeのコンポーネント)

一番上の標準のやつだとIEベースなのでまともにJSも動かないしHTMLの非対応が多すぎるため無理です。
二番目のCefSharpはChromiumをアプリケーションに組み込むためのフレームワークです。
※CefはChromium Embedded Frameworkの略で、Chromiumをアプリケーションに組み込むためのやつでCefSharpはCefのC#版です。
2,3年前にVB.netで実装したことがあるんですけど動作ファイル一式を組み込む必要があり無駄にファイルがでかくなったので使いません。
三番目のやつはMicrosoft Edgeベースということで安定して動作することを知っていたのでこちらを使おうと思ったんですがいつの間にか非推奨になってました。そこでだいたいバッケージとして四番目があるらしいのでこれを使います。

WebView2に簡単な実装や詳しい概要については下記公式のリファレンスガイドを見てみてください。
Windows フォームでの WebView2 の概要

実装について

実装と言っても単純にVisualStudioでGUI作ってほんのちょっと変更するだけなので大したことはないです。
プログラミングと名乗っていいレベルかすら怪しいですが折角書いたので一応を共有したいと思います。

環境構築

.NET Framework 4.6以上でのみ動作します。
NuGetパッケージマネージャーでインストールするだけです。事前にC#で新しいWindowsフォームアプリケーションのプロジェクトを作ってください。
その前にMuGetの設定変更が必要です。パッケージマネージャー設定から、

デフォルトで[パッケージの管理]がPackages.configにな
ってると思うのでPackageReferenceに変更してください。これで変更するのは異常です。（変更しないとビルドエラーが起きるそうです）

あとはNuGetからWebView2と検索して出てきたやつをインストールして終わりです。

GUI作成

下準備

NuGetdeでパッケージをインストールしただけではまだ使えないのでツールボックスに追加します。
ツールボックスのエリアで右クリック→アイテムの選択をクリック。

.NET Frameworkコンポーネントタブの参照をクリック。

Microsoft.Web.WebView2.WinForms.dllを検索して追加します。

最後にWebView2を選択して完了です。

作成

やっとできます。GUIデザイナーでただ単にWebView2を貼り付けるだけですけど。
ツールボックスにWebView2があると思うのでフォームにD&Dして、

ツールのプロパティのsource欄に表示させたいサイトのURL(URIですけど)を入力して終わりです。

ウィンドウを追従させる

Form1.cs で、ウィンドウのサイズが変更された場合配置された状態を維持する定義をしておきます。

InitializeComponent();
this.Resize += new System.EventHandler(this.Form_Resize);

これでウィンドウサイズに応じてWebView2が追従してくれます。

他にもアドレスバーをつけたり戻る機能をつけたりできます。公式ガイドを見てください。

実装例

以上でソフトはできます。簡単ですよね。
以下がForm1の実装例です。

Form1.cs

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 Adsense
{
    public partial class GoogleAdsenseViewer : Form
    {
        public GoogleAdsenseViewer()
        {
            InitializeComponent();
            this.Resize += new System.EventHandler(this.Form_Resize);
        }

        private void Form_Resize(object sender, EventArgs e)
        {
            webView21.Size = this.ClientSize - new System.Drawing.Size(webView21.Location);
        }

        private void webView21_Click(object sender, EventArgs e)
        {

        }
    }
}

ちゃんと動作します。

GitHubに上げてるので是非クローンして試してみてください。
https://github.com/tomomi0115/AdsenseViewer

最後に注意点(ハマったところ)

最後に注意。WebView2を動かすにはMicrosoft Edge (Chromium)非安定チャネル
公式生命によると以下の制約があります。

サポートされている OS (現在は Windows 10、Windows 8.1、Windows 7) にインストールされている、WebView2ランタイムまたはMicrosoft Edge (Chromium)非安定チャネル。
WebView チームは Canary チャネルの使用をお勧めします。最小要件バージョンは 82.0.488.0 です。

らしいです。。。どおりで他のPCをで動かなかったのか。と思いつつMS Edge Canaryをインストールすれば動きます。
以下のInsider Channelの配布ページからダウンロードとインストールしてください。
https://www.microsoftedgeinsider.com/ja-jp/download

※WebView2ランタイムを組み込んだら上記作業は必要ないですけど、ファイルサイズが100MB超えるらしいのでやめました。
まぁ汎用的に使って欲しければランタイム入れてもいいかもしれませんね。
以上参考にしてみてください。