Git & GitHub を使いこなしてハッピーになろう！ - WordBench 名古屋 & concrete5 名古屋合同勉強会

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 更新)

本日の目次
● 自己紹介
● Web制作あるある
● バージョン管理とは
● Git とは
● GitHub とは
● Git の基本
● 実際にやってみよう
最後のスライドの後に行くと、ワークショップ当日の
YouTube 録画 (前半・後半) をご覧いただけます。

自己紹介

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
http://concrete5.co.jp
名古屋で concrete5 CMS の普及

● 1980年三重県四日市市生まれ
● アメリカに留学→映画制作 →
雑誌編集 → Web に
● TOEIC 990点
● 多言語に強いです

2009年 - concrete5
日本コミュニティを立ち上げました
concrete5-japan.org

共著の紹介
concrete5 公式活用ガイドブ
ック
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版

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

● Mambot
● Joomla
● EC Cube
● Magento
● OpenPNE
他にも様々な CMS の仕事の経験や知識
もちろん、ソースコードの管理は Git で行っています！

Web制作あるある①

えーっと。最新バージョン、どれ？
● index.html
● index.new.html
● index.new.20141230.html
● index.new.new.html
● index.最終.html

最新バージョンどれやねん！！
● index.html
● index.new.html
● index.new.20141230.html
● index.new.new.html
● index.最終.html
● index.赤バージョン.html

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

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

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

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

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

バージョン管理とは
● プロジェクトのコードの履歴を管理する
システム
● 複数人や一人でも同じ

時間がないので
端折ります
知っておくべきことだけお教えします
手を動かしましょう！

● 基本用語
o レポジトリ：ファイルのバージョン (変更履歴)を
管理しているデータベース

● 基本用語
レポジトリ
PC
PC
PC
SVN などのサーバー・クライアント型バージョン管理の例

SVN などのサーバー・クライアント型バージョン管理の例
● 基本用語
コミット
PC
PC
PC
レポジトリ
チェックアウト &
アップデート

● バージョン管理システムの種類
o サーバー・クライアント型
 CVS
 SVN
o 分散型
 Git
詳しくは他の資料を参考に
http://www.atmarkit.co.jp/ait/articles/1307/05/news028_3.html

GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
自分に編集権限が
ないレポジトリ
● 分散型 Git の例

GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット

GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ

GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ
プル
プル

GitHub or Bitbucket
PC
ローカル
レポジトリ
PC
ローカル
レポジトリ
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
GitHub or Bitbucket
リモート
レポジトリ
コミット
コミット
プッシュ
プッシュ
プル
プル
プルリクエスト

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

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

事前準備
1. GitHub でアカウントを作る
2. SourceTree をインストールする
a. ダウンロード
b. 機種別操作方法
i. Windows
ii. Mac
1. このページの2ページ目まで
2. SSH 公開鍵を作成
3. オススメ：Mac の隠しファイルや隠しフォルダを表示
3. SSH 公開鍵を Add SSH key から登録

今日のステップ
今日のお題 (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 フォルダを使用。)

4. Git のレポジトリを作る
5. .gitignore を作成
6. Git Clone = リモートで作った Git レポジト
リを複製する
7. ファイルを変更し add (ステージング) する
8. commit = 変更をコミットする
9. push = 変更をリモートに送る
10.グループでやってみる

10.グループでやってみる
a. Aさん：変更してステージング+ commit + push
b. Bさん：pull して変更を取り込む
11.同時期に違うファイルを変更
b. Bさん：変更してステージング+ commit + push ->
エラー! -> pull して、Aさんの変更を自動的にマージ
してから push
12.同時期に同じファイルを変更
b. Bさん：変更してステージング+ commit + push ->
エラー! -> pull して [操作] -> [競合を解決]

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

15.ブランチを作ろう
a. ブランチを作成
b. ファイルを変更ステージング + commit + push
c. 別のバージョンのブランチが作成される
16.ブランチを結合しよう (時間があれば)
a. Merge
b. Rebase (時間があれば)
c. 競合が起これば、前の時と同じ3つの選択肢からで
解決

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

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

参考記事
● SourceTree で GitHub のForkレポ
ジトリを追加＆同期する方法
o http://ja.katzueno.com/2014/05/3092/
● Bitbucket や GitHub で自動デプロ
イするためのサンプル PHP スクリ
プトを拾って改造してみた
o http://ja.katzueno.com/2015/01/3390/

Git & GitHub を使いこなしてハッピーになろう！ - WordBench 名古屋 & concrete5 名古屋合同勉強会

Recommended

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Git & GitHub を使いこなしてハッピーになろう！ - WordBench 名古屋 & concrete5 名古屋合同勉強会 (20)

More from Katz Ueno (20)