GitHub を使う時に知っておくと便利な機能いろいろ

# はじめに

GitHub にはいろいろな便利機能があるのですが、あまり知られてない（気がする）ものも多いと思ったのでまとめてみました。
というか、その他のところで紹介している GitHub Blog の記事を見て、いまある機能を見直してみたついでに記事にしてみました。

## gist 関連

### D&D で gist 作成
手元にあるファイルから Gist を作成する際はいちいちファイルを開き中身をコピーしなくても、 gist の新規作成ページを開き finder などから Drag & Drop することでファイルの中身が入力されます。

![gist_dad.gif](https://qiita-image-store.s3.amazonaws.com/0/133201/13bfdae2-a5d7-5921-a153-f180f890c408.gif)


### コードのみ表示する
コードの右上にある raw ボタンを押すことでも見ることができますが、gist の url の最後に `.pibb` とつけることでコードだけの表示になります。
この場合、シンタックスハイライトやマークダウンなどのレンダリングは効いている、複数ファイルを一つの gist で管理している場合はその全てが１ページにまとまっている、などとなっています。

## Issue/PR 関連

### スクリーンショットを直接コピー＆ペースト

上記 gist と同様に画像も Drag & Drop で issue/PR のコメント欄に貼り付けることができますが、スクリーンショットを貼る場合はクリップボードから直接コピペすることができます。

- 画像は Mac の標準機能の SS　で試しています。分かりにくいですが、`shift + command + 4` で範囲指定のスクショを撮り、`command + v` でそのまま貼り付けています。(他の OS は試してないですがどうなんでしょう・・・)
  - [Mac でスクリーンショットを撮る方法 - Apple サポート](https://support.apple.com/ja-jp/HT201361)
- gif 画像でも見えていますが、画像はマークダウン記法でなく HTML　のタグ記法でリンクを貼れるので、`img width` を指定することで画像の大きさを指定することもできます。

![issue_ss.gif](https://qiita-image-store.s3.amazonaws.com/0/133201/8a6fc19f-6c61-2436-dda1-365150e26a1d.gif)


### 表のコピー＆ペースト

Excel や google spreadsheet の表もコピペすることでマークダウン記法の表として貼りつけてくれます。

![issue_sheet.gif](https://qiita-image-store.s3.amazonaws.com/0/133201/96760e1f-f59f-6ccd-2562-2e6333081400.gif)


### 詳細の折りたたみ
HTML の `<details>` tag を使うことで、長い文を折りたたむことができます。
issue はログなどを貼っていると長くなりがちなので、使うとスッキリできます。

- [collapsible markdown · GitHub](https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f)
- [詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/details)

<details>
  <summary>概要</summary>
詳細いろいろ
- foo
- bar
</details>

↑こんな感じのことができます。

### issue と Pull Request (commit) の紐づけ

`#1` のようにコミットメッセージに issue の番号を含めることで issue へのリンクが張られますが、これを`close #10` `fix #20` などの特定の単語とともに使うことで **そのコミットがデフォルトブランチへとマージされた時に** 指定された issue を自動で閉じてくれます。

- 使える単語は [Closing issues using keywords - User Documentation](https://help.github.com/articles/closing-issues-using-keywords/) に載っています。
- ドキュメントにあるように、複数の isuue を閉じること、他のリポジトリの issue を閉じることもできます。
- PR を squash merge するなどしてコメントを書き換えた際は、squash merge の際のコミットメッセージに上記キーワードが含まれている必要があります。

## Markdown 関連

GitHub 上では色々な絵文字が使えますが、使える絵文字は [Emoji cheat sheet for GitHub, Basecamp and other services](https://www.webfx.com/tools/emoji-cheat-sheet/) に載っています。
クリックするだけでコピーできるので便利です。

## GitHub Pages 関連

静的サイトのホスティングサービスである GitHub Pages ですが、実は HTML などを一切書かずにマークダウンさえあればいい感じのウェブページを作成することができます。
これに関しては以前別の記事に書いたので、よかったらそちらを見てみてください。

- [ほぼマークダウンのみでそこそこいい感じの Web ページを Github で公開する](https://qiita.com/umi/items/9f756dcdac3bf842a553)

## その他

ブラウザの拡張機能ですが、[refined-github](https://github.com/sindresorhus/refined-github) を使うことで、リポジトリ内の README に書いているような便利機能が使えるようになります。

が、[Hello from GitHub 👋 · Issue #1469 · sindresorhus/refined-github · GitHub](https://github.com/sindresorhus/refined-github/issues/1469) という issue がなんと **GitHub の中の人によって建てられている** ように、[社内で UX 改善チームを作り](https://twitter.com/lukehefson/status/1022553956466216960) ユーザーの声を聞いてよりよい物を提供しようとしてくれているので、これらの機能が公式に使えるようになるかもしれません。

最近のアップデートだと、地味な改善ですがそれなりの数があります。

- [Introducing Project Paper Cuts | The GitHub Blog](https://blog.github.com/2018-08-28-announcing-paper-cuts/)

GitHub も頑張っているようなので、今後のアップデートについては [Changelog](https://blog.github.com/changelog/) を見ておくとよいかもしれません。


## 参考

- [最近知った GitHub の便利機能3つ - valid,invalid](https://ohbarye.hatenablog.jp/entry/2017/10/07/124309)
- [10 Useful Github Features You Need To Know - Hongkiat](https://www.hongkiat.com/blog/github-overlooked-features/)
- [12 cool things you can do with GitHub – Hacker Noon](https://hackernoon.com/12-cool-things-you-can-do-with-github-f3e0424cf2f0)