Electron で開発したアプリの Windowsインストーラの作成 – iroha Tech Note
http://tech.at-iroha.jp/?p=548
上記のとおりやってみましたが、やはり、ハマったところがあったのでメモしておきます。
http://tech.at-iroha.jp/?p=548
上記のとおりやってみましたが、やはり、ハマったところがあったのでメモしておきます。
１．新しく作るpackage.jsonとpackager.jsonはroot直下に保存します。以下です。
/root/
|-- package.json ←root直下に保存
|-- packager.json ←root直下に保存
３．新しく作ったpackage.jsonのElectronのバージョン指定が古かったので、0.25.0 → 1.3.4 にした。（バージョンはお使いのものに合わせてください）
ついでに --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
→electron-packager に --asar オプションを付けるとアプリがresources/app.asarにパッケージされますが、なぜかElectronがapp.asarを読み込めない。
別途、
$ asar pack app app.asar
で app.asar を作成して、resources/app.asar を上書きしてやると起動した。原因不明．．．
追記
グローバルインストールしてもコマンド認識しない場合については以下を参照すればなんとかなりそうです。
/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オプションでインストールしても、
|-- 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
以下のような構成になります。
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 (ファイル上書き) オプションも追加した。
※これは依存関係によるのでそのままでよかった。
そして、
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インストーラの作成
Electron には electron-builder と呼ばれる Windows インストーラの作成ツールが用意されております。このツールを使用して、開発した Electron アプリを元に Windows インストーラを作成することが可能です。
公式サイトに情報が掲載されておりますが、実際に使用してみるとハマりどころが多く見受けられたので順に説明いたします。
公式サイトに情報が掲載されておりますが、実際に使用してみるとハマりどころが多く見受けられたので順に説明いたします。
electron-builder 公式情報
https://www.npmjs.com/package/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 に追加します。
– 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
npm install electron-packager -g
2. electron-builder をインストールします。
npm install electron-builder -g
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 とは異なるファイルです。
インストーラを作成するためのコマンドを定義します。アプリ側の package.json とは異なるファイルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | { "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 と名称が似ていますが、異なるファイルです。
インストーラの設定ファイル。package.json と名称が似ていますが、異なるファイルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "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
npm run pack:win
コマンドが無事に完了すると /installer/win/ フォルダに以下の名称でインストーラが作成されます。
hello-world Setup.exe
hello-world Setup.exe
5. ダブルクリックするとインストーラが起動します。
インストール開始画面
インストール終了画面
気づいたこと
– 現状作成されるインストーラは英語版となります。
– package.json で設定されている name (“name”: “hello-world”)と、title (“title” : “hello-world”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。
– 現状作成されるインストーラは英語版となります。
– package.json で設定されている name (“name”: “hello-world”)と、title (“title” : “hello-world”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。
