Electron - インストーラ

概要

Electronには、electron-builderと呼ばれるWindowsインストーラの作成ツールが用意されている。
このツールを使用して、開発したElectronソフトウェアを元に、Windows用のインストーラを作成することができる。

以下に示す公式Webサイトに情報が掲載されている。
electron-builder 公式情報 : https://www.npmjs.com/package/electron-builder

事前準備

• Electron
• NodeJS v1.12.0以降
• NSIS 2.46以降(Nullsoft Scriptable Install System)
  http://nsis.sourceforge.net/Download
• NSISのインストールディレクトリのパス(例: ~/InstallSoftware/NSIS)を環境変数Pathに追加する。

electron-packagerのインスール

npm install electron-packager -g

electron-builderのインストール

npm install electron-builder -g

ディレクトリ構成

以下の構成で、ディレクトリとファイルを作成する。
適切な場所にディレクトリが存在しない場合、コマンド実行時にエラーとなる。

/app/   (Electron アプリ)
|-- package.json
|-- main.js
|-- index.html
/assets/ (アイコンファイル)
|-- /osx/
   |-- mount.icns
|-- /win/
   |-- icon.ico
/dist/ (パッケージングされたファイルを出力)
|-- /osx/
|-- /win/
/installer/ (dist を元に作成されたインストーラが出力)
|-- /osx/
|-- /win/

設定ファイルの編集と作成

pachage.jsonファイルとpackager.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ファイル

{
   "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"
   },
   "linux" :
   {
      "icon": "build/icons",
      "target":
      [
         "deb",
         "rpm"
      ],
      "category": "Utility"
   }
}

インストーラの作成

インストーラを作成するため、以下のコマンドを実行する。

npm run pack:win

コマンドが正常に実行されると、/installer/winディレクトリに以下の名称でインストーラが作成される。

hello-world Setup.exe

インストーラの確認

インストーラを実行して、インストーラが正常に起動するか確認する。

注意点

• 作成されるインストーラは英語版である。
• package.jsonファイルにて設定するname("name": "hello-world")とtitle("title" : "hello-world")が一致していない場合、
  インストール後、インストーラからソフトウェアが起動しない。
  また、ショートカットも自動で作成されない。