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

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

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

#インストーラー作成ツール
・[electron-builder](https://www.electron.build)

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

#ファイル構成を変更
1.前回[Electron+Express+Firebase Admin+BootStrap+BootStrapTemplateで管理アプリを作る](https://qiita.com/yoshikoba/items/036841972c3bcdff328c)で作成したプロジェクトフォルダの構成を若干変更します。

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アプリのビルド](https://qiita.com/nanairo24/items/73356574b0dc65c0e617)
・[Electronで作成したアプリから、WindowsやmacOS向けのインストーラを作成する最新方法](https://bugttle.blogspot.com/2016/12/electron-buildersample.html)
・[Electronでアプリビルドまでのフロー](https://qiita.com/zaburo/items/828051fc7dabb258f0de)

以上