明日からは使えないGithub豆知識

おはようございます。Octocatです。🐙
今回は意外と知らないかもしれないGithubの豆知識についてご紹介していきます。


## permalink

ISSUEやPRの時に特定のソースコードについて話をしたい時ありますよね。
そんな時にはパーマネントリンクが便利です。

1. Githubで特定のソースコードのページを開く
1. 行数のところをクリック
1. 左側の`・・・`をクリック
1. `Copy permalink`からURLを取得

![スクリーンショット 2021-07-22 16.00.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/70a0f4b7-f1d4-5aff-d48c-6fdf30c04513.png)

こんな感じでリンクが取得できます。
"https://github.com/rails/rails/blob/212077a972404f19aa520a7792d2b3355f2de741/Gemfile#L3"

URLを見てみると下記のようになっているのでカスタマイズすれば直接アクセスもできますね！

```
https://github.com/ユーザー名/レポジトリ/blob/ブランチorハッシュ値/ファイルパス#ライン
```

ただ、微妙に気が利いてなく、一行しかハイライトしてくれません。
そんな時はURLの最後に`-L行数`を追加しましょう！
"https://github.com/rails/rails/blob/212077a972404f19aa520a7792d2b3355f2de741/Gemfile#L9-L36"
(URLの最後に`-L36`を追加して「9行目から36行目まで」という意味を追加してみました！)

これで、複数行もハイライトされますので、
「こっからここまでのことを話してるよ」「You know?」って会話が弾みますね。(弾みませんね。)
![スクリーンショット 2021-07-22 16.12.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/9d9735bb-9efe-f965-fcc6-eaa657760304.png)


## compare

ブランチやPRの中でも複数のコミットがあって特定の範囲のコミット差分を見たい時がありますよね。
そんな時はcompareというURLが使用できます。

```
https://github.com/ユーザー名/レポジトリ/compare/古いハッシュ値...新しいハッシュ値
```

早速、Github上のコミットからハッシュ値を取得してURLを組み立てます。
(もちろんお使いのgitクライアントからでも取得しても構いません)
https://github.com/rails/rails/commits/main
![スクリーンショット 2021-07-22 16.33.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/31959eec-6c72-3bac-1d4c-76593f9f2687.png)

組み立てたURLがこちら!
"https://github.com/rails/rails/compare/17db990ed0e6885b30738e412c19c7f3001b327d...5d78c54a4637e314e73d461d444196e9dc9744b2"

特定のコミット間でのdiffが見れますね！
レビューしていて追加・修正差分など確認したい時に便利です!


## keys

下記のURLでユーザーが登録しているssh公開鍵の一覧が確認できます。

```
https://github.com/ユーザー名.keys
```

こんな感じ。
"https://github.com/hiro426.keys"

チームメンバーの公開鍵をどこかに登録する時などに使えますね！(使えますか？)


## suggestion

PRのレビュー中に修正して欲しい箇所があれば
レビュワーから指摘できます。
![スクリーンショット 2021-07-22 17.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/de5e7e3a-bace-5770-87d8-83194571b712.png)

suggestionがPRのコメント欄に投稿されますので、
コミッタは確認次第、`Commit suggestion`からGithub上でコミットしちゃいましょう！
![スクリーンショット 2021-07-22 17.00.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/40b346ed-751d-333d-3c03-2f9e9bd66b27.png)


数行の変更であればコメントで指摘するより、
「こんな感じでどう？」って提案してあげたほうが、双方楽ですね。

## wikiで画像を追加する
Githubのwikiは画像アップロード機能がついていないので
画像を記事内に含めたければ、別途アップロードしてURLを指定する形になります。

少々手間なのでGithub内で済ませる方法を２種類紹介します。


### 案１. ISSUEやPRに画像添付してURLを取得する

wikiではなく、ISSUEやPRなら画像がアップロードできるので
アップロードして同じURLをwikiで指定すればいいという、やり方になります。

