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

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

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

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

'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”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。

参考
http://www.akakagemaru.info/port/internet-softap.html

管理者権限でコマンドプロンプトを起動し、以下を順に入力

１．
netsh wlan set hostednetwork mode=allow

２．
netsh wlan set hostednetwork ssid=XXXXXX

　※SSIDのXXXXXXは適当な名前を入力

３．
netsh wlan set hostednetwork key=1234567890 keyUsage=persistent

　※key（パスワード）は8 ～ 63 個のASCII 文字から成る文字列を指定

４．
netsh wlan start hostednetwork

　※ネットワークが開始されない場合は無線LANが無効になっているので有効にする

あとはローカルエリア接続の共有設定をします。

５．ローカルエリア接続のプロパティ→共有

以下のように設定します。

※ワイヤレスネットワーク接続 2 は最初に設置したSSIDの接続先になります。お使いのパソコンによっては数字2以外の場合もあります。

以上となります。

Web Tips Plus

2016年8月31日水曜日

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

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

関連記事:

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

iPhone に搭載されている Safari 上でのインライン動画再生 – iroha Tech Note

Amazon Elastic Transcoder によるマルチデバイス動画配信 – iroha Tech Note

Windows7 パソコンをWiFiアクセスポイント化する方法

「Lean Analytics」は全てのスタートアップ関係者が読むべき良書 - SELECT * FROM life;

2016年8月30日火曜日

Electronをとにかく始める