【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する

Firefox Quantum(Firefox 57)へのアップグレードにより、新仕様「WebExtensions」に未対応のアドオン(拡張機能)が動作しなくなったのも記憶に新しいところですね。
「レガシーアドオン」とも呼ばれるこれらの旧式アドオンの中には、強い人気を誇ったものもありますが、その1つに「Tab Mix Plus」があります。

Tab Mix Plusは、タブ周辺の動作や見た目を総合的にカスタマイズできるアドオンです。
タブを多段表示にする、閉じたタブを復元する、ポップアップをタブに開くなど、非常に多機能なアドオンですが、WebExtensionsの制約により、開発は難航しているよう。
結果として、Tab Mix Plusで実現していた効果を、どうにか再現できる方法はないものかと、多くの利用者が代替案を探し求めることになりました。

Tab Mix Plusの機能をそっくりそのまま再現する方法というのは、ありません。
そっくりそのまま全部とまではいかないまでもその大部分、せめて半分くらいを再現する方法さえも、現状では多分ないでしょう。
でも、部分的に代替できるアドオンはたくさんありますし、「userChrome.css」や「about:config」で解決する部分もあります。

この記事では、Tab Mix Plusが備えていた機能を再現するべく、情報を集め回った成果をご紹介したいと思います。
なお、上記の通り、非常に多機能なアドオンであること、また、私自身が普段は使用していない機能にも言及しているため、解説が不十分な部分もありますが、ご了承下さい。

FirefoxQuantum



[PR]
コツコツと確実に貯めたい方、広告利用でガッツリ稼ぎたい方、どちらにもオススメ!コチラからご登録いただけると、特典として1,000ポイント獲得できます
暮らしをおトクにかえていく|ポイントインカム
ポイントインカム

[PR]



まず、userChrome.cssとabout:configについて、簡単に説明しておきましょう。

userChrome.cssとは、平たく言えば、一種の設定ファイルです。
ブログを運営されている方やウェブ知識をある程度お持ちの方ならば、CSSについてはご存じのことと思いますが、ウェブサイトにおいて、文字の大きさや罫線の太さ、背景色、画像の表示位置など、デザインのあらゆる部分に関わる設定ファイルになります。
Firefox本体に適用されるcssファイルを作成し、そこに直に書き込むことで、デザインをカスタマイズできるようにする、というわけですね。

userChrome.cssを適用する手順は以下の通りになります。
1. CSSの記述ルールに則って、メモ帳などのテキストエディタでファイルを作成、「userChrome.css」という名前で保存する(txtではなくcssで保存する点に注意)。
2. Firefoxのプロファイルフォルダ内に「Chrome」という名前のフォルダを作成し、userChrome.cssを移動させる。
3. Firefoxを再起動して完了です。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profilesにある「○○○.default-×××」という名前のフォルダが、プロファイルフォルダです。
プロファイルフォルダの探し方については、公式サイトにとてもわかりやすいヘルプページがありますので、そちらを参照して下さい。

主に、見た目に関する部分を設定できるuserChrome.cssに対して、動作に関する部分を設定できるのがabout:configです。
オプションでは変更できない高度な設定を、直に書き換えることができます。

about:configで設定を変更する手順は以下の通りとなります。
1. ロケーションバー(アドレスバー)に「about:config」と入力してエンターキーを押す。
2. 「危険性を承知の上で使用する」をクリックします(以降の操作は間違いのないよう十分にご注意下さい)。
3. 検索欄に変更したい設定項目(の一部)を入力すると、自動的に一覧から絞り込まれます。
4. 項目名をダブルクリック、もしくは、右クリックして「値を変更」を選ぶと、各項目の設定値を変更できます。
5. タブを閉じて完了です。

詳細は公式サイトのヘルプページを参照して下さい。



■ポップアップを新しいウィンドウではなく新しいタブに開く *1

about:configで「browser.link.open_newwindow」を「3」に、「browser.link.open_newwindow.restriction」を「0」に設定する。



■リンクを新しいタブに開く

