Electron を使えば、標準的な JavaScript で、OS のコントロール API を使ったデスクトップアプリケーションが作れます。ウェブサーバーの代わりにデスクトップアプリケーションで構築した Node.js の実行環境の1つです。
Electron はユーザーインターフェイス（GUI）ライブラリを持つ JavaScript ではありません。代わりに、Electron は、ウェブページをGUIとして使います。JavaScript で制御する最小構成の Chromium ブラウザです。
主プロセス
Electron では、package.json の main スクリプトを実行するプロセスを主プロセスと呼びます。主プロセスで実行するスクリプトは、ウェブページを作り、GUI を表示します。
描画プロセス
Electron はウェブページを表示するために Chromium を使い、Chromium のマルチプロセス機能を利用します。Electron の各ウェブページは自身のプロセスで動作し、それらは描画プロセスと呼ばれます。
通常のブラウザでは、ウェブページはアクセスが制限された環境で動作しており、コンピュータのリソースへのアクセスは許可されていません。しかし、Electron では、ウェブページで、 io.js の API を使って OS の下層レベルの操作が行えます。
主プロセスと描画プロセスの違い
主プロセスは、BrowserWindow インスタンスを作り、ウェブページを表示します。各 BrowserWindow インスタンスは自身の描画プロセスでウェブページを表示します。BrowserWindow インスタンスが破棄されたとき、その描画プロセスも停止します。
主プロセスはすべてのウェブページとそれらの描画プロセスを操作できます。各描画プロセスは独立していて、自分の中で表示しているウェブページのみ操作できます。
ウェブページでは、GUI に関する OS のコントロール API を呼び出すことは許可されていません。ウェブページで OS の GUI を操作することは、大変危険で、容易にリソースをリークするためです。ウェブページで GUI の操作を行いたい場合は、主プロセスと通信する必要があります。
Electron では、主プロセスと描画プロセスの通信を行うために、IPC モジュールを提供します。また、RPC 形式の通信を行うリモートモジュールもあります。
最初の Electron アプリケーションを作成する
Electron アプリケーションは、通常、次のような構成です。
your-app/
├── package.json
├── main.js
└── index.html
package.json の形式は Node のモジュールと全く同じです。main 項目に指定されたスクリプトが、アプリケーションの起動スクリプトであり、主プロセスで実行されます。package.json の例は次のようになります。
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
main.js はウィンドウを作り、システムのイベントを処理します。main.js の例は次のようになります。
var app = require('app'); // アプリケーションの起動・終了を制御するモジュール
var BrowserWindow = require('browser-window'); // ブラウザを起動するモジュール
// サーバーに障害を報告する
require('crash-reporter').start();
// ウィンドウのグローバルな参照を保存する。そうでなければ、JavaScript が
// ガベージ・コレクション（GC）を実行したときに、ウィンドウが勝手に閉じてしまう
var mainWindow = null;
// すべてのウィンドウが閉じられたとき、アプリケーションを終了する
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
// Electron がすべての初期化処理を完了し、ブラウザウィンドウを作る準備ができたときに、
// 呼び出される
app.on('ready', function() {
// ブラウザウィンドウの作成
mainWindow = new BrowserWindow({width: 800, height: 600});
// アプリケーションで index.html を表示する
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// DevTools を開く
mainWindow.openDevTools();
// ウィンドウが閉じたときに呼び出される
mainWindow.on('closed', function() {
// ウィンドウの参照を削除する。マルチウィンドウのアプリケーションを作っている場合は、
// 通常、配列にウィンドウを格納しているので、
// ここで、それら要素を削除する
mainWindow = null;
});
});
最後に、index.html は、表示するウェブページです。
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
作成したアプリケーションを実行する
（作成中）
