今さら聞けない！ デザイナーのためのGit超入門

AED LABO 2015.7.4. sat.

TOSHIYUKI TAKAHASHI (GRAPHIC ARTS UNIT )

自己紹介

Graphic Arts Unit

髙橋としゆき๏ 愛媛県松山市在住

๏ フリーランスのグラフィックデザイナー

๏ デザイン系書籍の執筆もやってます

๏ フリーフォントサイト「ガウプラ」を運営

@gautt

Gitの前に バージョン管理システムを知ろう

バージョン管理システムとは

コンピュータ上で作成、編集されるファイルの

変更履歴を管理するためのシステム。

特にソフトウェア開発において

ソースコードの管理に用いられることが多い。

引用元“バージョン管理システム - Wikipedia” https://ja.wikipedia.org/wiki/バージョン管理システム

バージョン管理システムとは

ファイルの

変更履歴を

残しておくシステム

三行で

バージョン管理システムのない世界

トップデザイン.psd

別のデザイン案が見てみたい

トップデザイン2.psd

トップデザイン.psd

ベースカラーを変更してみて

トップデザイン2.psd

トップデザイン.psd

トップデザイン2_修正.psd

デザインOK。本番画像に差し替えてみて

トップデザイン2.psd

トップデザイン.psd

トップデザイン2_修正.psd

トップデザイン2_最終.psd

ロゴ変更になったので差し替えたら最終OK

トップデザイン2.psd

トップデザイン2_修正.psd

トップデザイン2_最終.psd

トップデザイン2_最終_決定.psd

最終OKと思ったけど、キャッチコピーだけ変更

トップデザイン2_修正.psd

トップデザイン2_最終.psd

トップデザイン2_最終_決定.psd

トップデザイン2_最終_決定_変更.psd

デザインOK。細部調整してコーダーに回してね

トップデザイン2_最終.psd

トップデザイン2_最終_決定.psd

トップデザイン2_最終_決定_変更.psd

トップデザイン2_本当の最終.psd

トップデザイン2.psd

トップデザイン.psd

トップデザイン2_修正.psd

トップデザイン2_最終.psd

トップデザイン2_最終_決定.psd

トップデザイン2_最終_決定_変更.psd

トップデザイン2_本当の最終.psdごめん、ベースカラー変更前のデザイン見せて

トップデザイン2.psd

トップデザイン.psd

トップデザイン2_修正.psd

トップデザイン2_最終.psd

トップデザイン2_最終_決定.psd

トップデザイン2_最終_決定_変更.psd

トップデザイン2_本当の最終.psd

えっと…… ベースカラーって

どこで変更したっけ……？

バージョン管理システムのある世界

トップデザイン.psd リビジョン 1デザイン初校

イマココ

別のデザイン案が見てみたい

リビジョン 2

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案イマココ

ベースカラーを変更してみて

リビジョン 2

リビジョン 3

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案

ベースカラーの変更イマココ

デザインOK。本番画像に差し替えてみて

リビジョン 2

リビジョン 3

リビジョン 4

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案

ベースカラーの変更

ダミーを本番画像に差し替えイマココ

ロゴ変更になったので差し替えたら最終OK

リビジョン 2

リビジョン 3

リビジョン 4

リビジョン 5

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案

ベースカラーの変更

ダミーを本番画像に差し替え

ロゴの差し替えイマココ

最終OKと思ったけど、キャッチコピーだけ変更

リビジョン 2

リビジョン 3

リビジョン 4

リビジョン 5

リビジョン 6

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案

ベースカラーの変更

ダミーを本番画像に差し替え

ロゴの差し替え

キャッチコピー変更イマココ

デザインOK。細部調整してコーダーに回してね

リビジョン 2

リビジョン 3

リビジョン 4

リビジョン 5

リビジョン 6

リビジョン 7

リビジョン 1

トップデザイン.psd

デザイン初校

デザイン別案

ベースカラーの変更

ダミーを本番画像に差し替え

ロゴの差し替え

キャッチコピー変更

イマココ細部ブラッシュアップ

ごめん、ベースカラー変更前のデザイン見せて

トップデザイン.psd

デザイン初校

リビジョン 2デザイン別案

リビジョン 3ベースカラーの変更

リビジョン 4ダミーを本番画像に差し替え

リビジョン 5ロゴの差し替え

リビジョン 6キャッチコピー変更

イマココ

リビジョン 7細部ブラッシュアップ

リビジョン 1

バージョン管理システムにはいくつかの種類があり、

大きく「集中型」「分散型」に分かれる。

代表的なものは以下の通り。

CVS （Concurrent Versions System）

SVN （Apache Subversion）

Git

集中型 分散型

Mercurial

バージョン管理システムの種類

今日扱うのはこれ

CVS （Concurrent Versions System）

SVN （Apache Subversion）

Git

集中型 分散型

Mercurial

バージョン管理システムにはいくつかの種類があり、

大きく「集中型」「分散型」に分かれる。

代表的なものは以下の通り。

バージョン管理システムの種類

gitは、プログラムのソースコードなどの変更履歴を

記録・追跡するための分散型バージョン管理システムである。

Linuxカーネルのソースコード管理に用いるために

