Electron で作るデスクトップアプリケーション

今回は「Electron で作るデスクトップアプリケーション」についてまとめます。作るものも単純なHTMLを表示するだけの何もできないスケルトンプログラムです。

概要
プロジェクト準備
実装
デバッグ
ビルド

概要

GitHubが開発したオープンソースのデスクトップアプリケーション開発フレームワークです。このフレームワークを利用すると、JavaScript（Node.js）を使ってクロスプラットフォームなデスクトップアプリケーション開発ができます。

作成される実行ファイルは「Chromium」と「Node.js」で動いており、「画面描画エンジン（レンダー）」と「処理エンジンメインプロセス」の２つが通信しながら動くようなものになっています。内部的には「画面描画エンジン（レンダー）」は ipcRender 、「処理エンジンメインプロセス」は ipcMain というオブジェクトで表現されます。

Electronを使ったデスクトップアプリケーションを作成する際、雛型となるような最低限作成するフォルダ/ファイルは以下の通りです。骨組みとして作成するファイルは5つだけになります。

<ROOT>
│  package.json          プロジェクト定義ファイル
│  
├─.vscode
│      launch.json       Visual Studio Code のデバッグ設定ファイル
│
├─dist
│      (ビルド成果物が生成されるフォルダ)
│
├─node_modules
│      (Node.jsのモジュールフォルダ)
│
└─src
        index.html        画面表示するHTMLファイル
        main.js           Electronのメイン実装ファイル
        package.json      Electronのパッケージファイル

プロジェクト準備

プロジェクト開始時、まずは以下のコマンドを実行して package.json の雛型を作ります。

npm init

続けて必要なパッケージelectron と electron-builder を開発用モジュールとして追加します。

npm install electron electron-builder --save-dev

ここまでで package.json の骨組みはほぼできているので、残る「ビルド用の設定（ハイライト箇所）」を追記していきます。

{
  "name": "sample_electron_progress",
  "version": "1.0.0",
  "description": "Sample electron program.",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "scripts": {
    "build": "electron-builder"
  },
  "build": {
    "appId": "udemy.instructor.tool",
    "directories": {
      "app": "./src"
    },
    "win": {
      "target": {
        "target": "dir",
        "arch": [
          "x64"
        ]
      }
    },
    "mac": {
      "target": "dmg"
    }
  },
  "devDependencies": {
    "electron": "^9.1.1",
    "electron-builder": "^22.7.0"
  }
}

追記したのは scripts.build と build の2か所です。どちらも後で出てくるビルド用の設定になります。

build プロパティに指定できる設定は electron-builder のオプション設定になります。基本的なものだけ設定していますが、詳細を知りたいようであれば公式のリファレンスを参照してみてください。

electron-builder: Common Configuration

実装

公式ドキュメントだとルートディレクトリにファイル作成していますが… 実際はそんなところにファイル配置するとファイル増えた際にゴチャついて収集つかなくなるので、 src ディレクトリ配下へまとめてしまいます。ただ、そうするとそれで package.json を作る必要が出てくるので、以下で順に確認していきましょう。

{
  "name": "sample_electron_progress",
  "version": "1.0.0",
  "description": "Sample electron program.",
  "main": "main.js",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {}
}

この package.json 中の dependencies に指定されるモジュールはビルドしたとき一緒にコンパイルされるものになります。ここに指定が漏れているとビルドした成果物がうまく動作しないので、モジュール追加し忘れしないように注意します。

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

var initialize = function () {
  var win = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile("./index.html");
};

app.whenReady().then(initialize);

基本は上述の通り実装…なんですが、 BrowserWindow 生成時に指定しているオプションで webPreferences.nodeIntegration だけ注意です。このプロパティは HTML側（レンダー側）から呼び出す JavaScript 中で Node.js のモジュールを利用したいかどうかの設定になります。利用したいのであれば true を設定しておきましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Electron</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <h1>Sample Page</h1>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

今回は単純なHTMLだけにしていますが、必要に応じてJavaScriptやCSSを追加していきます。 JavaScriptだと React や jQuery なども追加できます。加えて nodeIntegration を有効にしていると Node.js のモジュールも利用できるようになります。

デバッグ

Visual Studio Code でデバッグしようとすると /.vscode/launch.json の設定が必要になります。しかも単純なものではデバッグ実行ができないので、デフォルト作成されたものに加工が必要です。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/src/main.js",
      "env": {
        "NODE_ENV": "development"
      },
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd",
      },
      "args": [
        "."
      ],
      "outputCapture": "std"
    }
  ]
}

type は通常の Node.js アプリケーションの扱いにするので node のままでOKです。

program はエントリーポイントとなるJavaScriptが一階層ズレているので忘れずに修正します。

runtimeExecuttable は通常のファイルと windows 向けのコマンドと2つ設定しておきます。また、引数となる args には "." を競ってします。

outputCapture は標準出力をキャプチャするので std を指定しておきます。

これだけ設定できていればあとはF5を押下してデバッグ実行するだけです。ただ…メインプロセス側はVisualStudioCodeでデバッグできますが、レンダー側は開発者ツールでデバッグになるみたいです。

ビルド

すでに最初の package.json 作成時に追記済みなので、以下のコマンドでビルドを行うことができます。

npm run build

うまく作成できれば以下のフォルダ配下にファイル群ができているはずです。

/dist/win-unpacked

起動したときのアプリケーションは以下のようなものになります。

今回は「Electron で作るデスクトップアプリケーション」についてまとめました。参考になったでしょうか？本記事がお役に立っていると嬉しいです！！

最後に… このブログに興味を持っていただけた方は、ぜひ「Facebookページにいいね！」または「Twitter のフォロー」お願いします！！

galife

Electron で作るデスクトップアプリケーション

概要

Electronとは

作成するファイル一覧

プロジェクト準備

初期設定

/package.json

実装

/src/package.json

/src/main.js

/src/index.html

デバッグ

/.vscode/launch.json

ビルド

Labels

Archives

Pages

Contact