Electron

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

More than 1 year has 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.参考資料