ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイナーの方は覚えておくと便利そうですよ!

GitHubでは様々なファイルの差分表示が行えます。その一つに画像があります。PNGやJPEGといった画像の差分をWebブラウザ上で行えます。これはデザイナーの方にとってかなり便利な機能ではないでしょうか。

しかしデザイナーであればなんとしても対応して欲しいと思うのがPhotoshopのPSDではないでしょうか。GitHubではPSDをサポートしていませんが、それを可能にするライブラリがpsdiffです。

psdiffのインストール

インストールは簡単で、一行のスクリプトで完了します。これは差分チェックを行いたいGitリポジトリ上で行います。

$ bash <(curl -sSL https://raw.github.com/filp/psdiff/master/install.sh)
Damn, the 'psd' gem is not installed! Shall I fetch it now? (yes/no) yes

Running 'gem install psd' (it might take ages, so please sit back!)
Fetching: bindata-2.0.0.gem (100%)
Successfully installed bindata-2.0.0
Fetching: psd-enginedata-1.0.0.gem (100%)
Successfully installed psd-enginedata-1.0.0
Fetching: psd-2.1.0.gem (100%)
Successfully installed psd-2.1.0
3 gems installed


All done! Go ahead and give me all your PSDs!

これで準備は完了です。pre-commitに対応してフックスクリプトが仕掛けられます。

このスクリプトはPSDファイルを解析し、画像に変換してくれるものになります。

psdiffの使い方

ではGitHubのリポジトリを見てみます。

PSDでは差分に対応していません。
PSDでは差分に対応していません。

しかし同じディレクトリにpngファイルが生成されており、こちらは差分表示できます。
しかし同じディレクトリにpngファイルが生成されており、こちらは差分表示できます。

psdiffはPSDをそのまま使うのではなくPNG画像にエクスポートすることで差分チェックを可能にします。差分チェックはもちろん、プレビューとして使うのにも良さそうです。プロジェクト配下にあるデザイン確認などに使うと面白そうです。

psdiffはRuby製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

psdiff · simple psd file previews for git

デモ:psdiff/demo at master · filp/psdiff

filp/psdiff

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2