長時間にわたるPC作業のせいか、唯一の自慢だった視力がだだ下がり。
老化現象とかいろいろ敵が多すぎる”僕”です。
今回はFirefox使いにオススメしたいアドオン（拡張機能）の導入事例を紹介する。
僕はこうやって使ってる＿って話なんだけど。
アドオンはメリットが明快な場合を除いては基本入れない方がいい。
「Tab Center Redux」でサイドバーが激変
結果からいうと「Tab Center Redux」ってアドオンを入れると、ブラウザのタブ表示位置がトップからサイドバーに切り替わる。
今となっては上部タブ形式（デフォ）には絶対戻りたくない。
だってタブの水平展開は「手」とか「目」がすごく疲れてしまう。
その理由を語る前に、とりあえずアドオンの設定方法を先に解説したい。
「Tab Center Reborn」インストール方法
※2021年3月現在、「Tab Center Redux」は後継「Tab Center Reborn」としてリニューアルされた。
ブラウザ右上の三本線（ハンバーガーメニュー）をクリックし”アドオン”を選択する。
アドオンの管理画面に移動し「Tab Center Reborn」を検索してインストールする。（※検索しても、”Tab Center Reborn”がヒットしない場合はリンクを参照。）
Tab Center Reborn – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Tab Center Reborn をダウンロード。この Firefox アドオンの初回版では、タブを水平ではなく垂直に配置してみました。これは素晴らしい VerticalTabs アドオンに強く触発され、そのアイデアを借用したものです。
Tab Center Rebornでは、デフォルトでダークテーマの機能が提供されていないようだ。一例として以下のようなスタイル（css）を上級者設定から追加する必要がある。
body {
--icons: var(--grey-10-a80);
--toolbar-background: var(--grey-70);
--toolbar-text: var(--white-100);
--input-background: var(--grey-60);
--input-border: var(--grey-50);
--input-text: var(--grey-30);
--input-text-focus: var(--grey-20);
--tab-text: var(--white-100);
--background: var(--grey-80);
--tab-active-background: var(--grey-60);
--tab-separator: var(--grey-60);
}
「Tab Center Reborn」の設定方法
※記事公開時は「Tab Center Redux」の解説だったが、現在は一部加筆して「Tab Center Reborn」の解説となる。
「Tab Center Reborn」は有効化しただけでは快適に使うことが難しい。
初期状態では上部とサイドでタブが重複して表示される。
これが非常にわずらわしい。
サイドタブに関しても、視認性の悪さや表示スペースに無駄を感じてしまう。
良し悪しは人それぞれの感覚の違いがあるだろう。
今回紹介するカスタマイズは、あくまで僕好みの設定であるという点を理解して欲しい。
では引き続きやっていこう。
「Tab Center Reborn」のオプション設定で、”暗いテーマ”にチェック、”コンパクトモード”を常時に変更する。コンパクトモードにすると、タブ内のサムネイルが非表示になる。
これによりタイトルの視認性向上と表示スペースの節約にもなる。
ディスプレイの表示領域は限りあるものなので、明らかに無駄と思えるものは省いていきたいわけだ。
上部タブとサイドバーヘッダを非表示
次に上部のタブとサイドバー上部の赤枠部分、”サイドバーのヘッダ”も非表示にする。この設定はやや面倒で、Firefoxの”Profiles”フォルダ以下に独自スタイル（CSS）を追加する必要がある。
userChrome.css が反映されない？（2021/12/14 -追記-）
「Firefox 69」のアップデートで userChrome.css を読み込まない設定がデフォルトになったらしい。これを読み込むスタイルに変更していく。
アドレスバーに 「about:config」と打ち込み設定画面を開く。検索ボックスに「toolkit.legacyUserProfileCustomizations.stylesheets」と打ち込み値が「false」の場合「true」に変更しておく。
userChrome.cssの作成
メモ帳や適当なテキストエディタ（TeraPadなど）を開いて、以下のCSSをコピペして貼り付ける。
@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
/* サイドバー検索ボックス非表示 */
#sidebar-search-container {
visibility: collapse!important;
}
/* タブバーを非表示にする */
#TabsToolbar {
visibility: collapse !important;
}
#tabbrowser-tabs {
visibility: collapse !important;
}
toolbar#TabsToolbar.customization-target {
visibility: collapse !important;
}
/* タイトルバーを非表示にする */
#titlebar {
visibility: collapse !important;
}
/* サイドバーのヘッダも非表示にする場合はこちらも */
#sidebar-header {
visibility: collapse !important;
}
}
ファイル名を「userChrome.css」として、デスクトップなど適当な場所に一時保存する。
作成したファイルを以下の場所に移動する。
【C:\Users\user\AppData\Roaming\Mozilla\Firefox\Profiles\●●●●\chrome】
”●●●●”の部分は、ユーザーIDのような意味合いでユーザーごとに表記が異なる。
”●●●●”内に初期状態では”chrome”フォルダは存在しないので追加する。
作成した”chrome”フォルダに、さきほど作成した「userChrome.css」を移動（コピペ）する。
Firefoxを再起動して、変更が反映されていればOKだ。（お疲れ様！）
※将来的にFirefoxのアップデートでCSS（プロパティ）の記述方法が変わる可能性あり。
サイドバータブ表示で作業効率がアップする？
最後に僕が感じているサイドタブの良いところを話したい。
しつこいようだがタブの視認性に尽きる。
要するにページタイトルの可読性である。展開したタブ数に関係なく表示幅（調整可能）を一定に保っておけるのは本当に便利だ。
10個程のタブをほぼ目線を動かさず瞬時に確認出来てしまう。
これが上部タブだど、目線どころか頭を左右に振って確認するような羽目になりかねない。そしてタブが増えるほど、タブ一個あたりのスペースが小さくなってしまう。
マウスでタブを切り替える場合も、その移動距離の差は歴然だ。マウス操作は、前後移動より左右移動の方が手首に負担がかかる。
上部タブだと目や手が疲れる根拠は、そういった実体験がベースにある。
タブの視認性や切り替えが楽だと、必然的に情報収集やそれらを比較する労力、時間的コストにも差が生まれる。
もう導入しない理由が見つからない、、
ただし通常のブックマーク表示については妥協する必要がある。
残念ながらサイドタブとブックマークは共存できない。常にどちらか片方しか表示しておけないようだ。
両方表示出来たって話は今のところ聞かない。
個人的にはブックマークツールバーで十分対応可能だし、同等以上の快適さを得ているので問題なし。
う～んFirefoxってホント最高ぅ。