Electron には electron-builder と呼ばれる Windows インストーラの作成ツールが用意されています。このツールを使用して、開発した Electron アプリを元に、Windows 用のインストーラを作成することが可能です。MacOS用のインストーラもできるようですが、まだ試せていません。
公式サイトに情報が掲載されておりますが、実際に使用してみるとハマりどころが多く見受けられたので順に説明いたします。
electron-builder 公式情報
https://www.npmjs.com/package/electron-builder
事前準備
– Electron をインストールします。(インストール方法：Electron で実現するクロスプラットフォームなデスクトップアプリ開発)
– Node v0.12.0 以上であることを確認します。(それより下のバージョンではエラーが発生し、正常に作成できませんでした。)
– NSIS(Nullsoft Scriptable Install System) 2.46 をインストールします。
http://nsis.sourceforge.net/Download
– NSIS のコマンドのフォルダのパス(C:\Program Files (x86)\NSIS\)を、環境変数の Path に追加します。
1. electron-packager をインスールします。
npm install electron-packager -g
2. electron-builder をインストールします。
npm install electron-builder -g
3. 以下の構成でフォルダ、ファイルを作成します。適切なフォルダがないとコマンド実行時にエラーとなります。
/app/ (Electron アプリ)
|-- package.json
|-- main.js
|-- index.html
/assets/ (アイコンファイル)
|-- /osx/
|-- mount.icns
|-- /win/
|-- icon.ico
/dist/ (パッケージングされたファイルを出力)
|-- /osx/
|-- /win/
/installer/ (dist を元に作成されたインストーラが出力)
|-- /osx/
|-- /win/
package.json
インストーラを作成するためのコマンドを定義します。アプリ側の package.json とは異なるファイルです。
{
"name": "hello-world",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" exit 1",
"dev": "electron ./irohanote",
"clean": "del .\\dist",
"clean:osx": "del .\\dist\\osx",
"clean:win": "del .\\dist\\win",
"build": "npm run clean npm run build:osx npm run build:win",
"build:osx": "npm run clean:osx electron-packager ./app \"hello-world\" --out=dist/osx --platform=darwin --arch=x64 --version=0.25.3 --icon=assets/osx/loopline.icns",
"build:win": "npm run clean:win electron-packager ./app \"hello-world\" --out=dist/win --platform=win32 --arch=ia32 --version=0.25.3 --icon=assets/win/icon.ico",
"pack": "npm run pack:osx npm run pack:win",
"pack:osx": "npm run build:osx electron-builder \"dist/osx/hello-world.app\" --platform=osx --out=\"installer/osx\" --config=packager.json",
"pack:win": "npm run build:win electron-builder \"dist/win/hello-world-win32-ia32\" --platform=win --out=\"installer/win\" --config=packager.json"
},
"author": "",
"license": "BSD",
"dependencies": {
"grunt": "~0.4.2",
"electron-packager": "^4.0.2",
"electron-prebuilt": "^0.25.2",
"electron-builder": "^2.0.0"
}
}
packager.json
インストーラの設定ファイル。package.json と名称が似ていますが、異なるファイルです。
{
"osx" : {
"title": "hello-world",
"background": "assets/osx/installer.png",
"icon": "assets/osx/mount.icns",
"icon-size": 80,
"contents": [
{ "x": 438, "y": 344, "type": "link", "path": "/Applications" },
{ "x": 192, "y": 344, "type": "file" }
]
},
"win" : {
"title" : "hello-world",
"icon" : "assets/win/icon.ico"
}
}
4. 以下のコマンドでインストーラの作成を行います。
npm run pack:win
コマンドが無事に完了すると /installer/win/ フォルダに以下の名称でインストーラが作成されます。
hello-world Setup.exe
5. ダブルクリックするとインストーラが起動します。
インストール開始画面
インストール終了画面
気づいたこと
– 現状作成されるインストーラは英語版となります。
– package.json で設定されている name (“name”: “hello-world”)と、title (“title” : “hello-world”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。