Electron を使って、最もシンプルなMacアプリを開発するための手順です。
% electron -v v1.4.13
上記のようにバージョン番号が表示されれば、Electron はインストール済みです。Electron 自体のインストールが未完了の場合は、ElectronをMacにインストールする方法を参考にインストールして下さい。
Electronアプリケーション用のディレクトリを手動で、新規作成します。
% mkdir electron_sample % cd electron_sample
作成したアプリケーションディレクトリ配下で
npm init
コマンドを実行します。
コマンドを実行すると、package.json ファイルが生成されます。
% npm init -y Wrote to /Users/user/electron_sample/package.json: { "name": "electron_sample", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
アプリケーションのエントリポイント標準で「index.js」になっているので、main部分を「index.js」からElectron アプリ用の設定「main.js」に変更します。
{
"name": "electron_sample",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Electron の実行処理となる main.js を作成します。
main.js の内容は次のとおりです。
'use strict'; // Electronのモジュール const electron = require("electron"); // アプリケーションをコントロールするモジュール const app = electron.app; // ウィンドウを作成するモジュール const BrowserWindow = electron.BrowserWindow; // メインウィンドウはGCされないようにグローバル宣言 let mainWindow; // 全てのウィンドウが閉じたら終了 app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); // Electronの初期化完了後に実行 app.on('ready', function() { // メイン画面の表示。ウィンドウの幅、高さを指定できる mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); // ウィンドウが閉じられたらアプリも終了 mainWindow.on('closed', function() { mainWindow = null; }); });
アプリケーションの表示部分である index.html を作成します。
index.html の内容は次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body> <p>Hello World</p> </body> </html>
package.json, main.js, index.html の3つのファイルが作成できたら、実際にアプリケーションとして起動できます。アプリケーションとして実行するには、アプリケーションディレクトリではなく、その親ディレクトリからアプリケーションディレクトリを指定し実行します。
% pwd /Users/user/projects/electron_sample
現在のカレントディレクトリは上記なので、cd コマンドを使ってカレントディレクトリを変更します。その後、electron コマンドの後にアプリケーションディレクトリ名を指定して実行します。
% cd .. % electron electron_sample
すると、「Hello World」と出力されたアプリケーションが起動します。
アプリを終了するには、Control+C を入力します。
アプリケーションとして実行できることは確認できましたが、このままでは、Electron がインストールされていない他のPCでアプリケーションとして実行することはできません。
実行ファイルを生成するために、まず、アプリケーションをアーカイブします。
Electron で作成したアプリケーションをアーカイブ化するために、 asar をインストールします。
asar をインストールするには、 npm install コマンドを使います。
% npm install -g asar /usr/local/bin/asar -> /usr/local/lib/node_modules/asar/bin/asar.js + asar@2.0.1 added 21 packages from 9 contributors in 1.825s
asarコマンドの使い方は次のとおりです。
% asar pack アプリケーションディレクトリ 出力ファイル名.asar
上記の書式で、アーカイブ化したいアプリケーションのディレクトリと生成ファイル名を指定します。
% asar pack ./electron_sample ./electron_sample.asar
と実行すると、ディレクトリ内に electron_sample.asar ファイルが作成されます。
アーカイブ化したアプリを実行するには、electron コマンドの後に .asar ファイルを指定します。
% electron electron_sample.asar
上記のコマンドを入力すると、先程同様、「Hello World」と出力されたウィンドウが起動します。
Electron で作ったアプリを、どのような環境でも起動できる実行ファイルにするには、 electron-packager を使います。下記のコマンドを入力し、 electron-packager をインストールします。
% npm i electron-packager -g /usr/local/bin/electron-packager -> /usr/local/lib/node_modules/electron-packager/bin/electron-packager.js + electron-packager@14.0.6 added 116 packages from 67 contributors in 6.184s
electron-packager の使い方は次のとおりです。
% electron-packager アプリケーションディレクトリ アプリケーション名 --platform=プラットフォーム指定 --arch=アーキテクチャ指定 --version=バージョン指定
プラットフォーム指定 ･･･ all, linux, win32, darwin のいずれか。複数入れる場合はカンマ区切りで入力する。 アーキテクチャ指定 ･･･ all, ia32, x64 のいずれか。 バージョン指定 ･･･ Electronのバージョンを指定する。
MacOS 用の実行ファイルを作成するには、以下のコマンドを実行します。
% electron-packager ./electron_sample electron_sample --platform=darwin --arch=x64 --electronVersion=1.4.13 Packaging app for platform darwin x64 using electron v1.4.13 Wrote new app to /Users/user/projects/electron_sample-darwin-x64
インストーラー付きにするなら、 electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the boxも便利です。
上記の electron-packager コマンドを実行すると、しばらくした後、Packaging app〜 以下のメッセージが表示され、 electron_sample-darwin-x64 ディレクトリが作成されます。
ディレクトリ内には、以下の4つのファイルが入っています。
electron_sample.app LICENSE LICENSES.chromium.html version
.app が実行ファイルなので、これをダブルクリックするとアプリケーションが起動します。
この .app ファイル一式を配布することで、Electron をインストールしていない他のPCでも Electron 製のアプリが実行できるようになります。