Electronで最も簡単なMacアプリを作る方法

Electron を使って、最もシンプルなMacアプリを開発するための手順です。

公式ドキュメント


Writing Your First Electron App | Electron

Electron アプリを作るための手順

  1. Electron のインストール状況の確認
  2. アプリケーション用ディレクトリの作成
  3. package.json の作成
  4. main.js の作成
  5. index.html の作成
  6. Electron アプリケーションの実行確認
  7. アプリケーションのアーカイブ化
  8. アプリケーションの実行ファイル作成と配布方法

Electronインストール状況の確認

% electron -v
v1.4.13

上記のようにバージョン番号が表示されれば、Electron はインストール済みです。Electron 自体のインストールが未完了の場合は、ElectronをMacにインストールする方法を参考にインストールして下さい。

アプリケーション用ディレクトリの作成

Electronアプリケーション用のディレクトリを手動で、新規作成します。 

% mkdir electron_sample
% cd electron_sample

package.json の作成

作成したアプリケーションディレクトリ配下で 

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"
}

main.js の作成

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 を作成します。

index.html の内容は次のとおりです。 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

Electron アプリケーションの実行確認

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コマンドの使い方は次のとおりです。 

% asar pack アプリケーションディレクトリ 出力ファイル名.asar

上記の書式で、アーカイブ化したいアプリケーションのディレクトリと生成ファイル名を指定します。 

% asar pack ./electron_sample ./electron_sample.asar

と実行すると、ディレクトリ内に electron_sample.asar ファイルが作成されます。

アーカイブ化したアプリの実行方法

アーカイブ化したアプリを実行するには、electron コマンドの後に .asar ファイルを指定します。 

% electron electron_sample.asar

上記のコマンドを入力すると、先程同様、「Hello World」と出力されたウィンドウが起動します。

アプリケーションの実行ファイル作成と配布方法

electron-packager のインストール

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 の使い方は次のとおりです。 

%  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 製のアプリが実行できるようになります。

参考

,