はじめに

Electronアプリを作成できたのですが、Windows用インストーラーの作成でてこずったので、手順を書きました。なお、一般公開用のアプリは想定していないので、証明書などについては省略しています。

環境

・MacOS Mojave10.14.2
・Node：v10.10.0
・npm：v6.9.0
・Electron：v5.0.1

インストーラー作成ツール

・electron-builder

最初はelectron-packagerを使ってパッケージを作ってインストーラーを作成していたのですが、どうもうまく動かない＆electron-builderの方が簡単らしいので、こちらを利用することにしました。

ファイル構成を変更

1.前回Electron+Express+Firebase Admin+BootStrap+BootStrapTemplateで管理アプリを作るで作成したプロジェクトフォルダの構成を若干変更します。

2.現在はこんな形になっているかと思います。

/Electron_Sample
├─ app.js
├─ bin
├─ main.js
├─ node_modules
├─ package-lock.json
├─ package.json
├─ public
├─ routes
└─ views

この第１階層にあるファイルをごっそり全部appに移し、buildフォルダを作成して、以下のように変更します。

/Electron_Sample
├─ app
│　├── app.js
│　├── bin
│　├── main.js
│　├── node_modules
│　├── package-lock.json
│　├── package.json
│　├── public
│　├── routes
│　└── views
└─ build
　　├── icon.icns (macOS用のアイコン)
　　└── icon.ico (Windows用のアイコン)

package.jsonを修正

1.app内に移動したファイルの中からpackage.jsonを開いて、dependencies内にある「electron」をdevDependenciesに移動します。(devDependenciesがなければ追加します。)(これをやらないとインストーラ作成時に怒られます。)

package.json

{
  "name": "electronexpress-winstaller",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "electron": "^5.0.1",←ここの部分
    "gentelella": "^1.4.0",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "main": "main.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

以下のdevDependenciesを追加します。

"devDependencies": {
    "electron": "^5.0.1"
  },

出来上がりはこれです。

{
  "name": "electronexpress-winstaller",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "gentelella": "^1.4.0",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "main": "main.js",
  "devDependencies": {//追記部分
    "electron": "^5.0.1"//追記部分
  },//追記部分
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

electron-builderをインストール

1./Electron_Sampleに戻って、以下のコマンドでelectron-builderをインストールします。

$npm i electron-builder --save

2.同じディレクトリにbuild-mac.jsとbuild-win.jsを作成して、以下のコードをこぴぺします。appIdは任意でお願いします。
また、アプリ名を別名もしくは日本語などにしたい場合は、configにproductNameを追加します。

build-mac.js

'use strict';

const builder = require('electron-builder');
const fs = require('fs');
const packagejson = JSON.parse(fs.readFileSync('./app/package.json', 'utf8'));

builder.build({
    platform: 'mac',
    config: {
        'appId': `com.example.${packagejson.name}`,
        'productName': 'サンプルアプリ',
        'mac': {
            'target': 'dmg',
        },
    },
});

build-win.js

'use strict';

const builder = require('electron-builder');
const fs = require('fs');
const packagejson = JSON.parse(fs.readFileSync('./app/package.json', 'utf8'));

builder.build({
    platform: 'win',
    config: {
        'appId': `com.example.${packagejson.name}`,
        'productName': 'サンプルアプリ',
        'win': {
            'target': {
                'target': 'nsis',
                'arch': [
                    'x64',
                    'ia32',
                ]
            }
        },
    },
});

3.targetをzipなどにできるようですが、Mac版はdmg、Win版はnsisでいいと思います。
nsisにした場合、デスクトップショートカットを自動で作成してくれます。

4.アイコンを.icoと.icnsを256x256で作成し、buildフォルダに格納しておきます。

インストーラー作成

1.以下のコマンドを実行するとdistフォルダが作成され、その中にMac版が作成(.dmgで作成される)されます。

node build-mac

2.以下のコマンドを実行するとMac版同様にdistフォルダにWin版が作成(setup.exeが作成される)されます。

node build-win

(参考サイト)
・electron-builderでElectronアプリのビルド
・Electronで作成したアプリから、WindowsやmacOS向けのインストーラを作成する最新方法
・Electronでアプリビルドまでのフロー

以上

ElectronアプリのWindoswインストーラーをMacで作成