前置き (今回はちょっと長め)
Electron と Node.js には、導入の難しさがあります。
コンピュータに習熟した人ほど困惑します。
0. インストール要件
Electron のインストールは、グローバルインストールとローカルインストールがありますが、
バージョンアップ時のトラブルを最小限にするため、本稿ではローカルインストールを実施します。
グローバルインストールを選択すると、以下の問題が発生する。(これが許容できるなら、グローバルインストールのほうが使い勝手に優れる)
- Node.js (と npm) はインストーラを保存しておけば同じ実装になるのに対し、Electron は npm がダウンロードしたものを使うので、
インストールの時期によっては過去のバージョンを再現できなくなる可能性がある。- 1 つのアカウントで同時に複数バージョンのコーディングが出来ない。
項目 内容 備考 インストール対象 Windows10 Pro 20H2 64bit 本稿記述時の最新版 Npm 6.14.12 Node.js v14.16.1 Electron v12.0.6 ワーキングフォルダ C:\Users\who\example\ 本稿ではユーザ名を「who」としている Electron のインストールフォルダ C:\Users\who\example\node_modules\ 本稿ではローカルインストールをする
1-1. Node.js インストーラのダウンロード
Node.js の公式 Web ページから「 LTS 推奨版 」のインストーラ「Windows Installer (.msi)」をダウンロードする。1-2. Node.js インストーラの実行
(LTS: Long Term Support = 長期サポート版のこと)
インストール対象の Windows が 64bit なので、ここでは 64bit 版を選択している。
ダウンロードされる Node.js のインストーラのファイル名は
node-vXX.XX.XX-x64.msi となる。
(今回は node-v14.16.1-x64.msi だった)
過去のバージョンはここからダウンロードする。
Node.js をインストールすることにより、npm もインストールされる。1-3. インストールされた npm, Node.js のバージョンを確認。
インストーラ node-v14.16.1-x64.msi を実行する。
インストーラを右クリックし、「インストール(I)」を選択する。
ダブルクリックでも可。
⇓
ボタンをクリックする。
⇓
「 I accept the terms in the License Agreement」
にチェックを入れ、 ボタンをクリックする。
⇓
インストーフォルダを確認し、 ボタンをクリックする。
デフォルトは「C:\Program Files\nodejs"」
⇓
ボタンをクリックする。
⇓
ボタンをクリックする。
⇓
ボタンをクリックする。
⇓
UAC 画面が表示されるので、 ボタンをクリックする。
⇓
待つ。
⇓
ボタンをクリックする。
通常ユーザで PowerShell を実行 (≠管理者)
スタート (右クリック) から「Windows PowerShell(I)」を選択
>_ Windows PowerShell
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6 PS C:\Users\who> npm -v ⏎ 6.14.12 PS C:\Users\who> node -v ⏎ v14.16.1 PS C:\Users\who> exit ⏎
Electron は、システムにひとつだけインストールするのではなく、プロジェクト毎にひとつインストールします。
そのためにまず、プロジェクトのワーキングフォルダを作成し、その中に Electron をインストールします。
2-1. ワーキングフォルダを作成し、npm で初期化する。
通常ユーザで PowerShell を実行 (≠管理者)2-2. Electron をインストール
スタート (右クリック) から「Windows PowerShell(I)」を選択
パッケージ情報は、すべてデフォルト (未記入) にしている。
>_ Windows PowerShell
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6 PS C:\Users\who> mkdir example ⏎ PS C:\Users\who> cd .\example\ ⏎ PS C:\Users\who\example> 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` 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: (example) ⏎ version: (1.0.0) ⏎ description: ⏎ entry point: (index.js) ⏎ test command: ⏎ git repository: ⏎ keywords: ⏎ author: ⏎ license: (ISC) ⏎ About to write to C:\Users\who\example\package.json: { "name": "example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes ⏎ PS C:\Users\who\example>
パッケージ情報の質問をスキップする場合は「npm init -y」を実行する。
2-3. 日本語符号パッケージの組み込み
>_ Windows PowerShell
PS C:\Users\who\example> npm install electron ⏎ > core-js@3.11.1 postinstall C:\Users\who\example\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 on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > electron@12.0.6 postinstall C:\Users\who\example\node_modules\electron > node install.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN example@1.0.0 No description npm WARN example@1.0.0 No repository field. + electron@12.0.6 added 87 packages from 95 contributors and audited 87 packages in 32.454s 6 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS C:\Users\who\example>
- バージョンを指定して Electron をインストールするには npm install electron@12.0.6 を実行する。
- Electron のバージョン一覧を表示するには npm info electron versions を実行する。
Windows なので Shift-JIS の処理に備える。2-4. config パッケージの組み込み
>_ Windows PowerShell
PS C:\Users\who\example> npm install encoding-japanese ⏎ added 1 package, and audited 88 packages in 920ms 5 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS C:\Users\who\example>
.\config\default.json を利用できるようにしておく。2-5. electron-builder の組み込み
>_ Windows PowerShell
PS C:\Users\who\example> npm install config ⏎ added 1 packages, and audited 89 packages in 3s 24 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS C:\Users\who\example>
配布用インストーラを作成できるようにしておく。2-6. インストールされた Electron のバージョンを確認
>_ Windows PowerShell
PS C:\Users\who\example> npm install electron-builder ⏎ added 187 packages, and audited 276 packages in 23s 24 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS C:\Users\who\example>
2-7. Hello プログラムを作成
>_ Windows PowerShell
PS C:\Users\who\example> .\node_modules\.bin\electron.cmd -v ⏎ v12.0.6 PS C:\Users\who\example>
バージョンが表示されたら、何かキーを入力する。(スペースキーを推奨)
→ v14 からキー入力の必要がなくなった。
C:\Users\who\example\index.js (文字コードは UTF-8 で保存)2-8. Hello プログラムを実行
使用している Electron のクラスについて以下に記述がある。(英語)
// メインプロセス (index.js) "use strict" ; // プログラムのミスを見つけやすくするための宣言。 // Electron モジュール (クラス) の用意。 const ele = require("electron") ; // イベントハンドラ 'ready' の定義。(Electron の初期化が完了したら呼ばれる) ele.app.on('ready', () => { // HTML を用意する。 let dynContent = "data:text/html; charset=utf-8," + [ "<html>", "<body>", "Hello, Electron", "</body>", "</html>", ].join("") ; // ウィンドウを用意する。 let win = new ele.BrowserWindow( {width:320, height:200} ) ; // ウィンドウに HTML を表示する。 win.loadURL(dynContent) ; // ウィンドウが閉じたらインスタンスを解放する。 win.on('closed', () => { win = null ; }) ; }) ; // イベントハンドラ 'window-all-closed' の定義。(ウィンドウがすべて閉じたら呼ばれる) ele.app.on('window-all-closed', () => { if (process.platform == 'darwin') return ; // Apple は quit() の必要がない。 ele.app.quit() ; // アプリケーションを終了する。 }) ;
2-9. ワーキングフォルダを削除見えにくいかもしれないが、行末のドットを忘れずに。
>_ Windows PowerShell
PS C:\Users\who\example> .\node_modules\.bin\electron.cmd . ⏎ PS C:\Users\who\example>
実行結果
当然、Electron も削除される。
>_ Windows PowerShell
PS C:\Users\who\example> cd .. ⏎ PS C:\Users\who> Remove-Item .\example\ -Recurse ⏎ PS C:\Users\who> exit ⏎