本記事について
ElectronのQuick Start Guideをより初心者目線で書く。
本記事で作るもの
文字を表示するだけのMacのデスクトップアプリ
環境
Mac
electron 11.0.3
$ node -v
v14.15.1
$ npm -v
6.14.8
nodejsをインストールしていない場合には手っ取り早く以下からダウンロードしてインストール。
Node.jsのダウンローダーへのリンク
LTS推奨。
前提
HTML, JavaScriptの基礎
Node.js基礎
Electronとは
HTML, JavaScript等のWebフロントの技術でMacやWindowsのデスクトップアプリが作れるフレームワーク。
npmでインストールして使う。
Electronのinstall
まずは作業用のフォルダを作る
ここではfirst-electronという名前で作った。
そしてまずはプロジェクトを作成し、Electron をインストールする
first-electron$ npm init -y
first-electron$ npm install --save-dev electron
Electronはビルドに含まないのでsave-devをつける。
するとプロジェクトの中身は以下のようになる。
first-electron
├── package-lock.json
└── package.json
アプリを作る
まずは表示する見た目のHTMLを書く
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello Electron!</h1>
</body>
</html>
次に起点となるJavaScriptを作る
main.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
// windowを作成
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// windowにindex.htmlを描画
win.loadFile('index.html')
// DevToolsを開く
win.webContents.openDevTools()
}
// 初期化時にwindowを作成
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
最後にこの時点でpackage.jsonは以下のようになっていると思われるが
package.json
{
"name": "first-electron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.0.3"
}
}
version, main, scripts を以下のように修正
package.json
{
"name": "first-electron",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.0.3"
}
}
これで完了。アプリが確認できる
$npm start
停止するときはCtrl + C
Macのアプリケーション化
1 Electron Forgeをインポート
first-electron$ npx @electron-forge/cli import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
これによって package.json が書き換えられる
package.json
{
"name": "first-electron",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
...
あと.gitも追加される
2 作成
first-electron$ npm run make
> first-electron@0.1.0 make /Users/Teach/workspace/electron/first-electron
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
first-electron > out以下にできる。
これをダブルクリックするとアプリが起動できる。