GitHubとSourceTreeを連携させよう（初心者 or SSH通信が上手くいかない人向け）
皆様、いかがお過ごしであろうか？ 世田谷で暮らしつつも日曜は小田原に居ることの多い、小田原生まれ小田原育ち、名実ともに正真正銘小田原ボーイの野地である。
かといって住めば都、世田谷での暮らしもだいぶ慣れてきたのだが、一番文化の違いを感じるのはゴミの分別だろうか。
小田原市ではトレーはもちろん、プラスチックでできたものならペットボトルなどの例外を除きできるだけプラスチックごみとして分別するのだが、世田谷区では比較的なんでも燃やすごみとして分別するのに軽くカルチャーショックを受けたのは記憶に新しい。いやいや、それ燃やすものじゃなくて、業者さんがあーだこーだやってリサイクルするもんじゃ……って思ったのだが、どうやらまんまプラスチックとして生まれ変わるわけではないらしい。
お住まいの地域ごとに、何をどうリサイクルしてるかは「わたしのまちのリサイクル｜公益財団法人 日本容器包装リサイクル協会」のページで解説している。特に、上京してきた人などはこの表で今住んでいる所と地元を見比べたりすると面白いかもしれない。
さて、現実世界のゴミに色々なストーリーがあるように、コンピューターの世界に溜まるゴミにも様々なストーリーがある。今回の記事を書くきっかけとなったGitの初導入のため、自分のパソコンにあるゴミ箱にはのべ19個の.gitフォルダと21対のsshファイルがゴミとして放り込まれた。
ゴミという言葉には二つの意味がある。一つはもう使わなくなった不要なモノという意味。もう一つがダメなモノという意味。
今となってはこのゴミ箱に押し込まれたデータ達はどちらの意味も兼ね備えた存在かもしれない。しかし、自分が神に祈るポーズでリポジトリをクローンする度に、このファイルたちは自分こそが正解のファイルだ、と信じて疑わなかった、まさにその瞬間の主役だったのである。そして、今正常に動いている.gitとsshは、それらが礎となって生まれた、いわばバトンを渡されゴールテープを切ったアンカーたちそのものだ。
そんな礎たちに敬礼をしつつ、ゴミ箱を空にしてから、同じ問題に困っている人たちへとこの記事を送る。自分のCドライブに余裕は無いのである。
目次
前回の記事を書き終えたあたりから「記事が長すぎる」という声を結構頂く（自分でもそう思う……）ので、今回はいくらかコンパクトに纏めた……つもりなのだが、項目数はむしろ増えたので、ゆるゆるとお付き合い頂けたらな、と思う。
- 今回対象とする人
- とりあえず問題点とこれからやること
- 下準備
- いざOpenSSHへ変換
- SourceTreeの設定を変更
- GitHub側の設定
- GitHub上でリポジトリを作成する
- リポジトリをクローンする
- まとめ
今回対象とする人
- WindowsでGitHubを始めてみたい！
- で、SourceTreeを使いたい！
- http通信？ いやいや、今の時代sshでしょ！ (まぁ、sshってよくわかんねーけど！)
- でも、SourceTreeに付いてきたPutty key Generatorを使ったら、ssh通信が上手くいかないぞ！？
- 「If you trust this host, enter “y” to add the key to PuTTY’s cache and carry on connecting.」みたいなエラー文が出てきた！
って感じの人向け。
とりあえず問題点とこれからやること
SourceTreeのツールメニューから呼び出せるPutty key Generatorで作られるsshファイルはGitHubに読み込めるものの、実際は上手く機能してくれない模様（SourceTree相手以外なら機能してくれるかもしれないが……）。
とりあえずちゃんとリポジトリをクローンするにはPuTTY形式のsshではくOpenSSHを使うといけるので、 PuTTY Key Generatorで作ったsshを変換しよう。
下準備
さて、Macでは標準でくっついてるssh作成機能だが、Windowsではローカルで動くgitのソフトをインストールしないとストレートにOpenSSHファイルを作成することができない。
これを作成するためにはgitをインストールし、CUI（コマンドライン。いわゆる黒い画面）でsshを作成しなければならないのだが、SourceTreeと一緒にくっついてくるPutty key GeneratorならばPuTTY形式sshもOpenSShに変換できるので、これを利用しよう。
しかし残念なことに今回はssh自体を作る用途ではなく、少々めんどくさいフォルダを作るためにCUIを使わなければならない。
コマンドプロンプトを起動して（どこにあるかわからない人はスタートを押して検索欄にcmdと打ち、エンターするだけでも起動する）、cd C:\Users\「自分のユーザー名」と入力してエンターしよう。「自分のユーザー名」のところには「マイコンピューター→ローカルディスク（C:）→ユーザー」の中にある自分の普段使っているユーザー名が入る。こうすることでコマンドプロンプトが作業する対象のフォルダ（というかディレクトリ）がそこに移るのだ。
そして続けてmkdir .sshと入力。これは何をしているかというと、Windowsでは「.」から始めるフォルダが普通の方法では作れないので、コマンドプロンプトで「.ssh」という名前のフォルダを作っている。なんでそんなことをしておくかというと、フォルダ名を.sshとしておくと、様々なソフトが「あのフォルダにsshファイルがありそうだ」と目星をつけてくれるので後々楽になるからである。
だいたいこんな感じに入力できていれば成功するハズである。
入力し終わったらエクスプローラーから「ローカルディスク（C:）→ユーザー」の中に.sshという名前のフォルダができているか確認。できていたらコマンドプロンプトでの作業は終了なので次に使うSourceTreeを起動しておこう。
いざOpenSSHへ変換
まずは変換元となるsshを作る。SourceTreeの上部メニュー「ツール」の二行めにある「SSHキーの作成/インポート」を選択し、PuTTY Key Generatorを起動する。
*ここで二行目の項目が「SSHキーを追加…」となっていて、開いてもエクスプローラーが立ち上がってしまう人は既ににOpenSSHを使う設定になってしまっているので、後々その設定に変えるのだが、今だけここで説明している設定を「PuTTY/Plink」にしよう。
起動したら、「Generate」ボタンを押して、適当にバーの下でカーソルをぐりぐり動かそう。このバーを見ているといかにも処理中な雰囲気がするが、実際はカーソルの動きで乱数を発生させているのでそのまま待っていても永遠にsshは生成されない。
この微妙に空間が開いてる部分の上でカーソルをぐりぐり動かそう。動きが激しいからといって早くできるわけではないが。
sshが無事生成できたら今度は上部メニューにある「Conversions」内にある「Export Open SSH key」を選択。こうすることで通常PuTTY形式で生成される秘密鍵をOpenSSH形式で生成できるので、生成されたsshファイルを先ほど作った.sshフォルダに保存しよう。
このときkey passphrase（パスワード）とconfirm passphrase（パスワード再入力）が空白だとアラートが出るが、秘密鍵使用時にパスワードを設定することによってよりセキュリティをアップする機能なので、個人でGitHubを利用する場合には付けても付けなくてもいいだろう。
なお、保存するときの名前はなんでも良いのだが、名前だけ入力して保存すると拡張子が付かないで、任意の名前の後ろに「.ppk」とつけて保存しとくのがオススメである。
ちなみに公開鍵はPuTTY形式でもOpenSSH形式でもモノが変わらないので、そのまま「save public key」を選択し「好きな名前」+「.pub」で保存しておくと良い。しかし、その保存したファイルの中身のテキストをそのままGitHubに持って行ってもはじかれてしまうので、「Public key for pasting into OpenSSH authorized_keys file:」の下に書いてある記号の羅列（sshの本体）をコピーしておくと楽である。
SourceTreeの設定を変更
OpenSSH形式の秘密鍵と普通の公開鍵が保存できたらPuTTY Key Generatorを終了し、SourceTreeの設定をOpenSSHを使用する設定に変える。
下図のように上部メニューの「ツール」内にある「オプション」を選択すると出てくるウィンドウ内、「全般」タブにある「SSHクライアントの設定」で、赤枠の部分を「PuTTY/Plink」から「OpenSSH」に変更しよう。
変更したら今度はその項目の一つ上にあるSSHキーを右端にある灰色の「…」ボタンをクリックし、先ほど作成した秘密鍵を選択。
以上で変更完了なので、右下にある「OK」ボタンを押して設定を反映させよう。
GitHub側の設定
GitHubにサインインしたら（アカウント登録していない場合はしておこう）、右上にあるアイコンをクリックし、表示される項目のうち「Setteings」を選択。切り替わった画面の左側にある項目から今度は「SSH Keys」を選択し、「Add SSH key」で公開鍵を登録しよう。
このときに設定できる「Title」は適当な名前で構わない（自分が後々判別しやすい名前が良い）が、「Key」の部分はssh-rsa という文から始まってないとならない（間違っていると「Key is invalid. It must begin with ‘ssh-ed25519’, ‘ssh-rsa’, ‘ssh-dss’, ‘ecdsa-sha2-nistp256’, ‘ecdsa-sha2-nistp384’, or ‘ecdsa-sha2-nistp521’. Check that you’re copying the public half of the key」というエラー文が出てくる）。
登録直前はこんな感じになるハズである。
先ほどPuTTY Key Generatorの「Public key for pasting into OpenSSH authorized_keys file:」下をコピーしていればそれを貼り付けるだけで問題ないが、公開鍵を保存しただけでコピーし忘れてしまったら、適当なテキストエディタでその公開鍵ファイルを開こう。
開いたら下図の赤い部分、3行目から6行目にかけての「comend:～」から「—- END SSH2 PUBLIC KEY —-」に挟まれた部分をコピー。
GitHubの「Key」部分に貼り付けたら先頭部分に「ssh-rsa」+「 （半角スペース）」を挿入。これで公開鍵が登録できるはずなので左下の「Add Key」を押して登録を完了させよう。
GitHub上でリポジトリを作成する
既にGitHub上にリポジトリを持っている人はスルーして構わないが、ここからはGitHub上でリポジトリを作る手順を紹介しよう。
GitHub画面右上にあるプラスボタンをクリックすると出現する「New repositry」という項目から新規リポジトリが作成できる。
まず、リポジトリの名前を決めるのだが、既にGitHub上に存在するリポジトリと同名のリポジトリは作れないようなので独自の名前を設定しよう。自分だけで使うのなら特に気を使う必要もないが、色んな人に見てもらいたかったらユニークかつ内容の分かり易い名前を付けておいたほうがいいだろう。
名前を設定したら今度はDescription（説明）を入力するが、これは入力しなくてもいい項目なので、積極的に他人へ公開しないなら空欄でもいい。
続いて公開範囲はPublicとPrivateが用意されているが、他人の見れないPrivateは有償プランでしか設定できないので特別な理由がない限りPublicでいいだろう。
最後に「Initialize this repository with a README」だが、これは他人がこのリポジトリをプルした時に同梱される「README」ファイルを自動生成してくれるもの。「Add gitignore」はgitで追跡しない（無視する）ファイル形式を指定するもので、「Add a license」は他人がこのリポジトリ内のデータを利用する場合についてのライセンス形式を定義する項目。設定しておいてもいいが、後からでもREADMEファイルは作れるので、自分の好みで設定してもいいだろう。
以上、設定が済んだら「Create repositry」でリポジトリが作成される。
リポジトリをクローンする
リポジトリを作成したらそのリポジトリページへ行き、ssh通信用のパスを手に入れよう。下図では赤枠でくくったところだが、デザインが人によって違うかもしれないので注意。
リポジトリのURLが書いてあるところが「HTTPS」となっていたら「SSH」に切り替えてパスをコピーする。
今度は画面をGitHubからSourceTreeに切り替えて、左上にある「新規/クローンを作成する」をクリックし、出現したウィンドウの一番上にある「元のパス/URL」にコピーしたパスを貼り付けしよう。
貼り付けてから一つ下の入力項目を選択するとSourceTreeがそのパスが正しいかどうか確かめてくれるので、「これはGitリポジトリです」というメッセージを確認。
そして一つ下の入力項目である「保存先のパス」でローカルのフォルダを指定するのだが、この際に指定するフォルダは中身が空である必要があるので無ければ新規作成（名前は好きな名前でOK）してから指定しよう。
その二項目が入力し終わったら右下の「クローン」でGitHub上にあるリモートリポジトリがSourceTreeで管理さているローカルリポジトリにクローンされる。この時に問題があれば詳細情報の部分にエラー文が表示されるかクローン自体が停止するので、エラー文を確認しつつ各自問題を解決しよう。
まとめ
今回の記事は、この次で書くであろうJSの記事を書くにあたって「デモページが欲しいなぁ」と思ったことが発端である。
ひとまず、以前から気になっていた「世のWeb技術系ブログを書いている人たちはデモページをどうやって用意してんるんだべ」という疑問を解消すべくそこらのデモページを漁っていたのだが、某企業のブログの中で紹介されているデモページのURLにGitHubの文字を発見。
「これだ」と思い、特に調べもせずGitHub登録に乗り出したのだが、以前から会社で使用していたSourceTreeと併用してみたらssh通信が上手くいかなかったので、色々と調べつつ試した結果が今回の記事である。
そんなわけでまだまだGitHub初心者なのではあるが、暇な時に色々なコードを上げていく予定なので、準備が整い次第、皆さんもデータを抜き取って遊んでみて欲しい。
……今回の記事は短くまとまったかな？ （笑）
コメントを付ける