リーナス・トーバルズによって開発され、

それ以降ほかの多くのプロジェクトで採用されている。

引用元“git - Wikipedia” https://ja.wikipedia.org/wiki/Git

Gitとは

Gitとは

いろいろある

バージョン管理システムの

なかの1種類

三行で

覚えておこう！ Gitにおける「3つの状態」

ワーキングディレクトリ ステージングエリア リポジトリ

Gitにおける「3つの状態」

ワーキングディレクトリ ス リポ

Gitにおける「3つの状態」

作業中の状態。普段の編集作業はすべてこの状態で行う。作業用のフォルダという

イメージ

ワーキング ス リポジトリ

Gitにおける「3つの状態」

Gitの情報として登録された状態。Gitはここに登録された情報をもとにバージョンを管理する。Gitの根幹とも呼べるもの

ワーキング ステージングエリア リポ

Gitにおける「3つの状態」

リポジトリに登録するファイルやディレクトリを選択した状態。リポジトリへの登録準備

作業ファイルをリポジトリに登録するまで

ワーキングディレクトリ ステージングエリア リポジトリ

まだリポジトリに何もない状態

index.html

style.css

main.js

ワーキングディレクトリ ステージングエリア リポジトリ

add

ステージングエリアへ移動

index.html

style.css

main.js

index.html

style.css

main.js

index.html

style.css

main.js

ワーキングディレクトリ ステージングエリア リポジトリ

commit

リポジトリに登録（コミット）

index.html

style.css

main.js

リポジトリにコミットが登録された

index.html style.css main.js

リビジョン 1

ワーキングディレクトリ ステージングエリア リポジトリ

index.html

style.css

main.js

index.html style.css main.js

リビジョン 1

main.js

ワーキングディレクトリ ステージングエリア リポジトリ

index.html

style.css

一部のファイルだけを変更した場合

一部のファイルだけを変更した場合

index.html style.css main.js

リビジョン 1

main.js

add

ワーキングディレクトリ ステージングエリア リポジトリ

index.html

style.css

main.js

index.html style.css main.js

リビジョン 1

main.js

commit

ワーキングディレクトリ ステージングエリア リポジトリ

リポジトリに登録（コミット）

index.html

style.css

main.js

index.html style.css main.js

リビジョン 1

main.js

リビジョン 2

ワーキングディレクトリ ステージングエリア リポジトリ

リポジトリに新たなコミットが登録された

index.html

style.css

main.js

index.htmlmain.jsstyle.cssindex.html style.css main.js

リビジョン 1

main.js

リビジョン 2

ワーキングディレクトリ ステージングエリア リポジトリ

以前のコミット時の状態へ戻す

index.html

style.css

main.js

今はリビジョン2の状態

イマココ

index.html style.css main.js

リビジョン 1

main.js

リビジョン 2

ワーキングディレクトリ ステージングエリア リポジトリ

目的のコミットをチェックアウト

checkoutindex.html

style.css

main.js

index.html style.css main.js

リビジョン 1

main.js

リビジョン 2

ワーキングディレクトリ ステージングエリア リポジトリ

ワーキングディレクトリの内容が更新

index.html

style.css

main.js

今はリビジョン1の状態

イマココ

ワーキングディレクトリ ステージングエリア リポジトリ

Git操作の基本的な流れ（おさらい）

checkout

add commit

リポジトリの種類

ステージングエリア リポジトリ

リモートリポジトリ

リポジトリの種類

ローカルリポジトリ

クラウド上にある中央リポジトリ。Gitに対応したホスティングサービスを利用する

各ユーザーのPC内にあるリポジトリ。普段のコミットはこのリポジトリに対して行う

リモートリポジトリ（中央リポジトリ）

ローカルリポジトリ

自分のPC

ローカルリポジトリ

A B C

リモートリポジトリ（中央リポジトリ）

リモートリポジトリ（中央リポジトリ）

ローカルリポジトリ

push

リモートリポジトリ（中央リポジトリ）

ローカルリポジトリ

pull

ワーキング ディレクトリ

ステージング エリア

ローカル リポジトリ

基本的な処理を整理すると……

checkout

add commit

リモート リポジトリ

push

pull

ブランチについて

コミット1 コミット2 コミット3

コミットが増えると履歴が生まれる

コミット4

この一連の履歴を「ブランチ」と呼ぶ

検索機能を追加する作業

スライドショーを追加する作業

コミット3

別のブランチを派生させることが可能

コミット4

プロジェクト本体（master）

派生ブランチを合流させることも可能

コミット4

コミット6

コミット7

コミット8

コミット9

コミット10

コミット12コミット11

合流させることを「merge」と呼ぶ

コミット3

Gitを実際に体験してみよう

本日のハンズオン内容

1. SourceTree（GUIツール）のインストールと設定

2. 一人でGitを使った作業を体験してみる

3. 複数人で共同作業をしてみる（チーム作業）

4. ブランチを使って作業してみる（チーム作業）

リモートリポジトリ

Aチーム

Bチーム

青グループ

aed_demo_blue

赤グループ

aed_demo_red

Aチーム

Bチーム

Aチーム

Bチーム