electronメモ

electronでHello Worldアプリ作成

$ npm i electron -g
$ npm i electron-packager -g

$ vi main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成（windowの大きさや、Kioskモードにするかどうかなどもここで定義できる）
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定（相対パスだと動かない）
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

$ vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

Mac用に実行ファイルを生成

$ electron -v
v5.0.6

$ electron-packager . electron-sample --platform=darwin --arch=x64 --electron-version=5.0.6

これでelectron-sample.appというアプリケーションが作成されます。

electronメモ

electronメモ

electronでHello Worldアプリ作成

Mac用に実行ファイルを生成

参考