Electron - Node.js

Electron とは？

Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。

「 Hello, Electron 」アプリの作成

Electron のアプリケーションを作成するためのディレクトリを作り、作成した electron ディレクトリに移動します。

mkdir electron
cd electron
npm init

「 npm init 」を実行すると 次のようなメッセージが表示されます。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

package.json ファイルを作成するために次の項目の入力を求められますが、入力せずに Enter を押して進めてかまいません。package.json ファイルは、後から変更できます。

package name: (electron) electron_app
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\electron\package.json:

上記のように進めた場合、次のような内容の package.json ファイルが作成されます。

{
  "name": "electron_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

electron のパッケージをインストールします。

npm install electron

package.json ファイルの内容を次のように変更します。

{
  "name": "electron_app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^29.1.6"
  }
}

electron ディレクトリの中に、「 index.html 」と「 app.js 」ファイルを作成し、それぞれ次のようにファイルを変更します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"/>
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello, Electron</h1>
  </body>
</html>

app.js

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  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()
  }
})

最後に、コマンドを実行してアプリを起動してみます。

npm start app.js

次のような画面が表示されれば成功です。