はじめてのSourceTree（使い方編）

恥ずかしながら、SourceTreeを初めて利用したため、備忘録を兼ねてメモします。
（2016.04.03）新しく記事を作成しました→<a href="http://qiita.com/naoki85/items/4f44601f1365c18035f4" target="_blank">SourceTreeとGithubでGitの練習環境をつくる</a>
## SourceTreeのインストール
以下のサイトからインストールすることが可能です。
<a href="https://ja.atlassian.com/software/sourcetree/overview/" target="_blank">https://ja.atlassian.com/software/sourcetree/overview/</a>

Windowsの方はGitのインストール方法を設定します。
特に理由がなければ一番上で問題ないと思います。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/1ce0f090-943e-ca78-679e-db81cf1e60fb.png" alt="Gitコマンド設定" width=500px>

SourceTreeのアカウント設定をする必要があります。
こちらはGithubで問題ないと思います。
（バージョンによってはGoogleアカウントもあるようです。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/7d585eec-cda2-762b-febe-499f2121f74e.png" alt="アカウント登録" width=200px>

インストール完了後、下図のような画面になるため、リポジトリを登録します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/9609a5fa-53b6-04e9-3c72-27c0c541ccb0.png" alt="リポジトリ登録１" width=400px>

デフォルトは下図のような画面だと思うので、新しくアカウントを登録します。
「アカウントを追加」から、私の場合はGithubを追加しました。
（Githubの場合はプロトコルはHTTPSです。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/73696123-132b-90d7-3d2f-02966e3dbcdf.png" alt="リポジトリ登録２" width=500px>

アカウントの追加が終了すると、下図のようになります。
（右側にクローンと表示された行ができる。）
その人が関わっているリポジトリの数によって、表示される行に差があると思います。
（私の場合はGithubにある6つのリポジトリが表示されました。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/5dcd71ad-3bf2-d228-4db4-842eb49ba40c.png" alt="リポジトリ登録３" width=200px>
## クローン
リポジトリからクローンします。
クローンについては別記事でまとめたいと思います。
（ざっくりと言えば、ファイルやフォルダを自分のローカルに持ってきてしまうことです。）
まずは対象のリポジトリの右側にある「クローン」ボタンを押します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/f6edc1ea-cbb2-6168-3a5f-faef68f35994.png" alt="クローン１" width=200px>

保存先の選択になります。
分かりやすい場所にしておきましょう（右側のボタンでフォルダ選択できます。）。
「クローン」ボタンを押してクローン開始します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/edfb2dce-0955-5c6a-c7c2-c49e97c5c494.png" alt="クローン２" width=400px>

少し時間がかかりますが、以下の画面になれば成功です。
ローカルの指定した場所に新しくフォルダができていると思います。
現在のブランチはmasterになります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/2837b9f8-7034-6060-cd98-f88c1d84650b.png" alt="クローン３" width=200px>

フォルダ名の周囲（今回であればSourceTree-Testのあたり）をダブルクリックすると、下図のような画面になります。
灰色で隠した部分が多くて申し訳ありませんが、基本はこちらの画面にて作業を行っていきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/404022b4-2fc7-1010-eb5a-fc4dc76b375d.png" alt="クローン４">
## 作業ブランチの作成
現在は大元であるmasterブランチ上にいますが、自分の作業を開始するためには、「自分専用のブランチ」を作成しなければなりません。
そのためには、画面上部バーの「ブランチ」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/093231cd-5e15-7a40-474a-a114454aee64.png" alt="ブランチ１">

そして、新しく作成するブランチ名を入力します。
（今回は「sourcetree_test」とします。）
今回はmasterブランチから切りますので、それ以外はそのままでブランチを作成してください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/79d93af4-cd5a-e617-6551-7d65b6b7bbe3.png" alt="ブランチ２" width=300px>

作成が完了すると、画面左部バーに新しいブランチができます。
今後はこちらで作業します。
（ブランチ名の前のマル印が現在自分が作業しているブランチ名です。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/1e8af804-d0f3-87ea-cd72-05473daba651.png" alt="ブランチ３" width=100px>
## 作業が一段落した後のコミット
タスクが完了、もしくは一段落したら自分のブランチ上でコミットします。
コミットなどの説明については別記事で書きたいと思います。
（ざっくり言えば、変更箇所を保存しておく作業です。）
今回、クローンしたディレクトリに新しくtest.htmlを作成しました。
ファイルを新規作成、もしくは修正した場合、SourceTreeのメイン画面が下図のようになります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/c366a545-177f-6908-4960-2d7096015a04.png" alt="コミット１">
変更したファイルにチェックをつけると、下図のようにステージングされます。
この状態になればコミットの準備ができます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/a0d792fc-8734-0a2f-97b4-aa5877cbf5a2.png" alt="コミット２">
ステージングされたことを確認したら、「コミット」ボタンを押しましょう。
下図のようになります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/fa362d8e-b485-6ac3-f553-f97beab7c931.png" alt="コミット３">
ここで、コミットする際の一言コメントを残すことができます。
（今回は「SourceTreeテスト」とします。）
また、リモートリポジトリにも変更を反映させたい場合は、一番下の「コミットを直ちにプッシュする」にチェックをつけておきましょう。

「コミット」ボタンを押して、メインページが変更されていればO.K.です。
（下図は私の場合の画面です。）
<img src="https://qiita-image-store.s3.amazonaws.com/0/118817/f09f5fcb-1026-e7a7-9ccf-31c40de0cda3.png" alt="コミット４">

これで、コミット（変更箇所の保存）は完了しました。
引き続き作業に戻り、また一段落したらコミット、という風に作業を進めます。

その他の機能や詳しい説明などは、別の記事にまとめたいと思います。
（2016.04.03）新しく記事を作成しました→<a href="http://qiita.com/naoki85/items/4f44601f1365c18035f4" target="_blank">SourceTreeとGithubでGitの練習環境をつくる</a>