デザイナーでも出来るコマンドを使わないバージョン管理（SourceTree + BitBucket）

1. デザイナーでも出来るコマンドを
使わないバージョン管理
2015.11.21
トライポット 藤田健一
SourceTree + BitBucket
ソースツリー ＋ ビットバケット

2. トライポット 代表 藤田 健一
アートディレクター
ホームページ作成・システム開発
アプリ開発・デジタルサイネージ
自己紹介

3. 自己紹介
CSSNite in HIROSHIMA 実行委員
Web Touch Meeting（広島）
AUGMENT8（クリエイティブ集団）
広探ゲーム
出雲web勉強会
出雲ＩＴコミュニティー 副委員長
チーム出雲オープンビジネス協議会 理事

4. 自己紹介
デジタルサイネージアワード２０１０ インテル賞受賞
HADC2012 インタラクティブ部門 入選
遊んで、楽しむデジタルサイネージ
「Joy-ad（ジョイアド）」
遊べる床面サイネージ
「LiveFloor（ライブフロア）」New

5. 広島トランヴェールビルディング
床面インタラクティブサイネージ
LiveFloor
ライブフロア

6. ゆめタウン広島クリスマスイベント
顔認識サイネージ

7. サンフレッチェ広島オープニングイベント
キネクトを使ったポージングサイネージ

8. バージョン管理とは？

9. バージョン管理とは
作成したファイルの変更履歴を管理するための
システム。
!
・作成履歴を管理・復元
・作成したデータの差分を保存
・データのバックアップ
・チーム開発時のデータの共有
など

10. バージョン管理システム
!
Git（ギット）
他にも
・Mercurial（マーキュリアル）
・Subversion（サブバージョン：SVN）
・CSV（シーエスブイ）
（コンカレント・バージョンズ・システム：Concurrent Versions System）
など、いろいろ、、、

11. CUIはいゃだぁ∼
GUI・GUIやりたい！

12. じゃあ、
GUIでグイグイ使えるバージョン
管理ソフトを使おう！

13. その前に基礎用語の確認

14. ・リポジトリ
・クローン
・コミット
・プッシュ
・プル
・ブランチ
・コンフリクト
……
よくわかんない

15. 流れ

16. ・リポジトリを作成
▼
・クローン（初回はまとめてリポジトリを読み込み）
▼
・プル（変更データの取得）※２回目以降
▼
・データ作成・変更
▼
・アッド・ステージに上げる（コミットするデータの選択）
▼
・コミット（変更データをまとめる）
▼
・プッシュ（リポジトリにコミットしたものを書き込む）

17. 準備する

18. !
!
リポジトリ・・・・・・・バージョン管理情報の保管場所
・リモートリポジトリ（GitHubやBitBucketなど）
・ローカルリポジトリ（自前で作成）
!
クローン・・・・・・リモートのリポジトリを複製すること
origin（オリジン）・・・・リポジトリの保存場所（URL）
master（マスター）・・・・・・デフォルトのブランチ名
ブランチ・・・・・・・・・・リポジトリを分岐させること

19. 変更を取得する

20. プル・・・・・・・リモートリポジトリ上の最新の更新内容を
ダウンロードし、
その内容でローカルリポジトリを更新する
（フェッチしてマージすること）
!
!
!
!
!
フェッチ・・リモートリポジトリ上の最新の更新内容を確認
マージ・・・複数のプログラムやファイルなどを、
ひとつにまとめること
!
つまり、フェッチとかマージってあまり使わない

21. 変更を反映させる

22. アッド（ステージ）・・コミットするファイルを指定すること
コミット・・・・・・・リポジトリへ書き込むファイルを
まとめること
コミットメッセージ・・コミット時のコメント
プッシュ・・・・・・・コミット内容をリポジトリに
反映すること

23. その他

