Electron – アプリ環境構築のひな型

はじめに

Electronのアプリ環境構築のひな型です。
環境はWindows10です。

前提

Node.jsがインストール済みであること。

アプリ構築手順

プロジェクトを作成しElectronインストール

mkdir <プロジェクトフォルダ>
cd <プロジェクトフォルダ>
npm init -y
npm install --save-dev electron

アプリ作成

プロジェクトフォルダ直下に index.js という名前のファイルを作成

"use strict";

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

プロジェクトフォルダ直下に index.html というファイルを作成

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

動作確認

cd <プロジェクトフォルダ>
npx electron .

コンパイル

electron-packagerインストール

npm install --save-dev electron-packager

EXEファイル作成

--electronVersionpackage.json から判定するので不要

cd <プロジェクトフォルダ>
node_modules\.bin\electron-packager . <アプリ名> --platform=win32 --arch=x64

EXE実行

cd <アプリ名>-win32-x64
<アプリ名>.exe