アドオン「新しいタブでリンクを開く Open Link with New Tab」で可能になります。
WebExtensions未対応の「リンクを新しいタブで開く (Open Link in New Tab)」に着想を得たアドオンで、基本的な機能は継承していますが、JavaScriptによるポップアップをタブに開くようにしたり、GoogleやYahooの検索結果からは新しいタブではなく現在のタブに開くようにするといった例外設定をすることはできません。
JavaScriptによるポップアップについては、上記の「ポップアップを新しいウィンドウではなく新しいタブに開く」にて対応可能です。



■新しいタブを開くボタンで開くページを指定する

アドオン「New Tab Homepage」をインストールすると、Firefoxのオプションでホームページに設定しているページを開くようになります。
設定項目はなし、シンプルなアドオンです。

ホームページとは別なページを開くようにしたい場合は、アドオン「New Tab Override」で設定可能です。



■新しくタブを開く位置を指定する

初期設定では、新しいタブは末尾に開かれますが、アドオン「Always Right」や「Open Tabs Next to Current」をインストールすれば、現在のタブの右隣に開くようになります。

右隣の他に、先頭や左隣といった柔軟な設定がしたい方には、「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。



■ブックマークを現在のタブではなく新しいタブに開く

about:configで「browser.tabs.loadBookmarksInTabs」を「true」に設定します。
ブックマークを新しいタブに開く際、バックグラウンドで開く(自動的に新しいタブに移動しない)ようにしたい場合は、同じく「browser.tabs.loadBookmarksInBackground」を「true」に設定すればOKです。



■ロケーションバー(アドレスバー)から現在のタブではなく新しいタブに開く

アドオン「ロケーションバーから新しいタブを開く」で対応可能です。



■検索バーから現在のタブではなく新しいタブに開く

about:configで「browser.search.openintab」を「true」に設定します。



■リンクをバックグラウンドで開く(自動的に新しいタブに移動しないようにする) *1

about:configで「browser.tabs.loadDivertedInBackground」を「true」に設定します。



■複数のタブを閉じる際に確認メッセージを表示させない *2

about:configで「browser.tabs.warnOnCloseOtherTabs」を「false」に設定します。



■最後のタブを閉じてもウィンドウを閉じない *1

about:configで「browser.tabs.closeWindowWithLastTab」を「false」に設定します。



■現在のタブを閉じた後に移動するタブを指定する

初期設定では、現在のタブを閉じた後は右隣のタブへ移動しますが、アドオン「Focus On Left Tab After Closing」をイントールすれば、左隣へ移動するようになります。

左隣の他に、先頭や末尾といった柔軟な設定がしたい方には「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。



■指定したタブを一定間隔で自動的に再読み込みする

アドオン「Tab Reloader (page auto refresh)」や「Tab Auto Refresh」で対応可能です。



■タブを多段表示にする *3 *4

Tab Mix Plusとは動作が異なりますが、タブの多段表示自体は、userChrome.cssを使用すれば可能です。
相違点としては、タブの数が増えるとまずはタブの横幅を縮小、さらに増えると多段表示するTab Mix Plusに対して、タブの横幅が固定されていることが挙げられます。
また、タブを水平・垂直に自由にドラッグできたTab Mix Plusとは異なり、垂直方向のドラッグに支障があります(水平方向は支障なし)。

#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}
.tabbrowser-tab:not([pinned]) {
min-height: 30px !important;
max-height: 30px !important;
}
#tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 30px !important;
max-height: 30px !important;
}
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;
}
#tabbrowser-tabs tab {
min-width: ●●●px !important;
}

最後のmin-widthの項目は、タブの横幅の設定になります。
●●●の部分を環境に合わせて適切な数字に置き換えて下さい。
ちなみに、初期設定では、最大幅210px、最小幅100pxとなっています。

Tab Mix Plusのようにタブの横幅を可変にすることもできるようですが、私のスキルでは手に負えませんでしたので、参考URLの紹介にとどめておきます。
ただし、垂直方向に加えて水平方向のドラッグにも支障があるようです。
Reddit(リンク先は海外サイトです)



■未読タブの文字色を指定する *5

userChrome.cssに下記のように記述します。
.tabbrowser-tab[unread="true"] .tab-text {color: red !important;}

上記の例では、文字色を赤に指定しています。
お好みに応じて、色名やRGBで指定して下さい。



