■Electron
Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
https://www.electronjs.org/
Electronでアプリケーションを作ってみよう - Qiita
https://qiita.com/Quramy/items/a4be32769366cfe55778
最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう - ICS MEDIA
https://ics.media/entry/7298/
ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 | 東京のWeb制作会社LIG
https://liginc.co.jp/web/html-css/177611
以下は2020年9月以降の記事
Next.js + Electron がとても簡単になっていた | Zenn
https://zenn.dev/erukiti/articles/933fc127f751aef45b4f
【入門】Electron完全に理解した
https://zenn.dev/unsoluble_sugar/articles/c5b5faefddd35c1be8a3
「Electron」と「WebView2」はどう違う？ 〜「Electron」の開発チームが解説 - やじうまの杜 - 窓の杜
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1342/249/index.html
最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう - ICS MEDIA
https://ics.media/entry/7298/
■node.jsのインストール
https://nodejs.org/en/
https://nodejs.org/en/download/releases/
コマンドプロンプトで、以下のようにバージョンが表示されれば成功
>node -v
v14.15.0
>npm -v
6.14.8
■Electronのインストール
コマンドプロンプトでコマンドを実行する
>npm install -D electron
> core-js@3.18.3 postinstall C:\Users\Yamano\Electron\sample\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@15.3.0 postinstall C:\Users\Yamano\Electron\sample\node_modules\electron
> node install.js
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Yamano\Electron\sample\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 'C:\Users\Yamano\Electron\sample\package.json'
npm WARN sample No description
npm WARN sample No repository field.
npm WARN sample No README data
npm WARN sample No license field.
+ electron@15.3.0
added 87 packages from 96 contributors and audited 87 packages in 14.485s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
■動作確認
以下でバージョンを確認
>npx electron -v
v15.3.0
以下でデフォルトアプリを実行
>npx electron
画面内には、以下のような情報が表示されている
Electron v15.3.0
Chromium v94.0.4606.81
Node v16.5.0
v8 v9.4.146.21-electron.0
To run a local app, execute the following on the command line:
$ node_modules\electron\dist\electron.exe path-to-app
■バージョンアップする場合
※未検証
以下のコマンドを実行する
> npm install --save-dev electron@latest
■テストアプリ
■作成
>cd C:\Users\refirio\Electron\
>mkdir electron-test
>cd electron-test
>npm init -y
（package.json が作成される）
package.json を以下のように編集する
{
"name": "electron-test",
"version": "1.0.0",
"description": "",
"main": "main.js", … index.js を main.js に変更
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
main.js を作成し、以下の内容を記述する
'use strict';
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
// ブラウザ(Chromium)の起動, 初期画面のロード
mainWindow = new BrowserWindow({width: 400, height: 300});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html を作成し、以下の内容を記述する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
</head>
<body>
<h1>Hello, Electron!</h1>
</body>
</html>
■実行
「index.html」「main.js」「package.json」があることを確認し、コマンドプロンプトで以下を実行する
>npx electron .
ウインドウが表示され、HTMLファイルの内容が表示されれば成功
■アーカイブ
アーカイブするためのツールをインストール
>npm install -g asar
以下のように、packコマンドでアーカイブを実行
（第二引数が書き出し先になるが、アプリケーションのディレクトリ外を指定する）
>asar pack . C:\Users\refirio\Electron\electron-test.asar
以下のコマンドで実行できる
>npx electron C:\Users\refirio\Electron\electron-test.asar
■パッケージング
パッケージングするためのツールをインストール
>npm install electron-packager -g
以下のコマンドでパッケージングを実行
初回は時間がかかるが、2回目以降はすぐにパッケージングされる
>electron-packager . electron-test --platform=darwin,win32 --arch=x64 --electron-version=1.4.1 --overwrite
electron-test-win32-x64\electron-test.exe を実行してアプリが起動すれば成功
■プログラムを編集する場合
例えば main.js や index.html を編集したとする
以下で実行できる
>npx electron .
以下でアーカイブできる
>asar pack . ..\electron-test.asar
以下でパッケージングできる
>electron-packager . electron-test --platform=darwin,win32 --arch=x64 --electron-version=1.4.1 --overwrite
常にパッケージングした状態で動作確認したければ、
コードを編集するたびに electron-test フォルダ内で最後のコマンドを入力すれば良さそう
>electron-packager . electron-test --platform=darwin,win32 --arch=x64 --electron-version=1.4.1 --overwrite
■ガジェット作成参考
Electronでデスクトップウィジェットを作るまで
http://qiita.com/SallyAcolyte/items/94ed26ab62b8b32b1b2c
Electronで作ったウィンドウの各種設定など
http://sourcechord.hatenablog.com/entry/2015/11/12/001228
Electronで設定ファイルを保存する
http://qiita.com/KimuraTakaumi/items/fcae3fb9ca62143a00b4
Electron アプリのウィンドウサイズ＆ポジションを復元する
http://qiita.com/Linda_pp/items/a81e1fd34951ae7d2dc4
何故かlocalStorageが使えなかったので、readFileSyncとwriteFileSyncでファイルを読み書きして設定を保存した