もしWordPressユーザーがGitを使ったら〜WordPressテーマを共同編集しよう〜

∼WordPressテーマを共同編集しよう∼

2013.3.3
WordBench神戸上村崇
@uemera

最近のオレ @uemera
フリーランスのシステムエンジニアです。 uemura

勉強会準備 XOOPS
(WordBench等)
PHPフレームワーク
(FuelPHP)
JavaScript、jQuery

WordPress
(主に技術サポート) CS-Cart
(ただいま勉強中!)

サーバーインフラ SoyCMS、SoyShop
(VPS構築など) (ネットショップの保守)

ExcelVBA
(社内合理化の支援)

企業が学生にオファーする逆求人サイトOﬀerBoxを作っています。
この開発作業でGit使ってます。GitサーバーはBacklog使用。

登録学生数: 1900人
登録企業数: 60社

FuelPHP
さくらVPS 4G

このスライドは
こんな人を対象にしています。

Git初心者向けにお話します。便利さを知り、
超基本的な使い方をマスターしてもらいたいと思って
います。

・Gitて聞いたことあるけど何？何に使うの？
・Git始めたいけど使い方が分からない
・そんなに便利なん？

Q: Gitは難しいですか?
A: 難しいです。

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

Menu
1. Gitで何ができる？

2. Gitサーバー Backlog でリモートリポジトリの設定

3. WindowsにGitクライアント TortoiseGit をインストール

4. MacにGitクライアント SourceTree をインストール

5. themesディレクトリを共同編集してみる実演

6. Gitを使ってコラボレーションワークするコツ

1. gitで何ができる?

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

人間とは罪深い生き物です

罪を生まない仕組み、それがGit

1. ファイルのバージョン管理(世代管理)ができます。

2月10日の更新 2月20日の更新 3月1日の更新

index.php

save save save

元に戻したいと思ったときは...

世代管理されているので、過去のファイルに戻すことができます。

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

リモートリポジトリ

Push

ローカルリポジトリ

3. 他人が編集したファイルの変更差分を取り込めます。

相手が変更したファイルを
自分のパソコン内の環境に取り込むことができます。

リモート
A C A C
Pull Push

自分相手

B 相手が同じファイル(A)を
編集していても、
A’ 行が重ならなければ自動で
マージ(結合)してくれます。
A C

4. 本番環境へのリリースが、簡単にすばやくできます。

サーバー上にGitクライアントがインストールされていれば、Pullして変更されたファイル
だけを瞬時に反映させることができます。
ただし、レンタルサーバーの場合はGitをインストールすることは困難なので、VPSや専
用サーバーでのみ有効な方法です。

リモート

Push Pull
自分サーバー
サーバーにGitクライアントを
入れておけば、サーバー上で
Pullすることで、変更したファイル
だけを素早くリリースできます。
※今回のスライドでは説明しません。

Gitは用語が難しい! (1)
用語の意味を覚えれば、Gitはこわくなくなります。
少し多いですが頑張って覚えましょう。

自分が更新したファイルをアップするとき:

4 リモートリポジトリ

Push

3
1 ファイル更新
Commit

Stage 2 ステージされたファイル
(Commitされる予定の一時置き場に置かれる)


リモートリポジトリにあるファイルをダウンロードするとき:

1 リモートリポジトリ

Pull

2
サーバーからPullすれば、自分のPCにファイルがダウ
ンロードされてすぐに使えるようになります。
アップするときのように手順は多くありません。

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

ツールを用意しよう
Gitサーバー

100MBまで無料

Gitクライアント
Windows:
tortoisegit 無料
Mac:
無料

Gitサーバー比較 (無料プランで比較した場合)

日本語 O X X
容量 100MB 無制限無制限

ユーザ数 10人まで無制限 5人まで

非公開に非公開に
リポジトリ公開公開必須
できるできる

Git管理したいWordPressのファイルはどれ?

今回の事例として、
wordpressの
wp-content/themesディレクトリ
以下をgit管理対象にします。

もちろん、wp-content/以下や
wordpressディレクトリまるごと
管理対象にしても構いません。

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

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

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

① Git

② Gitの設定

③ リポジトリを追加する

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

TortoiseGitをインストールする前の前提として、
XAMPPでWordPressを動かせる状態にしておいてください。
その上で、WordPressのオリジナルテーマを新規作成します。

hinamatsuritheme を作りました。
これを含むthemesディレクトリ全体をgit管理対象にします。

WindowsのGitクライアントである
TortoiseGitインストール

TortoiseGit
http://code.google.com/p/tortoisegit/

XP、Vistaの場合は
Windows Installer4.5が必要です。
http://www.microsoft.com/ja-jp/download/details.aspx?id=8483

特に詰まるところはありませんのでそのまま
インストールしてください。

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

msysgitのインストール (1)
インストール時に注意すべき選択オプションです。

Use Git Bash only を選択

これがもっとも安定して使える
オプションだそうです。

msysgitのインストール (2)

“Checkout
as-‐is,
commit
Unix-‐style
line
endings”
を選択。
(Macの人とやりとりする場合はこの選択をおすすめします。)

