はじめに
GitHub,Sourcetreeの利用について、どこよりも丁寧な説明を心がけます。
分かりやすさを優先し、正確さは捨てているのであくまでイメージの説明が多くなります。
手順
- GitHubへ登録
- GitHubでリモートリポジトリ作成
- Sourcetreeで環境構築
- Sourcetreeでローカルリポジトリ作成
- GitHubとSourcetreeを連携
- GitHubへの送信方法(プッシュ)
1. GitHubへ登録
1-1.GitHubのサイトへアクセス
「Sign Up」を選択
1-2. アカウントを作成
Enter your email* → 今回のプロジェクトで使用したいメールアドレス
Create a password* → GitHubのログイン時のパスワード
Enter a username* → GitHubでの公開名（他人からも確認できる名前）
usernameは冗談です
1-3. 人間チェック
あなたが人間の場合は「検証する」をクリック
終わったら「送信」をクリック
1-4. 認証コードを確認
[1-2]で入力したEnter your emailへ認証コードが届くので確認
スマホで確認
1-5. 認証コード入力
[1-4]で届いたコードをそのまま入力します
1-6. アンケートに回答
適当にアンケートに答えてください
回答は今後にほぼ影響ありません
1-7. 登録完了
これでGitHubの登録完了です
こういう画面になるはずです。
2. GitHubでリモートリポジトリ作成
2-1. リモートリポジトリの作成
GitHubへログイン後、右上の「＋」マークから、
「New repository」を選択
2-2. リポジトリ設定
① → 保管庫名やプロジェクト名
② →
public : 誰でも閲覧可能です
Private : 権限がある人のみ閲覧可能です
③ → 不要なファイルを管理しない設定です
②の設定について
- 学生、転職活動中 → Public（ポートフォリオ用）
- 実際の業務 → Private
といったイメージでいいかと思います。
※一応後で変更も可能です
③に関しては[6-4]で詳しく説明します。
作業環境ごとに設定できるので選択しておきます。
ご自身の環境に合わせて設定してください。
問題なければCreate repositoryをクリック
2-3. 作成できました
3. Sourcetreeをインストール
Sourcetree(ソースツリー)とは？
- GitHub,Gitの管理を分かりやすくするツールだよ
- Sourcetreeを使わない場合コマンドラインツールという黒い画面で文字を打つ、アレルギーが出るような作業になってしまうよ
- tree(木)が分かれるようなUIが理解しやすいよ
↓使わないと、このような吐き気のする作業を行う羽目になります
3-1. ソースツリーをダウンロード
公式サイト右上から「Download free」をクリックし、ダウンロード
3-2. ダウンロードしたファイルを開く
「SourceTreeSetUp.exe」を起動
3-3. セットアップ
3-3-1. BitBucketインストール選択
何も選択せずに「スキップ」を選択
BitBucketはSourcetreeと同じ会社のサービスなので、その販促です。
3-3-2. Gitイントール選択
「Git」のみ選択
勝手にダウンロードが始まります
3-3-3. アカウント情報入力
GitHubで使用したアカウントのメールアドレスを入力
[1-2.アカウントを作成]のEnter your email*
3-3-4. SSHキー読み込み設定
「いいえ」を選択
後から対応します
これでインストール完了です
4. Sourcetreeでローカルリポジトリ作成
4-1. PCにプロジェクト保存用のフォルダを作成
どこでもよいのでプロジェクトファイルを入れたいフォルダを作成します
ここではデスクトップに作成しています
4-2. GitHubのリモートリポジトリから、クローン
サイト上の保管庫からクローン(保管情報のコピー)してくるといったイメージです。
「Clone」をクリック
4-3. GitHubのURLを取得
4-3-1. GitHubの自分のHomeへアクセス
画面左側の自分のプロジェクトをクリック
4-3-2. リポジトリのURLを取得
「<> Code」をクリック
4-3-3. リポジトリのURLを取得
ポップしたウィンドウの右側コピーマークをクリック
クリックしたらコピーされます
4-4. コピーしたURLを入力
[4-3-3]でコピーしたURLを赤枠の部分にペースト
4-5. プロジェクトフォルダを指定
プロジェクトを保存したいフォルダを指定します
今回は「MyGameProject」フォルダに保存します
4-6. クローンしてくる
「クローン」をクリック
クローン出来ました
5. GitHubとSourcetreeを連携
このままではSourcetreeで行った作業をGitHubと共有できないため、
お互いを認証させる必要があります。
5-1. Sourcetreeのオプションを変更
画面左上のツール > オプション を選択
5-2. オプション変更（Host）
ホスティングサービス → GitHub
優先するプロトコル → SSH
へ変更
5-3. オプションを変更（Credentials）
認証 → OAuth
へ変更
「OAuth トークンを再読み込み」をクリック
5-4. GitHubで認証を許可
「Authorize atlassian」をクリック
5-5. 認証完了
認証に成功と出たら認証完了です
「OK」を押しましょう
これでGitHub,Sourcetreeは基本的にエラーが出ずに利用可能です
6. GitHubへの送信方法
6-1. プロジェクトを管理フォルダに追加
[4-5]で指定したプロジェクトフォルダに、
プロジェクトを作成するなり、ペーストしてくるなりしましょう。
例：VisualStudioでプロジェクトを作成
赤子の頃に見たコードを追加しました
6-2. Sourcetreeで追加差分を確認
画面左上の「ファイルステータス」をクリック
今追加したプロジェクトが認識されている
追加したファイルの詳細も確認できる
赤子コードを確認
6-3. 差分を保存する
「全てインデックスに追加」をクリック
このまま追加した差分を保存しようとすると、警告が出る場合があります
Sourcetreeは大きいデータを追加(厳密にはコミット、プッシュ)する際、警告が出る
10MB → 警告
90～100MB → ギリギリ管理可能
100MB以上 → 管理不可能(エラーが発生しGitHubへ送信不可になる)
一応Git LFSという別サービスで容量問題は解決できますが、
本記事では説明しません。
また、GitHubのリポジトリの容量が合計5GB以上になった際も警告が出ます。
6-4. gitignoreを追加する
[2-2-③]で設定しているなら.gitignoreファイルが初めからあるはず
ない場合は「.gitignore」という名前の新しいテキストファイルを作成すればOK
6-5. gitignoreの内容を変更
使用言語、環境にあった.gitignoreの内容に変更
「ファイルマーク？」をクリックしFilesを展開
私の場合はVisualStudio作業環境なので左側から選択
コピーして.gitignoreファイルにそのままペースト
6-6. Sourcetreeの差分を確認
差分が少なくなっていることを確認
(.gitignoreに該当するファイルがなければ少なくはならないです)
Unityとかはすさまじく減ると思います。
6-7. Sourcetreeのローカルリポジトリに保存
6-7-1. ローカルリポジトリに保存するファイルを選択
今回は全てを保存したいので、
「全てインデックスに追加」をクリック
インデックスに追加されました
6-7-2. コミット
画面下の入力画面に今回追加した作業の説明を追加します
追加したら「コミット」をクリック
コミットできました
6-8. リモートリポジトリへプッシュする
Sourcetreeで保存した内容をGitHubのリモートリポジトリに送信し、反映させます
プッシュボタンをクリック
プッシュをクリック
このような画面が出た場合は、チェックを入れて「Select」をクリック
GitHubのアカウント名を選択し、
「Continue」をクリック
6-9. 変更がGitHubに反映されているか確認する
プッシュで選択したアカウントでGitHubにログイン
ちゃんと変更が保存されています
赤子コードも元気そうです
最後に
どこよりも丁寧な説明を心がけて作成してみました。
ところどころ正確でない情報がありますが、ご了承ください。