■目次
Electronnode.jsのインストールElectronのインストールテストアプリガジェット作成参考
■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でファイルを読み書きして設定を保存した