■タブを閉じるボタンを表示する条件を指定する *6

初期設定では、現在のタブのみに閉じるボタンが表示されますが、userChrome.cssを使用すれば、細かく指定できます。
お好みに応じてお選び下さい。
なお、2.と3.は組み合わせ可能です。

1. 現在のタブ以外にも常に表示する
.tabbrowser-tab:not([pinned]) .tab-close-button {display: block !important;}

2. 現在のタブ以外でマウスオーバー(マウスポインタが載っている)時のみ表示する
.tabbrowser-tab:not([pinned]):hover .tab-close-button {display: block !important;}

3. 現在のタブでマウスオーバー時のみ表示する
.tabbrowser-tab:not(:hover) .tab-close-button {display: none !important;}



■セッションを復元する

Firefoxが強制終了してしまった場合などに備えて、開いているタブと、それぞれのタブで開いたURLの履歴を保存、復元する機能です。
アドオン「Tab Session Manager」で代替することができます。



■閉じたタブを復元する

アドオン「Undo Close Tab」で代替することができます。
同種の機能を持つWebExtensions対応のアドオンは他にもありますが、アイコンを左クリックすると直前に閉じたタブを開く、右クリックすると最近閉じたタブの履歴から開きたいタブを選べる、という使用感のよさがポイントです。



■タブ / タブバーをクリックした時に指定したコマンドを実行する機能の代替

大きく分けて、2種類の代替案があります。

1つ目は、「Foxy Gestures」「Gesturefy」「smartUp Gestures」といったマウスジェスチャアドオンを使用する方法。
この中では、Gesturefyが日本語に対応しています。

2つ目は、右側のタブを全て閉じる、他のタブを全て閉じるといった機能を持つボタンを、設置できるアドオンを使用する方法。
Button Guy」「asukaze」という作者が、この手のアドオンを多く開発しています。



■不要なメニュー項目を非表示にする

userChrome.cssを使用すれば可能です。
詳細については、【小技】Firefox Quantumで不要な右クリックメニューを非表示にするにて解説していますので、ご参照下さい。



■ショートカットキーの割り当てを変更する

キーボードカスタマイズソフト「Keyboard Butler ~鍵盤の執事くん~」で対応可能です。
詳細については、【便利ツール】ショートカットを1つのキーで使えるようにする「Keyboard Butler ~鍵盤の執事くん~」にて解説していますので、ご参照下さい。



以上がTab Mix Plusの代替案のご紹介となります。

なお、この記事を作成するに当たって、下記のページを参考にさせていただきました。
*1 (ブラウザ) Firefox57、webextension対応オススメアドオン (2017) - NAVER まとめ
*2 Firefoxで「他のタブをすべて閉じる」時に出てくるダイアログを消す - あまたの何かしら。
*3 Firefox57で多段タブを使う方法 - 日々のつぶやき
*4 Firefox Quantum(ver57)でタブを多段(2段,3段…)にする方法! - Life+
*5 Firefox Quantum移行についての個人的備忘録と希望的観測 - アクエリアスよりポカリスエット
*6 Firefox57 Quantumの設定変更いろいろ - カメとヒヨコの海外ロングステイ
このエントリーをはてなブックマークに追加
関連記事

関連キーワード

この記事にトラックバックする(FC2ブログユーザー)
http://bee-dash.com/tb.php/15009-2ea9f981

トラックバック

コメント

[C109]

ありがとうございます。
browser.tabs.loadDivertedInBackground が私が求めていたものでした。
勝手にアクティブになるの邪魔過ぎる……
  • 2018-01-10 17:35
  • 匿名

[C110] 匿名さん

お役に立てたようで何よりです。
コメントありがとうございました。
  • 2018-01-10 18:42
  • ハタラキバチ

[C118]

不便だなあと思いながら使っていましたが、ようやく解消されました。
はやく拝見していればよかった。ありがとうございました。
  • 2018-03-30 16:58
  • しろくま

[C119] しろくまさん

コメントありがとうございます。
Firefox Quantumに対応したTab Mix Plusもリリースされましたが、機能はまだまだ限定的で、仕様による制約がある以上、今後も旧TMPと同等の機能を期待するのは難しいと思います。
TMPに限らず、以前と同等の使い勝手を実現するには、アドオンだけでは不十分なので、情報収集が大切になりますね。
  • 2018-03-30 19:15
  • ハタラキバチ

