1. ∼WordPressテーマを共同編集しよう∼
2013.3.3
WordBench神戸 上村崇
@uemera

2. 最近のオレ @uemera
フリーランスのシステムエンジニアです。 uemura
勉強会準備 XOOPS
(WordBench等)
PHPフレームワーク
(FuelPHP)
JavaScript、jQuery
WordPress
(主に技術サポート) CS-Cart
(ただいま勉強中!)
サーバーインフラ SoyCMS、SoyShop
(VPS構築など) (ネットショップの保守)
ExcelVBA
(社内合理化の支援)

3. 企業が学生にオファーする逆求人サイトOfferBoxを作っています。
この開発作業でGit使ってます。GitサーバーはBacklog使用。
登録学生数: 1900人
登録企業数: 60社
FuelPHP
さくらVPS 4G

4. このスライドは
こんな人を対象にしています。
Git初心者向けにお話します。便利さを知り、
超基本的な使い方をマスターしてもらいたいと思って
います。
・Gitて聞いたことあるけど何？ 何に使うの？
・Git始めたいけど使い方が分からない
・そんなに便利なん？

5. Q: Gitは難しいですか?
A: 難しいです。
Gitはあなたが今まで使ったことが無い新種のツールです。
ツールの特徴や使いどころを理解するのに時間がかかります。
WordやExcelを初めて使ったときのことを思い出してくだ
さい。ワープロや表計算ソフトを初めて触ったときは、分か
らないことがいっぱいあったと思います。Git未経験の方には、
その苦労が待ち受けています。
逆に1つのツールに慣れてしまえば、別の同じような種類のツー
ルもそんなに苦労せず使えると思います。

6. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

7. 1. gitで何ができる?
(1) ファイルのバージョン管理(世代管理)ができます。
(2) ファイルのバックアップができます。
(3) 他人が編集したファイルの変更差分を取り込めます。
(4) 本番環境へのリリースが、簡単にすばやくできます。

8. 人間とは罪深い生き物です
罪を生まない仕組み、それがGit

9. 1. ファイルのバージョン管理(世代管理)ができます。
2月10日の更新 2月20日の更新 3月1日の更新
index.php
save save save
元に戻したいと思ったときは...
世代管理されているので、過去のファイルに戻すことができます。

10. 2. ファイルのバックアップができます。
パソコン上のファイルをリモートリポジトリ(ここで
はBacklogを使用)にPushすることで、ファイルの
バックアップをとることができます。
リモートリポジトリ
Push
ローカルリポジトリ

11. 人間とは罪深い生き物です
罪を生まない仕組み、それがGit

12. 3. 他人が編集したファイルの変更差分を取り込めます。
相手が変更したファイルを
自分のパソコン内の環境に取り込むことができます。
リモート
A C A C
Pull Push
自分 相手
B 相手が同じファイル(A)を
編集していても、
A’ 行が重ならなければ自動で
マージ(結合)してくれます。
A C

13. 4. 本番環境へのリリースが、簡単にすばやくできます。
サーバー上にGitクライアントがインストールされていれば、Pullして変更されたファイル
だけを瞬時に反映させることができます。
ただし、レンタルサーバーの場合はGitをインストールすることは困難なので、VPSや専
用サーバーでのみ有効な方法です。
リモート
Push Pull
自分 サーバー
サーバーにGitクライアントを
入れておけば、サーバー上で
Pullすることで、変更したファイル
だけを素早くリリースできます。
※今回のスライドでは説明しません。

14. Gitは用語が難しい! (1)
用語の意味を覚えれば、Gitはこわくなくなります。
少し多いですが頑張って覚えましょう。
自分が更新したファイルをアップするとき:
4 リモートリポジトリ
Push
ローカルリポジトリ
3
1 ファイル更新
Commit
Stage 2 ステージされたファイル
(Commitされる予定の一時置き場に置かれる)

15. Gitは用語が難しい! (2)
リモートリポジトリにあるファイルをダウンロードするとき:
1 リモートリポジトリ
Pull
ローカルリポジトリ
2
サーバーからPullすれば、自分のPCにファイルがダウ
ンロードされてすぐに使えるようになります 。
アップするときのように手順は多くありません。

