ゆるふわ第2回の資料です

1. ノンプログラマのGIT入門
∼もう「これだからデザイナーは」とか言わせないよ！∼

2. 自己紹介
名前：むゆう
職種：Webディレクター
所属：ミツエーリンクス
呟き：@anticyborg
メモ：http://stackstock.net/ 最近HDDからSSDに進化したと思ったら
リスに食べられてしまいました
FB：muyuu

3. 今回の目的
とりあえずGitを使って、「バージョン管理って便利じゃねー
か！！」ってことを覚えてもらいましょう
細かいことは別の機会にしないとほら、覚えること多くてヤ
んなっちゃいますからね
なので、割と色々端折ったり極端な説明をしたりするんです
が、気になる方は後で聞いて下さいね。可能な限りお教えし
ますよー(/'□')/

4. 目次
バージョン管理とは
Gitとは
覚えないといけない用語
インストール
試しにやってみよう
WPerならこうすれば良いんじゃね？

5. バージョン管理とは
そもそもバージョン管理ってなんだよ！！ヽ(`Д´)ノ
→ 「誰が」「何故」「何を」更新したかの履歴を残しておく
ツールですよ
例)
2012年5月12日の更新は「Aさんがキャンペーンの告知のため
にindex.htmlを修正した」であり、Bさんはいつでもその修正
理由・内容を確認できる

6. バージョン管理とは
イメージはこんな感じ
ご主人様が歩まれた軌跡は私が全部覚えております。
ご主人様は前だけ向いて下されば結構です。
はいっ！お願いね！
僕 君

7. バージョン管理とは
ヤだっ！？あたしのGit
イケメンすぎっ！？
Σ（ﾟдﾟlll）

8. バージョン管理とは
つまりどういうことかと言うと、
→ 「あっ！ファイル間違って削除しちゃった！！」
→ 「修正前に戻さないと。…えと、どのファイルだっけ」
→ 「え？君修正したの？あら、今どっちが最新なんだろ」
こんな時に影からそっと助けてくれる、あなたから
決して目を離さないコンシェルジュ的な存在です。

9. GITとは
Gitはバージョン管理ツールの一つです。他にもツールはあり
ますが、今回はGitに焦点をあてます

10. GITとは
Gitはバージョン管理ツールの一つです。他にもツールはあり
ますが、今回はGitに焦点をあてます
何故Gitなの？

11. GITとは
Gitはバージョン管理ツールの一つです。他にもツールはあり
ますが、今回はGitに焦点をあてます
何故Gitなの？
バージョン管理ツールは、通常1人のイケメンがみんな(コー
ド書く人達)のお世話をしています。

12. GITとは
Gitはバージョン管理ツールの一つです。他にもツールはあり
ますが、今回はGitに焦点をあてます
何故Gitなの？
バージョン管理ツールは、通常1人のイケメンがみんな(コー
ド書く人達)のお世話をしています。
Gitはですね、何と1人につき1人イケメンがいるんです！

13. GITとは
イケメン一人締めっ！？
Σ（ﾟдﾟlll）

14. GITとは
ま、主にそんな理由でGitをおすすめします

15. GITとは
あっ、男子は
「イケメン」→「綾波」
に変換してね

16. GITとは
あっ、男子は
「イケメン」→「綾波」
に変換してね
あなた(のコード)は死なないわ
私が守るもの

17. GITとは
つかいたくなった？

18. まずは用語を覚えましょう
リポジトリ 履歴を保存しておく所
リビジョン バージョン番号みたいなもんです
ワークツリー 自分のPCにあるファイル
チェックアウト リポジトリの内容をワークツリーにコピー
コミット ワークツリーで変更した内容をバージョン保存
プッシュ コミット内容をマスターリポジトリにアップロード
プル マスターリポジトリの内容をダウンロード

19. GITを使う場合の流れ
テストサーバ 公開サーバ
共用リポジトリを テストサーバの内容を
テストにすると プル プルするだけ
楽かもね
プッシュ
プル
プル
プッシュ
1. 共用リポジトリから最新をプルする
Aさんの 2. ローカルで編集する Bさんの
リポジトリ 3. 区切り毎にコミットする リポジトリ
4. 共用リポジトリにプッシュ(アップ)
5. テスト確認完了後、公開サーバでプル

20. GITを使わない場合の流れ
テストサーバ 公開サーバ
1. 公開(テスト)サーバから最新をダウンロード
Aさんの Bさんの
2. ローカルで編集する
ローカル ローカル
3. 編集したファイルをまとめる
環境 4. 一つ一つテストにアップロード 環境
5. テスト確認完了後、4と同様に公開サーバで
アップロード

21. GITの作業方法
Gitは基本的にコマンドを入力するだけのツールです。
(ホントはGUIのツールもあるんだけど僕知りません)
まずは基本的なコマンドの使い方を覚えましょうね

22. GITの作業方法
Gitは基本的にコマンドを入力するだけのツールです。
(ホントはGUIのツールもあるんだけど僕知りません)
まずは基本的なコマンドの使い方を覚えましょうね
大丈夫、むずかしくないからｗ

23. GITの作業方法
1. ターミナル(Winはmsysgit？)を立ち上げます
2.リポジトリの場所に移動します
3.打つ！
以上！！(/'□')/

24. インストール
Win：msysgit
http://code.google.com/p/msysgit/downloads/list?q=net+installer
mac：OSX Installer for Git
http://code.google.com/p/git-osx-installer/downloads/list

25. それでは実際に作りましょう
今回はできるだけ簡易にしたいのでマスターリポジトリ・
ローカル環境・本番環境だけの構築とします

26. それでは実際に作りましょう
マスターリポジトリ
② ③
①
ローカル環境 公開環境
1.ローカル環境で変更
2.マスターリポジトリにアップ
3.公開環境で更新

27. ローカルにリポジトリを作ります
ローカルにリポジトリの場所となるフォルダを作りましょう
別にどこでも構わんよー

28. ローカルにリポジトリを作ります
とりあえずファイルを作って保存
テストなのでそれっぽければ
何でもよし

29. ローカルにリポジトリを作ります
ターミナルでそのフォルダに移動します
cd ってのは「次に書いたフォルダに
移動します」って意味のコマンドだよ

30. ローカルにリポジトリを作ります
git init と打ってエンター。これでリポジトリが作成されます
青字と赤字はぼくの設定なので、自分の
かんきょうで出なくても気にしないでね

31. コミットする
コミットするファイルを選択します
「git add 」はコミットファイルの追加、の
意味です。その次に「.」を打つことでディレ
クトリ内の全てのファイルを対象にします。

32. コミットする
「git commit 」でコミットして、変更した内容をリポジトリ
に記録しましょう
「-m “テキスト”」はコミットのコメン
トです。今回のコミットの理由等を入力
してくださいね

33. 変更を更にコミット
htmlに編集を加える必要が出たので、修正します

34. 変更を更にコミット
どこが修正されたかの差分を「git diff」コマンドで見ること
ができます
- は今コミットしてるファイル
+ は今編集したファイル

35. 変更を更にコミット
問題なければ再度「git add ファイル名」の後に「git
commit」を入力して、修正したい箇所をコミットします

36. そんなかんじです
そんな難しくないでしょ？

37. やれることは他にもある
変更履歴を確認する
一つ前(何個前でも可)のコミットに戻る
ファイルの一部分だけコミットする
他の人が編集した箇所と結合する

38. やれることは他にもある
ま、おいおいやってきましょ

39. マスターとなるリポジトリを作ります
サーバにログインして、ディレクトリを作成します
用途は「マスターのデータを取得する」のみ

40. マスターとなるリポジトリを作ります
ローカルと同様にリポジトリを作ります

41. マスターとなるリポジトリを作ります
ローカルに戻り、マスターリポジトリをローカルリポジトリ
と連携させます
「git remote」でリモートの定義
「add」でリモートの追加
「origin」でリモートの名前を定義
それ以降はサーバのアドレスとかディレクトリを指定

42. マスターとなるリポジトリを作ります
ローカルリポジトリで行ったコミットを、マスターリポジト
リにプッシュします
「git push」でアップロードみたいな感じ
「origin」はさっき作った共有リポジトリですね
「master」はじぶんです

43. マスターとなるリポジトリを作ります
これで、マスターのリポジトリには
ローカルの編集が反映された状態と
なります

44. マスターとなるリポジトリを作ります
これで、マスターのリポジトリには
ローカルの編集が反映された状態と
なります
さぁ、後は公開ディレクトリに反映
するだけですよー

45. 公開場所にもリポジトリを作ります
最後に、公開ディレクトリを作って、そこにもリポジトリを
作ります
もはや手慣れたもんですね

46. 公開場所にリポジトリを作ります
先ほどと同じように、共有リポジトリと連携します
各リポジトリが同じサーバの場合はディレクトリの
指定だけでだいじょうぶですよー

47. 公開場所にリポジトリを作ります
ここで、共用リポジトリの内容をプルします
これでhtdocsフォルダの中にはローカルで
編集したindex.htmlが追加されます

48. できた！
わーい(/'□')/

49. WP案件での使い方
WordPressを使用する案件の場合、テーマ
フォルダを1リポジトリとして管理すると
良いんじゃないかと思ってます

50. WP案件での使い方
自分で作るテーマフォルダの中身をGitに！

51. さいごに
本当はWordPressで運用する際のお話をきちん
としたかったんですが、Gitの説明でいっぱい
いっぱいでした。
質問等、ございましたら答えますので遠慮なく
言ってくださいねー

52. おしまい