SlideShare a Scribd company logo
1 of 61
Download to read offline
今さら聞けない!
デザイナーのための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.css
index.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チーム

More Related Content

What's hot

Git flowについてまとめてみた
Git flowについてまとめてみたGit flowについてまとめてみた
Git flowについてまとめてみたhiroyuki koga
 
ノンプログラマのGit入門
ノンプログラマのGit入門ノンプログラマのGit入門
ノンプログラマのGit入門Muyuu Fujita
 
git flowを使った開発フロー
git flowを使った開発フローgit flowを使った開発フロー
git flowを使った開発フローshigetoshi komatsu
 
Git for Begineers GitHub ハンズオン
Git for Begineers GitHub ハンズオンGit for Begineers GitHub ハンズオン
Git for Begineers GitHub ハンズオンEmma Haruka Iwao
 
GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?Kiyotaka Kunihira
 
Gitはじめの一歩
Gitはじめの一歩Gitはじめの一歩
Gitはじめの一歩Ayana Yokota
 
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用Reimi Kuramochi Chiba
 
Git 10min
Git 10minGit 10min
Git 10mingon6109
 
Windows環境でのgitまとめ(2016.1)
Windows環境でのgitまとめ(2016.1)Windows環境でのgitまとめ(2016.1)
Windows環境でのgitまとめ(2016.1)Tadahiro Ishisaka
 
Git LFSを触ってみた
Git LFSを触ってみたGit LFSを触ってみた
Git LFSを触ってみたYuto Suzuki
 
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方hibiki443
 
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料mihararyosuke
 
バージョン管理システム比較資料
バージョン管理システム比較資料バージョン管理システム比較資料
バージョン管理システム比較資料suzzsegv
 
GitHubで学ぶバージョン管理
GitHubで学ぶバージョン管理GitHubで学ぶバージョン管理
GitHubで学ぶバージョン管理Masafumi Yokoyama
 
20130608 git-0
20130608 git-020130608 git-0
20130608 git-0Kasu Unko
 
はじめてのGit #gitkyoto
はじめてのGit #gitkyotoはじめてのGit #gitkyoto
はじめてのGit #gitkyotoHisateru Tanaka
 
20160128 jjug Nightセミナー_Git実践入門
20160128 jjug Nightセミナー_Git実践入門20160128 jjug Nightセミナー_Git実践入門
20160128 jjug Nightセミナー_Git実践入門Mizuki Ugajin
 
やりなおせる Git 入門
やりなおせる Git 入門やりなおせる Git 入門
やりなおせる Git 入門Tomohiko Himura
 

What's hot (19)

Git flowについてまとめてみた
Git flowについてまとめてみたGit flowについてまとめてみた
Git flowについてまとめてみた
 
ノンプログラマのGit入門
ノンプログラマのGit入門ノンプログラマのGit入門
ノンプログラマのGit入門
 
git flowを使った開発フロー
git flowを使った開発フローgit flowを使った開発フロー
git flowを使った開発フロー
 
Git for Begineers GitHub ハンズオン
Git for Begineers GitHub ハンズオンGit for Begineers GitHub ハンズオン
Git for Begineers GitHub ハンズオン
 
GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?GitBucketで社内OSSしませんか?
GitBucketで社内OSSしませんか?
 
Gitはじめの一歩
Gitはじめの一歩Gitはじめの一歩
Gitはじめの一歩
 
【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用【社内勉強会】弊社でGit!実案件での運用
【社内勉強会】弊社でGit!実案件での運用
 
Git 10min
Git 10minGit 10min
Git 10min
 
Windows環境でのgitまとめ(2016.1)
Windows環境でのgitまとめ(2016.1)Windows環境でのgitまとめ(2016.1)
Windows環境でのgitまとめ(2016.1)
 
Git LFSを触ってみた
Git LFSを触ってみたGit LFSを触ってみた
Git LFSを触ってみた
 
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方
 
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
 
バージョン管理システム比較資料
バージョン管理システム比較資料バージョン管理システム比較資料
バージョン管理システム比較資料
 
GitHubで学ぶバージョン管理
GitHubで学ぶバージョン管理GitHubで学ぶバージョン管理
GitHubで学ぶバージョン管理
 
20130608 git-0
20130608 git-020130608 git-0
20130608 git-0
 
はじめてのGit #gitkyoto
はじめてのGit #gitkyotoはじめてのGit #gitkyoto
はじめてのGit #gitkyoto
 
20160128 jjug Nightセミナー_Git実践入門
20160128 jjug Nightセミナー_Git実践入門20160128 jjug Nightセミナー_Git実践入門
20160128 jjug Nightセミナー_Git実践入門
 
Git紹介
Git紹介Git紹介
Git紹介
 
やりなおせる Git 入門
やりなおせる Git 入門やりなおせる Git 入門
やりなおせる Git 入門
 

Similar to Aedlabo git seminer

git&GitHub&SourceTree入門
git&GitHub&SourceTree入門git&GitHub&SourceTree入門
git&GitHub&SourceTree入門Gamu2059
 
20120125 チーム開発
20120125 チーム開発20120125 チーム開発
20120125 チーム開発s_taichan
 
