もしwordpressユーザーがgitを使ったら 〜wordpressテーマを共同編集しよう〜
DESCRIPTION
WordPressでサイトを制作するとき、2人以上のチームで取り組むことも多いと思います。例えば「構築担当者」と「デザイン担当者」で1つのサイトを構築するような場合です。 同じ会社内で一緒に作業するときと違って、ノマドワーカーのようにそれぞれが別の場所で作業する場合は、直接ファイルを手渡しするようなことはできません。 そんなとき、メールにファイルを添付してやりとりしていますか? Webサーバーに直接アップロードして更新していますか? どちらにせよファイルの管理と意思疎通をしっかりやらないと、せっかく更新したファイルがまた元に戻っちゃいますよね。 そんなコラボレーションワークでのファイル管理に、Git(ギット)を使ってみましょう。ファイル管理の煩わしさから開放され開発がスムーズにできます。 WordPressの構築を経験したことあるけど、Gitはまだ使ったことがない、という方向けにGitの使い方を伝授します。 GitサーバーはBacklogで、GitクライアントはMac(SourceTree)、Windows(TortoiseGit)両方解説します。黒い画面(ターミナル)は使わないやり方を紹介するので怖くないよ!TRANSCRIPT
![Page 1: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/1.jpg)
@uemera
2013.3.3WordBench神戸 上村崇
~WordPressテーマを共同編集しよう~
![Page 2: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/2.jpg)
最近のオレ
PHPフレームワーク(FuelPHP)
CS-Cart(ただいま勉強中!)
ExcelVBA(社内合理化の支援)
サーバーインフラ(VPS構築など)
WordPress(主に技術サポート)
JavaScript、jQuery
勉強会準備(WordBench等)
XOOPS
SoyCMS、SoyShop(ネットショップの保守)
@uemera
uemuraフリーランスのシステムエンジニアです。
![Page 3: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/3.jpg)
企業が学生にオファーする逆求人サイトOfferBoxを作っています。この開発作業でGit使ってます。GitサーバーはBacklog使用。
登録学生数: 1900人登録企業数: 60社
FuelPHPさくらVPS 4G
![Page 4: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/4.jpg)
このスライドはこんな人を対象にしています。
Git初心者向けにお話します。便利さを知り、超基本的な使い方をマスターしてもらいたいと思っています。
・Gitて聞いたことあるけど何? 何に使うの?
・Git始めたいけど使い方が分からない
・そんなに便利なん?
![Page 5: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/5.jpg)
Q: Gitは難しいですか?A: 難しいです。
Gitはあなたが今まで使ったことが無い新種のツールです。ツールの特徴や使いどころを理解するのに時間がかかります。
WordやExcelを初めて使ったときのことを思い出してください。ワープロや表計算ソフトを初めて触ったときは、分からないことがいっぱいあったと思います。Git未経験の方には、その苦労が待ち受けています。逆に1つのツールに慣れてしまえば、別の同じような種類のツールもそんなに苦労せず使えると思います。
![Page 6: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/6.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 7: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/7.jpg)
1. gitで何ができる?
(1) ファイルのバージョン管理(世代管理)ができます。
(2) ファイルのバックアップができます。
(3) 他人が編集したファイルの変更差分を取り込めます。
(4) 本番環境へのリリースが、簡単にすばやくできます。
![Page 8: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/8.jpg)
人間とは罪深い生き物です
罪を生まない仕組み、それがGit
![Page 9: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/9.jpg)
1. ファイルのバージョン管理(世代管理)ができます。
世代管理されているので、過去のファイルに戻すことができます。
2月10日の更新
index.php
2月20日の更新 3月1日の更新
save save save
元に戻したいと思ったときは...
![Page 10: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/10.jpg)
2. ファイルのバックアップができます。
ローカルリポジトリ
リモートリポジトリ
パソコン上のファイルをリモートリポジトリ(ここではBacklogを使用)にPushすることで、ファイルのバックアップをとることができます。
Push
![Page 11: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/11.jpg)
人間とは罪深い生き物です
罪を生まない仕組み、それがGit
![Page 12: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/12.jpg)
3. 他人が編集したファイルの変更差分を取り込めます。
リモート
相手が変更したファイルを自分のパソコン内の環境に取り込むことができます。
A’B
A C
A C A C
自分 相手
相手が同じファイル(A)を編集していても、行が重ならなければ自動でマージ(結合)してくれます。
PushPull
![Page 13: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/13.jpg)
4. 本番環境へのリリースが、簡単にすばやくできます。
リモート
サーバー上にGitクライアントがインストールされていれば、Pullして変更されたファイルだけを瞬時に反映させることができます。ただし、レンタルサーバーの場合はGitをインストールすることは困難なので、VPSや専用サーバーでのみ有効な方法です。
自分 サーバー
サーバーにGitクライアントを入れておけば、サーバー上でPullすることで、変更したファイルだけを素早くリリースできます。※今回のスライドでは説明しません。
PullPush
![Page 14: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/14.jpg)
Gitは用語が難しい! (1)
リモートリポジトリ
用語の意味を覚えれば、Gitはこわくなくなります。少し多いですが頑張って覚えましょう。
サーバーにGitクライアントを入れておけば、サーバー上でPullすることで、変更したファイルだけを素早くリリースできます。※今回のスライドでは説明しません。
Push
ローカルリポジトリ
ファイル更新
Stage
Commit
ステージされたファイル(Commitされる予定の一時置き場に置かれる)
1
2
3
4
自分が更新したファイルをアップするとき:
![Page 15: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/15.jpg)
Gitは用語が難しい! (2)
リモートリポジトリ
Pull
ローカルリポジトリ
サーバーからPullすれば、自分のPCにファイルがダウンロードされてすぐに使えるようになります。アップするときのように手順は多くありません。
2
1
リモートリポジトリにあるファイルをダウンロードするとき:
![Page 16: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/16.jpg)
Gitは用語が難しい! (3)ほかにも難しい用語がたくさん!・checkout・branch・merge・revert・reset・fetch・stash・rebase・tag
これらは、Gitに慣れてきたらおいおい覚えていけばいいと思います。
![Page 17: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/17.jpg)
ツールを用意しよう
サーバーからPullすれば、自分のPCにファイルがダウンロードされてすぐに使えるようになります。アップするときのように手順は多くありません。
tortoisegit
Gitサーバー
Gitクライアント
100MBまで無料
Mac:
Windows:無料
無料
![Page 18: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/18.jpg)
日本語 O X X
容量 100MB 無制限 無制限
ユーザ数 10人まで 無制限 5人まで
リポジトリ公開 非公開にできる 公開必須 非公開に
できる
Gitサーバー比較 (無料プランで比較した場合)
サーバーからPullすれば、自分のPCにファイルがダウンロードされてすぐに使えるようになります。アップするときのように手順は多くありません。
![Page 19: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/19.jpg)
Git管理したいWordPressのファイルはどれ?
今回の事例として、wordpressのwp-content/themesディレクトリ以下をgit管理対象にします。
もちろん、wp-content/以下やwordpressディレクトリまるごと管理対象にしても構いません。
![Page 20: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/20.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 21: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/21.jpg)
Backlogのフリープランを申し込みます。
![Page 22: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/22.jpg)
例として以下の内容で申し込みます。スペースID: wbkobe0303スペース名: WordBench神戸言語: 日本語タイムゾーン: Asia/TokyoユーザID: wbkobeパスワード: **********
![Page 23: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/23.jpg)
プロジェクトの追加
![Page 24: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/24.jpg)
例として以下を入力プロジェクト名: Gitを使おう!プロジェクトキー: USEGIT
![Page 25: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/25.jpg)
① Git
② Gitの設定
③ リポジトリを追加する
![Page 26: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/26.jpg)
リポジトリ名 ”hinamatsuri” で作成します。これでBacklogの設定が完了しました。
![Page 27: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/27.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 28: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/28.jpg)
”hinamatsuritheme”を作りました。これを含むthemesディレクトリ全体をgit管理対象にします。
TortoiseGitをインストールする前の前提として、XAMPPでWordPressを動かせる状態にしておいてください。その上で、WordPressのオリジナルテーマを新規作成します。
![Page 29: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/29.jpg)
TortoiseGithttp://code.google.com/p/tortoisegit/
WindowsのGitクライアントであるTortoiseGitインストール
![Page 30: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/30.jpg)
XP、Vistaの場合はWindows Installer4.5が必要です。http://www.microsoft.com/ja-jp/download/details.aspx?id=8483
特に詰まるところはありませんのでそのままインストールしてください。
![Page 31: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/31.jpg)
TortoiseGitをインストールするには、msysgitも必要です。
![Page 32: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/32.jpg)
“Use Git Bash only” を選択
msysgitのインストール (1)
これがもっとも安定して使えるオプションだそうです。
インストール時に注意すべき選択オプションです。
![Page 33: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/33.jpg)
“Checkout as-‐is, commit Unix-‐style line endings” を選択。(Macの人とやりとりする場合はこの選択をおすすめします。)
msysgitのインストール (2)
Commit時にWindowsの改行コードからUnixの改行コードに変換します。Windows以外のコンピュータでも使える改行コードにするためです。
![Page 34: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/34.jpg)
TortoiseGitのインストール (1)次に、TortoiseGit本体をインストールします。
“TortoiseGitPLink, comming from Putty,integrates with Windows better” を選択します。このあと、日本語化ファイルもインストールします。(公式サイトからLanguae Packをダウンロードできます。)
![Page 35: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/35.jpg)
TortoiseGitのインストール (2)
Windowsのスタートメニュー → プログラム → TortoiseGit → Settingsで設定ファイルを開きます。
インストール後の設定です。
![Page 36: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/36.jpg)
TortoiseGitのインストール (3)設定 → Gitで 名前、メールを登録します。(これはbacklogのアカウントとは無関係です。自由に設定出来ます。)
以上でTortoiseGitがインストールできました。
![Page 37: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/37.jpg)
リモートリポジトリ
1. ファイルを更新する。2. 変更したファイルをStageする。 (「indexに上げる」とか「追加する」 という言い方もします)3. ローカルリポジトリにCommitする。4. リモートリポジトリにPushする。
サーバーにGitクライアントを入れておけば、サーバー上でPullすることで、変更したファイルだけを素早くリリースできます。※今回のスライドでは説明しません。
Push
ローカルリポジトリ
ファイル更新
Stage
Commit
ステージされたファイル(Commitされる予定の一時置き場に置かれる)
1
2
3
4
TortoiseGitでのリポジトリ作成 (1)TortoiseGitがインストールできたので、いよいよリポジトリの作成です。リモートリポジトリにアップロードするまでの流れをおさらいします。
![Page 38: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/38.jpg)
Push
買う商品をレジに持っていくStage
Commit
TortoiseGitでのリポジトリ作成 (2)ちょうどこんなイメージ
購入する
渡す
![Page 39: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/39.jpg)
TortoiseGitでのリポジトリ作成 (3)
エクスプローラで、ローカルに設置したWordPress内のthemesディレクトリを右クリックし“Git ここにリポジトリを作成”を選択します。
リポジトリの作成はエクスプローラの右クリックから行えます。
![Page 40: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/40.jpg)
チェックは入れずに、”OK” をクリックします。
「空ではありません」と出ますが、構わず「続行」します。
TortoiseGitでのリポジトリ作成 (4)
リポジトリを新規作成するときは、空のディレクトリを指定するのが普通ですが、今回は既にファイルが存在しているthemesディレクトリにリポジトリを作るため、このような警告が出ます。
![Page 41: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/41.jpg)
TortoiseGitでファイルをアップロードする (1)
themesディレクトリを右クリックし、“Gitコミット-> master”を選択します。
ローカルリポジトリが出来たので、これからファイルをCommitしリモートリポジトリへPush(アップロード)していきます。
![Page 42: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/42.jpg)
TortoiseGitでファイルをアップロードする (2)
メッセージは入力必須です。
Commitするファイルを選択します。ここでは全てのファイルをCommit対象にします。ファイルをすべて選択してSPACEキーを押すと全ファイルにチェックを入れることができます。
Commitするための確認画面が開きます。
![Page 43: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/43.jpg)
TortoiseGitでファイルをアップロードする (3)本来ならば、①Stageする ②Commitする の2つの手順がありますが、この操作ではファイルをStageしてCommitするところまで一気にできます。カメさんが転送されているアニメーションをお楽しみください。
![Page 44: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/44.jpg)
TortoiseGitでファイルをアップロードする (4)ローカルでのCommitが無事完了したので、次にローカルリポジトリの内容をリモートリポジトリへ反映します。(Push)
themesディレクトリを右クリックし、“TortoiseGit” → “プッシュ(リモートへ反映)”を選択します。
![Page 45: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/45.jpg)
TortoiseGitでファイルをアップロードする (5)
リモートサーバーの情報を設定するよう促されます。“管理”ボタンをクリックします。
Pushに必要な、リモートサーバーへの接続情報を入力する必要があります。この作業は初めてPushするときに1回だけ必要です。
![Page 46: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/46.jpg)
TortoiseGitでファイルをアップロードする (6)
リモートの名前は何でもいいですが、”origin”という名前が慣用的に使われます。URLはBacklogに書いてあるリポジトリURLをセットします。
次に”新規に追加/保存”をクリック
CCOOPPYY
![Page 47: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/47.jpg)
TortoiseGitでファイルをアップロードする (7)リモート情報をセットしたあと、”origin”がセットされているのを確認して”OK”をクリックします。
![Page 48: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/48.jpg)
TortoiseGitでファイルをアップロードする (8)
リモートリポジトリのユーザ、パスワード(Backlogのユーザ、パスワード)を聞かれますので入力します。するとアップロードが始まります。
![Page 49: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/49.jpg)
TortoiseGitでファイルをアップロードする (9)
無事、リモートリポジトリへのPushに成功しました。
成功
![Page 50: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/50.jpg)
Backlogを見ると、Windows上で行ったCommitが無事リモートサーバーにPushされたことが分かります。
![Page 51: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/51.jpg)
Git → hinamatsuri → [ネットワーク]タブを開くと、ネットワーク図が見られます。(コミットの履歴が図で追えるので便利!)
![Page 52: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/52.jpg)
詳しい導入手順は、「サルでもわかるGit入門」がおすすめです。www.backlog.jp/git-guide
![Page 53: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/53.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 54: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/54.jpg)
SourceTreeの設定 (1)
“Add Repository” をクリック
前提として、MAMPやXAMPPを使ってローカルマシン上でWordPressを動作させているものとします。SourceTreeのインストールは簡単なので割愛します。ここではインストール後のリポジトリの設定方法を説明します。
![Page 55: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/55.jpg)
リポジトリはWindows環境でさっき作ったので、Mac環境ではそれを利用します。
リモートリポジトリ
リモートリポジトリにある環境一式をCloneすることで、Macにも同じリポジトリを作ることができます。Mac環境でリポジトリを新規作成する必要はありません。
Mac Windows
PushClone
ローカルリポジトリローカルリポジトリ
さっきローカルリポジトリを作ってリモートリポジトリにPushした。
Macの方は、新しくリポジトリを作らなくても、リモートリポジトリをCloneすればOK。
NNeeww!! 作成済
作成済
![Page 56: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/56.jpg)
まだ新しいリポジトリを作っていない場合(さきほどのWindowsでリポジトリを作る手順をスキップした場合)は、Cloneする手順ではなく、Mac上でリポジトリを作成し、それをリモートリポジトリにPushするという手順になります。
リモートリポジトリ
こちらのやり方はあとで説明します。
Mac
Push
ローカルリポジトリ
まだリポジトリが作成されていないので、Macでリポジトリを作成してPushする。
NNeeww!!
![Page 57: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/57.jpg)
“リポジトリをクローン”
SourceTreeの設定 (2)
URLはBacklogからコピーします。記入後、ユーザ/パスを求められる場合は、Backlogのユーザ/パスを入力します。
保存先のパス:ローカルにリポジトリをダウンロードする先を指定します。MAMPやXAMPP上で動いているWordPressのthemesディレクトリの場所を指定します。
ブックマーク名:好きな名前でOK
まずCloneのやり方を説明します。
![Page 58: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/58.jpg)
SourceTreeの設定 (3)
で、次へ進むと、こんなエラーがでます。
![Page 59: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/59.jpg)
SourceTreeの設定 (4)
Cloneする先のディレクトリは空である必要があります。
すでに”themes”ディレクトリの中にファイルが入っているのでCloneできません。
![Page 60: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/60.jpg)
SourceTreeの設定 (5)
解決策として、もともと存在するthemesディレクトリは削除するか別の名前にして退避しておきましょう。ここではthemes_originalという名前にリネームしました。
![Page 61: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/61.jpg)
SourceTreeの設定 (6)
気を取り直してもう一度Cloneを試みると、今度はちゃんとCloneが動いてリモートリポジトリを取ってこれました!
![Page 62: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/62.jpg)
SourceTreeの設定 (7)
リモートリポジトリからローカルリポジトリにCloneが行われて、WordBench神戸のローカルリポジトリが無事作成されました。
![Page 63: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/63.jpg)
<参考>SourceTreeで新しいリポジトリを作成する場合
リモートリポジトリ
Mac
Push
ローカルリポジトリNNeeww!!
まだリポジトリが作成されていない場合は、SourceTreeでリポジトリを新規作成し、リモートリポジトリにPushしましょう。
![Page 64: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/64.jpg)
リポジトリを作成
“Add Repository”
以下の手順でできます。themesディレクトリは空じゃなくても構いません。
SourceTreeで新しいリポジトリを作成する(1)
リポジトリ保存先はthemeファイルの場所を指定する。
![Page 65: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/65.jpg)
WordBench神戸のローカルリポジトリが作成されるので、ダブルクリックします。
SourceTreeで新しいリポジトリを作成する(2)
![Page 66: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/66.jpg)
WordBench神戸Gitのローカルリポジトリを開いたところ
SourceTreeで新しいリポジトリを作成する(3)
ここに、まだStageもCommitもされていないファイルが表示されます。
![Page 67: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/67.jpg)
リモートリポジトリ
1. ファイルを更新する。2. 変更したファイルをStageする。 (「indexに上げる」とか「追加する」 という言い方もします)3. ローカルリポジトリにCommitする。4. リモートリポジトリにPushする。
サーバーにGitクライアントを入れておけば、サーバー上でPullすることで、変更したファイルだけを素早くリリースできます。※今回のスライドでは説明しません。
Push
ローカルリポジトリ
ファイル更新
Stage
Commit
ステージされたファイル(Commitされる予定の一時置き場に置かれる)
1
2
3
4
リモートリポジトリにアップロードするまでの流れをもう一度おさらいSourceTreeで新しいリポジトリを作成する(4)
![Page 68: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/68.jpg)
ファイルを全選択し、“indexに追加”することでファイルをStage環境に移動します。
SourceTreeでファイルをアップロードする(1)次に、ファイルをリモートリポジトリへPushする手順を説明します。
![Page 69: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/69.jpg)
StageされたファイルはCommitすることができます。
ここにStageされたファイルが表示されます。コミットボタンでCommitします。
SourceTreeでファイルをアップロードする(2)
![Page 70: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/70.jpg)
SourceTreeでファイルをアップロードする(3)
コミットメッセージは入力必須
Commitするための設定画面です。コミットメッセージを書いて、コミットボタンを押してください。
![Page 71: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/71.jpg)
SourceTreeでファイルをアップロードする(4)コミットに成功したら、masterブランチにCommitされた跡が残ります。
masterブランチを見ると、Commitされたログが見られます。
![Page 72: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/72.jpg)
SourceTreeでファイルをアップロードする(5)次に、リモートリポジトリにファイルをPushする設定をします。
リモートリポジトリにアクセスするための設定をします。
![Page 73: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/73.jpg)
SourceTreeでファイルをアップロードする(6)リモートリポジトリの接続設定をします。
追加
リモートの名前は”origin”で。URLはBacklogからコピーしてきます。
![Page 74: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/74.jpg)
SourceTreeでファイルをアップロードする(7)リモートリポジトリの定義が追加されました。
![Page 75: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/75.jpg)
SourceTreeでファイルをアップロードする(8)いよいよリモートリポジトリへPushします。
![Page 76: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/76.jpg)
SourceTreeでファイルをアップロードする(9)さきほど作ったリモートリポジトリの定義を選択します。このあと、パスワードを求められる場合は、Backlogのパスワードを入力してください。
![Page 77: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/77.jpg)
SourceTreeでファイルをアップロードする(10)サイドバーのリモート > master を見れば、リモートにPushされたことが確認できます。
![Page 78: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/78.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 79: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/79.jpg)
5. themesディレクトリを共同編集してみる実演1つのファイルを2人が同時に更新しても、うまくマージ(結合)することができます。
Windows
Mac
別の行を編集してCommit
Winで更新された箇所が自動的にマージされる
リモートにPushある行を編集してCommit
Push
PullPush
リモート
![Page 80: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/80.jpg)
Windowsでファイル更新(1)
index.phpファイルをWindows上で変更します。
まずはじめに、Windows側でファイルを更新します。
![Page 81: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/81.jpg)
Windowsでファイル更新(2)
Windowsローカルのサイトを開くと、更新が反映されていることが確認できます。
ブラウザで確認します。
![Page 82: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/82.jpg)
Windowsでファイル更新(3)
Commitします。
変更したファイルをCommitします。
![Page 83: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/83.jpg)
Windowsでファイル更新(4)
メッセージを書いたあと、OKをクリック
これでWindowsのローカルリポジトリにCommitできます。
![Page 84: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/84.jpg)
Windowsでファイル更新(5)次にBacklog上ののリモートローカルリポジトリにPushします。
リモートへPushします。
![Page 85: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/85.jpg)
Macでファイル更新(1)
ファイルを更新します。さきほどWindowsで更新した場所とは別の行を編集したと仮定します。
この時点では、まだリモートリポジトリの変更をPullしてないので、Windowsで更新した差分は含まれていません。
次に、Mac側でファイルを更新します。
![Page 86: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/86.jpg)
Macでファイル更新(2)
Macローカルのサイトを開くと、変更箇所が反映されていることが確認できます。
ブラウザで確認します。
![Page 87: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/87.jpg)
Macでファイル更新(3)
「indexに追加」でStageに上げます。
Stageに上げます。
![Page 88: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/88.jpg)
Macでファイル更新(4)
Commitします。
Stageに上がったファイルをローカルリポジトリにCommitします。
![Page 89: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/89.jpg)
Macでファイル更新(5)
コミットメッセージを書いたあと、コミット
Commitメッセージを書いて、Commitします。これで、Mac側の変更がローカルリポジトリに保管されました。
![Page 90: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/90.jpg)
Macでファイル更新(6)
ここで、リモートリポジトリの内容を反映するためPullします。
ここで、いったんPullしてリモートリポジトリの更新を取ってきます。
![Page 91: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/91.jpg)
Macでファイル更新(7)
Windowsで変更した内容が反映されています。もちろんMacで更新した箇所も残っています。
無事にWindows側の変更がマージされました。
![Page 92: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/92.jpg)
Menu1. Gitで何ができる?
2. Gitサーバー”Backlog”でリモートリポジトリの設定
3. WindowsにGitクライアント”TortoiseGit”をインストール
4. MacにGitクライアント”SourceTree”をインストール
5. themesディレクトリを共同編集してみる実演
6. Gitを使ってコラボレーションワークするコツ
![Page 93: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/93.jpg)
6. Gitを使ってコラボレーションワークするコツ・ファイルの結合(マージ)は万能ではありません。 同じファイルの同じ行を同時に編集すると競合が起きます。画像のような バイナリファイルもGit管理できますが、マージはできません。
・データベースはGit管理できません。 管理できるのはファイルのみです。
・ファイルを更新したら、その日のうちにリモートリポジトリへもPush! こまめにPushすることで、相手が編集したファイルと競合が起きにくく なります。
・作業を始める前にまずPullして環境を最新にしよう。 自分の作業をする前に、相手の変更差分を先にとりこんでおくと、 トラブルに遭いにくくなります。
・Gitに詳しい人がいると心強い! 初心者同士で運用すると、トラブルが起こったときに解決が難しいです。 そしてトラブルはワリと良く起こります\(^o^)/ このあたりがまだGitを運用するのが難しいところです。
![Page 94: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/94.jpg)
役に立つサイト(1)
http://www.slideshare.net/kotas/git-‐15276118
Gitの概念とかGitコマンドの使い方が分かりやすく説明されています。
![Page 95: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/95.jpg)
役に立つサイト(2)
http://pcottle.github.com/learnGitBranching/
Learn Git Branchinggitコマンドをシミュレーションできます。
![Page 96: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/96.jpg)
Gitについて、お困りの場合はお手伝いします
・Gitの導入支援、これから始める方へのレクチャーとか・WebサーバーにGitクライアントを入れて、簡単にリリース する仕組みをつくったりとか・Gitサーバーの構築とか
@uemera uemura
![Page 97: もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜](https://reader034.vdocuments.net/reader034/viewer/2022052321/556171d6d8b42a98268b4713/html5/thumbnails/97.jpg)
ありがとうございました。