W.I.S. Laboratory
menu-bar

Electron


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

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

  1. Node.jsをインストール
  2. Node.jsのプロジェクトを新規作成
  3. Electronとelectron-packagerをインストール
  4. Electron用の設定ファイルとスクリプトを作成
  5. exe化したいHTMLファイルを作成
  6. HTMLファイルの動作チェックをする
  7. 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をインストールしてパスを通す

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

ここまでで下準備完了。

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

  1. プロジェクト用のフォルダを作成する(例:C:\electron-practice など)
  2. コマンドプロンプトを起動する(ターミナルでもOK)
  3. プロジェクトフォルダへ移動する(例:cd \electron-practice など)
  4. 「npm init -y」と入力してエンター

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

  1. 「npm install -D electron」と入力してエンター
  2. 「npm install -D electron-packager」と入力してエンター
  3. ※コマンドプロンプトは後で使うので閉じずにそのまま開いておく

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

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

  • node_modules フォルダ
  • package-lock.json ファイル
  • package.json ファイル
の3つができているはず。

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

  1. プロジェクトフォルダ直下に「src」というフォルダを作る
  2. テキストエディタを開いて、以下のコードを貼り付ける
  3. srcフォルダ直下にBOM無しUTF-8で「package.json」という名前で保存する
  4. 同様に、以下のコードをテキストエディタに貼り付ける
  5. 同様にsrcフォルダ直下にBOM無しUTF-8で「main.js」という名前で保存する

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

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

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

  • index.html ファイル
  • main.js ファイル
  • package.json ファイル
の3つができているはず。

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

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

7. electron-packagerでビルドする

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

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


[ 戻る ]
saluteweb