Commit時にWindowsの改行コードか
らUnixの改行コードに変換します。
Windows以外のコンピュータでも使
える改行コードにするためです。

TortoiseGitのインストール (1)
次に、TortoiseGit本体をインストールします。

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

インストール後の設定です。

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

設定 → Gitで名前、メールを登録します。
(これはbacklogのアカウントとは無関係です。
自由に設定出来ます。)

以上でTortoiseGitがインストールできました。

TortoiseGitでのリポジトリ作成 (1)
TortoiseGitがインストールできたので、いよいよリポジトリの作成です。
リモートリポジトリにアップロードするまでの流れをおさらいします。

1. ファイルを更新する。
2. 変更したファイルをStageする。
(「indexに上げる」とか「追加する」
という言い方もします)
3. ローカルリポジトリにCommitする。 4 リモートリポジトリ
4. リモートリポジトリにPushする。

Push

3
Commit


ちょうどこんなイメージ

Stage
買う商品をレジに持っていく

Commit
購入する

Push
渡す

リポジトリの作成はエクスプローラの右クリックから行えます。

エクスプローラで、
ローカルに設置したWordPress内の
themesディレクトリを右クリックし
Git ここにリポジトリを作成

チェックは入れずに、 OK をクリックします。

「空ではありません」と出ますが、構わず「続行」します。

リポジトリを新規作成するときは、空のディレクトリを指定するの
が普通ですが、今回は既にファイルが存在しているthemesディレク
トリにリポジトリを作るため、このような警告が出ます。

TortoiseGitでファイルをアップロードする (1)
ローカルリポジトリが出来たので、これからファイルをCommitし
リモートリポジトリへPush(アップロード)していきます。

themesディレクトリを
右クリックし、
Gitコミット-> master

Commitするための確認画面が開きます。

メッセージは
入力必須です。

Commitするファイルを選択
します。
ここでは全てのファイルを
Commit対象にします。
ファイルをすべて選択して
SPACEキーを押すと全ファ
イルにチェックを入れること
ができます。

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

ローカルでのCommitが無事完了したので、次にローカルリポジトリの
内容をリモートリポジトリへ反映します。(Push)

themesディレクトリを
右クリックし、
TortoiseGit
→ プッシュ(リモートへ反映) を選択し
ます。

Pushに必要な、リモートサーバーへの接続情報を入力する必要があり
ます。この作業は初めてPushするときに1回だけ必要です。

リモートサーバーの情報を設定するよう促されます。
管理ボタンをクリックします。


リモートの名前は何でもいいですが、 origin という名前が慣
用的に使われます。
URLはBacklogに書いてあるリポジトリURLをセットします。

CCOOPPYY

次に新規に追加/保存をクリック

リモート情報をセットしたあと、 origin がセットされているのを確認
して OK をクリックします。


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


無事、リモートリポジトリへのPushに成功しました。

成功

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

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

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

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

Add Repository をクリック

リポジトリはWindows環境でさっき作ったので、
Mac環境ではそれを利用します。
リモートリポジトリにある環境一式をCloneすることで、
Macにも同じリポジトリを作ることができます。
Mac環境でリポジトリを新規作成する必要はありません。

Macの方は、新しくリポジトさっきローカルリポジトリ
リを作らなくても、リモートを作ってリモートリポジトリ
リポジトリをCloneすればにPushした。
OK。
作成済


Clone Push

Mac Windows

NNeeww!! ローカルリポジトリ作成済ローカルリポジトリ

まだ新しいリポジトリを作っていない場合
(さきほどのWindowsでリポジトリを作る手順をスキップした場合)は、
Cloneする手順ではなく、Mac上でリポジトリを作成し、それをリモー
トリポジトリにPushするという手順になります。

こちらのやり方はあとで説明します。

まだリポジトリが作成されて
いないので、Macでリポジト
リを作成してPushする。


Push

Mac

NNeeww!! ローカルリポジトリ

まずCloneのやり方を説明します。

URLはBacklogからコピーします。
リポジトリをクローン
記入後、ユーザ/パスを求められる場合
は、Backlogのユーザ/パスを入力します。

保存先のパス:
ブックマーク名:好きな名前でOK ローカルにリポジトリをダウンロードする
先を指定します。
MAMPやXAMPP上で動いている
WordPressのthemesディレクトリの場所
を指定します。


で、次へ進むと、こんなエラーがでます。


すでに themes ディレクトリの中に
ファイルが入っているのでCloneでき
ません。

Cloneする先のディレクトリは
空である必要があります。


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


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


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

<参考>SourceTreeで新しいリポジトリを作成する場合

まだリポジトリが作成されていない場合は、SourceTreeでリポジトリを新規作成し、
リモートリポジトリにPushしましょう。


Push

Mac

NNeeww!! ローカルリポジトリ

SourceTreeで新しいリポジトリを作成する(1)

以下の手順でできます。themesディレクトリは空じゃなくても構いません。

Add Repository

リポジトリを作成

