今回は「Electron で作るデスクトップアプリケーション」についてまとめます。 作るものも単純なHTMLを表示するだけの何もできないスケルトンプログラムです。
概要
Electronとは
GitHubが開発したオープンソースのデスクトップアプリケーション開発フレームワークです。 このフレームワークを利用すると、JavaScript(Node.js)を使ってクロスプラットフォームなデスクトップアプリケーション開発ができます。
作成される実行ファイルは「Chromium」と「Node.js」で動いており、「画面描画エンジン(レンダー)」と「処理エンジンメインプロセス」の2つが通信しながら動くようなものになっています。
内部的には「画面描画エンジン(レンダー)」は 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
の骨組みはほぼできているので、残る「ビルド用の設定(ハイライト箇所)」を追記していきます。
/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 のオプション設定になります。 基本的なものだけ設定していますが、詳細を知りたいようであれば公式のリファレンスを参照してみてください。
実装
公式ドキュメントだとルートディレクトリにファイル作成していますが…
実際はそんなところにファイル配置するとファイル増えた際にゴチャついて収集つかなくなるので、 src
ディレクトリ配下へまとめてしまいます。
ただ、そうするとそれで package.json
を作る必要が出てくるので、以下で順に確認していきましょう。
/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
に指定されるモジュールはビルドしたとき一緒にコンパイルされるものになります。
ここに指定が漏れているとビルドした成果物がうまく動作しないので、モジュール追加し忘れしないように注意します。
/src/main.js
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
を設定しておきましょう。
/src/index.html
<!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 の設定が必要になります。 しかも単純なものではデバッグ実行ができないので、デフォルト作成されたものに加工が必要です。
/.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 の フォロー」 お願いします!!