[C122]

TabMixPlusが使えないから未だにFireFox56を使い続ける日々(時折勝手に更新されるのでその都度ダウングレードしています)
多段表示は何とかできるのですね。タブ全体を画面下部に移動することはやはりできないのでしょうか?
それができるまでは移行する訳にはいかない…
  • 2018-05-01 21:54
  • MMB

[C123] MMBさん

コメントありがとうございます。

タブバーの最下部への移動については、私自身は必要としていないので調べてみたこともなく、可否はわかりませんが、タブバーをメニューバーの下へ移動させるスタイルシートは見かけたことがあるので、最下部への移動も可能なのかもしれませんね。

現状として機能は限定的ながら、ver.57以降の仕様に対応したTab Mix WebExtensionもリリースされていますが、仕様上、旧Tab Mix Plusの機能を全て再現するのは困難だろうと、個人的には捉えています。
https://addons.mozilla.org/ja/firefox/addon/tab-mix-plus-webextension/

旧Tab Mix Plusにこだわるのであれば、派生ブラウザのWaterfoxをお試しになることをオススメします。
https://www.waterfoxproject.org/en-US/
  • 2018-05-01 22:30
  • ハタラキバチ

[C124]

多段表示にすることは出来ましたが、表示する行数を設定出来ませんか?
開いているタブ数かなり多いので
  • 2018-05-11 18:55
  • うみにん

[C125] うみにんさん

コメントありがとうございます。
タブの段数を設定することは可能なようですが、この記事に掲載しているコードより格段に複雑になりそうなので、現時点では当ブログで取り上げる予定はありません。
「firefox quantum タブ 段数」などで検索すれば、コードを掲載しているサイトが見つかりますので、申し訳ありませんが、そちらを参考にして下さい。
  • 2018-05-11 22:12
  • ハタラキバチ

[C126]

わかりました
検索してみます
ご返信ありがとうございました
  • 2018-05-11 22:40
  • うみにん

コメントの投稿 *「コメント」以外は空欄のままでもご投稿いただけます

管理者にだけ表示を許可する

すぐたま 期間限定 ここから登録で600mile(300円相当)GET!

各種クイズの答えを検索できます

最新記事

プロフィール

ハタラキバチ


ブログ管理者:ハタラキバチ

支出や個人情報が必要な案件は、極力ノータッチというスタンスでおこづかい稼ぎに臨んでいるため、広告利用は控えめ。
得意分野は、ブラウザの拡張機能やソフトウェアを活用した裏技 / 小技です。

  • 通算獲得額 (2014/1~)
    :2,683,689円
  • 2018年4月度 獲得額
    :41,205円



獲得額ランキング

2018年4月度 獲得額:41,205 円
順位サイト名獲得額
1クラウドワークス8,325円
2A8.net6,197円
3忍者AdMax4,153円
4ランサーズ3,712円
5ECナビ2,181円
6リア食1,930円
7キューモニター1,732円
8げん玉1,406円
9ハピタス1,067円
10infoQ999円

通算獲得額(2014/1~):2,683,689円
順位サイト名獲得額
1クラウドワークス628,397円
2ランサーズ419,459円
3infoQ154,679円
4げん玉112,347円
5A8.net110,144円
6キューモニター89,376円
7ポイントタウン78,203円
8ECナビ66,575円
9マクロミル54,955円
10ちょびリッチ47,428円

ブログランキング参加中

くる天 人気ブログランキング

メールフォーム

名前:
メール:
件名:
本文:

免責事項

当ブログに掲載されている情報は、当該記事の執筆当時におけるものであり、最新の情報とは異なる可能性がございます。
特に、友達紹介特典については、キャンペーン開催や制度改定により、特典内容が変更されることがございますので、ご注意下さい。

また、掲載する情報の確認には十分に配慮しておりますが、その正確性を保証するものではございません。
当ブログの利用により生じた、いかなる損害についても、その責任は負いかねますので、情報の取り扱いは自己責任にてお願い致します。