1.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
Git & GitHub を使いこなして
ハッピーになろう
2015/1/10 (土) @ WordBench Nagoya
2015/1/14 (水) @ concrete5 名古屋
(Version 2 - 2015/2/1 更新)

2.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
本日の目次
● 自己紹介
● Web制作あるある
● バージョン管理とは
● Git とは
● GitHub とは
● Git の基本
● 実際にやってみよう
最後のスライドの後に行くと、ワークショップ当日の
YouTube 録画 (前半・後半) をご覧いただけます。

3.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
自己紹介

4.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
Katz Ueno (上野 勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
http://concrete5.co.jp
名古屋で concrete5 CMS の普及

5.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
● 1980年 三重県四日市市生まれ
● アメリカに留学→映画制作 →
雑誌編集 → Web に
● TOEIC 990点
● 多言語に強いです

6.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
2009年 - concrete5
日本コミュニティを立ち上げました
concrete5-japan.org

7.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
共著の紹介
concrete5 公式活用ガイドブ
ック
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版

8.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
WordFes Nagoya 2014
副 実行委員長
WordPress 公式プラグイン 2本開発
Ustream Status & Twitcasting Status

9.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
● Mambot
● Joomla
● EC Cube
● Magento
● OpenPNE
他にも様々な CMS の仕事の経験や知識
もちろん、ソースコードの管理は Git で行っています！

10.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう [更新 2015/2/1 Version 2]]
Git & GitHub を使いこなして
ハッピーになろう
2015/1/10 (土) @ WordBench Nagoya
2015/1/14 (水) @ concrete5 名古屋
(Version 2 - 2015/2/1 更新)

11.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある①

12.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある①
えーっと。最新バージョン、どれ？
● index.html
● index.new.html
● index.new.20141230.html
● index.new.new.html
● index.最終.html

13.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある①
最新バージョンどれやねん！！
● index.html
● index.new.html
● index.new.20141230.html
● index.new.new.html
● index.最終.html
● index.赤バージョン.html

14.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある②
1. ひとりごと「よし作業終わった！」
2. ファイルをZIPで圧縮
3. ZIPをメールで送信
4. メールを書く
5. 客へ「先程、最新版お送りしました〜」
6. ・・・がーん！間違えた！
7. 電話「大変申し訳ございません！！」
8. 修正
9. 「ステップ１」に戻る

15.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある③
1. 修正開始
2. ひとりごと「よし作業終わった！」
3. ファイルをZIPで圧縮
4. ZIPをメールで送信
5. メールを書く
6. 自分「先程、最新版お送りしました〜」
7. 客「あ、ここ直して・・・」
8. ｽﾞｶﾞﾋﾞ━━Σ(llﾟ艸ﾟll)━━━ﾝ!!
9. 修正
10.「ステップ１」に戻る

16.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある④
1. 構成：
元請け→ 自分 ┳コーディングパートナー ①
└WordPress パートナー ②
2. 元請け：「このファイルの基本コーディン
グ変えたから他のコーディングも変えて、
WordPress に実装しなおして〜」
3. 自分｡･ﾟ･(ﾉ∀`)･ﾟ･｡

17.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある④
4. 自分｡･ﾟ･(ﾉ∀`)･ﾟ･｡
5. コーディング指示出す
6. 自分「コーダーさん、ここの部分のファイ
ルをこう直してください〜」
7. コーディングファイル確認。
8. 自分「WordPress の人、コーダーさんがこ
このファイルの何行目をこう直したので、
WordPress のこの部分をこう直してくださ
い！」
9. 指示出すだけに2時間

