Git LFSでデザインファイルをバージョン管理する

Webデザイン Webその他

2017.09.08(Fri)

こんにちは、マークアップエンジニアの山中です。

弊社ではコーディングファイルのバージョン管理に「Git」を使っていますが、psdやaiなどのデザインファイルのバージョン管理方法に関しては長らく課題となっていました。

そんな中、Git LFS(Git Large File Storage)が実務で使えそうな状況になってきたので、思い切ってチーム内で導入してみました。

今回はその際の手順やポイントをまとめてみたいと思います。 コマンドも使いますが、できるだけSourceTreeを使った手順になっています。

Git LFS(Git Large File Storage)とは?

lfs01.png

出展元:Git LFS - GitHub

GitHubが中心となって開発しているGitの拡張機能。
Gitがソースコードなどのテキストファイルの管理に向いているのに対し、Git LFSは画像など大容量のバイナリファイルをGit管理することを目的として開発されています。

Git Large File Storage

Git LFSの仕組み

Git LFSは通常のGitリポジトリとは別に、バイナリファイルなどの大容量ファイルを格納するためのLFSサーバーを持ちます。大容量ファイルそのものはLFSサーバーに保存しておいて、そのファイルへのテキストポインタをGitリポジトリで管理するため、Gitリポジトリが肥大化せず、大容量ファイルの不要なpullやfetchも避けられるようになっています。

lfs02.png

Git LFSを導入する

Git LFS導入の準備

今回はmacOS Sierraでの手順をご紹介します。
まずは環境を整えましょう。

1. SourceTreeをインストールする

2. App Storeから「Xcode」をインストール(アップデート)する

(※数10分かかることもあります)

3. Command Line Toolsをインストールする

ターミナルで下記を入力するとApp Storeからインストールできます

xcode-select –install

4. Homebrewをインストールする

ターミナルで下記を入力し、画面に従ってインストールする

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

5. Gitホスティングサービスに登録する

Git LFSに対応しているGitホスティングサービスで有名なところでは
GitHub、BitBucket、GitLabなどがありますが、弊社ではユーザ数やプライベートリポジトリ数に制限がなく無料で使えるGitLab.com(GitLabのwebサービス版)を採用しました。
⇒[Register] からアカウントを登録しておきましょう。

6. SSHキーの生成および設定

こちらのサイトがわかりやすいです。出力されたSSHキーを
GitLab.com内右上のアバター画像 → [Settings] → [SSH Keys] → Keys欄
にペーストして設定完了。

Git LFSの導入

Git LFS自体の導入はとても簡単です。

1. Git LFSをインストールする

ターミナルで下記を入力してください。

brew install git-lfs

その後

git lfs install

2. Git LFSのバージョンの確認

git lfs version

⇒バージョンが表示されればインストール完了です。

Git LFSを実際に使う

1. GitLab.comで新規プロジェクトを作成し、SourceTreeにクローンする

lfs03.png
lfs04.png

2. Git LFSで管理する対象のファイルを登録する★重要★

クローンしたプロジェクトのルートフォルダでターミナルを開き、下記のように入力
(psdデータとaiデータを管理対象にしたい場合)

git lfs track '*.psd' '*.ai'

⇒これでpsdデータとaiデータがLFSで管理されるようになりました。

3. .gitattributesファイルができるのでコミットおよびプッシュしておく

4. あとは通常通りGit & SourceTreeでバージョン管理すればOKです。

Git LFSを使いこなすポイント

ここからはGit LFSを使ってみて分かったことや、うまく使いこなすためのポイントをいくつかご紹介します。

ファイル名は英数字に

もしかしたらGitLab.comに限ってのことかもしれませんが、ファイル名に日本語を使うとエラーが出やすいので英数字を使いましょう。

SourceTreeは常に最新に

古いバージョンのSourceTreeは動きが重いので、アップデートして常に最新版を使いましょう。

マージはできません

テキストファイルと違って、バイナリファイルは(今のところ)差分マージができません。コンフリクトが起きたファイル2つのうちどちらかを生かすしかないので、1つのファイルを複数人で同時に編集するのは(今のところ)やめておきましょう。

git lfs trackは忘れずに

最初にgit lfs track(Git LFSで管理する対象ファイルの登録)を忘れて使い続けてしまうと、LFSサーバーを使わずに大容量データがGitリポジトリに全部保存されていくため、重くなりすぎて動かなくなってしまいます。
しかもリポジトリが重くなってしまってからgit lfs trackしても軽くはできないので、新しくリポジトリを作り直すハメに…。
新しくプロジェクトを作った時は必ずgit lfs trackしましょう。

SourceTreeの画像のプレビューを無効にする方法

こちらはSourceTreeの動きを少しだけ軽くするTIPS。
画像のプレビューを使わない場合は、プレビューを無効にするとSourceTreeが多少軽くなります。

[SourceTree] → [環境設定] → [Diff]タブ

lfs05.png

⇒「サイズ制限(バイナリ)」の値を0(もしくは少ない値)にする
 もしくは
⇒「無視するファイル名のパターン」に拡張子を登録する
 ex) *.ai, *psd

特定のファイルのみpullする方法

例えばデザインファイルがリモートリポジトリに多数入っている状況で、その中の1ファイルを触りたいだけなのに全ファイルクローンするのに何分も待つのは辛いですよね。そういう時はこの方法が役立ちます。

1. ポインタファイルのみクローン(pull)するように設定する

ターミナルで下記を入力

git lfs install --skip-smudge

⇒これでLFSサーバーの大容量データはダウンロードせず、Gitリポジトリにあるポインタファイルのみをダウンロードする(smudgeフィルターをスキップする)設定になりました。

2. 通常通りクローン(pull)する

⇒ポインタファイルのみのクローン(pull)なので瞬時に完了します。
※ポインタファイルのダウンロード完了後、Git LFS(バイナリ)ファイルのダウンロードが始まった場合は「キャンセル」しておく

lfs06.png

3. 編集したいバイナリファイルだけを指定してダウンロードする

2でクローン(pull)したポインタファイルはテキストデータなので、当然photoshopなどでは編集できません。ですが下記コマンドにより編集したいファイルだけをバイナリデータとしてダウンロードすることができます。

編集したいデザインファイルが含まれるフォルダをターミナルで開き、下記のように入力する

git lfs pull --include ファイル名1,ファイル名2,・・・

⇒指定したファイル(バイナリデータ)だけがダウンロードされ、編集可能になります。

設定を元に戻したい時は

git lfs install –force

⇒これで元に戻ります。

最後に

デザインファイルのバージョン管理といえば、今注目の「Abstract」や「universions」、「Dropbox」などもありますが、今回ご紹介した「Git LFS + GitLab.com」でのバージョン管理は、社内のコーディングチームがすでにGitでバージョン管理している場合には、比較的導入しやすくメリットも大きいのではないでしょうか。

デザイナーとコーダー間のデータの受け渡しや共有がスムーズだし、新しくツールを増やす必要もありません。オープンソースなので情報も多いし今後どんどんよくなっていくことも期待できます。そして何と言っても全て無料でできるのはありがたいですよね。

将来的にバイナリファイルのマージができるようになり、差分表示ができる(GitHubでは既に可能)ようになって、さらにSourceTreeがもっと高速になってくれれば…間違いなく最強だと思います。
あと、個人的にはBacklogに早くLFS対応してほしいですね~。