16. Gitは用語が難しい! (3)
ほかにも難しい用語がたくさん!
・checkout
・branch
・merge
・revert
・reset
・fetch
・stash
・rebase
・tag
これらは、Gitに慣れてきたら
おいおい覚えていけばいいと思います。

17. ツールを用意しよう
Gitサーバー
100MBまで無料
Gitクライアント
Windows:
tortoisegit 無料
Mac:
無料

18. Gitサーバー比較 (無料プランで比較した場合)
日本語 O X X
容量 100MB 無制限 無制限
ユーザ数 10人まで 無制限 5人まで
非公開に 非公開に
リポジトリ公開 公開必須
できる できる

19. Git管理したいWordPressのファイルはどれ?
今回の事例として、
wordpressの
wp-content/themesディレクトリ
以下をgit管理対象にします。
もちろん、wp-content/以下や
wordpressディレクトリまるごと
管理対象にしても構いません。

20. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

21. Backlogのフリープランを
申し込みます。

22. 例として以下の内容で申し込みます。
スペースID: wbkobe0303
スペース名: WordBench神戸
言語: 日本語
タイムゾーン: Asia/Tokyo
ユーザID: wbkobe
パスワード: **********

23. プロジェクトの追加

24. 例として以下を入力
プロジェクト名: Gitを使おう!
プロジェクトキー: USEGIT

25. ① Git
② Gitの設定
③ リポジトリを追加する

26. リポジトリ名 ”hinamatsuri” で作成します。
これでBacklogの設定が完了しました。

27. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

28. TortoiseGitをインストールする前の前提として、
XAMPPでWordPressを動かせる状態にしておいてください。
その上で、WordPressのオリジナルテーマを新規作成します。
hinamatsuritheme を作りました。
これを含むthemesディレクトリ全体をgit管理対象にします。

29. WindowsのGitクライアントである
TortoiseGitインストール
TortoiseGit
http://code.google.com/p/tortoisegit/

30. XP、Vistaの場合は
Windows Installer4.5が必要です。
http://www.microsoft.com/ja-jp/download/details.aspx?id=8483
特に詰まるところはありませんのでそのまま
インストールしてください。

31. TortoiseGitをインストールするには、
msysgitも必要です。

32. msysgitのインストール (1)
インストール時に注意すべき選択オプションです。
Use Git Bash only を選択
これがもっとも安定して使える
オプションだそうです。

33. msysgitのインストール (2)
“Checkout
as-­‐is,
commit
Unix-­‐style
line
endings”
を選択。
(Macの人とやりとりする場合はこの選択をおすすめします。)
Commit時にWindowsの改行コードか
らUnixの改行コードに変換します。
Windows以外のコンピュータでも使
える改行コードにするためです。

34. TortoiseGitのインストール (1)
次に、TortoiseGit本体をインストールします。
“TortoiseGitPLink,
comming
from
Putty,
integrates
with
Windows
better”
を選択します。
このあと、日本語化ファイルもインストールします。
(公式サイトからLanguae Packをダウンロードできます。)

35. TortoiseGitのインストール (2)
インストール後の設定です。
Windowsのスタートメニュー
→ プログラム → TortoiseGit → Settings
で設定ファイルを開きます。

36. TortoiseGitのインストール (3)
設定 → Gitで 名前、メールを登録します。
(これはbacklogのアカウントとは無関係です。
自由に設定出来ます。)
以上でTortoiseGitがインストールできました。

37. TortoiseGitでのリポジトリ作成 (1)
TortoiseGitがインストールできたので、いよいよリポジトリの作成です。
リモートリポジトリにアップロードするまでの流れをおさらいします。
1. ファイルを更新する。
2. 変更したファイルをStageする。
(「indexに上げる」とか「追加する」
という言い方もします)
3. ローカルリポジトリにCommitする。 4 リモートリポジトリ
4. リモートリポジトリにPushする。
Push
ローカルリポジトリ
3
1 ファイル更新
Commit
Stage 2 ステージされたファイル
(Commitされる予定の一時置き場に置かれる)

38. TortoiseGitでのリポジトリ作成 (2)
ちょうどこんなイメージ
Stage
買う商品をレジに持っていく
Commit
購入する
Push
渡す

