Electron環境設定～パッケージングまで(Windows 10)

# Electron環境設定メモ
OS:windows 10 pro

## Electronとは
* クロスプラットフォームでのGUIアプリケーションを作成できるツール
* HTML+CSS+JavaScriptのみで書けるのでフロントの知識があれば作成できる
* 完成したアプリの容量が少し大きめ?

## 必要なもの
* Node.js
  * JavaScriptアプリケーションのプラットフォーム
* npm
  * Node Package managerの略
  * Node.jsでのパッケージ管理ツール
* Nodist(任意)
  * Node.jsの仮想環境管理ツール
  * versionの異なる環境を切り替えて使う場合に使う
  * macOSの場合、`nodebrew`、`nodenv`なども利用可能

今回はNodistを使ってversion管理する前提で記述する

## Nodistのインストール
Nodistを使う
[ここ](https://github.com/nullivex/nodist/releases)からインストーラ(NodistSetup-vX.X.X.exe)をダウンロード、インストールする
その後、正常にインストールされたことを確認

```
$ nodist -v
0.9.1
```

基本的なコマンド

```
# ヘルプ
nodist --help

# インストール可能なNode.jsのバージョン一覧を表示
nodist dist

# Node.js ver12.18.2 をインストール(インストール済の場合、バージョン切り替え)
nodist 12.18.2

# インストール済のNode.js環境一覧を表示
nodist
nodist ls
nodist list

# Node.js環境(ver 12.18.2)の削除
nodist rm 12.18.2
```

## Node.jsのインストール
Nodistを用いてNode.jsをインストールする

```
$ nodist 12.18.2
12.18.2
Installing 12.18.2
 12.18.2 [===============] 29122/29122 KiB 100% 0.0s
Installation successful.
```

ここではv14,v13ではなくLTS版（長期サポート版）であるv12での最新versionを選んでインストールした

現在の環境を確認
ここで先ほどインストールしたversionになっていればOK

```
$ nodist ls
  (x64)
  10.21.0
  11.13.0
> 12.18.2  (global: 12.18.2)
```

## npm
Node.jsインストール時に同時にnpmもインストールされる
ここで、npmのversionがNode.jsとマッチしていないことがあるのでNodistによってversionを合わせる必要がある

```
$ nodist npm match
npm match

$ npm -v
6.14.5
```

[Node.jsのリリース一覧](https://nodejs.org/ja/download/releases/)を確認し、対応したversionとなっていればOK

## Electron関連パッケージインストール
npmを用いて`Electron`、`Electron-package`をインストールする
ここでは、**プロジェクトごとに環境を用意する前提**で設定する

まず、適当な名前でディレクトリを作り
その中でプロジェクトの管理ファイルである`package.json`ファイルを作成する

```
# ディレクトリtestを作成、test内で環境構築する
$ mkdir test
$ ls
test
$ cd test

# package.jsonを作成（Enter連打で初期設定となる）
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test)
version: (1.0.0)
description:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\XXXXX\test\package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}


Is this OK? (yes)
```

これでtestディレクトリがひとつのプロジェクトとして扱えるようになる
次はパッケージのインストールを行う

npmによるパッケージのインストールには**グローバルインストール**と**ローカルインストール**があるが、今回はローカルインストールでの管理を前提とする

ちなみに

```
# ローカルインストールの場合（開発時に利用する場合）
npm install --save-dev <package-name>

# ローカルインストールの場合（アプリの実行に利用する場合）
npm install --save <package-name>

# グローバルインストールの場合
npm install -g <package-name>
```

参考：[npm installの–saveと–save-devの違いと-g](https://the2g.com/2280)


electronをローカルインストールする

```
$ npm install --save-dev electron

(中略)

found 0 vulnerabilities
```

正常にインストールできたかどうかの確認
`npm ls`で現在の環境でのインストール済パッケージ一覧を表示する

```
$ npm ls
test@1.0.0 C:\Users\XXXXX\test
`-- electron@9.1.0
  +-- @electron/get@1.12.2
  | +-- debug@4.1.1
  | | `-- ms@2.1.2

        （中略）

      `-- fd-slicer@1.1.0
        `-- pend@1.2.0
```

上記のコマンドでは出力結果が長すぎるので、深さを指定して表示

```
$ npm ls --depth=0
test@1.0.0 C:\Users\XXXXX\test
`-- electron@9.1.0
```

electronパッケージ(ver 9.1.0)がインストールできていることが確認できた。
同じ要領でelectron-packageもインストールする

```
# electron-packageをローカルインストール
$ npm install --save-dev electron-package
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ electron-package@0.1.0
added 1 package from 1 contributor and audited 88 packages in 1.889s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

# 深さを制限してインストール済パッケージを表示
$ npm ls --depth=0
test@1.0.0 C:\Users\XXXXX\test
+-- electron@9.1.0
`-- electron-package@0.1.0
```

`electron`と`electron-package`が共にインストールされている事が確認できた。

## アプリケーション作成
まず、プロジェクトディレクトリである`test`内にHTMLとJavaScriptソースを作成する。
`package.json`を初期設定で作成した場合は、ファイル名を`index.html`と`index.js`にしておくこと

```
test
├ index.html
├ index.js
├ node_modules
└ package.json
```

## 実行
プロジェクト管理ディレクトリの一つ上の階層にcdする

```
C:\Users\User\Desktop\Electron>pwd
/c/Users/User/Desktop/Electron

C:\Users\User\Desktop\Electron>ls
test
```

ここでElectronを`Electron test`の形で実行し、アプリケーションを起動させる
Electronをグローバルインストールしていない場合、パスを通していないのでこの位置では実行できない。

```
C:\Users\User\Desktop\Electron>Electron test
'Electron' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

Electronの実体は`\test\node_modules\.bin\electron`にあるので、パスを指定すれば実行できる。

```
$ test\node_modules\.bin\electron test
```

以下、実行結果画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289210/cdf8e349-a46f-4123-0912-7019fc9c08e5.png" width=400px>

また補足として、npmでインストールしたパッケージの実体（保存先）は`npm bin`コマンドで確認できる。
Electron実行時、パスがわからなくなってしまった場合などに利用できる。

```
$ npm bin
C:\Users\User\Desktop\Electron\test\node_modules\.bin
```

## パッケージング
アプリケーションを動作させる事ができたが、このままではElectronの実行環境のあるPCでしか実行できないため、**パッケージング**を行いexeファイルなどに変換する。
`Electron-packager`を用いてパッケージングを行う。

ここまでの手順でインストールは完了しているのでコマンドを叩いてパッケージングするが、カレントディレクトリの位置に注意。
プロジェクトディレクトリの1つ上の階層に位置した状態で操作を行う。

`Electron-packager`の基本的な使い方

```
Usage: electron-packager <sourcedir> <appname> [options...]
```

例えば、`test`というプロジェクトをwindows 10用に動作するようにパッケージングする場合は以下の通り。

```
$ electron-packager ./test "test-app" --platform=win32
Packaging app for platform win32 x64 using electron v9.1.0
Wrote new app to C:\Users\User\Desktop\Electron\test-app-win32-x64
```

`test-app`というアプリケーションが完成。
`test-app-win32-x64`というディレクトリが生成され、その中に`test-app.exe`ができている。

また、MacOSなどの異なるOSで利用したい場合は`--platform`のパラメータを変更する。




## 参考
* [electronメモ](https://qiita.com/summer4an/items/288285a3cdc2854fbb76)
* [30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで](https://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29)
* [Proxy環境でElectronインストールしようとしたら隠れた罠があったんです](https://qiita.com/LuckyRetriever/items/2f377b1ce34f7d12903c)
* [npmのuninstallコマンドを忘れがちなのでメモ](https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b)
* [nodistでNode.jsをバージョン管理](https://qiita.com/satoyan419/items/56e0b5f35912b9374305)