GitHubとSourceTreeの連携とプッシュ・プル操作

Gitのファイル操作を視覚的に行えるGitHubとSouceTree

Gitのファイルやフォルダ操作はコマンドで行うのが一般的ですが、使用者がコマンドに慣れている必要があります。

GitHubやSourceTreeを用いるとコマンドを直接入力することなく視覚的にファイルやフォルダの操作を行うことができ、Gitコマンドの習熟度にかかわらずGitを用いたファイル共有や管理が可能になります。

Gitの基本的な使い方、SourceTreeのインストールとセットアップについてはこちらの記事を確認してください。

“非エンジニアに捧げる はじめてのGit”
https://www.pc-koubou.jp/magazine/?p=27266

GitHubのアカウントをとる

GitHubのアカウント登録を行います。GitHubの公式のサイトにアクセスして画面中央の緑ボタンの「GitHub登録する」をクリックします。

「GitHubに登録する」をクリック

それぞれ入力する項目があるので、入力して登録します。

入力項目を埋める

登録したメールに認証のメールが送られるので、メールを確認して認証します。

メール認証後、プランを選択します。今回は無料プランを選択して始めます。

左の無料プランを選択する

登録が完了するとブラウザに下図の画面が表示されます。

ブラウザ上での「登録完了」画面

これでGitHubのアカウントを登録することができました。

SSHキーの作成と登録

SourceTreeでのSSHキーの作成

次に、PCにあるリポジトリー（ファイルの置き場所）をGitHubのサーバーにSourceTreeを使ってアップするための設定を行います。

SourceTreeを開いて、上部メニューの「ツール」から「SSHキーの作成/インポート」をクリックします。

「SSHキーの作成/インポート」をクリックする

クリックすると、新しくウインドウが開くので、そのウインドウの中の「Generate」をクリックします。

「Generate」をクリックする

「Generate」をクリックすると、ウインドウ内の上部に、ゲージバーが表示されます。

下図のKeyの開いているエリアの部分をマウスでランダムに動かすと、ゲージが伸び、SSHキーが生成されます。

ここでは、ランダムな値でSSH キーを作成しています。

間違いやすいですが、ここでいくら待ってもマウスポインタを動かさないと、SSHキーが作成されないので注意してください。

マウスを動かすと徐々にゲージが伸びていく

キーの生成が完了したら、「Save Private Key」をクリックして保存します。今回はわかりやすいようにデスクトップに「Key」と名前をつけて保存しました。

「Save Private Key」をクリックする

「Public key for pasting in to Open SSH authorized keys file…」の部分の文字列が後の手順で必要になるためコピーしておきます。

「ssh-rsaAAA…」の文字列をコピーする

GitHubでのSSHキーの登録

GitHubに戻り、作成したSSHキーをGitHubに登録します。
ブラウザでGitHubのページに戻り、自分のプロフィールを選択して「Settings」をクリックします。

「Settings」をクリックする

クリックすると、画面が変わり下図の「SSH and GPG Keys」の項目を選択します。
選択すると「New SSH Key」ボタンが表示されるので、ボタンをクリックします。

「SSH and GPG Keys」をクリックする

「Title」に任意の名前を入力して「Key」の部分に先ほどコピーしたキーを貼り付けます。

貼り付けたら、「Add SSH key」をクリックします。

これで、GitHubにSSHキーを設定することができました。

「コピーしたSSHキーを貼り付ける」

SSH Keysのリストに新しく設定したSSHキーが追加されています。

新しく追加されたSSHキー

新しいリポジトリの作成

GitHubの「＋」ボタンをクリックして「New repository」を選択します。

「New repository」をクリックする

「Repository name」に任意のリポジトリ名を入力します。
その次に「Public」と「Private」と書いてある部分ありますが、これは新しく作成するリポジトリーが、「公開する」か「非公開にする」のかのどちらかを選択することができます。

新しいリポジトリーを作成するために必要

項目を入力し終えたら、「Create repository」を押して新しくリポジトリを作成します。

作成が終わると、下図のような画面が表示されていると思います。これはリポジトリーに何もファイルがないときに表示される画面です。
画面中央の「git@github.com〜」の部分（赤枠）が次の手順で必要になるので、コピーしておきます。