39. TortoiseGitでのリポジトリ作成 (3)
リポジトリの作成はエクスプローラの右クリックから行えます。
エクスプローラで、
ローカルに設置したWordPress内の
themesディレクトリを右クリックし
Git ここにリポジトリを作成
を選択します。

40. TortoiseGitでのリポジトリ作成 (4)
チェックは入れずに、 OK をクリックします。
「空ではありません」と出ますが、構わず「続行」します。
リポジトリを新規作成するときは、空のディレクトリを指定するの
が普通ですが、今回は既にファイルが存在しているthemesディレク
トリにリポジトリを作るため、このような警告が出ます。

41. TortoiseGitでファイルをアップロードする (1)
ローカルリポジトリが出来たので、これからファイルをCommitし
リモートリポジトリへPush(アップロード)していきます。
themesディレクトリを
右クリックし、
Gitコミット-> master
を選択します。

42. TortoiseGitでファイルをアップロードする (2)
Commitするための確認画面が開きます。
メッセージは
入力必須です。
Commitするファイルを選択
します。
ここでは全てのファイルを
Commit対象にします。
ファイルをすべて選択して
SPACEキーを押すと全ファ
イルにチェックを入れること
ができます。

43. TortoiseGitでファイルをアップロードする (3)
本来ならば、①Stageする ②Commitする の2つの手順がありますが、
この操作ではファイルをStageしてCommitするところまで
一気にできます。
カメさんが転送されているアニメーションをお楽しみください。

44. TortoiseGitでファイルをアップロードする (4)
ローカルでのCommitが無事完了したので、次にローカルリポジトリの
内容をリモートリポジトリへ反映します。(Push)
themesディレクトリを
右クリックし、
TortoiseGit
→ プッシュ(リモートへ反映) を選択し
ます。

45. TortoiseGitでファイルをアップロードする (5)
Pushに必要な、リモートサーバーへの接続情報を入力する必要があり
ます。この作業は初めてPushするときに1回だけ必要です。
リモートサーバーの情報を設定するよう促されます。
管理 ボタンをクリックします。

46. TortoiseGitでファイルをアップロードする (6)
リモートの名前は何でもいいですが、 origin という名前が慣
用的に使われます。
URLはBacklogに書いてあるリポジトリURLをセットします。
CCOOPPYY
次に 新規に追加/保存 をクリック

47. TortoiseGitでファイルをアップロードする (7)
リモート情報をセットしたあと、 origin がセットされているのを確認
して OK をクリックします。

48. TortoiseGitでファイルをアップロードする (8)
リモートリポジトリのユーザ、パスワード(Backlogのユーザ、パスワー
ド)を聞かれますので入力します。
するとアップロードが始まります。

49. TortoiseGitでファイルをアップロードする (9)
無事、リモートリポジトリへのPushに成功しました。
成功

50. Backlogを見ると、Windows上で行ったCommitが無事
リモートサーバーにPushされたことが分かります。

51. Git → hinamatsuri → [ネットワーク]タブ
を開くと、ネットワーク図が見られます。
(コミットの履歴が図で追えるので便利!)

52. 詳しい導入手順は、
「サルでもわかるGit入門」がおすすめです。
www.backlog.jp/git-guide

53. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

54. SourceTreeの設定 (1)
前提として、MAMPやXAMPPを使ってローカルマシン上でWordPressを動作
させているものとします。
SourceTreeのインストールは簡単なので割愛します。
ここではインストール後のリポジトリの設定方法を説明します。
Add Repository をクリック

55. リポジトリはWindows環境でさっき作ったので、
Mac環境ではそれを利用します。
リモートリポジトリにある環境一式をCloneすることで、
Macにも同じリポジトリを作ることができます。
Mac環境でリポジトリを新規作成する必要はありません。
Macの方は、新しくリポジト さっきローカルリポジトリ
リを作らなくても、リモート を作ってリモートリポジトリ
リポジトリをCloneすれば にPushした。
OK。
作成済
リモートリポジトリ
Clone Push
Mac Windows
NNeeww!! ローカルリポジトリ 作成済 ローカルリポジトリ

56. まだ新しいリポジトリを作っていない場合
(さきほどのWindowsでリポジトリを作る手順をスキップした場合)は、
Cloneする手順ではなく、Mac上でリポジトリを作成し、それをリモー
トリポジトリにPushするという手順になります。
こちらのやり方はあとで説明します。
まだリポジトリが作成されて
いないので、Macでリポジト
リを作成してPushする。
リモートリポジトリ
Push
Mac
NNeeww!! ローカルリポジトリ

