Node.js製の画像比較ライブラリにElectronでGUIを付けて簡単に使えるようにする

先日とあるアプリ開発案件でリリース前にデザインとのずれをチェックをしておりました。
こういう細かい作業は人間には向いていないので機械にやってほしくなります。

少し探してみましたが、コマンドラインツールは結構あるのですが、それに特化したGUIのツールはあまりなさそうでした。

というわけで、Electronでさっくり作ることにしました。

1 Hello World
2 画像比較ライブラリ
3 Macアプリにする
4 使ってみる
5 まとめ
6 参考

Hello World

Quick Startに従ってアプリを作ります。

$ git clone https://github.com/electron/electron-quick-start image-differ
$ cd image-differ
$ npm install && npm start

ちゃんと動いているようです。

画像比較ライブラリ

GitHubでimage diffと検索したところ、https://github.com/uber-archive/image-diffが一番人気のようでした。
しかし残念ながらもうメンテされる予定がないようで、今回は代替としてオススメされていたgemini-testing/looks-sameを使うことにしました。

それではインストールします。
devDependenciesだとパッケージの時に含まれないので–save-dev（-D）は付けないようにします。

$ npm install looks-same

後はREADME通りにやれば特にハマることなく使えました。

ソースは以下からご覧いただけます。（とても2017年と思えない素朴なJavaScriptです…！）
https://github.com/tnantoka/image-differ/blob/master/renderer.js

Macアプリにする

このままではnpmを触れない人は使えません。
このツールの最終目的は、こういう作業が得意な人に全部任せて僕がこの業務から開放されることなので、これでは駄目です。
他の人が使えるようにMacアプリ形式にパッケージ化します。

electron-userland/electron-packagerを使います。

$ npm install electron-packager -D

以下のようなbuildをscriptsに追加しました。

"build": "electron-packager . --overwrite"

$ npm run build
> image-differ@1.0.0 build /path/to/image-differ
> electron-packager . --overwrite

Packaging app for platform darwin x64 using electron v1.6.12
Wrote new app to /path/to/image-differ/image-differ-darwin-x64

$ open image-differ-darwin-x64/image-differ.app