24. ブランチ・・・・・リポジトリを分岐させること。
チェックアウト・・ブランチ等を切り替えること。
コンフリクト・・・競合すること。
先祖返りしてしまう状況。
同じ箇所を複数で直してしますこと。

25. ・リポジトリを作成
▼
・クローン（初回はまとめてリポジトリを読み込み）
▼
・プル（変更データの取得）※２回目以降
▼
・データ作成・変更
▼
・アッド・ステージに上げる（コミットするデータの選択）
▼
・コミット（変更データをまとめる）
▼
・プッシュ（リポジトリにコミットしたものを書き込む）
もう一回

26. 今回は簡単にできる方法

27. SourceTree + BitBucket
ソースツリー ＋ ビットバケット

28. Bitbcketとは
!
外部リポジトリサービスです。
簡単にリポジトリを利用する事ができます。
!
http://bitbucket.org
!
安心してください、日本語になってますよ。
!
GitHubじゃだめなの？

29. BitbcketとGitHubの違い
!
Bitbucket
・無料登録でも５ユーザーまで非公開が可能
（６ユーザー以上は有料）
・SourceTreeと同じ開発元（Atlassian）
なので連携しやすい
!
GitHub
・無料で利用できる範囲は公開が条件
・非公開の場合は有料

30. 早速使ってみる

31. アカウントを作ります

32. 必要な情報を入力して
サインアップ
この後、チュートリアル画面とか出てきます

33. Gitで！
適当な名前をつけます
リポジトリ作成
作成＞新規リポジトリ

34. v
v
空っぽのリポジトリができます
詳細はこちら
とりあえず、これでＯＫ

35. SourceTreeに行きます

36. SourceTreeとは
!
GUIでグイグイつかえるバージョン管理ソフト
です。
GutやMercurialなんかが使えます。
!
https://www.sourcetreeapp.com
!
安心してください、日本語になってますよ。

37. すぐダウンロードされます
ここは英語ですが、
ダウンロードしたら
日本語になってます。

38. v
リモートから
さっき作ったリポジトリを選択
クローンします。
保存先を作成
ファイルそのものが無かったり
更新するファイルがない場合はこんな感じ
v 何か入れます！
v

39. とりあえず作ったリポジトリは空っぽなので、
何かフォルダに入れます。
!
index.html
main.html
menu.html

40. v
v
v
✓チェックを入れて
ステージに移動（アッド）します
コミットメッセージ入れます
プッシュします

41. v
後はこの辺のボタンを押せば、
変更されたファイルを取得したり、することができます。
とりあえず、「プル」が使えればＯＫ

42. 簡単ですが以上
!
後は実際にやりながら覚
えましょう！

43. Gitや新しいツールを使
いこなすポイント！

44. 詳しい人から
聞きながらやる！

45. その他Gitの利便性
!
教育・管理
・変更点がわかりやすい
・コメントがつけれる
・進 管理が具体的にわかる
・仕事しているかわかる
・つまづいたところがわかるのでヘルプ
しやすい（ペアプログラミング等）
!
外部の技術者と連携しやすい

46. One more thing…

47. ペアプログラミングのすすめ
・サボりにくい
・他人のコードを見る機会が増える
・コードが丁寧になる
・複数のアイデアが出せ問題解決しやすい
・難しい部分があっても他の人に頼みやすい
・ＳＥの指示により優先順位で悩まなくて済む
・全体的な把握がしやすい
・リスク分散

48. おしまい

49. 1月：第7回IIC
ファイルメーカー体験セミナー
２７日（木）テクノアーク島根
２８日（金）出雲コアカレッジ
!
2月：第7回IWM
デザイン関係

50. h http://www.sixapart.jp/movabletype/license/images/logo-license-mt-l.png
ttp://www.sixapart.jp/movabletype/license/images/logo-license-mt-l.png
出雲３大コミュニティ
出雲web勉強会
出雲ＩＴコミュニティ
チーム出雲オープンビジネス協議会