独自ビルドしたElectronを使ってみる（Windows） #JavaScript

ElectronでWindows向けアプリを開発しているときに、Electronの機能だけではどうしても、NativeModuleを使ってもどうにも実現できない事があったので、独自に改変を加えてビルドしたものを使うことにしました。その時の手順を簡単にまとめてみます。

前提

私が確認した環境はWindows 10(64bit)上のみです。他の環境では全くの未確認ですが、Electornのドキュメントを見る限りはそう大きな違いはなさそうなので同様の手順でいいはず...多分
WindowsでのビルドにはVisual Studio 2015とPython2.x系が必要です。Node.jsユーザーならインストール済みの方が多いとは思いますが、インストールされていない場合はwindows-build-toolsをインストールしておいてください。
現状すでにElectron2系が出ているのですが、確認したのはv1.8.6です。（早いとこ2系もためそう）

exeの作成

チェックアウト

なにはともあれチェックアウトですね。公式Electronのmasterなら下記でOK。

git clone https://github.com/electron/electron.git

特定のタグが必要なら以下のように。

git clone --depth=1 -b v1.8.6 https://github.com/electron/electron.git

ビルド＆動作確認

念のため、改変を加える前に自分でビルド＆動作確認してみます。

cd electron
python.exe script\bootstrap.py -v
python.exe script\build.py -c D

bootstrapには意外に時間がかかります。特にlibchromiumcontentsの処理に時間がかかっているようです。これは気長に待つしかない。

また、上記の-c Dにより、Debugビルドのみ対象としています。Releaseビルドは最後のリンクでもさらに長い時間かかりますので、テスト&デプロイ時だけにしたほうがいいかと思います。

ビルドが完了するとout/D/ディレクトリ内にelectron.exeが出力されます。
これを使ってElectronのスターターパッケージを動かして見ましょう。

cd ..
git clone https://github.com/electron/electron-quick-start
.\electron\out\D\electron.exe .\electron-quick-start

Hello World!の文字と共にNode.js, Chromium, Electronのバージョン情報を記載したウィンドウが表示されれば成功！

改変&デバッグ

改変は、あなたの必要とする機能に応じてお好きなように。
Electronもでかいけど、Chromiumのソースに改変が必要になったら更に大変。。。私はお手上げです。
デバッグにはVisual Studioを使う事ができます。この手順もメモしようと思ったけど..忘れてた

独自バージョン番号の付与

公式のElectronとはバージョン番号を分けておきたいので、electron.gypとpackage.jsonのversion指定を変更します。

electron.gyp

-    'version%': '1.8.6',
+    'version%': '1.8.6+u.1',```

package.json

-  "version": "1.8.6",
+  "version": "1.8.6+u.1"

バージョンの指定はセマンティックバージョニング2のビルドメタデータの項を参考にしました。
わかるとは思いますが、前半の1.8.6はベースとしたElectronのバージョン、後の番号は独自に加えた修正の番号です。アルファベット(u)は適当。3.0.0とか好きなバージョンつけてもいいですが、自分で管理できるようにね。

配布用ZIP作成

上記までの作業でElectronのexeファイルを用意することができました。
次にZIPの作成です。Releaseビルドした上でdistも実行します。

cd electron
python.exe script/build.py -c R
python.exe script/create-dist.py -v

これで、out/R/下にリリースビルドのelectron.exeが、dist/下にリリースパッケージelectron-v1.8.6+u.1-win32-x64.zipが作成されます。

自分のアプリケーションからの利用

通常、Electronを使用するときはnpm install electronして、package.jsonの'start'にelectron .とか書いておくわけですが、
独自パッケージの場合はこの仕組が使いづらいです。（CHECKSUMとかややこしくて）

なのでelectron/cli.jsを参考に以下のようなコードで実行しちゃいましょう。

electron.js

const electron = require('path').join(__dirname, 'path-to-new-electron');
const child = require('child_process').spawn(electron, process.argv.slice(2), {stdio: 'inherit'})
child.on('close', function (code) {
  process.exit(code)
});

package.json

{
  "name": "your app name",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node electron.js .",
  },
}

あとは自分のアプリケーションのフォルダでnpm startすれば実行できます！

補足

私が最初ビルドしたときは、mt.exeが見つからないというエラーで苦しみました。
もし同様の問題が発生した場合はCドライブからmt.exeを探して、そのパスを環境変数PATHに追加して再度ビルドしてみてください。
私の場合はPowershellでビルド前に以下を実行しておきました。

$env:path = "C:\Program Files\Microsoft SDKs\Windows\v7.1\Bin\x64;$env:path"

今後やりたいこと

独自Electronのzipをダウンロードできるパッケージを作成したい
独自Electronのzipをつかってelectron-packagerまがいのことをしたい