18.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
Web制作あるある⑤
1. 構成：
元請け→ 自分 ┳コーディングパートナー ①
└WordPress パートナー ②
2. コーダー：「ここの部分のコーディングを
新しくしました」
3. WordPress 構築者：「ここの部分、WP の
実装に合わせるために変えたよ〜」
4. 自分：「同じところ！」･ﾟ･(ﾉ∀`)･ﾟ･｡

19.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
バージョン管理とは
● プロジェクトのコードの履歴を管理する
システム
● 複数人や一人でも同じ

20.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
時間がないので
端折ります
知っておくべきことだけお教えします
手を動かしましょう！

21.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
バージョン管理とは
● 基本用語
o レポジトリ：ファイルのバージョン (変更履歴)を
管理しているデータベース

22.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
バージョン管理とは
● 基本用語
o レポジトリ：ファイルのバージョン (変更履歴)を
管理しているデータベース
レポジトリ
PC
PC
PC
SVN などのサーバー・クライアント型バージョン管理の例

23.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
SVN などのサーバー・クライアント型バージョン管理の例
バージョン管理とは
● 基本用語
o レポジトリ：ファイルのバージョン (変更履歴)を
管理しているデータベース
コミット
PC
PC
PC
レポジトリ
チェックアウト &
アップデート

24.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
バージョン管理とは
● バージョン管理システムの種類
o サーバー・クライアント型
 CVS
 SVN
o 分散型
 Git
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html

25.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
自分に編集権限が
ないレポジトリ
バージョン管理とは
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html
● 分散型 Git の例

26.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
● 分散型 Git の例
GitHub or Bitbucket
PC
バージョン管理とは
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
自分に編集権限が
ないレポジトリ
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html

27.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ
自分に編集権限が
ないレポジトリ
バージョン管理とは
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html
● 分散型 Git の例

28.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
GitHub or Bitbucket
PC
バージョン管理とは
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ
プル
プル
自分に編集権限が
ないレポジトリ
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html
● 分散型 Git の例

29.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
GitHub or Bitbucket
PC
バージョン管理とは
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ
プル
プル
プルリクエスト
自分に編集権限が
ないレポジトリ
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html
● 分散型 Git の例

30.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
GitHub とは
● レンタルリモートレポジトリの1つ
o 自分の Git レポジトリをインターネット上にホスト
してくれるサービスの1つ。
● オープンソース（公開）なものは無料
● 多くのオープンソースソフトが GitHub を使
ってる。

31.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
SourceTree とは
● Mac と Windows 版
● GUI で Git を管理できる
● 無料
● Bitbucket という GitHub のライバルサービ
スを運営している Atlassian という会社が開
発（本当は Mercurial という別のバージョン管理システムを作ってる）
● Bitbucket は5名までのチームだったら非公
開 Git レポジトリを無料で使えるのでオスス
メ。

32.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
事前準備
1. GitHub でアカウントを作る
2. SourceTree をインストールする
a. ダウンロード
b. 機種別操作方法
i. Windows
ii. Mac
1. このページの2ページ目まで
2. SSH 公開鍵を作成
3. オススメ：Mac の隠しファイルや隠しフォルダを表示
3. SSH 公開鍵を Add SSH key から登録

33.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
今日のお題 (1/10 (土) WordPress)
● https://github.com/WordBenchNagoya/Git-Study-Session-
201501/archive/201501-Session-Sample.zip (中の wp-content フォルダを
使用)
今日のお題 (1/14 (水) concrete5)
● https://github.com/katzueno/c5-nagoya-git/archive/201501-sample.zip (中
の block や theme フォルダを使用。)

34.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
4. Git のレポジトリを作る
5. .gitignore を作成
6. Git Clone = リモートで作った Git レポジト
リを複製する
7. ファイルを変更し add (ステージング) する
8. commit = 変更をコミットする
9. push = 変更をリモートに送る
10.グループでやってみる

35.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
10.グループでやってみる
a. Aさん：変更して ステージング+ commit + push
b. Bさん：pull して変更を取り込む
11.同時期に違うファイルを変更
a. Aさん：変更して ステージング+ commit + push
b. Bさん：変更して ステージング+ commit + push ->
エラー! -> pull して、Aさんの変更を自動的にマージ
してから push
12.同時期に同じファイルを変更
a. Aさん：変更して ステージング+ commit + push
b. Bさん：変更して ステージング+ commit + push ->
エラー! -> pull して [操作] -> [競合を解決]

36.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
13.競合の解決方法 (Bさん)
a. 「自分の変更をつかって解決」
b. 「相手の変更を使って解決」
c. エディタツールで手動で編集
14.Bさん：ステージング+ commit + push
15.それでも、解決しない場合→もう一回「マ
ージを再開」→ Step 13 に戻る

37.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
15.ブランチを作ろう
a. ブランチを作成
b. ファイルを変更 ステージング + commit + push
c. 別のバージョンのブランチが作成される
16.ブランチを結合しよう (時間があれば)
a. Merge
b. Rebase (時間があれば)
c. 競合が起これば、前の時と同じ3つの選択肢からで
解決

38.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
今日のステップ
17.タグ機能
a. 「サイト公開」「改修作業完了」など、大きな節目
のコミットをタグ付け
b. ソフトの場合は、リリースしたバージョンなど
c. GitHub では、タグを「リリース」とみなして、自動
的にZIP ファイルにしてダウンロードできる機能
d. = Git が出来ないお客さん対策！
e. しかも Tag は、削除できる！
（付け直すことが出来る)

39.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
参考：他に Git を提供しているサービス
● Bitbucket
o http://bitbucket.org
o 5名までのチームだったら非公開レポジトリを無料
でできる！（GitHub の場合は非公開だと即有料）
● Backlog
o http://backlog.jp
o 1プロジェクト10ユーザーまでなら無料
o 本来はプロジェクト管理ツールだが Git も使える！
o 2015/1現在、プルリクエスト機能が無いのが残念

40.
2015.1.10 (土) Git & GitHub を使いこなしてハッピーになろう
参考記事
● SourceTree で GitHub のForkレポ
ジトリを追加＆同期する方法
o http://ja.katzueno.com/2014/05/3092/
● Bitbucket や GitHub で自動デプロ
イするためのサンプル PHP スクリ
プトを拾って改造してみた
o http://ja.katzueno.com/2015/01/3390/