Electron でクロスプラットフォームのアプリケーションを作成する

はじめに

Electron を使用し、Hello World を表示するだけのクロスプラットフォームデスクトップアプリを作成します。

注意事項

パソコンに node.js がインストールされている必要があります。

環境

OS : Windows 7 Pro 64bit
その他 : node.js 7.4.0, Electron 1.4.15, electron-packager 8.5.1

Electron とは

Electron とは、HTML, CSS, Javascript を使用して、クロスプラットフォームのデスクトップアプリを作成するための、オープンソースのライブラリです。

macOS : 64 ビットのバイナリのみ用意されています。サポートされている macOS の最小バージョンは macOS 10.9 です。
Windows : Windows7 以降サポートされています。ia32(x86) と x64(amd64) は両方バイナリが用意されていますが、ARM はサポートされていません。
Linux : Electron の ia32(i686) と x64(amd64) バイナリは Ubuntu 12.04 で構築されています。

Electronのインストール

package.json の作成

package.json を作成します。

> npm init

package.json に含まれる main フィールドに書いたファイルが、アプリケーションのスタートアップスクリプトになります。

package.json
{
  ...
  "main": "index.js",
  ...
}

Electron のインストール

Electron をローカルにインストールします。

> npm install --save-dev electron

Electron をグローバルにインストールする場合は、以下のコマンドを入力します。

> npm install -g electron

Hello World アプリの作成

Hello World を表示するだけのアプリケーションを作成します。

フォルダ構成

フォルダ構成を以下のようにしておきます。Electron は package.json の main フィールドに書かれているファイルをロードします。 main フィールドがない場合は index.js をロードします。

root
  ┣ node_modules
  ┣ index.html
  ┣ index.js
  ┗ package.json

index.js ファイルの作成

index.js ファイルを作成し、中身を以下のように編集します。

index.js
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

// メインウィンドウ用
let win;

function createWindow() {
    // ウィンドウの作成
    win = new BrowserWindow({width: 800, height: 600});

    // index.htmlファイルを読み込む
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));

    // デベロッパーツールを表示する
    win.webContents.openDevTools();

    // ウィンドウが閉じたときは開放する
    win.on('closed', () => {
        win = null
    });
}

// Electronの初期化完了後のready状態でcreateWindowを呼び出す
app.on('ready', createWindow);

// すべてのウィンドウが閉じられた場合の処理
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// ウィンドウがアクティブになったときの処理
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

index.html ファイルの作成

index.html ファイルを作成します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

アプリケーションの起動

以下のコマンドを入力してアプリケーションを起動します。

> .\node_modules\.bin\electron .

Electron をグローバルにインストールしている場合は、以下のコマンドで起動できます。

> electron .

アプリケーションのパッケージング

各プラットフォームで実行できるファイルを作成します。

electron-packager のインストール

electron-packager をインストールします。

> npm install --save-dev electron-packager

コマンドラインでの作成

コマンドラインから作成する場合は以下のコマンドを入力します。

> .\node_modules\.bin\electron-packager .

引数になにも指定がない場合は、実行環境のプラットフォーム用の実行ファイルが作成されます。