Electron で開発したアプリの Windowsインストーラの作成


Electron には electron-builder と呼ばれる Windows インストーラの作成ツールが用意されております。このツールを使用して、開発した Electron アプリを元に Windows インストーラを作成することが可能です。
公式サイトに情報が掲載されておりますが、実際に使用してみるとハマりどころが多く見受けられたので順に説明いたします。

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. ダブルクリックするとインストーラが起動します。

インストール開始画面
2015-08-26 16.33.16

インストール終了画面
2015-08-26 16.33.23

気づいたこと
– 現状作成されるインストーラは英語版となります。
– package.json で設定されている name (“name”: “hello-world”)と、title (“title” : “hello-world”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。

関連記事:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です