差分比較ツールDeltaWalkerで、終わらないデバッグ作業を超速で解決

こんにちは、A.C.O.編集部です。「せっかくパソコンを使っているのだし、なるべく反復作業を減らしたい」という思いから、様々なツールを使い、簡単で正確な方法を日々探しています。このコーナーではそういったツールのうち、現場で実際に役立っているものをご紹介します。

何回見直せば安心できるのだろう?

Web制作の現場では、公開するまでに何度も制作物であるHTMLが原稿と合っているのかチェックする必要があります。また、納品物に不足しているファイルがないか、不要なファイルが含まれていないかも確認しなければなりません。しかし多くの場合、目視によるチェックが主流になっていると思われます。

例えば、
– 流しこみ時のコピペミスで文頭の文字が失われていないか
– (慣れない)英文キャッチコピーのスペルは正しいか
– 巨大なカタログ表の正誤
– 数百から数千に上る納品ファイルの過不足

…どれも目視だけでは大変そうです。 チェック作業においてまず「違和感」に気づける目視はやはり外せませんが、それだけでは何度見直しても不確実性が残ります。作業人員を増やしても同じことが言えます。

こういった確認作業においては、目視チェックの限界を補い、かつスピードと確実性をプラスするためにいわゆる「比較ツール」の使用が適しています。今回は、比較した結果のレポート出力機能が付いているDeltaWalkerをご紹介します。(Mac版を用いましたが、Win、Linuxにも対応しているようです。)

DeltaWalkerを入手

まずは触れるようにしましょう。DeltaWalkerのサイトの「TRY NOW」から、試用版をダウンロードできます。

※製品版にはStandard、Pro、Oroの3種類がありますが、今回のご説明で用いる機能はStandard(39.95ドル ※2016年2月現在）に全て含まれています。

ダウンロードしたdmgファイルをインストールします。

原稿とhtmlの正誤を比較してみる

早速、原稿とhtmlに含まれるテキストが正しいか比べてみます。

• 1比較データ (原稿)の用意
  原稿はWordやPDFなど様々ありますが、テキストエディタなどを用いてプレーンテキストにして保存。
• 2比較データ(html)の用意
  htmlデータではなく、あくまで原稿との正誤を確認するため、ブラウザからテキストをコピーし、別のテキストファイルとして保存。
• 3DeltaWalkerで比較する
  2つのテキストファイルをDeltaWalkerにドロップすると、比較が開始されます。
  この場合左側が原稿、右側がhtmlからのテキストとなっています。文頭の文字のコピペミスや、段落の抜けなどがわかります。

• 4結果をレポートとして書き出す
  「File > Report > Create HTML」より、htmlファイルでレポートを書き出せます。
  ※ただしこの時、なぜか拡張子が「.htm*」となってしまうので、自分で「.html」に書き換えます。 Sampleレポートファイルをダウンロード

ファイルの過不足・変更をチェックしてみる

続いて、納品ファイルの整理や、サーバーのゴミファイルを特定する場合を想定したフォルダとフォルダの比較を行ってみましょう。

• 1比較する二つのフォルダを用意
  今回は、サンプルとしてサイトを想定したファイル群を用意。もう一つは、部分的にファイルを書き換えたり、削除したり追加したりしています。
• 2DeltaWalkerで比較する
  テキストの時と同様に二つのフォルダをDeltaWalkerにドロップします。すると、テキスト比較の場合とは異なる結果画面が表示されます。
  差が見られないファイルやフォルダは薄く表示され、過不足や差異がそれぞれ色分けされます。Dが日付の違い、Sが中身の違いを表します。
  ※比較条件や精度は「DeltaWalker > Preferences」で設定できますが、この場では割愛します。

• 3結果をレポートとして書き出す
  こちらも、htmlファイルで書き出せます。
  Sampleレポートファイルをダウンロード

いかがでしたでしょうか？DeltaWalkerを用いた2つのチェック方法をご紹介しました。使いどころがそう頻繁にあるわけではありませんが、ディレクター、あるいはチーム内で誰か1人こういったツールによる確認手段を持っておくと、従来の目視と合わせて品質担保に役立つと考えています。
読んでいただいてありがとうございました。

• #ディレクション
• #情報設計（IA）
• #Tips