GitHubを見やすく・使いやすくしてくれる便利な拡張機能

GitHubを見やすく・使いやすくしてくれる便利な拡張機能

地味に便利なものから慣れるとなくてはならないものまで、GitHubを見やすく・使いやすくしてくれる拡張機能を紹介します。
ここではすべてChromeの拡張機能として紹介していますが、中にはその他のブラウザでも利用可能(主にFirefoxのアドオン)なものもあるので、それらは併せて紹介している各拡張機能のGitHubページなどから辿ってください。

※以下で紹介している拡張機能の一部は、プライベートリポジトリでも利用できるようにするなどの理由でアクセストークンを設定する必要があります。
入力する旨が表示されたり各拡張機能の紹介ページに設定方法として記載もされていますが、ほとんどの場合は「Developer settings」から移動した先で「repo」を選択して作成し、出力されたコードを設定欄に記述します。

GitHub File Icon

GitHub File Icon

screen shot by GitHub File Icon.

デフォルトだとファイルはどの拡張子でも同じアイコンが表示されていますが、この拡張機能を有効化することで上のイメージのように拡張子によってアイコンが変わり、パッと見でどのようなファイルなのかが判断しやすくなります。

Octotree

Octotree

screen shot by Octotree.

サイドにディレクトリやファイルをツリー表示してくれる拡張機能です。
有効化することで階層が深いファイルなどにも容易にアクセスできるようになる他、表示などを変更できるオプションもいくつか用意されており、ファイル拡張子毎に異なるアイコンを表示させたり、「Issues」や「Pull Requests」といった「Code」以外でのページでは非表示にすることができます。
GitHub Enterpriseやプライベートリポジトリで使用するには少し設定が必要で、GitHub Enterpriseの場合は設定(歯車アイコン押下)で表示される「GitHub Enterprise URLs」にURLを入力し、プライベートリポジトリの場合は「Site access token」を入力する必要があります。

Issue Checker for GitHub

Issue Checker for GitHub

screen shot by Issue Checker for GitHub.

自分がアサインされたIssuesを通知・表示してくれる拡張機能で、他にも作成したものやメンションの一覧などの確認もできます。
使用するにはアクセストークンを設定する必要があります。

Awesome Autocomplete for GitHub

Awesome Autocomplete for GitHub

screen shot by Awesome Autocomplete for GitHub.

検索ボックスを使いやすくする拡張機能で、オートコンプリートが適用されてリポジトリやユーザー検索がしやすくなります。

OctoLinker

OctoLinker

screen shot by OctoLinker.

若干動作が重い印象はありますが、ファイル内でrequireimportで別ファイルを読み込んでいる場合に、それらに関連するリポジトリやマニュアルサイトなどにすぐ飛べるリンクが設定されます。
また、外部へのリンクだけでなくimport pkg from './package.json';のように同じリポジトリ内にある別ファイルを読み込んでいる場合も、そのファイルのページに移動してくれるリンクが設定されます。
オプションとして、クリック時は別タブで開くかどうかやリンク設定の有無を判断しやすくするマーク表示などを設定できます。

Emoty

Emoty

screen shot by Emoty.

絵文字を一覧表示してくれる拡張機能で、使いたい絵文字をクリックすればコードがコピーされます。
コミットメッセージなどで絵文字を多用する人には便利です。

Sourcegraph for GitHub

Sourcegraph for GitHub

screen shot by Sourcegraph for GitHub.

現状すべての言語で利用できるわけではなく、一部対応してはいるもののプレビュー中だったりと人によってはあまり便利さを感じないかもしれませんが、コードジャンプやリファレンス検索ができる他、ファイルツリーの表示などもしてくれる拡張機能です。

GitHub Custom Tab Size

GitHub Custom Tab Size

screen shot by GitHub Custom Tab Size.

上のイメージにあるように、スライドを調整することでコード内のタブサイズを任意のサイズに変更できます。

ちなみに、タブ表示に関する拡張機能として単純に表示するサイズを少し減らす「Tab Size on GitHub」やタブを可視化する「Render Whitespace on GitHub」というものもあります。

GitZip for github

GitZip for github

screen shot by GitZip for github.

任意のディレクトリ・ファイルのみを圧縮化してダウンロードすることができます。
ダウンロードしたいものをダブルクリックしていくと右下に矢印が表示されるので、あとはそこをクリックすれば選択したディレクトリ・ファイルのみをzip化してダウンロードできます。

GitHub Repository Size

GitHub Repository Size

screen shot by GitHub Repository Size.

有効化するとイメージ赤枠部分の項目が追加され、リポジトリ全体のサイズや各ファイルのサイズを表示してくれます。

GitHub Markdown Menu

GitHub Markdown Menu

screen shot by GitHub Markdown Menu.

.mdファイルにある各見出しへ容易に移動できるナビを表示してくれます。
目次が用意されてないときや自分用で作成して目次作るのが面倒な人には便利です。

GitHub Plus

GitHub Plus

screen shot by GitHub Plus.

最後は作者がGitHubを使っていてイラッとした部分をいろいろ解消させるために作成された拡張機能で、ウィンドウのリキッドデザイン化・タブ幅の変更・コミットログの展開・ローカルタイム表示など、現段階で11の機能が用意されています。
作者は国内の方で、有効化することでどの箇所がどう変化するかもキャプチャ付きの日本語説明がGitHubにあるので、詳細はそちらで確認できます。


いくつか紹介してきましたが、このようなGitHubを便利にしてくれる拡張機能はまだまだ沢山あり、もっと他の拡張機能も試したいとか見つけたいという人は以下のようなページが便利です。
これは入れるべき!というものを見つけたら是非共有してください :)

Close the search window,
please press close button or esc key.