テキストデータを修正前後で比較する方法（おまけあり）

修正の前後でどこかが違う…

HTMLやPHPなどのコードで何ヶ所か直した後に、どこかで崩れやエラーを出してしまったけどバックアップが少し前のものしかない…なんてことよくある話ですよね？

直していたコードと直す前のコードを見比べながら整合性をとっていくと思うんですが、すごい長いコードなんて書いてた日には…耐えられないですね、笑い事ではないですが（笑）

Windowsのフリーツールで便利なものが出ていたので、インストールから使い方までご紹介します。ほんと便利ですよ！

WinMerge

http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html

インストール

上記のURLより自分のパソコンにダウンロードしてください。64bitの人は64bit使った方が快適だと思いますよ（良さを体感したことはないです）

「次へ」をクリック

ここでキャンセルする人はいないとは思いますが…

「次へ」をクリック

ここまでに変なソフトをインストールされることはないようです。

インストール先の指定

インストールするフォルダが問題なければ、そのまま「次へ」をクリックしてください。

コンポーネントの選択

特に変更の必要はないですが、不要なものがある人はチェックを外して「次へ」をクリックしてください。

プログラムグループの指定

このまま「次へ」をクリックしてください。

追加タスクの選択

「エクスプローラのコンテキストメニューに追加」は右クリック時の「WinMergeで開く」だったと思いますので、いらない人はチェックを外して「次へ」をクリックしてください。

インストール準備完了

今まで設定した項目の確認なので、そのまま「次へ」をクリックしてください。

これでインストールが実行されます。

情報

重要な情報らしいのでよく読んで「次へ」をクリックしてください。

WinMergeセットアップウィザードの完了

そのまま「完了」をクリックしてください。WinMergeが起動します。

これでやっとインストール完了です！ よくあるフリーソフトみたいに変なソフトを入れてこないので、あんまりこだわりのない人はどんどん進めても安心ですね。

使い方

起動すると正直、なんの変哲もないです。

新規作成

「ファイル」の「新規作成」をクリック、またはショートカットキーの「Ctrl + N」を押してください。

パネルの使い方

まずは下に出てる「Diff Pane」ってのを「×」押して閉じてしまいましょう。使ったことないです…

「左無題」と「右無題」ってなっているところに比較したいテキストをいれます。

わかりやすいようにカンタンなテキストを用意しました。下のテキストをコピーして、左側に貼り付けてください。

テキストを比較する

右側には下のテキストをコピーして貼り付けてください。（1行すき間がありますがそのままで大丈夫です）

下の画像のようになっていると思いますので、赤枠の箇所（表示更新）を押してください。

ソフト使うまでもない差ですが、練習のためお付き合いください^_^

比較結果

左右で違う場所に色が付きました（わかりやすくするためデフォルトと色を変えています）

• 黄色の行が「左右で違う箇所がある」
• 灰色の行が「左右で行が多いか少ない行」
• 赤色の文字「左右で多いか少ない文字」（ここがデフォルトと違います。色はカスタマイズできるのでお好みで）
• クリーム色の文字「左右で差がある文字」

ざっとこんなルールになってるみたいです。

ファイルがある場合には、コピー＆ペーストしなくてもドラッグすることで

ファイルで比較ができるので、ドラッグで「1・2」に入れるか、「参照」で選んだら「OK」で同じことが可能です。

おまけ

おまけは「画像の比較」機能がついているっていうお知らせ（？）です！ 試しに、下の画像の「左右」を比べてみます。

答えは、右側の「エルの上に点」があるのが違いです。

画像比較はドラッグで

コードはないので、ドラッグで指定して「OK」を押すと…

ちゃんと差があるところに色つけてくれてます、すごい！

ただ、左の「Location Pane」ってところをうまく調節しないときれいに表示してくれなかったです。加えて、圧縮率が違う画像もキビシイかもしれないのでいろいろ試してみてください。