nodeを触るようになって、electronの事も気になってきたので少し触ってみました。
まずはインストールとhello worldするところまでをまとめてみました。
今後色々やってみようと思います。
目次
electronのインストール
nodeはnodenvを使ってインストールします。
まだインストールが住んでいない方は、下記ページを参考にしてみてください。
プロジェクトフォルダを作成します。
mkdir hello-electron cd hello-electron
electronをインストールします。
npm install electron
プロジェクトの初期設定を行います。
npm init -y
package.jsonの内容を一部変更します。
{ "name": "hello-electron", "version": "1.0.0", "description": "", "main": "src/main.js", "dependencies": { "electron": "^9.0.0" }, "devDependencies": {}, "scripts": { "start": "electron ." }, "keywords": [], "author": "", "license": "ISC" }
エントリーポイントをデフォルトの index.js
から src/main.js
に変更し、scriptsセクションについてもデフォルトの内容を消して、 "start": "electron ."
に変更しました。
サンプルアプリの作成
公式のチュートリアルを参考に main.js を実装します。
src/main.js
const { app, BrowserWindow } = require('electron') function createWindow () { // Create the browser window. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // and load the index.html of the app. win.loadFile('index.html') } app.whenReady().then(createWindow)
index.html を作成します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello electron!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
electronを実行します。
npm start