Electron

HTML+CSS+JavaScriptをexe化してみる

Electronを使って、HTMLファイルをWindowsの実行形式.exeにしてみた。
手順の大まかな流れは、

Node.jsをインストール
Node.jsのプロジェクトを新規作成
Electronとelectron-packagerをインストール
Electron用の設定ファイルとスクリプトを作成
exe化したいHTMLファイルを作成
HTMLファイルの動作チェックをする
electron-packagerでHTMLからexeを作成

という感じ。
Electronとはざっくり言ってしまうと、GUI実現のためにChromiumレンダリングエンジンを採用したNode.js用のフレームワークだ。
Node.jsとはざっくり言ってしまうと、ブラウザ無しにOS上で動くJavaScriptのインタプリタだ。
もっともexe化と言っても、単体のexeファイルが生成されるわけではなく、シンプルなHTMLであってもランタイム（ChromiumやNode.jsなど）がバンドルされた合計200MBほどのファイル群になり、この中の「resources」フォルダ内にHTMLファイルがそのまま格納される。
なので「HTMLがexe化される」というよりも「自分が作ったHTMLファイル専用のブラウザが生成される」と言ったほうが実際のイメージに近い。

JavaScriptはNode.js側とChromium側で別々に動作する。
Node.js側を「メインプロセス」、Chromium側を「レンダラープロセス」と呼び、メインプロセスはOSの機能にアクセスできるがGUIができず、レンダラープロセスはGUIができるがOSの機能にアクセスできない。
なのでIPC（プロセス間通信）を行って両者で必要な情報をやりとりするという組み方をするのだが、今回メインプロセスはウィンドウを作成してHTMLファイルを開く目的だけに使っている。

1. Node.jsをインストールしてパスを通す

https://nodejs.org/ja/download/ からWindows Binary (.zip)版をダウンロードしてくる（今の時代なので64bitが良いと思う）
C:\nodejs フォルダを作成し、そこへ解凍したフォルダとファイルをすべて入れる
Win + X を押して「システム」をクリック
「システムの詳細設定」をクリック
「環境変数」をクリック
「Path」をクリック
「編集」をクリック
「参照」をクリック
C:\nodejs を開いて「OK」をクリック

ここまでで下準備完了。

2. Node.jsのプロジェクトを作成する

プロジェクト用のフォルダを作成する（例：C:\electron-practice など）
エクスプローラーでそのフォルダを開く
アドレスバーの内容を削除して「cmd」（「wt」でもOK）と入力し、エンター
「npm init -y」と入力してエンター

3. Electronとelectron-packagerをインストールする

「npm install -D electron」と入力してエンター
「npm install -D electron-packager」と入力してエンター

今回はプロジェクトフォルダごとにインストールする -D オプションを指定しているが、 -g オプションを使うとグローバルにインストールできる。
-D オプションはサイズを食うが、昔の案件で作ったコードを修正したときなどに、Electronが新しくなっていて正常にビルドできないリスクが回避できるのでこちらのほうが安心感がある。
仕事ではなく趣味や遊びのときはどちらでも構わないと思う。

この時点で、プロジェクトフォルダ直下に

node_modules フォルダ
package-lock.json ファイル
package.json ファイル

の3つができているはず。

4. Electronに必要なファイルを作る

プロジェクトフォルダ直下に「src」というフォルダを作る
テキストエディタを開いて、以下のコードを貼り付ける

{
  "main": "main.js"
}

srcフォルダ直下にBOM無しUTF-8で「package.json」という名前で保存する
同様に、以下のコードをテキストエディタに貼り付ける

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

app.whenReady().then(function() {
  let wnd = new BrowserWindow({ width: 640, height: 480 }); // ウィンドウ作成（width:幅, height:高さ）
  wnd.loadFile('index.html'); // 読み込むhtmlファイル
  wnd.setMenu(null);
  wnd.on('closed', function() {
    wnd = null;
  });

  app.on('window-all-closed', function() {
    app.quit();
  });
});

同様にsrcフォルダ直下にBOM無しUTF-8で「main.js」という名前で保存する

5. exe化したいHTMLファイルを作る

HTMLファイルは「src」フォルダ直下に置く（ファイル名は何でも良いが「main.js」内で指定する必要がある）
ここでは以下のコードを「index.html」という名前で保存する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electron Sample</title>
<style>
body {
    font-size: 48px;
    color: #3030d0;
}
</style>
</head>
<body>

<div>Hello, Electron World!</div>
<div id="numb"></div>

<script>
let i = 0;
setInterval(function() {
    document.getElementById('numb').innerHTML = i;
    i++;
}, 100);
</script>

</body>
</html>

この時点で、srcフォルダ直下に

index.html ファイル
main.js ファイル
package.json ファイル

の3つができているはず。

6. HTMLの動作チェックをする

コマンドプロンプトから「npx electron src」と入力してエンター
エラーがなければウィンドウが開いて、その中にHTMLがレンダリングされる
終了するときは普通のウィンドウと同じく、閉じるボタンをクリックすれば良い

7. electron-packagerでビルドする

コマンドプロンプトから
「npx electron-packager src electron-app --platform=win32 --arch=x64 --overwrite」
と入力してエンター
プロジェクトフォルダ直下に「electron-app-win32-x64」フォルダが作成され、その中に「electron-app.exe」ができているはず

作成するexeのファイル名は、上のコマンド内の「electron-app」を変更すれば好きなものに変えられる。
HTMLを修正してその後にまたビルドしたいときは 7. をもう一度行えばOKだが、ビルド後の「resources」フォルダ内にあるHTMLファイルをそのまま書き換えても良い。

[ 戻る ]