普段はElectronとは無縁の生活の者です。
2018年くらいの記事を読んで失敗したので書き留めます。
今回はElectronでhello worldできれば完成です！
##ディレクトリ作成
mkdir helloworld
##ファイルの追加
次にhelloworldディレクトリに3つファイルを追加します。
helloworld/
├ main.js
├ preload.js
└ index.html
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
</body>
##npmのインストール
cd helloworld
npm init
package.jsonを編集します。
package.json
{
"name": "helloworld",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^16.0.2"
},
"devDependencies": {},
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
ここで注意する点は、
"main"の部分が"main.js"になっているか。
それと、
"script"の部分に"start"の部分を足すこと。
次に、やっとelectronのインストールに入ります。
npm install --save-dev electron
helloworldディレクトリでインストールします。当たり前だけど、間違えがち。変なディレクトリでインストールしがち。
これでOK
起動します。もちろんhelloworldディレクトリで。
npm start
めでたくhelloworld！