なかしょの技術日誌

業務では非MS系のものばかりですが、ここではMS系の技術やサービスを中心に書いていきたいと思います。

Visual StudioでGitHubを扱ってみた

今週末の11月19日(土)、ABC 2016 Autumn - Android Bazaar and Conference の JXUGブースにてXamarinのハンズオンをお手伝いすることとなりました。

ハンズオンの内容は以下を予定しているようです。

github.com

予習していたところ、資料に誤字が見つかったので、せっかくなので自分で修正してPull Requestを送ろうとしました。
が、恥ずかしながらGitHubを使ったことがなくだいぶ試行錯誤して、Pull Requestまで到達しました。

今回はその内容をまとめました。
GitHubへのアカウント作成やGitHub Extension for Visual Studioのインストールは省略しています。

対象リポジトリのフォーク

GitHubにログインした状態で対象のリポジトリに移動し、画面右上のForkをクリックします。

f:id:nakasho_dev:20161114233318p:plain

これだけで自分のアカウントにForkされます。

f:id:nakasho_dev:20161114234254p:plain

画面右側の「Clone or download」をクリックしてClone用のURLを表示しコピーします。

Visual Studio から GitHubへのログイン

メニューバーの「チーム」→「接続の管理」を選択するとチームエクスプローラーが開かれます。

f:id:nakasho_dev:20161114231203p:plain

ホストされるサービスのプロバイダーにGitHubが表示されるので「Connect...」をクリックします。

f:id:nakasho_dev:20161114232906p:plain

ログイン画面が表示されるのでメールアドレスとパスワードを入力しログインします。

リポジトリからのClone

「ローカルGitリポジトリ」メニューから「複製」を選択して、先ほどのClone用のURLを指定し複製します。

f:id:nakasho_dev:20161114235117p:plain

Cloneが終わるとローカルGitリポジトリが作成されます。

f:id:nakasho_dev:20161114235409p:plain

このリポジトリをダブルクリックするとリポジトリのホーム画面に遷移します。

f:id:nakasho_dev:20161115000200p:plain

ユーザ名と電子メールアドレスの設定

ホーム画面から「設定」を選択すると、初期設定がVisualStudioでログインしているMicrosoftアカウントのユーザ名とメールアドレスが登録されています。
リポジトリの設定でメールアドレスがGithubで登録しているものと異なるのであれば修正しないと、Push時に403になるようです。もしかしたら勘違いかも。
ユーザ名もMicrosoftアカウントで本名を入力していると、GitHubのリモートへの操作も本名で反映されてしまうので、必要に応じてハンドルネーム等に変えたほうが良いです。

f:id:nakasho_dev:20161115015149p:plain

ブランチの作成

ホーム画面でブランチを選択して、ブランチの画面を表示します。
そして「master」を右クリックして「新しいローカルブランチ」を選択します。

f:id:nakasho_dev:20161115000756p:plain

ブランチ名を「update-doc-AddCustomView」としてブランチを作成しチェックアウトします。

f:id:nakasho_dev:20161115001543p:plain

ブランチが作成されました。

f:id:nakasho_dev:20161115001953p:plain

ブランチのファイルの修正、および、コミット

今回の修正は「02.AddCustomView.md」で大文字と小文字の表記ゆれがあったので修正しました。
修正前「SubText」→修正後「subText」

f:id:nakasho_dev:20161115002637p:plain

ホーム画面に戻り、変更を選択するとコミット画面が表示されます。
ホーム画面に戻らなくてもチームエクスプローラ上部のローカルリポジトリ名がプルダウンリストになっていて、画面を変更できます。

f:id:nakasho_dev:20161115003524p:plain

今回は修正内容が一つしかありませんが、変更箇所が複数ありコミットのタイミングを分ける場合はステージという機能を使う必要があるようです。
変更対象のファイルを右クリックして「未変更のものと比較」を実行して差分を比較します。

f:id:nakasho_dev:20161115004135p:plain

確認が完了したらコミットメッセージを入力して「すべてをコミット」をクリックします。

f:id:nakasho_dev:20161115004626p:plain

masterへのマージ、リモートへのプッシュ

リポジトリのブランチ画面に遷移し、「master」で右クリックして「チェックアウト」を選択します。 これで編集対象が「master」になりました。

f:id:nakasho_dev:20161115010332p:plain

ブランチからマージするため、再度「master」を右クリックして「マージ元」を選択します。

f:id:nakasho_dev:20161115010915p:plain

マージするブランチに先ほど修正した「update-doc-AddCustomView」を選択してマージします。
マージ後、リポジトリの同期画面を開きます。

f:id:nakasho_dev:20161115012151p:plain

出力方向のコミットに今回マージした内容が表示されますのでプッシュを実行するとリモートのリポジトリに同期されます。

フォーク元へのPull Request

ようやくPull Requesetです。
フォークした自分のGitHubのページを見るとリポジトリが変更されていることを確認できました。

f:id:nakasho_dev:20161115012930p:plain

「This branch is 1 commit ahead of ytabuchi:master.」という文字列がある右側に「Pull request」と「Compare」が表示されるので「Compare」を選択すると、fork元のリポジトリで比較の画面が表示されます。

f:id:nakasho_dev:20161115013653p:plain

比較内容を確認し、ここで「Create pull request」をクリックすると、Pull Requestの申請画面に遷移します。 f:id:nakasho_dev:20161115014011p:plain

TitleとDescriptionを入力して「Create pull request」を押すと申請完了です。 フォーク元リポジトリの「Pull request」タブに申請した内容が表示されました。

f:id:nakasho_dev:20161115014354p:plain

所感

最初、フォークせずにCloneしてPullRequestまでたどり着けなかったりとか、自分の知識のなさを痛感しました。
また、PullRequest用のブランチからPullRequestするのがお作法のようですが、今回はmasterからしてしまいました。 この記事を書いている時点ではPullRequestはOpenの状態で、Rejectされないとは思いますが不安です。
でも、少しずつでも覚えていくことでコミュニティに貢献できたら良いな、と思いました。