デザイナーのためのgit入門__4_

デザイナーのための git 入門 〜Abstract で git を学ぼう〜(2) #Zaim

はじめに

こんにちは。 Zaim で iOS エンジニアをしている @akatsuki174 です。前回は git の概念について説明しました。

今回は前回の知識を使って、 Abstract 上で git を体感してみる記事になります。ぜひ Abstract のアカウントを取得して手を動かしながらこの記事を読み進めてみてください。
※ Abstract の基本的な操作の説明は省きます。必要であれば他の記事も参照してください。
※ Abstract は有料ツールです。ちょっと試したいだけなら無料トライアルをしてみてください。自動課金はされません。

事前準備

まずはプロジェクトを作り、既存の Sketch ファイルを開くか、新しく Sketch ファイルを作ります。 PC に Sketch が入っていないと動かないので、 Sketch が入っている PC で試してください。

ブランチを切る

この master ブランチは安定版として取っておきたいので、新しくブランチを作成します。右上の「NEW BRANCH」ボタンからブランチを作成します。ブランチ名はこれから行う作業を表すものにしてください。日本語のブランチ名にしても大丈夫なようです。
※ブランチを作成することは「ブランチを切る」と表現することが多いです。

これにより Branches タブができて、今回作成したブランチが見られるようになりました。ここからはこのブランチ上で作業します。

コミットする

キリのいいところまでデザインしたら、変更を記録してみましょう。Sketch の画面下に「 Commit Changes 」というボタンがあるので、それをクリックしてみます。出てきたポップアップにコメントを付けてコミットしましょう。変更箇所を確認したい場合は「MORE OPTIONS」をクリックします。

ちなみにコミットする前後で何が変わったのかを比較したい場合は、上記右の画面で該当のレイヤーをタップ、出てきた画面で「SIDE BY SIDE」を選択すると見ることができます。いい眺めですね。

リストアする

エンジニアは Revert という言葉を使ったりしますが、要は元に戻すという操作です。ここではしょうもない落書きを 2 回コミットしてしまったので、それらをなかったことにしたいと思います。

この場合、「ここまではそのままにして大丈夫」という履歴を選択し、時計マークをタップします。

コミットの時と同様、コメントを付けて実行します。

すると指定したコミットまで状態が元に戻ります。

レビュー依頼する

自分一人ではミスになかなか気付けないこともあれば、他の人の意見をもらった方がよりブラッシュアップできることもあります。「こんなかんじのものができたので確認して下さい」という時にレビューを依頼します。該当のブランチを選択した状態で「REQUEST REVIEW」をクリックし、レビューをしてもらいたい人を指定してください。あとはレビューが通るかどうかをドキドキハラハラ待つだけです。

レビューをする人は、変更差分などを確認しつつ、 OK なら「Approve changes」、 NG なら「Request changes」をして、レビュー依頼者にフィードバックします。

マージする

レビューが Approve で返ってきたら master ブランチに変更を合体します。「MARGE BRANCH」をポチッとクリックするだけで完了です。

master ブランチを確認すると、ちゃんと変更が取り込まれていることがわかります。

コンフリクトを解消する

デザイナーが複数人いると同時に同じような箇所に手を付けざるをえず、システム側で自動マージできない状態が発生することもあるでしょう。ここではあえてコンフリクトを発生させてみます。先程の master ブランチからさらにブランチを二つ切ってみます。タブバーの色を、一つは赤色に、一つは青色にしてみます。

タブバーを赤くした tab_bar_red を master にマージすると、 tab_bar_blue ブランチに「アップデートしてね」というボタンが表示されます。

このボタンをクリックすると「コンフリクトが発生しているよ」という表示が出てきます。

tab_bar_blue ブランチでは青色のまま作業を進めようと思うので、右側の「PICK LAYER」をタップします。するとこのような画面が出てくるのでコメントを書いて更新します。

履歴としてはこのようになり、tab_bar_blue ブランチは青色のまま、 master ブランチも赤色のままになっています。これでコンフリクトが解消できました。

この状態で tab_bar_blue ブランチを master にマージすると、無事タブバーを赤色から青色に変えることができます。

まとめ

前回の記事で、git(バージョン管理ツール)のメリットをこのように紹介しました。

・どれが最新版か見分けやすい
・変更の合体がしやすい
・以前の状態に戻しやすい
・変更履歴をすべて残せる

ここまで読んだら「確かに便利!」と共感できるようになったのではないでしょうか。ぜひ Abstract などのバージョン管理ツールを使ってスマートにチーム作業を進めてみてください。

P.S.

↓踏んでみるだけ、踏んでみるだけ。


共感した、他の人にも知ってもらいたい等々思ったら、ぜひTwitterなどでシェアしてください。