HelloWorldした。

ブツ

20220815103014_020.png

インストール＆実行

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

20220815103014_020.png