「git@github.com〜」の部分をコピーする

作成したSSHキーをPCに保存

SourceTreeに戻り上部メニューから「ツール」の「SSHエージェントを起動」をクリックします。

「SSHエージェントを起動する」をクリックする

クリックしても新しいウインドウなどが表示されるわけではなく、何も変化がないように見えますが、Windowsのツールバーのタスクトレイから新しく追加されている、「Pageant」をダブルクリックします。

「Pageant」を選択して開く

すると、新しくウインドウが表示されるので、「Add key」をクリックして先ほど作成した「Key.ppk」を選択して新しくキーを登録します。

「Add Key」をクリックする

生成したSSHキーを選択する

SourceTreeでリモートリポジトリの設定を行う

再度SourceTreeの画面に戻ります。
作成したリポジトリーの右上部の「リモート」タブをクリックします。

右上部メニュー「リモート」クリックする

次に出るウインドウメニューの「設定」を押して、リモート設定を行います。

「設定」をクリックする

設定画面が開けたら、上部左の「リモート」の「追加」ボタンをクリックして新しく追加します。

「リモート」の「追加」をクリックする

リモートの詳細設定画面では、各項目を入力する必要があります。
リモート名…originを入力する
URLパス…GitHubのページからコピ
ーした部分をここに貼り付ける
ホストタイプ…GitHubにする

上記で設定することができたら、「OK」をクリックします。

設定項目を入力する

登録した内容で問題がなければ、最後に「OK」を押してリモートリポジトリの設定は完了です。

問題なければ「OK」をクリックして設定内容を適用

GitHubにプッシュする

「プッシュ」とは、自分のPCで編集を行ったリポジトリ（ローカルリポジトリ）をサーバー（リモートリポジトリ）にアップロードして反映させることを指します。

左メニューの「リモート」の項目をクリックすると下に「origin」が表示されるので「originにプッシュ」をクリックします。

「originにプッシュ」をクリックする

表示されたウインドウから、プッシュしたいブランチ（分岐した履歴）を選び「プッシュ」をクリックしてプッシュ操作を実行します。

プッシュを実行する

プッシュ実行後、GitHubのリポジトリーページを更新すると、ファイルがアップロードされています。

変更点をプルする

プルとは、自分以外の人が更新したリモートリポジトリを、自分のPC のリポジトリにダウンロードすることを指します。
今回は、GitHubページ上で、自分以外の人がREADME(リポジトリの説明)ファイルを追加したという想定で自分のPC のリポジトリにプルしたいと思います。

※READMEファイルとは、そのプロジェクトの説明、注意点などを簡単に表したプロジェクトの説明書を記載したファイルです。
公開されているリポジトリではREADMEファイルが最初に見られることが多く、しっかり説明を記載した方がよいと言われています。

詳しくは、GitHubのヘルプページなどが参考になると思いますので下記URLを参考にしてください。
“About READMEs – GitHub ヘルプ”．GitHub, Inc．2019．
https://help.github.com/ja/articles/about-readmes

READMEファイルの追加はとても簡単です。GitHubのリポジトリページの「Add a README」をクリックします。

「Add a README」をクリックする

画面が変わり、少しスクロールして下に移動すると、ページの下部にある「Commit new file」をクリックします。

「Commit new file」でREADMEファイルを追加する

SourceTreeに戻り上部メニューの「プル」をクリックします。

上部の項目から「プル」をクリックする

オプションなどは特に変更する必要がないので、「OK」をクリックします。

「OK」をクリックしてプルを実行する

すると、自分のローカルリポジトリに「README」ファイルが追加されました。ローカルリポジトリーを見てもREADMEファイルが追加されたことが確認できます。

これで、リモートリポジトリーで作成したREADMEファイルをローカルリポジトリにプルすることができました。

Git操作は練習して慣れよう

今回はSourceTreeとGitHubとを連携させ、実際にファイル操作を行う手順についてまとめてみました。

PC上のファイル操作とは少し異なる部分もありますが、練習用リポジトリを作成して手順を繰り返したりすることで慣れていくことが大切です。GitHubとSouceTreeでGitを使いこなし、効率的な作業に役立てましょう。

ライタープロフィール 合同会社 4D Pocket
石郷祐介