ElectronアプリのWindowsインストーラの作成

Electron で開発したアプリの Windowsインストーラの作成 – iroha Tech Note
http://tech.at-iroha.jp/?p=548

上記のとおりやってみましたが、やはり、ハマったところがあったのでメモしておきます。

１．新しく作るpackage.jsonとpackager.jsonはroot直下に保存します。以下です。

/root/
    |-- package.json ←root直下に保存
    |-- packager.json ←root直下に保存

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

２．electron-builder を -gオプションでインストールしても、

'electron-builder' は、内部コマンドまたは外部コマンド、

操作可能なプログラムまたはバッチ ファイルとして認識されていません。

となってしまうので、root直下にelectron-builderをインストールした。

c:\root>npm install electron-builder --save-dev

※なぜか electron-bulder のバージョンが2.11.0でないと動作しなかった。その場合、
c:\root>npm install electron-builder@2.11.0 --save-dev

以下のような構成になります。

３．新しく作ったpackage.jsonのElectronのバージョン指定が古かったので、0.25.0 → 1.3.4 にした。（バージョンはお使いのものに合わせてください）

　13行目: "build:osx": "npm run clean:osx && electron-packager ./app \"PartslistViewer\" --out=dist/osx --platform=darwin --arch=x64 --version=1.3.4 --icon=assets/osx/loopline.icns --overwrite",

　14行目: "build:win": "npm run clean:win && electron-packager ./app \"PartslistViewer\" --out=dist/win --platform=win32 --arch=ia32 --version=1.3.4 --icon=assets/win/icon.ico --overwrite",

ついでに --overwrite (ファイル上書き) オプションも追加した。

４．同じくpackege.json 21行目以降のバージョンもインストールされているものに合わせた。

  "dependencies": {

    "grunt": "~1.0.1",

    "electron-packager": "^7.7.0",

    "electron-prebuilt": "^1.3.4",

    "electron-builder": "^2.11.0"

  },

  "devDependencies": {

    "electron-builder": "^2.11.0"

  }
※これは依存関係によるのでそのままでよかった。

そして、

c:\root>npm run pack:win

で、無事インストーラができて動作しました。

ただ、Program Filesフォルダ内をみると、Electronアプリがそのまま入っていてJSなどのコードは丸見えでした。隠すことはできないのでしょうか．．．

→electron-packager に --asar オプションを付けるとアプリがresources/app.asarにパッケージされますが、なぜかElectronがapp.asarを読み込めない。
別途、
$ asar pack app app.asar
で app.asar を作成して、resources/app.asar を上書きしてやると起動した。原因不明．．．

追記
グローバルインストールしてもコマンド認識しない場合については以下を参照すればなんとかなりそうです。

Electronの使い方（自分流） - uepon日々の備忘録



↓以下記事保管

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

Posted on 2015年8月26日 by admin

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

インストール開始画面

インストール終了画面

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

関連記事:

• NW.js によるアプリの実行
• Sublime Text 3 初期設定
• Electron で実現するクロスプラットフォームなデスクトップアプリ開発
• Mac への XAMPP のインストールと DocumentRoot の変更
• XAMPP と eclipse で PHP のデバッグ環境を構築する