57. SourceTreeの設定 (2)
まずCloneのやり方を説明します。
URLはBacklogからコピーします。
リポジトリをクローン
記入後、ユーザ/パスを求められる場合
は、Backlogのユーザ/パスを入力します。
保存先のパス:
ブックマーク名:好きな名前でOK ローカルにリポジトリをダウンロードする
先を指定します。
MAMPやXAMPP上で動いている
WordPressのthemesディレクトリの場所
を指定します。

58. SourceTreeの設定 (3)
で、次へ進むと、こんなエラーがでます。

59. SourceTreeの設定 (4)
すでに themes ディレクトリの中に
ファイルが入っているのでCloneでき
ません。
Cloneする先のディレクトリは
空である必要があります。

60. SourceTreeの設定 (5)
解決策として、
もともと存在するthemesディレクトリは削除するか別の名
前にして退避しておきましょう。
ここではthemes_originalという名前にリネームしました。

61. SourceTreeの設定 (6)
気を取り直してもう一度Cloneを試みると、
今度はちゃんとCloneが動いてリモートリポジトリを取ってこれました!

62. SourceTreeの設定 (7)
リモートリポジトリからローカルリポジトリにCloneが行われて、
WordBench神戸のローカルリポジトリが無事作成されました。

63. <参考>SourceTreeで新しいリポジトリを作成する場合
まだリポジトリが作成されていない場合は、SourceTreeでリポジトリを新規作成し、
リモートリポジトリにPushしましょう。
リモートリポジトリ
Push
Mac
NNeeww!! ローカルリポジトリ

64. SourceTreeで新しいリポジトリを作成する(1)
以下の手順でできます。themesディレクトリは空じゃなくても構いません。
Add Repository
リポジトリを作成
リポジトリ保存先は
themeファイルの場所を
指定する。

65. SourceTreeで新しいリポジトリを作成する(2)
WordBench神戸のローカルリポジトリが作成されるので、
ダブルクリックします。

66. SourceTreeで新しいリポジトリを作成する(3)
WordBench神戸Gitのローカルリポジトリを開いたところ
ここに、まだStageもCommitもされ
ていないファイルが表示されます。

67. SourceTreeで新しいリポジトリを作成する(4)
リモートリポジトリにアップロードするまでの流れをもう一度おさらい
1. ファイルを更新する。
2. 変更したファイルをStageする。
(「indexに上げる」とか「追加する」
という言い方もします)
3. ローカルリポジトリにCommitする。 4 リモートリポジトリ
4. リモートリポジトリにPushする。
Push
ローカルリポジトリ
3
1 ファイル更新
Commit
Stage 2 ステージされたファイル
(Commitされる予定の一時置き場に置かれる)

68. SourceTreeでファイルをアップロードする(1)
次に、ファイルをリモートリポジトリへPushする手順を説明します。
ファイルを全選択し、
indexに追加 することで
ファイルをStage環境に移動します。

69. SourceTreeでファイルをアップロードする(2)
StageされたファイルはCommitすることができます。
ここにStageされたファイルが表示されます。
コミットボタンでCommitします。

70. SourceTreeでファイルをアップロードする(3)
Commitするための設定画面です。コミットメッセージを書いて、コミットボタンを押し
てください。
コミットメッセージは
入力必須

71. SourceTreeでファイルをアップロードする(4)
コミットに成功したら、masterブランチにCommitされた跡が残ります。
masterブランチを見ると、
Commitされたログが見られます。

72. SourceTreeでファイルをアップロードする(5)
次に、リモートリポジトリにファイルをPushする設定をします。
リモートリポジトリにアクセスする
ための設定をします。

73. SourceTreeでファイルをアップロードする(6)
リモートリポジトリの接続設定をします。
追加
リモートの名前は origin で。
URLはBacklogからコピー
してきます。

74. SourceTreeでファイルをアップロードする(7)
リモートリポジトリの定義が追加されました。

75. SourceTreeでファイルをアップロードする(8)
いよいよリモートリポジトリへPushします。

