SourcetreeでエンジニアでないチームにGitを導入する
バージョン管理システムであるGitは制作物の先祖返りの予防や別案の管理に有用です.
コマンドよりもマウス操作に習熟しているライターやデザイナーが欠かせない役割を担っているチーム構成でもGitを導入できるよう,このページではGUIのGitクライアントの一つであるSourcetreeについて紹介します.
この入門ページの最終目標は自分のPCで自分の作業履歴をとれるようにすることとしました.
多くのアプリケーション同様,Sourcetreeにもたくさんのメニューがありますが,まずはここで挙げた機能を覚えて足場を固めていきましょう.
括弧書きでコマンドを書いているところは,コマンドに習熟している方が身近にいる場合に機能について質問しやすくするためのメモです.
独学の方は無視していただいて構いません.
目次
インストール
アプリケーションの入手
サイトからアプリケーションをダウンロードし,インストールします.
Bitbucketの設定
リモートでの共有に関わる設定です.
Bitbucketは豪州の企業であるAtlassianが提供するGit関連のサービスですが,ここは今回スキップします.
アカウントの作成(git config
)
アカウントの作成画面になりますので,そこで,ユーザー名とメールアドレスを入力してください.
このアカウントは複数人で作業分担するときに,経緯追跡するためなどに用いられるもので,要するに連絡先です.
後述する「コミット」を行う前までであれば,あとから設定することもできます.
「グローバル」に設定すると,PCの同一ログインアカウントで用いるデフォルトのGitアカウントごと変更されるので,共有PCで作業している場合には注意してください.
履歴をとるフォルダの選択(git init
)
空の画面が表示されていますか?
ここにGitを使用したいディレクトリを投げ込みます.

もしちょっと違う画面だった場合は,「リモート」と「ローカル」と書かれているところで,「ローカル」を選択してみてください.
投げ込むのは,通常,何かのプロジェクトのディレクトリでしょう.
ディレクトリを入れてやると,「保存先のパス」の確認画面が現れます.

前の画面からドラッグ&ドロップやディレクトリ選択したものが,正しく入っているはずです.
ここではデスクトップから「ネコプロ」という名前のディレクトリを投げ込んだ,という想定で話を進めます.
「作成」ボタンを押すと,はじめの画面にプロジェクトが追加されます.

変更の確定(git commit -am
)
プロジェクトをダブルクリックして開くと,次の画面になります.

この画面で,左上の小さなメニューの横棒がならんだところから「ステージングなし」を選択しておきます.

ここでは割愛しますが,ステージングは複数のファイルがあるときにどのファイルの変更履歴をとりたいかを整理する工程です.
初回の変更例
ディレクトリに「キャットタワー.txt」というファイルを追加してみましょう.
内容は次の1行です.
窓の外が見える高さ |
すると,Sourcetreeの画面が更新されます.

画面の通り,左にファイルの一覧,右に更新内容が表示されます.
さて,いま「ネコプロ」にファイル追加という変更が加えられたところです.
ここで「コミット」—つまり,確定—します.
コミットするファイルにチェックを入れ,下部でどのような変更を今回行ったか記録しましょう.

入力したら,右下のボタンでコミットできます.
ボタンを押下すると,変更されたもののない,まっさらな画面に戻ります.
変更を確定する「コミット」とは,平たく言えば,このディレクトリのスナップショットを撮ることです.
一式をバックアップします.
履歴(git log
)
初回のコミットが終わったら,サイドバーから「履歴」を選択してください.
すると,先ほどのコミットが表示されます.

Gitを使えば,履歴としてコミットしたときの時刻やコメントが残せます.
時刻やメモを書き足したファイル名で,何枚も同じファイルのバリエーションを作る必要はありません.
2回目の変更例:ファイルの書き換え(git diff
)
サイドバーから再び「ファイルステータス」に戻ってください.
先ほどの「キャットタワー.txt」にもう一文追記してみましょう.
(Sourcetreeを開いたまま,)先ほどのテキストファイルをいつもやっているように書き換えるだけで結構です.
窓の外が見える高さ |
2行のファイルにしてみました.
すると,Sourcetreeのファイルステータス画面が更新され,ファイルの変更箇所が表示されます.
このコミットを行いましょう.

プレーンテキストは,画面右側でコミット間の差分を確認することができます.
2回目のコミットにより履歴では変更履歴の枝が伸びました.

3回目の変更例:ファイルの追加
ファイルの書き換えを行なってみましたので,今度は今まで存在していなかった別のファイルを追加してみようと思います.
「おもちゃ.txt」をディレクトリの中で普段通りの方法で作成するか,あるいは,作成した後でディレクトリに移してみてください.
このテキストファイルの内容は1行だけで
もふもふ |
としておきましょう.
ディレクトリに新しいこのファイルができると,Sourcetreeの画面が更新されます.
初回・2回目と同じようにコミットできます.


一部ファイルのみ過去に戻す(git restore
)
「キャットタワー.txt」を最初のバージョンに戻してみましょう.
まず,変更があったファイルしか表示しないようになっているので,全ファイルを表示するようにします.(先ほど「ステージングなし」を選んだところのすぐ左の小さい文字のところです.)

次に,過去の版へ戻したいファイルで右クリックして,「選択した対象のログ」を選びます.

このファイルに係るコミットの一覧が表示されるので,戻したい版をダブルクリックして選びます.

右側の差分で,「キャットタワー.txt」だけ古い版に戻ったことがわかります.
同時に,「おもちゃ.txt」は残っているので,コミットごと遡ったわけではないことも確認できます.
この修正をコミットしましょう.

履歴を見ると,枝が伸びる形でプロジェクトが進行したことが確認できます.

次のステップに向けて
このページでは,変更履歴の作成について学んできました.
しかしながら,Gitの特に重要な機能のうち,別案の作成・差分取り込みと,他者との共有のためにアップロードやダウンロードを行う機能については説明していません.
自分の作業の変更履歴を付けていけるようになりましたら,ぜひそれらの機能にも挑戦してみてください.