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

@uemera

2013.3.3WordBench神戸上村崇

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

最近のオレ

PHPフレームワーク(FuelPHP)

CS-Cart(ただいま勉強中!)

ExcelVBA(社内合理化の支援)

サーバーインフラ(VPS構築など)

WordPress(主に技術サポート)

JavaScript、jQuery

勉強会準備(WordBench等)

XOOPS

SoyCMS、SoyShop(ネットショップの保守)

@uemera

uemuraフリーランスのシステムエンジニアです。

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

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

FuelPHPさくらVPS 4G

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

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

・Gitて聞いたことあるけど何？何に使うの？

・Git始めたいけど使い方が分からない

・そんなに便利なん？

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

Gitはあなたが今まで使ったことが無い新種のツールです。ツールの特徴や使いどころを理解するのに時間がかかります。

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

Menu1. 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日の更新

index.php

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

save save save

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

2. ファイルのバックアップができます。

ローカルリポジトリ

リモートリポジトリ

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

Push

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

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

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

リモート

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

A’B

A C

A C A C

自分相手

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

PushPull

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

リモート

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

自分サーバー

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

PullPush

Gitは用語が難しい! (1)


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


Push


ファイル更新

Stage

Commit

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

1

2

3

4

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

Gitは用語が難しい! (2)


Pull


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

2

1

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

Gitは用語が難しい! (3)ほかにも難しい用語がたくさん!・checkout・branch・merge・revert・reset・fetch・stash・rebase・tag

これらは、Gitに慣れてきたらおいおい覚えていけばいいと思います。

ツールを用意しよう


tortoisegit

Gitサーバー

Gitクライアント

100MBまで無料

Mac:

Windows:無料

無料

日本語 O X X

容量 100MB 無制限無制限

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

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

できる

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


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

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

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

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

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

プロジェクトの追加

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

① Git

② Gitの設定

③ リポジトリを追加する

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

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

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

TortoiseGithttp://code.google.com/p/tortoisegit/

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

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

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

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

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

http://www.microsoft.com/ja-jp/download/details.aspx?id=8483

http://www.microsoft.com/ja-jp/download/details.aspx?id=8483

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

“Use Git Bash only” を選択

msysgitのインストール (1)

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

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

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

msysgitのインストール (2)

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

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

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

TortoiseGitのインストール (2)

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

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

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

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


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


Push


ファイル更新

Stage

Commit


1

2

3

4

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

Push

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

Commit

TortoiseGitでのリポジトリ作成 (2)ちょうどこんなイメージ

購入する

渡す

TortoiseGitでのリポジトリ作成 (3)

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

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

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

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

TortoiseGitでのリポジトリ作成 (4)

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

TortoiseGitでファイルをアップロードする (1)

themesディレクトリを右クリックし、“Gitコミット-> master”を選択します。

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


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

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

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

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

TortoiseGitでファイルをアップロードする (4)ローカルでのCommitが無事完了したので、次にローカルリポジトリの内容をリモートリポジトリへ反映します。(Push)

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


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

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


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

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

CCOOPPYY

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


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


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

成功

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

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

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

http://www.backlog.jp/git-guide

http://www.backlog.jp/git-guide

SourceTreeの設定 (1)

“Add Repository” をクリック

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

リポジトリはWindows環境でさっき作ったので、Mac環境ではそれを利用します。


リモートリポジトリにある環境一式をCloneすることで、Macにも同じリポジトリを作ることができます。Mac環境でリポジトリを新規作成する必要はありません。

Mac Windows

PushClone

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

さっきローカルリポジトリを作ってリモートリポジトリにPushした。

Macの方は、新しくリポジトリを作らなくても、リモートリポジトリをCloneすればOK。

NNeeww!! 作成済

作成済

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


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

Mac

Push


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

NNeeww!!

“リポジトリをクローン”


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

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

ブックマーク名:好きな名前でOK

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


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


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

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


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


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


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

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


Mac

Push

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

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

リポジトリを作成

“Add Repository”

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

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

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

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


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


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


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


Push


ファイル更新

Stage

Commit


1

2

3

4

リモートリポジトリにアップロードするまでの流れをもう一度おさらいSourceTreeで新しいリポジトリを作成する(4)

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

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

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

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

SourceTreeでファイルをアップロードする(2)

SourceTreeでファイルをアップロードする(3)

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

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

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

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

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

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

SourceTreeでファイルをアップロードする(6)リモートリポジトリの接続設定をします。

追加

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

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

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

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

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

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

Windows

Mac

別の行を編集してCommit

Winで更新された箇所が自動的にマージされる

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

Push

PullPush

リモート

Windowsでファイル更新(1)

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

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


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

ブラウザで確認します。


Commitします。

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


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

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

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

リモートへPushします。

Macでファイル更新(1)

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

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

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


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

ブラウザで確認します。


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

Stageに上げます。


Commitします。

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


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

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


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

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


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

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

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

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

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

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

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

役に立つサイト(1)

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

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

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


役に立つサイト(2)

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

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



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

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

@uemera uemura

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

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

Technology

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