Electronとは
- GitHub.inc が開発
- HTML5 で OSX, Windows, Linux のデスクトップアプリを開発できる実行環境
- Atom の実行環境としても使われいて Atom Shell と呼ばれていた
- JS の実行エンジンとして Node.js、HTML5 の実行環境として Chromium を使用
- ビルドしたアプリには Chromium が内蔵されるので特別なインストールは不要。スタンドアローンアプリとして配布可。
Electron の採用事例
- Atom エディタ
- Visual Studio Code
- Slack の Windows 版
- Kobito の Windows 版
- Docker GUI
他の類似技術との比較
via 初めてのElectron！ HTML5でデスクトップアプリを作成しよう - ICS MEDIA
Electronの場合、エントリポイントがjsファイルなのでhtmlはなくてもOK
使用できる技術
- Node.js / npmライブラリ
- React や AngularJS などのフレームワーク
- Chromium の webview など
- Chrome Developer Tools
- ELectron が提供するモジュール郡やHTML5の独自拡張
- ローカルファイルやOSのAPIへのアクセス
webとネイティブのいいとこどり。
２つの内部プロセス
以下の２つのプロセスに実行される JS のプログラムを書く。
- メインプロセス
- 起動時に実行
- OS とのやりとりをするバックエンド処理
- レンダラプロセス
- メインプロセスから起動
- HTML/CSSによる描画やブラウザコンテキストのJSの実行
それぞれコンテキストが異なるので両者間で通信するには IPC(プロセス間通信) を行う必要あり。
install
npm install -g electron-prebuilt
electron -v
> v0.36.7
Hello World と表示する
package.json
{
"name": "hello-electron",
"name": "main.js"
}
main.js
var app = require('app');
var BrowserWIndow = require('browser-window');
var mainWindow = null;
app.on('window-all-closed', function(){
if(process.platform != 'darwin'){
app.quit();
}
});
app.on('ready', functin(){
mainWindow = new BrowserWindow(
{ width: 800, height: 600}
);
mainWindow.loadUrl(
'file://' + __dirname + '/index.html'
);
mainWindow.on('closed', function(){
mainWindow = null;
});
});
index.html
<html>
<head><title>Hello, World</title></head>
<body>
<h1>Hello, world</h1>
<ul>
<li>Node.js <script>document.write(process.version)</script></li>
<li>Electron <script>document.write(process.versions.electron)</script></li>
</ul>
</body>
</html>
実行
electron .
Markdown Viewer を作る
npm library
npm install markdown --save
npm install chokidar --save
main.js
さっきと同じ
index.html
<html>
<head><title>Markdown Viewer</title></head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</body>
</html>
app.js
var fs = require('fs');
var markdown = require('markdown').markdown;
var chokidar = require('chokidar');
var watcher = chokidar.watch('./README.md');
watcher.on('add', updateHTML);
watcher.on('change', updateHTML);
var container = document.getElementById('container');
function updateHTML(path, stats){
fs.readFile(path, 'utf8', function(err,content){
container.innerHTML = markdown.toHTML(content);
});
}
実行
clipboard 監視アプリ
- webviewタグ
- chromium の機能
- clipboardモジュール
- Electronが提供するモジュール
main.js
さっきと同じ
index.html
<html>
<head><title>Clipboard Monitor</title></head>
<body>
<div id="container"></div>
<webview id="webview"></webview>
<script src="app.js"></script>
</body>
</html>
app.js
var clipboard = require('clipboard');
var container = document.getElementById('container');
var webview = document.getElementById('webview');
var current = '';
setInterval(function(){
var url = clipboard.readText();
if(url.match(/^https?:\/\//) && current !== url){
container.innerText = current = url;
webview.setAttribute('src', url);
}
}, 500);
実行
トレイアプリ
main.js
var app = require('app');
var Menu = require('menu');
var Tray = require('tray');
var appIcon = null;
app.on('ready', function(){
appIcon = new Tray('./icon.jpg');
var contextMenu = Menu.buildFromTemplate([
{label: '晴', type:'radio'},
{label: '曇り', type:'radio'},
{label: '雨', type:'radio'},
{type:'separator'},
{
label: '終了',
accelerator: 'Command+Q',
click: function(){
app.quit();
}
}
]);
appIcon.setContextMenu(contextMenu);
});
app.dock.hide();
実行
アプリの配布
npm install -g --save electron-packager
// OS X, Windows向けにパッケージング、２回目以降は上書きで
electron-packager . helloApp --platform=darwin,win32 --arch=x64 --version=0.36.7 --overwrite
パラメータの詳細は公式のusageを
インストーラとしてdmgファイル化したい場合は electron-builder を使う
アプリのバージョンアップ
一度配布したアプリのバージョンアップを促すにはOS標準のautoUpdaterを利用すると良い（linuxは対象外）
- メインプロセスでautoUpdaterのAPIをコール
- サーバに置いたメタデータを読む
- バージョンが上がっていたら自分自身を書き換える
Mac App Storeで公開
バージョン0.34.0からMac App Storeでの配布が可能。 証明書の設定が必要であったり、使えないAPIがあったりと制限がある。
