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 フィールドに書いたファイルが、アプリケーションのスタートアップスクリプトになります。
{
...
"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 ファイルを作成し、中身を以下のように編集します。
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 ファイルを作成します。
<!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 .
引数になにも指定がない場合は、実行環境のプラットフォーム用の実行ファイルが作成されます。