76. SourceTreeでファイルをアップロードする(9)
さきほど作ったリモートリポジトリの定義を選択します。
このあと、パスワードを求められる場合は、Backlogのパスワードを入力してください。

77. SourceTreeでファイルをアップロードする(10)
サイドバーのリモート > master を見れば、リモートにPushされたことが確認できます。

78. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

79. 5. themesディレクトリを共同編集してみる実演
1つのファイルを2人が同時に更新しても、うまくマージ(結合)することができます。
リモート
Push
Push
ある行を編集して リモートにPush
Commit
Pull
Windows
Mac
別の行を編集して Winで更新された箇所が
Commit 自動的にマージされる

80. Windowsでファイル更新(1)
まずはじめに、Windows側でファイルを更新します。
index.phpファイルをWindows上で変更します。

81. Windowsでファイル更新(2)
ブラウザで確認します。
Windowsローカルのサイトを開くと、
更新が反映されていることが確認できます。

82. Windowsでファイル更新(3)
変更したファイルをCommitします。
Commitします。

83. Windowsでファイル更新(4)
これでWindowsのローカルリポジトリにCommitできます。
メッセージを書いたあと、OKをクリック

84. Windowsでファイル更新(5)
次にBacklog上ののリモートローカルリポジトリにPushします。
リモートへPushします。

85. Macでファイル更新(1)
次に、Mac側でファイルを更新します。
この時点では、まだリモートリポジトリの変更をPullしてないの
で、Windowsで更新した差分は含まれていません。
ファイルを更新します。さきほどWindowsで更新した場所とは別の行
を編集したと仮定します。

86. Macでファイル更新(2)
ブラウザで確認します。
Macローカルのサイトを開くと、
変更箇所が反映されていることが確認できます。

87. Macでファイル更新(3)
Stageに上げます。
「indexに追加」でStageに上げます。

88. Macでファイル更新(4)
Stageに上がったファイルをローカルリポジトリにCommitします。
Commitします。

89. Macでファイル更新(5)
Commitメッセージを書いて、Commitします。
これで、Mac側の変更がローカルリポジトリに保管されました。
コミットメッセージを書いたあと、コミット

90. Macでファイル更新(6)
ここで、いったんPullしてリモートリポジトリの更新を取ってきます。
ここで、リモートリポジトリの内容を反映する
ためPullします。

91. Macでファイル更新(7)
無事にWindows側の変更がマージされました。
Windowsで変更した内容が反映されています。
もちろんMacで更新した箇所も残っています。

92. Menu
1. Gitで何ができる？
2. Gitサーバー Backlog でリモートリポジトリの設定
3. WindowsにGitクライアント TortoiseGit をインストール
4. MacにGitクライアント SourceTree をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ

93. 6. Gitを使ってコラボレーションワークするコツ
・ファイルの結合(マージ)は万能ではありません。
同じファイルの同じ行を同時に編集すると競合が起きます。画像のような
バイナリファイルもGit管理できますが、マージはできません。
・データベースはGit管理できません。
管理できるのはファイルのみです。
・ファイルを更新したら、その日のうちにリモートリポジトリへもPush!
こまめにPushすることで、相手が編集したファイルと競合が起きにくく
なります。
・作業を始める前にまずPullして環境を最新にしよう。
自分の作業をする前に、相手の変更差分を先にとりこんでおくと、
トラブルに遭いにくくなります。
・Gitに詳しい人がいると心強い!
初心者同士で運用すると、トラブルが起こったときに解決が難しいです。
そしてトラブルはワリと良く起こります＼(^o^)／
このあたりがまだGitを運用するのが難しいところです。

94. 役に立つサイト(1)
Gitの概念とか
Gitコマンドの使い方が
分かりやすく説明されています。
http://www.slideshare.net/kotas/git-­‐15276118

95. 役に立つサイト(2)
Learn
Git
Branching
gitコマンドを
シミュレーションできます。
http://pcottle.github.com/learnGitBranching/

96. Gitについて、お困りの場合はお手伝いします
・Gitの導入支援、これから始める方へのレクチャーとか
・WebサーバーにGitクライアントを入れて、簡単にリリース
する仕組みをつくったりとか
・Gitサーバーの構築とか
@uemera uemura

97. ありがとうございました。