リポジトリ保存先は
themeファイルの場所を
指定する。


WordBench神戸のローカルリポジトリが作成されるので、
ダブルクリックします。

WordBench神戸Gitのローカルリポジトリを開いたところ

ここに、まだStageもCommitもされ
ていないファイルが表示されます。

リモートリポジトリにアップロードするまでの流れをもう一度おさらい

1. ファイルを更新する。
2. 変更したファイルをStageする。
(「indexに上げる」とか「追加する」
という言い方もします)
3. ローカルリポジトリにCommitする。 4 リモートリポジトリ
4. リモートリポジトリにPushする。

Push

3
Commit


SourceTreeでファイルをアップロードする(1)
次に、ファイルをリモートリポジトリへPushする手順を説明します。

ファイルを全選択し、
indexに追加することで
ファイルをStage環境に移動します。

StageされたファイルはCommitすることができます。

ここにStageされたファイルが表示されます。
コミットボタンでCommitします。

Commitするための設定画面です。コミットメッセージを書いて、コミットボタンを押し
てください。

コミットメッセージは
入力必須

コミットに成功したら、masterブランチにCommitされた跡が残ります。

masterブランチを見ると、
Commitされたログが見られます。

次に、リモートリポジトリにファイルをPushする設定をします。

リモートリポジトリにアクセスする
ための設定をします。

リモートリポジトリの接続設定をします。

追加

リモートの名前は origin で。
URLはBacklogからコピー
してきます。

リモートリポジトリの定義が追加されました。

いよいよリモートリポジトリへPushします。

さきほど作ったリモートリポジトリの定義を選択します。
このあと、パスワードを求められる場合は、Backlogのパスワードを入力してください。

サイドバーのリモート > master を見れば、リモートにPushされたことが確認できます。

5. themesディレクトリを共同編集してみる実演
1つのファイルを2人が同時に更新しても、うまくマージ(結合)することができます。

リモート

Push
Push
ある行を編集してリモートにPush
Commit
Pull
Windows

Mac

別の行を編集して Winで更新された箇所が
Commit 自動的にマージされる

Windowsでファイル更新(1)
まずはじめに、Windows側でファイルを更新します。

index.phpファイルをWindows上で変更します。

ブラウザで確認します。

Windowsローカルのサイトを開くと、
更新が反映されていることが確認できます。

変更したファイルをCommitします。

Commitします。

これでWindowsのローカルリポジトリにCommitできます。

メッセージを書いたあと、OKをクリック

次にBacklog上ののリモートローカルリポジトリにPushします。

リモートへPushします。

Macでファイル更新(1)
次に、Mac側でファイルを更新します。

この時点では、まだリモートリポジトリの変更をPullしてないの
で、Windowsで更新した差分は含まれていません。

ファイルを更新します。さきほどWindowsで更新した場所とは別の行
を編集したと仮定します。

ブラウザで確認します。

Macローカルのサイトを開くと、
変更箇所が反映されていることが確認できます。

Stageに上げます。

「indexに追加」でStageに上げます。

Stageに上がったファイルをローカルリポジトリにCommitします。

Commitします。

Commitメッセージを書いて、Commitします。
これで、Mac側の変更がローカルリポジトリに保管されました。

コミットメッセージを書いたあと、コミット

ここで、いったんPullしてリモートリポジトリの更新を取ってきます。

ここで、リモートリポジトリの内容を反映する
ためPullします。

無事にWindows側の変更がマージされました。

Windowsで変更した内容が反映されています。
もちろんMacで更新した箇所も残っています。

6. Gitを使ってコラボレーションワークするコツ
・ファイルの結合(マージ)は万能ではありません。
同じファイルの同じ行を同時に編集すると競合が起きます。画像のような
バイナリファイルもGit管理できますが、マージはできません。

・データベースはGit管理できません。
管理できるのはファイルのみです。

・ファイルを更新したら、その日のうちにリモートリポジトリへもPush!
こまめにPushすることで、相手が編集したファイルと競合が起きにくく
なります。

・作業を始める前にまずPullして環境を最新にしよう。
自分の作業をする前に、相手の変更差分を先にとりこんでおくと、
トラブルに遭いにくくなります。

・Gitに詳しい人がいると心強い!
初心者同士で運用すると、トラブルが起こったときに解決が難しいです。
そしてトラブルはワリと良く起こります＼(^o^)／
このあたりがまだGitを運用するのが難しいところです。

役に立つサイト(1)

Gitの概念とか
Gitコマンドの使い方が
分かりやすく説明されています。

http://www.slideshare.net/kotas/git-‐15276118

役に立つサイト(2)

Learn
Git
Branching
gitコマンドを
シミュレーションできます。

http://pcottle.github.com/learnGitBranching/

Gitについて、お困りの場合はお手伝いします

・Gitの導入支援、これから始める方へのレクチャーとか
・WebサーバーにGitクライアントを入れて、簡単にリリース
する仕組みをつくったりとか
・Gitサーバーの構築とか

@uemera uemura

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

もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜

More Related Content