Electronで作成したアプリから、WindowsやmacOS向けのインストーラを作成する最新方法

Electronで作成したアプリからインストーラを作成して、exeやdmg形式で配布する方法についてです。
色々とググってパッケージングの方法を調べてみるものの、いずれも electron-builder のバージョンが古く、最新のバージョンでのパッケージング方法が見当たらなかったので、まとめてみます。

※ 2017/05/15 (Mon) 追記: electron(v1.6.7) & electron-builder(v17.5.0) への対応を行いました。

まずは Electron のインストールからまとめます。

Node.js のインストール

Windows 10 Home

以下のURLからダウンロードしてインストール
https://nodejs.org

OS X El Capitan 10.11.6

$ brew install node

バージョンの確認

$ node -v
v7.2.0

$ npm -v
v3.10.9

Electronのインストール

$ npm install -g electron

$ electron -v
v1.6.7

electron-prebuilt は廃止予定でインストールする必要はありません。

サンプルプログラムの作成

一旦、electronのサンプルプログラムを作ります。公式ドキュメントの Quick Start に従って作ってみます。

作り終えると、以下のファイル構成になります。

/path/to/BuilderSample
├─ app
│　├── index.html (アプリのメインページ)
│　├── main.js (アプリのメインコード)
│　└── package.json (アプリの設定)
├─ build
│　├── icon.icns (macOS用のアイコン)
│　└── icon.ico (Windows用のアイコン)
├─ node_modules (アプリ自体には含めないが、パッケージングに必要なモジュール群)
└─ package.json (アプリ自体には含めないが、パッケージングに必要な設定)

ソースコードはGitHubにて公開しています。
Electron-SampleCodes/BuilderSample - GitHub

プロジェクトフォルダと必要なファイルの作成

$ mkdir -p /path/to/BuilderSample/app
$ cd /path/to/BuilderSample/app
$ npm init

name: (app) app-sample
version: (1.0.0)
description: It's a sample.
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: UQ Times <uqtimes@gmail.com>
license: (MIT)

main.js の作成

$ vim main.js

index.html の作成

$ vim index.html

作成したサンプルの実行

$ electron .

パッケージ作成の準備

「electron」と「electron-builder」のdev版が必要なので、ローカルにインストールします。
「electron-packager」は無くてもパッケージングは出来るので今回はインストールしません。
インストールする場所ですが、配布するアプリケーションに含める必要はないため、appの親ディレクトリにインストールします。

$ cd /path/to/BuilderSample

electron dev版のインストール

$ nam install electron --save-dev

$ ./node_modules/.bin/electron -v
v1.6.7

electron-builder dev版のインストール

$ npm install electron-builder --save-dev

$ ./node_modules/.bin/build --version
17.5.0

Windows で Windows用のパッケージング

「NSIS」のインストールが必要となります。
http://nsis.sourceforge.net/Download
試している時点でのバージョンは、「NSIS 3.0 Released July 24, 2016」です。

インストール後、環境変数のPathに「C:\Program Files (x86)\NSIS」を追加します。　

macOS で Windows用のパッケージング

wineのインストールが必要です。

$ brew install wine

$ wine --version
wine-1.8.5

パッケージング用の package.json の作成

$ cd /path/to/BuilderSample/
$ vim package.json
{
  "name": "builder-sample",
  "version": "1.0.0",
  "author": "UQ Times <uqtimes@gmail.com>",
  "license": "MIT",
  "description": "",
  "main": "main.js",
  "build": {
    "appId": "jp.blogspot.uqtimes.samples.electron",
    "directories": {
      "app": "app"
    },
    "artifactName": "${productName}_installer.${ext}",
    "mac": {
      "category": "public.app-category.developer-tools",
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "npm run pack:mac && npm run pack:win",
    "pack:mac": "./node_modules/.bin/build --mac --x64",
    "pack:win": "./node_modules/.bin/build --win --x64"
  },
  "devDependencies": {
    "electron": "^1.6.7",
    "electron-builder": "^17.5.0"
  }
}

必要な箇所しか記載していないため、他のオプションについては electron-builder の Options から参照できます。

$ ./npm_modules/.bin/build --mac --x64
(もしくは)
$ npm run pack:mac

dist/mac 以下にパッケージングされたファイルが出力されています。

$ ./npm_modules/.bin/build --win --x64
(もしくは)
$ npm run pack:win

dist 以下にパッケージングされたファイルが出力されています。

それぞれ、"app"フォルダの中にあるElectronアプリケーションをビルドしてくれます。もし"app"というフォルダ名出ない場合には、package.json に directories の項目を追加することでビルド対象を変更することができます。

アプリのアイコン

デフォルトでは "build"以下にアイコンファイルを置いておくことで自動的にアイコンが設定されます。

アプリのアイコンは IconArchive などから探して使うことが出来ます。

Read More