トップ > プログラミング > 【Electron】導入～ビルドまとめ

【Electron】導入～ビルドまとめ

プログラミング

環境

OS Windows11
Node.js 16.13.2

Node.jsをインストール

公式サイトから推奨版のNode.jsをダウンロードしてインストール。

インストールが完了したら下記のコマンドでバージョン確認。

node -v

バージョンが表示されたらインストール完了。

プロジェクトの作成

プロジェクトのファルダを作成する。

作成したら下記のコマンドで初期化。

npm init

Electronのインストール

下記のコマンドを実行し、Electronのインストールをする。

npm i -D electron

アプリケーション実行用のファイルの作成

srcフォルダを作成し、その中に

  • package.json
  • main.js
  • index.html

上記3つのファイルを作成し、それぞれ以下のように編集する。

package.json

{
  "main": "main.js"
}

main.js

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

let mainWindow;

function createWindow() {
    // メインウィンドウを作成
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        },
        width: 800, height: 600,
    });

    mainWindow.loadFile(path.resolve(__dirname, "index.html"));

    // デベロッパーツールの起動
    //mainWindow.webContents.openDevTools();

    // メインウィンドウが閉じられたときの処理
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

// 初期化が完了した時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
// アプリケーションがアクティブになった時の処理
app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

index.html

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

<body>
    <h1>Hello World!</h1>
</body>
</html>

アプリの実行

package.jsonを編集

プロジェクトのルートディレクトリの package.jsonに下記部分を追加する。

"scripts": {
    "start": "electron ./",
},

実行

下記のコマンドでアプリの実行が開始される。

npm start

f:id:sanpei07:20220218231949p:plain

上記画像の様にアプリが実行されたら成功。

アプリのビルド

electron-builderのインストール

下記のコマンドで「electron-builder」パッケージをインストール。

npm install -D electron-builder

ビルド用のスクリプトの作成

scriptsフォルダを作成しその中にbulid.jsファイルを作成し下記のように編集する。

const { build } = require('electron-builder');

build({
    config: {
        appId: 'com.example.test_electron',
        productName: 'test_electron',
        files: ['src/**/*'],
    },
});

package.jsonを編集

プロジェクトのルートディレクトリの package.jsonに下記部分を追加する。

"main": "./src/main.js",
"scripts": {
// ... 略
    "build": "node ./scripts/build.js",
// ... 略
},

ビルドの開始

下記のコマンドビルドを開始。

npm run build

distファルダの中にセットアップ用のexeファイルが作成されていれば成功。

参考

ics.media