ライフハック

Firefoxのタブ型ツリーが便利すぎてChromeをメインにできない

私は長年、メインブラウザはChromeではなく、Firefoxを使っています。

もちろん仕事でChromeはないと困ることも多いので、Chromeも併用していますが、個人PCも仕事PCもメインはFirefoxです。

今回はなぜFirefoxを使うのか、その理由はTab Treeという拡張機能にあります。今回はTab Treeとカスタム方法について紹介します。

ChromeでなくFirefoxを使う理由

Tab Treeが便利すぎる

FirefoxにあってChromeにないもの、それはツリー型タブの機能です。

ツリー型タブとはブラウザのタブを、左や右のバーに縦に表示します。エディタやIDEのような外観になります。これがかなり便利です。従来の開いたタブを横に出していくタイプだと、少し多めに開けば、すぐにタブが小さくなり、どのタブがなんのページかわからなくなります。

FirefoxにはTree Style Tabというツリー型タブの拡張機能があり、これが秀逸すぎて、私は未だにFirefoxが手放せません。

Chromeにも似たような拡張機能はますが、Firefoxのツリー型タブとは似て非なるもの。使い勝手ははるかに劣ります。Chromeのタブツリーは、ウィンドウと分離されて非常に使いづらいです。

Chromeのツリー型タブの拡張機能は、昔からあって私も何度かチェックはしているものの、昔のいまいちな状態からほとんど進化はありません。おそらく現在の形が完成形に近いのでしょう。Firefoxのようなものになることはなさそうです。

Chromeにはデフォルトでタブをグループ化できる機能があって、これはかなり使いやすくタブも整理されて見やすくはなるのですが、やはり限界はあります。

一定数のタブを常に開くひとなら、FirefoxのTree Style Tabに勝るものはないと思います。

Tab Treeのカスタム

FirefoxのTree Style Tabは便利ですが、設定が少し大変です。以下は私がしている設定になります。

タブバーを削除

ツリー型タブを導入したら、上のタブバーの表示はいらないので削除します。これはブラウザやアドオンの標準機能では実現できないので、userChrome.cssでやります。

https://qiita.com/chatrate/items/50d9338453f7d2a19ace#%E4%B8%8A%E9%83%A8%E3%81%AE%E3%82%BF%E3%83%96%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB

タブの表示をカスタム

アクティブタブの表示が、デフォルトだとわかりづらいのでカスタマイズします。ついでに、アンロードのタブや未読のタブも一目で分かるようにします。

私は以下のようにしています。

アクティブタブは青背景で太字でわかりやすく、アクセス済みのタブは白文字、アンロードのページは赤文字、未読のタブは青文字にしています。

この設定は、アドオンの詳細設定cssを入れるところがあり、そこでできます。以下に詳細の設定方法が記載されています。
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

私の設定は以下になります。

/* Change styling of pending (unloaded) tabs */
tab-item.discarded tab-item-substance {
    opacity: 0.75;
}

tab-item.discarded .label-content {
    color: palevioletred;
}


tab-item.unread .label-content {
    font-style: italic;
    color: lightskyblue
}


/* High light active tab */
tab-item.active tab-item-substance {
    height: 39px !important;
}

tab-item.active .background {
    background-color: steelblue;
}

tab-item.active .label-content {
    font-weight: bold;
    font-size: 13px;
}

tab-item.active tab-twisty,
tab-item.active .label-content,
tab-item.active tab-counter {
    color: #fff;
}

まとめ

以上、FirefoxのTree Style Tabと、そのカスタム方法についての紹介でした。

Firefoxはバージョンによっては、ChromeよりCPUやメモリの消費が激しく不安定になることがあります。(最近のバージョンは安定している気がしますが)

ただそれでも、Tree Style Tabが便利すぎてChromeに乗り換えることはできません。おそらく私はこの先もずっと、メインブラウザとしてFirefoxを使い続けることになるのだと思います。