デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ムシムシしますね、@cappeeです。

デザインの修正があって、「もしかすると前のデザインも使うかもしれないからファイル名変えてとっておこう。」って時結構ありますよね。

あと、大幅にデザインがかわるので念のため新旧で残しておくとか。

そんなことをしているとこんな感じで日付がついたファイルがたーくさんできてしまうのです。

156e21a0ac79a21a3da6d62a4ff6370d デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

もっとファイルをキレイに管理できないもんか。。

そこで、「Pixelapse」の登場です。

「Pixelapse」でバージョン管理

 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

Pixelapse」とはデザイナー版Dropbox+GitHubのようなもので、pngやpsdなどのファイル管理差分があった時のバージョン管理ができます。(以前は招待制だったようです)

Pixelapse 1024x584 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

フォルダをつくって公開・非公開の設定も可能です。

Pixelapse1 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ファイル名が違うとキャプチャ付きの一覧で表示されます。

Pixelapse2 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ファイル名をクリックするとどのくらい変更があったか、変更されたファイルのデザインをプレビューで見ることができます。便利!
ただし自動的にファイル同士を比較して差分を表示してはくれませんので、目視での確認が必要になります。

過去のデータをダウンロードできるので、デザインを元に戻すなんてことも簡単です!

Pixelapse3 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

アプリケーションをインストールすればローカルフォルダのように保存できるのでとても便利です。
私のWin7の環境だとパソコンを終了するときに、アプリのエラー表示がでるようになったので(なぜ。。)、スタートアップにはせず、使う時だけ起動するようにしてます。

私はバックアップ的な形でキリのいいタイミングで「Pixelapse」に保存して使用していますが、下記でも紹介されているように常に「Pixelapse」でデザインファイルを保存しておけば、万一上書きしてしまった際の救世主にもなります。
ただし、その分リビジョン(履歴)がたくさんできてしまうため容量の問題も発生してしまいますのでご注意ください。現時点では容量制限の記載はないみたいです。
もうPSDは無くさない!デザイナー版GitHubのPixelapseはうっかりデザイナーの救世主!

Dribbleのように作品を公開することもできるので、ポートフォリオのように使うこともできますね。

サーバー大丈夫なのかなって勝手に心配してますが、こういう便利なサービスがあるのは非常にありがたいです。

Pocket
article clipper デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

[バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

梅雨入りしたのに快晴が続いてますね、@cappeeです。

コーディング中にちょっとしたミスをしてしまったり、クライアントさんにやっぱり元に戻してと言われたり、「ソースコードを前の状態に戻したい…」ってことはWebデザイナーでも少なくないと思います。

バージョン管理はエンジニアさんのためだけではありません:)

バージョン管理導入したいけど、Gitとか難しそうだし」というWebデザイナー(非エンジニア)でも簡単に導入できるツールがあるので、設定方法などをご紹介したいと思います。

バージョン管理とは

ソースコードの差分などファイルの更新履歴を管理してくれるシステムです。

プロジェクト内のファイルをバージョン管理することで、編集日や編集箇所などを記録しておくことができるので、過去のソースコードを容易に探すことができます。

複数人でひとつのプロジェクトに参加している場合は、同じソースコードを複数で編集した場合に変更内容を知らせてくれるなど、重複や巻き戻り防止にもなります。

私は一人の場合でも、バックアップとして活用しています。もう大量のファイルをローカルに保存しておかなくても大丈夫です。

Gitとは

分散型の高機能なバージョン管理システムです。

Gitはオープンソースですので誰でも使用できる手軽さからとても人気があります。

イラスト付きですごーく詳しく説明してくれている記事があるのでこちらをご覧ください!
イラストでわかる!git入門の入門

バージョン管理を導入するのは手間のかかる作業ですが、「Bitbucket」と「SourceTree」を使うことで、ぐっと導入が簡単になります。(私でもできました。)

SourceTree」は、ローカルからリポジトリにPushやコミットをするソフトです。先日「SourceTree」のWindows版がリリースされました。

