Edited at

ElectronでWebviewの簡易ブラウザをつくってみたメモ

More than 3 years have passed since last update.

Electronの基本的な挙動が知りたかったので、HTML/CSS/JavaScriptを使ってElectronで簡易ブラウザをつくってみました。


1. 制作物

image


  • URLを入力するとWebviewでロードしてくれる


    • ただしボタンを押さないとロードしてくれないしょぼい仕様!!



  • Open Dev Toolを押すと、Webview内のDeveloper Toolが開く


セットアップ

npm installの仕組みとかnpm initしてプロジェクトをつくるができる方であれば

セットアップは3分ぐらいで終わると思います。簡単!!

参考 : ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】


ファイル構成

Ligさんのサンプルコードを改造する形で3ファイルでつくりました。

- package.json

- index.js
- index.html
- style.css


index.js

var app = require('app');

var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function () {
//if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function () {
// ブラウザ(Chromium)の起動, 初期画面のロード
mainWindow = new BrowserWindow({
width: 1000,
height: 600
});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
});


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>DemoApp</title>
<meta name="description" content="">
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
<div id="menu-bar">
<input type="text" id="url" value="http://electron.atom.io/"></input>
<button onclick="load();">Load</button>
<button onclick="opendev();">Open Dev Tool</button>
</div>
<div id="webview_wrapper">
</div>
</body>
<script>
"use strict";
function load(){
// reset_webview_wrapper
var webview_wrapper = document.getElementById("webview_wrapper");
webview_wrapper.removeChild(webview_wrapper.lastChild);

// get url
var url = document.getElementById("url").value;

// create_new_webview_instanse
var newWebview = document.createElement("webview");
newWebview.id = "foo";
newWebview.setAttribute("src",url);
// append new_webview
webview_wrapper.appendChild(newWebview);
}
function opendev(){
var webview = document.getElementById("foo");
webview.openDevTools();
}
</script>
</html>



style.css

html{

width:100%;
height:100%;
}
body{
margin:0;padding:0;
height:100%;
}

#menu-bar{
width:100%;
padding:5px;
max-height:30px;
background-color:#EFF0EE;
color:#959595;
display:block;
white-space: nowrap;
}
#menu-bar input{
width:80%;
min-height:20px;
font-size:14px;
}
#menu-bar button{
font-size:14px;
min-height:20px;
}
#webview_wrapper{
height:100%;
}



2. メモ


1. アプリケーションのWindow表示

アプリケーションのWindow操作は非常に簡単です。

index.js内を1~2行変えるだけでやりたいことができます。


URLを取得する

index.js内で、mainWindowの読み込み先をファイルではなくURLにすると、指定されたURLを読み込むアプリケーションになります。


urlを取得する

mainWindow.loadUrl('http://electron.atom.io/'); 



Windowサイズを変える

縦長アプリケーションをつくる際にはこんな感じ。


サイズを変える

mainWindow = new BrowserWindow({width: 300,height: 1200});


image


frameをなくす

frameをなくしたい場合はこんな感じで。

※ただ、frameをなくすとWindowの移動ができなくなります。


アプリケーションのframeless

mainWindow = new BrowserWindow({width: 1000,height: 600,flame: false});


image


透過


アプリケーションの透過

mainWindow = new BrowserWindow({width: 1000,height: 600,transparent: true});


image


他に利用できそうなもの


中央寄せ

mainWindow = new BrowserWindow({width: 1000,height: 600,center: true});



leftとtopからの場所指定

mainWindow = new BrowserWindow({width: 1000,height: 600, x: 0, y: 0});

//right,bottomは標準ではできなさそう


アイコンクリック等で表示させるため起動時に表示しない

mainWindow = new BrowserWindow({width: 1000,height: 600, show: false});



常に全てのWindowの上位に来るようにする

mainWindow = new BrowserWindow({width: 1000,height: 600,"always-on-top": true

});


他のアプリケーション操作をさせないkioskモード

mainWindow = new BrowserWindow({width: 1000,height: 600,kiosk: true

});


2. MenuBar

僕はアプリケーションを利用するときにメニューよりもMenuBarをよく利用するので、MenuBarを作ろうと思いました。MenuBarはhtmlで作ります。

image

ElectronのsiteのdocumentaionではBrowserActionのsetMenuというらしきものがあるので、メニューバーも簡単につくれるのかなと思ったら、エラーが起こりました。調べてみると、githubでは「Linux Windows」と書かれているという。。。

Electron Website

image

Github Repo

image

ちなみにMenuBarはChromeに似せるために、サイズと色を調べて

height:30px; ※厳密には28~29あたり

padding-top:5px;
padding-bottom:5px;
background-color:#EFF0EE;

という感じで実装しました。


3.Webviewタグ

起動時にURLをロードする形ではなく、URLを入力したら毎回レンダリングする形にしたかったので、Webviewタグを利用しました。Webviewタグについては、Real World Electron Development - Qiitaでも記載がありますがChromeのWebviewタグを利用しているため、ほぼ一緒です。Documentationの中身もほぼ一緒でした。

Electronはアプリケーション上でショートカットコマンドを利用すればDevToolを利用できます。MacUserの場合は Cmd + Opt + iで開くことがですかね。

image

Webviewタグのobject内をinspectしたい場合は、別途DevToolを開くためのスクリプトを用意してあげる必要があります。


index.html内

var webview = document.getElementById("Webviewタグを参照");

webview.openDevTools();

とすると、webviewのobjectを対象にしたDevToolを開くことができます。

image

webviewのオブジェクトで簡易なスクリプトを実行する際には


index.html内

webview.executeJavaScript("document.write('JavaScriptをWebview内で実行することができます。')");


といった形でJavaScriptも実行することができます。

ちなみに簡易ブラウザをさらに拡張しようとして、Webview内のDomを取得してアプリケーション上で表示するというDevToolのInspectorを独自で実装してみようと思ったんですが、messageのやり取り等は経験がないことから別の機会にすることにしました。


4.外部ライブラリの導入

Electronはnodeを利用しているので、nodeのライブラリであれば何でも利用できます。commonJsでrequireする形ではない形で簡易的にjqueryやd3.jsを導入したい場合は、以下のことに気をつける必要があるみたいでした。

ElectronでjQueryがundefinedになる - Qiita


5.参考資料