html（WEBビュー）での差分確認

Question

ブラウザで見るWEBビュー形式でhtml差分確認をしたいです。
textベースのDiffツールはたくさんあり、新旧のファイルを取り込めば、左右に新旧の差分が色つきで表示されてとても見やすいです。
WEBビュー形式でも同じようなことをしたいのですが、何かいい方法はないでしょうか？

Answer 1

ImageMagick というツールで、２つの画像の差分を調べることができます。

例：https://gist.github.com/katoy/4361493
これは、左上の２つの画像の差分を, Imagemagick を使って いろいろな指定方法で 差分抽出して表示させてみたものです。

これを応用して、
ブラウザでの html 表示のスクリーンショットを撮って、
画像の差分を好みの指定方法で表示させてるとよいのでは？

実は、そんなツールをつくって　https://github.com/katoy/diff-images に 登録しています。
そこでは、
public/results/capture-prev/*.png と
public/results/capture/*.png
を用意しています。
いくつかの操作をすると、
public/diff/screenshot/*.png
として、差分がある画像が生成されるというものです。
この例では 15 組の画像がありますが、その中の２組だけに差を仕組んであります。
resut/diff には, その差が抽出できています。
たくさんの画像を並べて目視で確認していたのでは見落とす可能性がありますので、機械敵に差分を抽出するツールが必要となってきます。

Comments

[moto]

ご回答ありがとうございます。

画像の差分とは盲点でした。すごいですね。うちうちで使用するならこれでも十分だと思います。
ですが、お客様に提供する事を前提とすると不十分な感じです。

あまりプログラムは得意ではないですが、自作でDiffツール作成してみようかと思います。
（htmlソースファイルをtextベースでdiffして、差分のあった箇所をbgcolorを変えて表示するとか）
ありがとうございました！

[katoy]

２つの情報を紹介します。参考になれば、幸いです。

1. [HTML同士を比較し、差分表示する方法がありましたら、ご教授ください](http://q.hatena.ne.jp/1239094048)

2. [Calculate the differences between two XML/HTML documents.](https://github.com/postmodern/nokogiri-diff)

この nokogiri-diff を使って、私は epub ファイルの比較ツールを作ったことがあります。(https://github.com/katoy/compare_epub)
epub というのは、電子周防咳の書式の１つで、複数の xml ファイルを zip 圧縮したものです。
nokogiri-diff を使うと、 文字列のレベルでの差ではなく、 DOM のレベルでの差を抽出することが可能です。