HelloWorldした。
ブツ
インストール&実行
NAME='Electron.File.Read.Write.20220803171508'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start
動機
WEBではファイル操作するときに制限がある。FileSystemAccess APIを使えばローカルファイルの操作ができる。けれどそのAPIを使えるブラウザは限られている。しかも使用するたびに確認ダイアログをユーザが操作せねばならない。面倒くさすぎて使いたくない。
そこでネイティブアプリにより実装できないかと考えた。ただしOSごとに異なるAPIを駆使せねばならないのは開発が大変すぎる。そこでElectronが候補にあがった。HTML,CSS,JSを使って開発できる。同じソースコードでありながら異なるOSで同じように動作できる。というわけでElectronについて勉強してみようと思った次第。
前回まで
情報源
Node.jsインストール
ElectronはNode.jsでインストール・実行するらしい。まずはNode.jsをインストールする。
ラズパイ4では以下のように最新安定版をインストールできる。n
というNode.js管理ツールを使う。apt
でインストールできるものは古い。でも一度は入れないとn
が使えないため、一度入れてから古いのを削除するという面倒な形になっている。
sudo apt install -y nodejs npm
sudo npm cache clean
sudo npm install -g n
sudo n stable
sudo apt-get purge -y nodejs npm
新しい端末を起動しバージョン確認する。
$ node -v
v16.15.1
$ npm -v
8.11.0
リポジトリ作成
NAME=my-electron-app
mkdir $NAME
cd $NAME
npm init -y
package.json
ファイル等ができる。このmain
プロパティで最初に実行するファイルパスを決める。index.js
になっているところをmain.js
に変更してみた。
また、scripts
に好きなコマンドを登録できる。ここではnpm start
とするとelectron .
が実行されるようにした。これでElectronアプリが起動する。
package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^20.0.0"
}
}
main.js
を読み込むよう定義している。また、npm start
というコマンドでElectronが実行されるようにした。
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
を読み込むよう実装する。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
ビルド
実行ファイルを作成する。
まずはツールをインストールする。
npm install --save-dev @electron-forge/cli
npx electron-forge import
次にビルドコマンドを実行する。
npm run make
> my-electron-app@1.0.0 make
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
An unhandled rejection has occurred inside Forge:
Error: Could not find module with name: @electron-forge/maker-squirrel. Make sure it's listed in the devDependencies of your package.json
Electron Forge was terminated. Location:
{}
エラーが出た。
よくわからんが、ビルドは一旦諦める。
実行
これで実行できる。
npm start