【社内輪読会】Github実践入門2章
【社内輪読会】Github実践入門2章【社内輪読会】Github実践入門2章
【社内輪読会】Github実践入門2章Akira Torii
 
Next-L Enju 開発ワークショップ #02
Next-L Enju 開発ワークショップ #02Next-L Enju 開発ワークショップ #02
Next-L Enju 開発ワークショップ #02Kosuke Tanabe
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 Hiro Yoshioka
 
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~DoshishaUniv ProntiatVR
 
Git & ブランチモデルで学ぶ バージョン管理入門
Git & ブランチモデルで学ぶ バージョン管理入門Git & ブランチモデルで学ぶ バージョン管理入門
Git & ブランチモデルで学ぶ バージョン管理入門kazuki kuriyama
 
Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Tetsurou Yano
 
GitHubアカウントの作成
GitHubアカウントの作成GitHubアカウントの作成
GitHubアカウントの作成Takaomi Murasaki
 
Version Control System Tutorial バージョン管理システムチュートリアル
Version Control System Tutorial バージョン管理システムチュートリアルVersion Control System Tutorial バージョン管理システムチュートリアル
Version Control System Tutorial バージョン管理システムチュートリアルComputational Materials Science Initiative
 
バージョン管理システムチュートリアル
バージョン管理システムチュートリアルバージョン管理システムチュートリアル
バージョン管理システムチュートリアルRyo Igarashi
 
2015年2月23日 wbtoyama 勉強会 はじめようgit
2015年2月23日 wbtoyama 勉強会 はじめようgit2015年2月23日 wbtoyama 勉強会 はじめようgit
2015年2月23日 wbtoyama 勉強会 はじめようgitSatoshi Kamigaki
 
Git社内勉強会資料
Git社内勉強会資料Git社内勉強会資料
Git社内勉強会資料Kenji Takei
 
バージョン管理とGit
バージョン管理とGitバージョン管理とGit
バージョン管理とGitsinsoku listy
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」Fixel Inc.
 
Git 初心者のための GitHub Pages
Git 初心者のための GitHub PagesGit 初心者のための GitHub Pages
Git 初心者のための GitHub PagesTakenori Nakagawa
 
BTS/ITSの近況とあれこれ 2015
BTS/ITSの近況とあれこれ 2015BTS/ITSの近況とあれこれ 2015
BTS/ITSの近況とあれこれ 2015minazou67
 

Similar to Aedlabo git seminer (20)

git&GitHub&SourceTree入門
git&GitHub&SourceTree入門git&GitHub&SourceTree入門
git&GitHub&SourceTree入門
 
20120125 チーム開発
20120125 チーム開発20120125 チーム開発
20120125 チーム開発
 
【社内輪読会】Github実践入門2章
【社内輪読会】Github実践入門2章【社内輪読会】Github実践入門2章
【社内輪読会】Github実践入門2章
 
Next-L Enju 開発ワークショップ #02
Next-L Enju 開発ワークショップ #02Next-L Enju 開発ワークショップ #02
Next-L Enju 開発ワークショップ #02
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011
 
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~
Github勉強会~Git・Githubを用いて共同開発・バージョン管理をしよう~
 
Svn+Git
Svn+GitSvn+Git
Svn+Git
 
Git & ブランチモデルで学ぶ バージョン管理入門
Git & ブランチモデルで学ぶ バージョン管理入門Git & ブランチモデルで学ぶ バージョン管理入門
Git & ブランチモデルで学ぶ バージョン管理入門
 
Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回
 
GitHubアカウントの作成
GitHubアカウントの作成GitHubアカウントの作成
GitHubアカウントの作成
 
Git&GitHub入門
Git&GitHub入門Git&GitHub入門
Git&GitHub入門
 
Version Control System Tutorial バージョン管理システムチュートリアル
Version Control System Tutorial バージョン管理システムチュートリアルVersion Control System Tutorial バージョン管理システムチュートリアル
Version Control System Tutorial バージョン管理システムチュートリアル
 
バージョン管理システムチュートリアル
バージョン管理システムチュートリアルバージョン管理システムチュートリアル
バージョン管理システムチュートリアル
 
2015年2月23日 wbtoyama 勉強会 はじめようgit
2015年2月23日 wbtoyama 勉強会 はじめようgit2015年2月23日 wbtoyama 勉強会 はじめようgit
2015年2月23日 wbtoyama 勉強会 はじめようgit
 
Git社内勉強会資料
Git社内勉強会資料Git社内勉強会資料
Git社内勉強会資料
 
バージョン管理とGit
バージョン管理とGitバージョン管理とGit
バージョン管理とGit
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
 
Git 初心者のための GitHub Pages
Git 初心者のための GitHub PagesGit 初心者のための GitHub Pages
Git 初心者のための GitHub Pages
 
Bitbucket and git
Bitbucket and gitBitbucket and git
Bitbucket and git
 
BTS/ITSの近況とあれこれ 2015
BTS/ITSの近況とあれこれ 2015BTS/ITSの近況とあれこれ 2015
BTS/ITSの近況とあれこれ 2015
 

Aedlabo git seminer