13
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Chrome拡張ツール】OctotreeでGitHubをディレクトリツリーで直感的に操作する!

Last updated at Posted at 2020-09-26

はじめに

GitHub上で特定のファイルを探す時にエディタのように、
ディレクトリツリーを展開しながらファイルを探せたらいいな、とずっと思っておりました。  

もちろんGitHubもツリー構造にはなってますが、いちいち画面のロードを挟むし、上位階層に戻る時など若干の煩わしさを感じておりました。
特にフレームワークを使っている場合などは、どんなディレクトリ/ファイルがぶら下がっているかを視覚で感じながら操作できたらより便利だと思います。

そんな時に知ったのが「Octotree」というChromeの拡張ツールです。
知っている人には今さらだと思いますが、便利だったので紹介します。

Octotree

Chromeの「Octotree」という拡張ツール。
これを使うことによってエディタのディレクトリツリーのようにリアルタイムにツリーを展開していくことが可能となります。

まずは通常のGitHubの画面。

スクリーンショット 2020-09-26 15.30.12.png

みなさんお馴染みの画面かと思います。
通常であれば、検索機能で目的のファイルやキーワード検索をしたり、クリックでポチポチ画面遷移をしながらツリーを展開します。

次にOctotree導入後の画面

言葉での説明ではイメージしづらいので、実際の動きをご覧ください。

ezgif.com-video-to-gif.gif

画面の左に「Octotree」というタブが表示されるようになり、
カーソルをマウスオーバーするとディレクトリツリーが表示されます。
command + shift + s(Mac)でOctotreeの表示/非表示のショートカットもあります。
あとはポチポチと展開していくだけ。
検索も可能です。

地味な機能ではありますが、ツリー構造を直感で把握/操作できるので気に入ってます。

使い方

  1. Chromeウェブストア からOctotreeをダウンロード
  2. GitHubで公開リポジトリを開くと、「Octotree」のタブが表示され使用できるようになります。
    ※表示されない場合はChromeの拡張ツールの設定で有効になるように指定しましょう。

※使用時にプライベートリポジトリではGitHubのアクセストークンの入力を求められるので、
GitHubのSettings > Developer settings > Personal access tokens
の画面で「Generete new token」からOctotree用にトークンを生成して、Octotreeに設定します。
GitHubのPrivate access tokensの詳細はこちらの公式Docへ
※トークン名は任意のものでOKです。
※Generate new tokenで設定するscopeは「repo」のみでOKです。
※GitHub Enterpriseで使用する場合はアクセス権限の許可が必要です。

スクリーンショット 2020-09-26 16.10.31.png

スクリーンショット 2020-09-26 16.15.11.png

スクリーンショット 2020-09-26 16.20.08.png

スクリーンショット 2020-09-26 16.20.08.png

スクリーンショット 2020-09-26 16.23.02.png

最後に

Octotreeを使用するとGitHunでのファイルアクセスが格段に便利になるので、
ご存知なかった方は使ってみてはいかがでしょうか。
※GitLabでも使えるみたいです(詳しく見てませんが)。

最後まで読んで頂きありがとうございました。

13
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?