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

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

ダウンロード等は→**[GitHubリポジトリ](https://github.com/tomomi0115/AdsenseViewer)**

# ソフトについて
## 動機
なぜこんな一見いらなそうなソフトを作ったのかと言うと分かる人はわかるアドセンスの問題として**管理画面が面倒くさい**って言うことが挙げられます。
別に見にくいとかじゃないんです。**Adsenseにアクセスする際複数アカウントにログインしてたら入れない**っていう問題なんです…
ブラウザで複数アカウントでログインした状態でAdsense管理画面にアクセスしようとすると以下の警告が。
![rapture_20210316012452.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/8bd589e9-7af4-8af6-ecee-4a87335cd851.png)
このような問題があり、いちいちシークレットモードでログインしているんです。ですが最近とうとう苛ついてなんか解決法ないかなと思ってました。
とはいへAdsenseにログインするためだけに別のブラウザにインストールするのも嫌だなと思い、**じゃぁC#で作ったろ**ってことになたのです。
以外と30分でできたので良かったと思います。

アナリティクスと連結すればええやんって言えばそれまでなんですが私のメインとアドセンスのアカウントが分かれてるんでそういう訳にはいかないんですよ。
また、スマホだと専用アプリがあるのでこのような問題は発生しません。（もうサポート終了したんですけど一応まだ使えます。）
## 特徴
完全に他のブラウザとCookieやキャッシュ等の情報が乖離しているため**アカウントの使い分けができます。**
また、普通のブラウザ同様ログインセッションも維持されます。
Edgeベースなので右クリックメニューも豊富です。
![スクリーンショット 2021-03-16 014111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/feff741c-87ea-0208-04de-354148e7a686.png)

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

# 開発関連知識
ソフトを作るに当たって**.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ベース**ということで安定して動作することを知っていたのでこちらを使おうと思ったんですがいつの間にか**非推奨**になってました。そこでだいたいバッケージとして四番目があるらしいのでこれを使います。
![画像_2021-03-16_224027.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/47609a60-4f84-54db-a52d-f4d367df34ea.png) 
WebView2に簡単な実装や詳しい概要については下記公式のリファレンスガイドを見てみてください。
**[Windows フォームでの WebView2 の概要](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/gettingstarted/winforms)**

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

## 環境構築
.NET Framework 4.6以上でのみ動作します。
NuGetパッケージマネージャーでインストールするだけです。事前にC#で新しいWindowsフォームアプリケーションのプロジェクトを作ってください。
その前にMuGetの設定変更が必要です。パッケージマネージャー設定から、
![スクリーンショット 2021-03-16 010059.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/a0aba780-1505-1e15-05c5-39377f482a7c.png)
デフォルトで[パッケージの管理]がPackages.configにな
ってると思うので**PackageReferenceに変更**してください。これで変更するのは異常です。（変更しないとビルドエラーが起きるそうです）
![画像_2021-03-16_224437.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/59ed257e-ef36-8adb-6ef4-fe590d215317.png)
あとはNuGetからWebView2と検索して出てきたやつをインストールして終わりです。
![rapture_20210316010025.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/19fe8965-e7a1-ddd2-1284-dbccb0cd33ba.png)

## GUI作成
### 下準備
NuGetdeでパッケージをインストールしただけではまだ使えないのでツールボックスに追加します。
ツールボックスのエリアで右クリック→アイテムの選択をクリック。
![スクリーンショット 2021-03-16 010154.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/d18e8ac3-6a27-5883-8b9c-cf31df3405bf.png)
.NET Frameworkコンポーネントタブの**参照**をクリック。
![rapture_20210316225505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/fe76136d-6d44-5efd-4074-28528cce7d7e.png)
**Microsoft.Web.WebView2.WinForms.dll**を検索して追加します。
![rapture_20210316010302.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/56ab7288-62a2-2be4-57f9-2de8ab066e8e.png)
最後にWebView2を選択して完了です。
![画像_2021-03-16_225634.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/ea4c902d-29dc-b1ed-fbb3-447b94582576.png)
### 作成
やっとできます。GUIデザイナーでただ単にWebView2を貼り付けるだけですけど。
ツールボックスにWebView2があると思うのでフォームにD&Dして、
![rapture_20210316010320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/28967276-4ad0-4c05-12c0-208045142545.png)
ツールのプロパティのsource欄に表示させたいサイトのURL(URIですけど)を入力して終わりです。
### ウィンドウを追従させる
Form1.cs で、ウィンドウのサイズが変更された場合配置された状態を維持する定義をしておきます。

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

これでウィンドウサイズに応じてWebView2が追従してくれます。
[![Image from Gyazo](https://i.gyazo.com/84254075e59fd16a33ab9a3a55689524.gif)](https://gyazo.com/84254075e59fd16a33ab9a3a55689524)
他にもアドレスバーをつけたり戻る機能をつけたりできます。公式ガイドを見てください。

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

```c#: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)
        {

        }
    }
}
```

ちゃんと動作します。
![rapture_20210316012759.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/aed6cc83-c988-f54d-a892-dbb44f704cee.png)
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**
![rapture_20210316232916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513165/88e53ef6-9277-3c52-f23c-618ebab42297.png)
※WebView2ランタイムを組み込んだら上記作業は必要ないですけど、ファイルサイズが100MB超えるらしいのでやめました。
まぁ汎用的に使って欲しければランタイム入れてもいいかもしれませんね。
以上参考にしてみてください。