Electron開発環境をWindows上で用意する

Electron開発環境をWindows上に用意する

GUIアプリケーションをJavaで作った場合とElectronで作った場合の配布イメージサイズと展開後のサイズを比較するため、初めてのElectron開発環境を整えます。OSはWindowsです。

npmコマンドありきのインストール手順が氾濫

最初の躓きは、Electron開発環境を用意する手順の最初で、npmコマンドが前提となっていることでした。これは公式サイトに記載されるインストール記事 Installation | Electron でもそうでした。

公式サイトのドキュメントトップページには、「このドキュメントの読み手はNode.jsと一般的なWeb開発に親しんでることを前提にしている」とのことで、どうやら開発環境を用意するのにもNode.jsがあって当然となっているようです。

npmとは

Node.jsと呼ぶJavaScript実行環境で使われるパッケージ管理ツール（npm:Node Package Manager）とのことです。

Electronは、Node.jsとChromiumを組み込んだJavaScript、HTMLそしてCSSで記述するデスクトップアプリケーション基盤です。

インストールすべきもの

Node.js

まず、Node.jsをインストールします。バージョンは、Electronの公式サイトにその時点の安定板、ベータ版、アルファ版、ナイトリービルド版における組み合わせを参照します。

f:id:torutk:20210809215900p:plain — Electron Release

本日（2021-08-09）時点のバージョン番号は次です。

構成名	バージョン
Electron	13.1.7
Node	14.16.0
Chromium	91.0.4472.124

そこで、Node.js の 14.16.0をインストールしてみることにします。次のページから、Node.js 14.16.0 のダウンロードを辿り、Windows用のインストーラを入手します。

nodejs.org

インストーラは、node-v14.16.0-x64.msi と node-v14.16.0-win-x64.zip があります。ここではMSI形式を入手しました。環境変数PATHを設定してくれるので楽ですが、複数バージョンのNode.jsを使い分けるときはMSI形式でない方がよいかもしれません。

Electron

次のコマンドでElectronをインストールします。コマンドを実行したディレクトリにElectronのファイル群がダウンロードされます。

D:\work\electron_hello> npm install electron --save-dev

> core-js@3.16.1 postinstall D:\work\electron_hello\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> https://paypal.me/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> electron@13.1.8 postinstall D:\work\electron_hello\node_modules\electron
> node install.js

npm WARN saveError ENOENT: no such file or directory, open 'D:\work\electron_hello\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\work\electron_hello\package.json'
npm WARN hello No description
npm WARN hello No repository field.
npm WARN hello No README data
npm WARN hello No license field.

+ electron@13.1.8
added 87 packages from 97 contributors and audited 87 packages in 82.565s

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

found 0 vulnerabilities

ダウンロードされるファイル群は200MB弱になります。

Helloアプリケーション作成

www.electronjs.org

Electronのインストールと順番は逆かもしれませんが、package.jsonファイルを作成します。

npm init コマンドで対話的に作成するか、エディタで記述します。以下はnpm initコマンドで対話的に作成した例です。

{
  "name": "hello-app",
  "version": "1.0.0",
  "description": "Hello, World!",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "TAKAHASHI,Toru",
  "license": "MIT"
}

startでelectronを起動するよう修正します。

  "scripts": {
    "start": "electron ."
  },

main.js を作成します。

const { app, BrowserWindow } = require('electron')

function createWindow() {
    const win = new BrowserWindow({
        width: 320,
        height: 200
    })

    win.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()
})

注）app.on でactivate時、window-all-closed時の処理は省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello, Electron World!</title>
    </head>
    <body>
        <p>Hello, Electron World!</p>
    </body>
</html>

実行します。

D:\work\electron_hello> npm start
> hello-app@1.0.0 start D:\work\electron_hello
> electron .

f:id:torutk:20210809233816p:plain

配布

パッケージ作成ツールをインストールします。

D:\work\electron_hello> npm install --save-dev @electron-forge/cli
  :
D:\work\electron_hello> npx electron-forge import
  :

パッケージを作成します。

D:\work\electron_hello> npm run make

> hello-app@1.0.0 make C:\Users\toru\Documents\electron\learn\hello-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: squirrel
✔ Making for target: squirrel - On platform: win32 - For arch: x64

outディレクトリの中に配布パッケージが生成されます。

out\
  +-- make\squirrel.windows\x64\
        +-- hello-app-1.0.0 Setup.exe
        +-- hello_app-1.0.0-full.nupkg

配布パッケージのファイルサイズは80MB強でした。

hello-app-1.0.0 Setup.exe　を実行すると、C:\Users\<ユーザー名>\AppData\Local\hello-app\ の下にインストールされました。コントロールパネルのプログラム一覧にも記載されています。

開発・配布・展開サイズ

このhello-appプログラムの開発ディレクトリ、インストーラファイル、インストール後に展開されたディレクトリのそれぞれの容量を次に示します。

種類	容量（MB）	備考
開発ディレクトリ	680MB	ビルド後のサイズ（配布イメージファイル含む）
配布ファイル（インストーラ）	78MB	Windowsの場合
展開ディレクトリ	256MB

最後に

Node.js使えて当然、のドキュメントは、厳しい
プログラム開発（npmコマンド実行時）、インターネット接続が必要でまた時間がかかる

Electronは、Webアプリケーション開発者が持つ HTML、CSS、JavaScript のノウハウをそのまま使ってデスクトップアプリケーションをまるでWebアプリケーション開発であるかのように作る開発・実行環境という印象です。非Webアプリケーション開発者がElectronに取り組むには、Webアプリケーション開発スキルの基礎がないと大変です。

また、Webアプリケーション分野のツールなので、インターネット接続がマストです。

torutkのブログ

ソフトウェア・エンジニアのブログ