URL を比較して差分画像を生成する CLI ツールを作りました

3382 ワード
Node.js puppeteer JavaScript WordPress JavaScript テキストリンク

2つのウェブサイトのブラウザ上での見え方を比較したい時があると思います。例えばプロダクションと開発用のウェブサイトなど。そんな時に使える CLI を作りました。

wwwdiff は 2つの URL を引数に指定して、ブラウザ上でのレンダリング結果の差分画像を生成するツールです。

インストール

インストールと実行には Node.js が必要です。パッケージマネージャーの npm 経由で wwwdiff をインストールできます。

$ npm install wwwdiff -g

インストールが完了すると wwwdiff コマンドが利用できるようになります。

$ wwwdiff -v
1.1.10

実行

比較したい2つのウェブサイトの URL を用意して下さい。例えば WordPress のデフォルトテーマで2つのポストを作って比較してみます。

サンプル1 サンプル2

これらの URL を引数に与えてwwwdiff を実行すると、ブラウザでのレンダリング結果を差分画像として出力することができます。差分画像は標準出力で得られますのでリダイレクトしたり他のコマンドにパイプするなどして下さい。

$ wwwdiff URL1 URL2 > diff.png
差分画像

グローバルに余計なツールをインストールしたくない場合は、 npx コマンドで即時実行することができます。ただし、毎回 Chromium ブラウザ （120MB程度） をダウンロードすることになる場合がありますのでご注意ください。 

$ npx wwwdiff URL1 URL2 > filename.png

オプション

カラーオプションでハイライトを変更できます。

$ wwwdiff -c blue URL1 URL2 > filename.png
差分画像

リポジトリ

リポジトリはこちらです。
https://github.com/kamataryo/wwwdiff