Bitbucket」は、コミットされたファイルの履歴などを閲覧することができるウェブサービスです。

今回はこの2つを使ってバージョン管理を導入してみたいと思います。

とりあえず何ができるの?

更新したファイルを「SourceTree」でリポジトリにコミットすると、「Bitbucket」でウェブから下記のような更新履歴を見ることができます。

赤枠のように何の修正をしたかなどコメントを残すことができるので、後から探しやすいです。(下記はコメント適当ですがもっと具体的に書いたほうがいいです。)

Bitbucket [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

コメントのところにあるリンクをクリックすると、前回との差分を見ることができるので、ソースコードを元に戻したい場合などにとても便利です。

Bitbucket1 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

画像なんかも前後で比較してくれるので便利!

Bitbucket2 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

気になった方は、下記を参考に便利なバージョン管理Lifeをお楽しみください。

SourceTree をインストール

まずは「SourceTree」をインストールしてください。

インストールを進めるとGitがまだPCにない場合は「Gitないけど入れますか?」と聞かれるので、とりあえず一番上を選択してください。

sourceTree1 300x269 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

さらに進むとアカウント登録画面が表示されるので名前とメルアドを入力し、最後の規約同意をチェックして次へ。

sourceTree2 282x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「global ignore file をインストールする?」と聞かれるのですが、これは管理しないファイルリストのことです。
「.exe」や「.dll」など通常コミットしないであろうファイルが書かれてあるデフォルト設定のファイルリストを使う場合は「Yes」を押します。
無視リストに関してはこちらに詳しく注意点など書かれてますのでご覧ください。
SourceTree が Git のグローバルな無視リストを書き換えて困った話

sourceTree3 300x166 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次にリポジトリを管理するツールについて聞かれるので、「Bitbucket」を開いてサインアップしてください。

sourceTree4 283x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

できたら「Finish」でインストールは完了です。

鍵をつくる

」は、Gitとサーバが通信を行う認証情報として必要なファイルで、安全に通信することができます。重要な情報を含んでますのできっちり管理しましょう。

「SourceTree」上部にあるメニューから、「Tools」→「Create or Import SSH Keys」を選択して、PuTTY Key Generator を起動してください。

sourceTree5 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Generate」をクリックし、「Key」と書かれた枠内でマウスを動かすと鍵が生成されます。

sourceTree6 300x255 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記のように表示されたら、「Key Comment」に自分の名前などわかりやすいもの、「Key passphrase」と「Confirm passphrase」には設定したいパスワードを入力します。

sourceTree7 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Save private key」をクリックして「秘密鍵」(.ppkファイル)を保存します。

それとは別に「公開鍵」というものも保存しておきます。「Public key for pasting into OpenSSH authorized_keys file:」のところに書かれてある文字列をコピーしてエディタなどに貼り付けます。「名前.pub」の形式で保存してください。

次に「秘密鍵」を登録します。
Generatorを閉じて、SourceTreeの「Tools」→「Launch SSH Agent(pageant)」を選択。
先ほど保存した.ppkファイルを選び、パスワード(passphrase)を入力して登録完了です!ふぅ

大事だからもう一度言います。秘密鍵と公開鍵はなくさないでくださいね。

Bitbucket で鍵の設定

鍵設定の前に「Bitbucket」を日本語で表示させたいと思います。
右上のプロフィール画像から「Manage Account」を選択し、「Language 」を「Japanese」に変更します。
「Save Settings」をクリックすると、翻訳率は99%で不完全だけどいいですか?というダイヤログがでますがそのまま設定を保存して日本語にしましょう。

Bitbucket3 300x189 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「鍵」を設定します。左のメニューから「SSH キー」を開いてください。

鍵を追加」をクリックして、「Label」 には公開鍵と同じ名前など適当なものを入力し、「Key」にはエディタで保存した「公開鍵」を貼り付けて追加します。

Bitbucket4 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

これでついにバージョン管理ができるようになります!やた

リポジトリの作成

リポジトリ」とは、更新したファイルのデータなどが蓄積する「場所」のことで、基本はプロジェクト単位で作成します。

ブルーのヘッダーにある「作成」ボタンを押すと新規リポジトリページが表示されます。(100万人突破したらしくキャプチャのロゴは特別バージョンです)

Bitbucket5 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「名前」には英数字でプロジェクト名を入れます。
非公開にする場合は「プライベートリポジトリ」にチェックしてください。
リポジトリタイプは「Git」です。
プロジェクト管理にチェックすると、「課題追跡」や「Wiki」なども作成することができます。

「リポジトリの作成」をクリックすると、リポジトリ画面になります。
これでリモート上のリポジトリは作成することができました。

Bitbucket6 300x165 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「SourceTree」でコミットした時に蓄積されるローカル上のリポジトリも作成します。
上記画面で「クローン」をクリックし、ブルーのボタンの「SourceTreeにクローン」を押すとダイアログがでるので「アプリケーションの起動」をクリック後、「SourceTree」の設定画面が開きます。

sourceTree8 300x157 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Destination Path」にローカルでプロジェクトを管理しているフォルダを指定します。
すでに作業していたフォルダを指定する場合は、念のためフォルダ内のファイルをコピーしてからこのリポジトリを作成した方がいいかもしれません。
何回かファイルがすべて消えてしまったことがあるので…。やり方が悪かったのかもしれませんけど。

「Clone」をクリックすると、作成したリポジトリの画面が表示され、ファイルを管理できる状態になりました。

sourceTree9 300x199 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

ローカルリポジトリにコミット

次に設定したフォルダにあるファイルをローカルのリポジトリに「コミット」してみます。

画面上部にあるアイコンメニューから「Commit」を選択してください。

sourceTree10 1024x694 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記の画面が表示されるので、どのような更新をしたかなどコミット理由を明記します。
Commit modeを「Selected files」にして、もしコミットの必要がないファイルがあれば下のチェックを外します。
画面右下の「Commit」ボタンを押せばコミット完了です。

リモートリポジトリにプッシュ

リモートのリポジトリにプッシュすると、「Bitbucket」上で更新履歴を閲覧できるようになります。

「SourceTree」のアイコンメニューにある「Push」をクリックしてください。

sourceTree11 300x250 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「master」にチェックし、「OK」を押せばプッシュ完了です。

ただし、ソフトを起動して最初のプッシュの時だけ下記のような認証警告ダイアログが表示されます。

sourceTree12 300x124 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Yes」をクリックして、先ほど保存したppkファイルの「秘密鍵」を選択してください。

下記のような「Enter Passphrase」画面が表示されるので、設定したパスワードを入力します。

sourceTree13 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「SourceTree」に戻り、「Retry」ボタンを押せばプッシュできます。Pushingの青いバーが右まできたらプッシュ完了です!

Bitbucket で履歴確認

ブラウザで表示していた「Bitbucket」に戻って、プロジェクト画面を更新してみてください。
下記のようにコミットした履歴が表示されれば成功です。おめでとうございます!

Bitbucket7 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「概要」メニューの右側にある、「ソース」ではファイルの一覧が見れたり、「コミット」ではコミット一覧が表示されていますので色々とリンクをクリックしてみると、こんなことも管理できるんだ!と利便性を実感できるかと思います。

ファイルを更新する(運用方法)

上記でコミットしたファイルを更新すると、「SourceTree」で更新されたファイル数や編集内容が確認できます。
同じファイルに上書きしていても、どのような編集が行われたかを確認することができるなんてステキですよね。

sourceTree14 1024x679 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

上記と同じようにコミット&プッシュをして、「Bitbucket」で確認してみます。更新履歴が追加されました。

Bitbucket8 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

リンクをクリックすると具体的な編集内容を見ることができます。

Bitbucket9 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

このようにバージョン管理すればいざというときも安心です!

ぜひ導入を検討してみてください。

ちなみにDreamweaverからGitを使える「GITWeaver」という機能拡張もあるようです。色々な管理方法があるので、紹介しておきます。
Gitを使っているWebデザイナー必見。DreamweaverからGitを使える「GITWeaver」

Pocket
article clipper [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理