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.
Menu1. 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.
Menu1. 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.
Menu1. 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.
Menu1. 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.
Menu1. 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.
Menu1. 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.
ありがとうございました。