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

2015.11.21 トライポット　藤田健一

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

トライポット　代表　藤田　健一

アートディレクター

ホームページ作成・システム開発 アプリ開発・デジタルサイネージ

自己紹介

自己紹介CSSNite in HIROSHIMA　実行委員

Web Touch Meeting（広島）

AUGMENT8（クリエイティブ集団）

広探ゲーム

出雲web勉強会

出雲ＩＴコミュニティー 副委員長

チーム出雲オープンビジネス協議会 理事

自己紹介デジタルサイネージアワード２０１０　インテル賞受賞

HADC2012　インタラクティブ部門　入選　

遊んで、楽しむデジタルサイネージ「Joy-ad（ジョイアド）」

遊べる床面サイネージ 「LiveFloor（ライブフロア）」New

ʫ˚ʗʕʼ

൚౿भেऽोॊॹ४ॱঝ१ॿش४

広島トランヴェールビルディング 床面インタラクティブサイネージ

LiveFloor ライブフロア

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

ʫ˚ʗʕʼ

൚౿भেऽोॊॹ४ॱঝ१ॿش४

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

ʫ˚ʗʕʼ

൚౿भেऽोॊॹ४ॱঝ१ॿش४

バージョン管理とは？

バージョン管理とは 作成したファイルの変更履歴を管理するためのシステム。 !

　・作成履歴を管理・復元 　・作成したデータの差分を保存 　・データのバックアップ 　・チーム開発時のデータの共有

など

バージョン管理システム !

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

CUIはいゃだぁ～ GUI・GUIやりたい！

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

その前に基礎用語の確認

・リポジトリ ・クローン ・コミット ・プッシュ ・プル ・ブランチ ・コンフリクト　

……

よくわかんない

流れ

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

準備する

!

!

リポジトリ・・・・・・・バージョン管理情報の保管場所

　・リモートリポジトリ（GitHubやBitBucketなど）

　・ローカルリポジトリ（自前で作成）

!

クローン・・・・・・リモートのリポジトリを複製すること

origin（オリジン）・・・・リポジトリの保存場所（URL）

master（マスター）・・・・・・デフォルトのブランチ名

ブランチ・・・・・・・・・・リポジトリを分岐させること

変更を取得する

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

つまり、フェッチとかマージってあまり使わない

変更を反映させる

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

その他

ブランチ・・・・・リポジトリを分岐させること。

チェックアウト・・ブランチ等を切り替えること。

コンフリクト・・・競合すること。

　　　　　　　　　先祖返りしてしまう状況。

　　　　　　　　　同じ箇所を複数で直してしますこと。

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

もう一回

今回は簡単にできる方法

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

Bitbcketとは !

外部リポジトリサービスです。 簡単にリポジトリを利用する事ができます。 !

http://bitbucket.org !

安心してください、日本語になってますよ。 !

GitHubじゃだめなの？

BitbcketとGitHubの違い !

Bitbucket 　・無料登録でも５ユーザーまで非公開が可能 　　（６ユーザー以上は有料） 　・SourceTreeと同じ開発元（Atlassian） 　　なので連携しやすい !

GitHub 　・無料で利用できる範囲は公開が条件 　・非公開の場合は有料

早速使ってみる

アカウントを作ります

必要な情報を入力して

サインアップ

この後、チュートリアル画面とか出てきます

Gitで！

適当な名前をつけます

リポジトリ作成

作成＞新規リポジトリ

v

v

空っぽのリポジトリができます

詳細はこちら

とりあえず、これでＯＫ

SourceTreeに行きます

SourceTreeとは !

GUIでグイグイつかえるバージョン管理ソフトです。 GutやMercurialなんかが使えます。 !

https://www.sourcetreeapp.com !

安心してください、日本語になってますよ。

すぐダウンロードされます

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

v

リモートから

さっき作ったリポジトリを選択クローンします。

保存先を作成

ファイルそのものが無かったり 更新するファイルがない場合はこんな感じ

v 何か入れます！

v

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

　index.html 　main.html 　menu.html

v

v

v

✓チェックを入れて ステージに移動（アッド）します

コミットメッセージ入れます

プッシュします

v

後はこの辺のボタンを押せば、 変更されたファイルを取得したり、することができます。

とりあえず、「プル」が使えればＯＫ

簡単ですが以上 !

後は実際にやりながら覚えましょう！

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

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

その他Gitの利便性 !

　教育・管理 　　・変更点がわかりやすい 　　・コメントがつけれる 　　・進捗管理が具体的にわかる 　　・仕事しているかわかる 　　・つまづいたところがわかるのでヘルプ 　　　しやすい（ペアプログラミング等） !

　外部の技術者と連携しやすい

One more thing…

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

おしまい

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

2月：第7回IWM 　　　デザイン関係

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勉強会

出雲ＩＴコミュニティ チーム出雲オープンビジネス協議会