メモ: Electron久々に使ってみた #Electron

Version 9 が出ていたので再度使ってみた。

https://www.electronjs.org/docs

インストール

# Clone the repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start

パッケージング

npm install -g asar

APIなど

印刷

# 印刷
webContents.print()

# pdf
webContents.printToPDT()

UserAgent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) electron-quick-start/1.0.0 Chrome/83.0.4103.64 Electron/9.0.0 Safari/537.36

Electron/9.0.0

Download

https://github.com/electron/electron/releases から実行ファイルをダウンロード

プロジェクトの準備

electron/quick-start.mdを参考に
app1ディレクトリを作成し、その中に以下ファイル作成
- package.json
- main.js
- index.html

package.json

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

main.js内で設定を行う。BrowserWindowを参照

main.js

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

let win;

function createWindow() {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.setFullScreen(true); //起動時にfullscreen
  win.setMenu(null); //メニューを非表示

  //win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </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.exe ..\app1