1. まず、適当な画像をアップロードしてURLを取得します。
![スクリーンショット 2021-07-22 17.28.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/c51d2546-2440-579f-029a-a874ab04077a.png)
2. wikiで上記のURLを指定しましょう！
![スクリーンショット 2021-07-22 17.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/85e4fe89-e92f-baac-a346-22ef24213a88.png)
3. こんな感じでwikiでも画像が表示できます！
![スクリーンショット 2021-07-22 17.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/837ef4ef-cd52-607e-9705-d922e3e61adb.png)



### 案2. wikiのレポジトリに画像をあげて相対パスでリンクさせる

githubのwikiもレポジトリ管理されてますので、
下記のURLから`$ git clone`できます。

```
# wikiのURLは`レポジトリ名.wiki.git`になるようです
git@github.com:ユーザー名/レポジトリ名.wiki.git
https://github.com/ユーザー名/レポジトリ名.wiki.git
```

wikiのページからも取得できます
![スクリーンショット 2021-07-22 17.31.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/8b14ffbf-055b-c7ee-c69b-105efbe0fe3f.png)

cloneしてきたら任意のパスに画像を追加してプッシュします
(今回はimagesフォルダを用意して`test.png`を追加しました)
![スクリーンショット 2021-07-22 17.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/efb23a7e-6afd-c60a-036d-d767c9bd5720.png)

プッシュしたらブラウザでアクセスできるか確認してみましょう！
wikiからの相対パスでアクセスできるはずです

```
https://github.com/ユーザー名/レポジトリ名/wiki/images/test.png
```
※ `raw.githubusercontent.com`へリダイレクトされますが、画像が表示されるはずです。

最後に上記のURLをwikiで指定してあげるだけです!

 ![スクリーンショット 2021-07-22 17.49.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/0f18846e-e03b-fa37-ead2-0f468c8e37db.png)
![スクリーンショット 2021-07-22 17.49.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/6069e4d0-e3ec-cf1d-2a89-13ed703e9073.png)


## Githubのエラーページ

![スクリーンショット 2021-07-22 17.59.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/15e36332-9d24-42c7-2ee4-5ac8ca13857b.png)

みなさん、Githubの障害時などにこの画像見たことありますよね。
下記のURLでいつでも表示できます。
"https://github.com/500"

~~_これでいつでも、🐙を崖に突き落とせますね (サイコパス)_~~

### せっかくなので、その他のエラーページも探してみました！

#### 404
定番ですね
"https://github.com/404"
(アクセスできないURLならどこでも)

![スクリーンショット 2021-07-22 18.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/cc1b9d17-412e-9f02-8c7d-2c0e1e30255f.png)

#### 422
$\color{red}{\rm {What!?}}$
"https://github.com/422"

![スクリーンショット 2021-07-22 18.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/c78f9eef-b0ef-bb25-0f85-b3dce51a26ff.png)

#### 502
🐙じゃないページも
"https://github.com/502"

![スクリーンショット 2021-07-22 18.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/98569da1-f446-aef9-e81a-cfbe93d634de.png)

## gist
gistというsnippetsを投稿・共有できる機能があります。
Githubの右上のリンクから作成できます。
![スクリーンショット 2021-07-22 18.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/15e101db-d67f-f6b1-e63b-ba8e7330ea0f.png)
![スクリーンショット 2021-07-22 18.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/495b937e-c8ea-87d6-0253-cbae2e2440ef.png)

コミットする際は２種類の公開範囲が選べます。
(ただ、どちらもURLを知っていればアクセスできてしまいますので注意しましょう)
- `Create secret gist` ... URLを知っていればアクセスできる
- `Create public gist` ... 全員に公開

ちょこっとソースコードを共有したい時に便利ですね！

## さいごに

自分だけのOctcatを作成したい！ というあなたの夢を叶えます。 ~~(誰~~

https://myoctocat.com/

こんな感じでOctcatがカスタマイズできます。
![スクリーンショット 2021-07-22 18.33.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/4dd88938-1393-4108-6e82-54b6cac20415.png)


![スクリーンショット 2021-07-22 18.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/e4d1c52d-45be-6b1d-a1bd-af5248baed2f.png)

サムネイルに困ったら、とりあえずOctcatで代用もありではないでしょうか？
今回はこの辺りで~ではでは　👋