0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Gtk3アプリ RiderとWebView

Last updated at Posted at 2021-06-09

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

GladeでWebViewガジェットが提供されていない問題

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

追記 GladeでWebViewガジェットが提供されていた

端っこにありました。
Screenshot from 2021-06-10 14-32-21.png

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

Seleniumを利用する

Seleniumを利用し外部ブラウザとして利用する。
Gtk3からChromeDriverやJavaScriptで制御する
Screenshot from 2021-06-09 20-37-34.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
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ファイルの編集でき、
それぞれの実行環境も作れ実行できるのでとても便利です。
Screenshot from 2021-06-09 21-18-15.png

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

Gtk3アプリ ダイアログを利用するに続く

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?