読者です 読者をやめる 読者になる 読者になる

マイブーム@技術と生活

仕事や生活に関わる技術的なことを記述します。

開発ツール Electron: 導入

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> 

 

作成したアプリケーションを実行する

 

(作成中)