WebDesigner's Memorandumウェブデザイナーの備忘録

Macの高機能diffツール「Kaleidoscope」

Kaleidoscope

神戸業務ハッカーのTDに、Kaleidoscopeを勧められてドハマりしました。
今までdiffツールはXCodeに付属のFileMergeを使っていたのですが、それより遥かに使いやすく、デザインも良いです。

FileMergeは単純に差分を見るだけにしか使わなかったので、「まあ、最低限の差分機能が使えればいいしこれで十分だろう」と思っていました。
しかし、FileMergeだとデザインが微妙な上、差分がある行が詰まっていくので見にくくなってしまいます。

また、KaleidoscopeをGitのコンフリクト解消時に使用するとかなり使いやすいです(FileMergeも使用可能だけど、前述の通り使いにくいため、慎重な作業であるコンフリクト解消に使うのは少し怖い)。

Kaleidoscope

Kaleidoscope

ダウンロードは公式サイトから購入してダウンロードする方法と、MacApp Storeから購入してダウンロードする方法がありますが、公式サイトからのダウンロードをオススメします。

公式サイトからダウンロードする場合は、フリートライアルも可能です。

Kaleidoscopeの使い方

使い方はKaleidoscopeを開いて、「Drag Files Here to Compare」と書かれたウインドウに2つのファイルをドラッグアンドドロップするだけです。

Kaleidoscopeのドラッグアンドドロップ画面

ドラッグできるファイルの種類は下記の通り

  • フォルダ
  • テキストファイル
  • 画像

フォルダを選ぶとフォルダ内で差分が表示されます。
差分時の色はデフォルトだと下記のようになっています。

意味
緑色追加されたファイル・フォルダ
赤色削除されたファイル・フォルダ
紫色変更されたファイル・フォルダ

Kaleidoscope フォルダの差分

ファイルを選択して、下メニューのファイルの移動アイコンをクリックして「Copy」を押すとファイルのコピーができます。

ちなみにフォルダ階層の中に入る場合は、別タブとして開かれていくので、戻りたいときはタブを閉じる(command + W)で元の階層へ戻れます。

コードの場合も同様で、変更があった箇所が分かりやすくハイライトされています。

Kaleidoscopeコードの差分

画像の差分があった場合には画像を重ねて見比べることもできます。

Kaleidoscope画像の差分

Kaleidoscopeの設定

Kaleidoscopeの[Preferences]では、ファイルの種類ごとの表示に関する設定ができます。

Images

[Images]では画像を比較したときの表示設定をします。

Kaleidoscope[images]

項目設定内容
Image NavigatorShow Automatically:イメージナビゲーターを自動的に表示
Never Show:イメージナビゲーターを非表示
Background Color背景色の設定
Transparency Rendition透明部分の表現の設定
Difference Rendition変更箇所のピクセルが強調表示される設定
Absolute:ハイライトの強度が一律になる
Proportional:ハイライトの強度がピクセルの変化に比例する
Difference Coloring変更箇所の差分の色

Text

[Text]では普通のテキストファイルを比較したときの表示設定をします。

Kaleidoscope[Text]

項目設定内容
Background Color背景色を「Light(白)」にするか「Dark(黒)」にするかの設定
Difference Coloring変更した部分の表示色設定
Multicolored:「追加」「変更」「削除」で色が分かれる
Single Color:変更箇所の色が全て1色になる
Fontテキストファイル内のフォント指定
Layout長い行を折り返すようになる
Whitespace空白の違いを無視(タブとスペース)するようになる

Folders

[Folders]ではフォルダを比較したときの表示設定をします。

Kaleidoscope[Folders]

項目設定内容
Hidden Files不可視ファイルも表示して比較する
Copy Filesファイルコピー時にポップアップを表示する

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね