Octotree を使って GitHub のコードをブラウザでツリー表示しよう!(遷移も楽らく!)

Octotreeを使ってGitHubをブラウザで見ると、ソースコードをツリー形式で見ることができます。
2020.05.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

GitHubを見る機会はとても多いです。仕事でも使ってますし、各公式のリポジトリを見たり、OSSライブラリなどがあったりしますね。 そんなGitHubですが、次のようなことって多いと思います。

  • あのファイルどこかなー
    • フォルダを選択して画面遷移
    • フォルダを選択して画面遷移
    • フォルダを選択して画面遷移
    • ファイルを選択して表示
    • 目的のファイルじゃないのでフォルダを戻る……

地味に手間だしめんどくさいですよね。操作回数や微妙な遷移待ち時間とか……。そこで思うのです。「ツリー表示できたらなぁ」と。

「ツリー表示できるんです。そう、Octotreeなら。」

Octotreeとは

簡単に言えば「GitHubをツリー表示できるサービス(ブラウザ拡張)」です。

  • GitHubのコードをツリー表示できる
  • ファイル名で検索ができる
  • 常時表示ができる
  • リポジトリやファイルなどをブックマークできる
  • など

GitHubのコードをツリー表示できる

マウスカーソルをブラウザの端に置くと、スッと表示されます。ファイルをポチっと選択すれば、そのファイルが開きます。これは嬉しいですね!

Octotreeの様子

プライベートリポジトリで使う場合は、アクセストークンが必要です。

ファイル名で検索ができる

任意のファイル名を検索できます。見たいファイルが分かっている場合や機能名で検索すると便利そうです。

Octotreeでファイル検索している様子

常時表示ができる

通常時は横からスッとスライドして現れ、マウスカーソルが離れると隠れますが、常時表示もできます。

Octotreeを固定表示している様子

リポジトリやファイルなどをブックマークできる

リポジトリなどの右側にあるアイコンをポチッと押すと、ブックマーク登録できます。

Octotreeにブックマークを追加する様子

そして、ブックマーク一覧を表示できます。ポチッと選択すれば飛びます!!!

Octotreeのブックマークの様子

ブックマークできる対象は下記です。

  • リポジトリ
  • プルリクエスト
  • Issues
  • ファイル

なお、無料版だとブックマーク数の上限は20個です(Pro版は無制限)。

対応ブラウザ

主要なブラウザで使えます。

さいごに

GitHubライフがもっと楽しく便利になりそうですね。Proバージョンも年間35ドルと高くはないので、必要に応じてご検討ください。

参考