Gtk3アプリ RiderとWebView

### Gtk3アプリ内でWebView利用したい

#### ~~GladeでWebViewガジェットが提供されていない問題~~
~~WebViewガジェットが提供されていないため、Gtk3の中で表示できない~~
Gtk2 Monoは提供されている。
Gtk3 C++でもWebKitが提供されている。

#### 追記 GladeでWebViewガジェットが提供されていた
端っこにありました。
<img width="400" alt="Screenshot from 2021-06-10 14-32-21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/5d4af929-5e03-7b97-ec92-58c61a759906.png">

追記
組み込み用のWebViewを利用するには
C++で書かれたWebViewライブラリをC#用にバインディングするライブラリが必要です。

#### Seleniumを利用する
Seleniumを利用し外部ブラウザとして利用する。
Gtk3からChromeDriverやJavaScriptで制御する
<img width="450" alt="Screenshot from 2021-06-09 20-37-34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2c3efe55-646e-a54c-a67b-2c216c405445.png">

##### HTMLを表示させる
ローカルWebサーバをインストールしHTMLを表示させる

```test.html
<!DOCTYPE html>
<html lang="en">
<head>![Screenshot from 2021-06-10 14-32-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/47e2bb09-0184-cd8b-7a73-a91b65f5d94f.png)

    <meta charset="UTF-8">
    <script type="text/javascript" src="./test.js"></script>
    <title></title>
</head>
<body>
<input type="text" id="counter" value="0"></input>
</body>
</html>
```

Inputフィールドに数字をカウントするJavaScriptプログラム

``` test.js
function _count(num) {
    console.log("ele");
    var ele = document.getElementById("counter");
    var val = ele.value;
    var addNum = Number(val) + num;
    ele.value = addNum.toString();
}
```

#### Gtk3アプリC#からJavaScritpを実行
Gtk.Buttonから押してJavaScritpを実行しカウントする
ChromeDriverを使ってC#から走査できるが、オープンソースJsプログラムの利用を想定しているためこのようにした

##### ChromeOptionsの設定

| 内容 | 引数 |
|:-----------|------------|
| デバッグツールを表示させる　       | --auto-open-devtools-for-tabs        |
| Windowのサイズを指定する       | --window-size=600,480|

###### 非同期状態で待受できるようにする

```
Install-Package Selenium.Support
```

```cs
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(5));
```

```MainWindow+Btn.cs
using System;
using Gtk;
using UI = Gtk.Builder.ObjectAttribute;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support.UI;

namespace webViewGtkApplication2
{
    partial class MainWindow
    {
		private void on_MainWindow_upBtn_Clicked(object sender , EventArgs e){
		    driver.ExecuteScript("_count(1);");
		}
	    
		private void on_MainWindow_downBtn_Clicked(object sender , EventArgs e){
			driver.ExecuteScript("_count(-1);");
		}
		
		private void on_MainWindow_launchBtn_Clicked(object sender , EventArgs e){
			_mkChromnimu();
		}

		private ChromeDriver driver;
		private void _mkChromnimu()
		{
			ChromeOptions op = new ChromeOptions();
			
			op.AddArgument("--auto-open-devtools-for-tabs");
			op.AddArgument("--window-size=600,480");

			driver = new ChromeDriver("/usr/bin/",op);
			driver.Navigate().GoToUrl("http://localhost/s/test.html");

			WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(5));
		}
    }
}
```

#### Riderは使いやすい
Riderを使うと一つの開発環境でHTML、JavaScript、TypeScript、C#、Gladeファイルの編集でき、
それぞれの実行環境も作れ実行できるのでとても便利です。
<img width="300" alt="Screenshot from 2021-06-09 21-18-15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/c5cbf052-86bd-02e0-bc4b-01f81be00a94.png">

追記
WebViewのBindingライブラリーを作ってくれた人がいました

https://github.com/webview/webview_csharp

[Gtk3アプリ ダイアログを利用する](https://qiita.com/tana_/items/7c0c09f20bf21c9bccec)に続く