差分比較ツールMeldを起動するための「Meld Launcher」を作った

差分比較ツール Meld を起動するためのツール「Meld Launcher ( umi-uyura/meld-launcher )」を作ってみました。

Meld Launcher

何をするものか

Meldで比較する対象を、ドラッグ＆ドロップで指定して実行するだけのツールです。

Meldはフォルダの比較表示が見やすいので、たまにつかっているのですが、残念なところとして、Xcodeに付属している差分比較ツールのFileMergeのように、ファイルやフォルダをドラッグ＆ドロップで指定できないという点があります。

ターミナルから $ meld <target1> <target2> のように実行するか、起動後にファイルダイアログで選択するしかないようです。

そこで、同じようにドラッグ＆ドロップでパスを受け取り、それを引数としてMeldを実行する、というツールを作ってみました。

使い方

アプリを起動すると、以下のような画面が現れますので、比較したいファイル/フォルダを Target 1 と Target 2 にドラッグ＆ドロップし、 COMPARE ボタンを押すだけです。

注意点

X11(XQuartz)が重い環境だと、実行されるまでに時間がかかる場合があります。

その場合は、X11(XQuartz)サーバーを先に起動しておくなどして使ってみてください。

前提条件

HomebrewでMeldをインストールしていることを想定しています。

$ brew install meld

また、現状Meldのパスは固定で /usr/local/bin/meld になっています。

インストール

GitHubのReleasesページ から、 meld-launcher-x.x.x.zip をダウンロードしてください。

展開すると meld-launcher.app が現れますので、 /Applications や任意の場所に置いていただければ完了です。

meld-launcher.app を実行すれば、アプリが起動します。

今後の課題

環境変数PATHを認識させたい

現状、Meldのパスは /usr/local/bin/meld 固定になっています。

パッケージングしたNW.jsの中で上記のPATHを取る方法がわからず…

パッケージングしたNW.jsだと、PATHはこれしか通ってないのか pic.twitter.com/Pjx8HI2x5J

— Umi Uyura (@umi_uyura) May 22, 2015

もし他のパスに入っているけど使ってくれるという人がいるようであれば、GitHubからクローンしたものを編集するか、meld-launcher.appのパッケージ内の meld-launcher.app/Contents/Resources/app.nw/build/bundle.js から上記パス部分を探して書き換えるなどしてください。

Meldの良いところ

Macでテキスト系ファイルの差分比較ツールとしては、XcodeにFileMergeという差分比較ツールが標準で付属しているので、それを使っている方も多いのではないかと思います。

実際私も使っていて、以下のエントリのように、LaunchpadやAlfredからも呼び出せるようにしています。

umi-uyura.hatenablog.com

MeldはWindows/Linux/Macに提供されているのですが、Mac版は開発が遅れているのか、Windows/Linuxよりもメジャーバージョンがひとつ古いもののままですし、X11に依存しているせいか見た目も古臭い感じで、パッと見ちょっと心もとない感じがするかもしれません。

なぜそんなMeldを使うかというと、フォルダ同士の比較がFileMergeよりも見やすいからです。

FileMergeのフォルダ比較

Meldのフォルダ比較

FileMergeのフォルダ比較は1画面にまとめた形で表示されるのですが、Meldではファイル比較と同様に、左右に分けて差分を表示してくれます。

個人的には、この表示のほうがわかりやすくて好みなので、状況によってFileMergeとMeldを使い分けています。

詳細！Apple Watch　アプリ開発入門ノート Swift1.2 + Xcode6.3対応

技術スタック的な

Meld Launcherは、ここ最近ブログに投稿していた、NW.js + React（デザインフレームワークとしてMaterial UI）で作っています。

そもそもは業務で非ITな人向けのGUIツールを作る必要があったので、そのついでに作り始めたのですが、むしろこっちの方がハマるところが多くて困りました。

今回Reactを使ってみたのは、単純に興味からです。

少し前に参加した勉強会 で、@masuidriveさんのReactの話（ Reactがなぜ素晴らしいのか ） を聞いたあたりから興味が湧いていて、ちょうど試せそうな作業があったので、やってみたという感じです。

• NW.js上でReactを動かしてみた
• React + NW.jsのプロジェクトをnode-webkit-builderで配布形式にパッケージングしてみた
• React + NW.jsでFinderからドラッグ＆ドロップ
• React(JSX)開発にBrowserifyとReactifyを導入
• React + NW.jsにデザインフレームワークとしてMaterial UIを組み合わせてみた

Reactを触ってみた感想

私が最初に始めたプログラミングはMicrosoftのVisual C++で、主にMFC(Microsoft Foundation Class)というクラスライブラリを使って開発をしていました。

@masuidriveさんも昔のWebのプログラミングに戻ったというような話をされていた気がするのですが、Web開発自体の経験は浅い自分としては、Reactはその頃のプログラミングの感覚に近い印象を持ちました。

Reactのコンポーネントは、オブジェクト指向で言う Class の中に、その Class を構成する属性および操作が基本的にまとまっている、という構造になっているので、全体像がつかみやすいです。

保守性が高いというのは、こういうところに現れている気がしました。

JavaScriptのプロトタイプ指向と呼ばれるものの柔軟過ぎるところに、自分は正直まだまだ馴染めていないところがあるので、そういうタイプの人間にも取り組みやすいかもしれません。

ES6系の構文を使うように慣れば、よりオブジェクト指向的な記法になってくれるようなので、その方が自分的にはより理解しやすくなってくれるのではという気がしています。

最後に

あーアイコンがダサい。

参考

• Reactがなぜ素晴らしいのか // Speaker Deck
• 【#techbuzz】第11回 HTML5+JS 勉強会【HTML5/JavaScriptではじめるIoT / React.jsがなぜ素晴らしいのか】
• umi-uyura/meld-launcher

入門 React ―コンポーネントベースのWebフロントエンド開発