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を使う
ここからインストーラ(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のリリース一覧を確認し、対応した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

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

以下、実行結果画面

また補足として、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メモ
• 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで
• Proxy環境でElectronインストールしようとしたら隠れた罠があったんです
• npmのuninstallコマンドを忘れがちなのでメモ
• nodistでNode.jsをバージョン管理