Firefoxユーザーの方が「Firefoxを選ぶ理由」として大半を占めるのが「ツリー型タブ（縦タブ）を使える」と言っても過言ではないほど、今や浸透しきっている超便利プラグイン「ツリー型タブ（Tree Style Tab）」。
かくいう私もPCを使うようになってからほぼ最近までずっとFirefox系統のブラウザを使ってきました。
Firefoxの魅力は、このツリー型タブも含めて「超便利なプラグインが豊富」というのが個人的に最大の魅力です。
その数あるプラグインの中でも、ダントツで必要不可欠なプラグインが「ツリー型タブ」で、今回このツリー型タブがアップデートされて生まれ変わったのでFirefoxの大変身の内容と共に紹介です。
[ 2017年11月22日追記 ]
「Firefox Quantum」（バージョン57）でツリー型タブを使った時に、「画面上部に表示されっぱなしのタブを非表示にする方法」について記事を公開しました。
[ 2017年11月15日追記 ]
「Firefox Quantum」（バージョン57）の正式リリースに伴い以下の記事を公開しました。
Contents
ツリー型タブとは？
Firefoxユーザーなら「もはや知らない人はいないのでは！？」と思うほど有名なプラグインで、Firefoxを使い始めてから現在も私にとって必須のプラグインです。
基本的にブラウザのタブというのは画面上部に配置され、タブが増える時は右側にタブが追加されていくものがほとんどです。
タブには基本的にそのページのタイトルが表示されるのですが、タブが横に増えていくパターンだとタブを多く開けば開くほどだんだんとひとつのタブの大きさ（幅）が小さくなっていきます。
そしてタブのサイズ（横幅）が小さくなればなるほど、タブに表示されたタイトルが見えなくなっていきます。
まずここが一番のポイントですが、ツリー型タブを使うとこのタブを横ではなく縦に配置する事が出来ます。
また、それぞれのタブに親子関係を持たせる事が可能なので「親タブ」と「小タブ」という概念が生まれ、それぞれをツリー型に配置可能にしてくれます。
親タブを開閉した時のイメージは「アコーディオンメニュー」に似ていて、スルスル～っと気持ちよく動きます☆
また、それぞれのタブをドラッグして位置を変更したり、小タブにしたりと非常に柔軟な操作が可能なのも特徴です。
Firefox 57が必須！
今回紹介する新しいツリー型タブは「Firefoxのバージョン57以上」が対象となっています。
そして（2017/10/05）、Firefoxの最新バージョンは「56が最新」となっています。
なので現在はまだ通常だと新しいFirefoxを使うことが出来ません。
ただ、Firefox Developer Editionはすでにこれに対応しているので新しいツリー型タブも使う事ができます。
Firefox Developer Editionについては以下の記事で紹介しています。
Firefox Developer Editionではなく、あくまでFirefoxで新しいツリー型タブを使いたいという方は、以下のBeta版Firefoxをインストールする事で使う事が出来るようになります。
※上記はあくまでBeta版なのでご使用は自己責任でお願いします。
生まれ変わったFirefox 57
Firefoxがバージョン57への大型アップデートで大変身したというのはここまで書きましたが、ここではその機能や内容を大まかに紹介します。
※Firefoxのインフォメーションツアーで確認出来る内容もありますので、もっと詳しく知りたいという方はFirefoxのツアーをご覧ください。
シングルプロセスからマルチプロセスに変貌！？
軽くブラウジングしてみて感じたことが「ん？結構サクサク動くようになったな～」という印象です。
そこで何気なくタスクマネージャーを開いてプロセスを確認してみると、なんと今までシングルプロセスを突き通してたFirefoxがマルチプロセスになっているではありませんか！！
マルチプロセスになったから体感でサクサクに感じられるようになったのかと言われるとそれだけではないとは思いますが、今まで「Firefoxはシングルプロセス」、「ChromeなどのChromiumはマルチプロセス」という概念を持っていたのが一気に払拭されました。
Xserverの進化といい、Firefoxのエンジンといい、本当に時代とともに様々なものが急速に大変貌を遂げまくってますね。
パフォーマンスについて
公式では今回の大型アップデートですべてを新しくしたと名言しています。
この「すべて」に対して「どこからどこまで？」というのは考えないようにしましょう（笑）
そして「新しくした」という一番のポイントはやはり「ページの読み込み速度」なのかなと感じました。
「スムーズなスクロールとすぐに応答するタブ切り替えを実装しました。」
と記載があるように、個人的には以前のFirefoxと比べるとサクサク感を感じれるようになりました。
ブラウジングライブラリー
新しく4冊の本を表しているようなアイコンが登場したのですが、このアイコンをツールバーに置いておけば「閲覧履歴」や「Pocket」、他にも「ブックマーク」や新しい「Firefoxスクリーンショット」なども操作出来るようになります。
どれもそれぞれが独立した機能だったものがひとつのアイコンからアクセス出来るようになったというのは利便性が高まって良かったという印象です。
普段あまりこういった機能を使わない方でも、このアイコンから開けるとわかっていれば迷うことも少なくなりますね☆
スクリーンショット
皆さんが想像しているスクリーンショットというのは、「画面に表示されているもの全体をカメラで撮ったようなもの」ではありませんか？
そうです。その名の通りスクリーンに表示されているものを画像として保存するというのがスクリーンショットの基本的な機能です。
しかしWebページなどは特に画面全体ではなく部分的にスクリーンショットを撮りたい時があります。
今までは一旦スクリーンショットを撮って、必要な部分だけトリミングなどをしていたのですが、今回のアップデートでわざわざこの手間を掛けずに好きな範囲のスクリーンショットを撮れる機能が付きました。
簡単に使い方を説明すると、アドレスバーの右側にある「・・・」をクリック→「スクリーンショットを撮る」で「ページ全体のスクリーンショット」か「表示範囲のスクリーンショット」のを選択して使います。
この表示範囲のスクリーンショットが今説明した部分的なスクリーンショットが出来る機能です。
これがまた便利で、実際にやってみるとものすごく便利だと感じてもらえると思いますが、「自動でマウスの位置付近の要素（ブロック）を読み取ってくれる」という神がかった機能です。
選択された部分が自分の撮りたいスクリーンショットの部分だったらそのままクリックするだけでその範囲のスクリーンショットが撮れてしまいます。
撮ったスクリーンショットは同画面にある「自分のショット」で確認する事が出来るのも便利で、個人的にこれは結構大きいメリットです☆
私はスクリーンショットには「Screenpresso」を使っているのですが、Webページの要素（ブロック）を撮りたい時はこの「Firefox Screenshot」という感じで使い分けようかなと思ってます。
※Screenpressoについては以下の記事をご覧ください。
アドレスバーについて
今回のアップデートでアドレスバーに文字を入力する度に過去の履歴などから文字の補完をするようになりました。
私は基本的にサイトのデバッグなどで普段からシークレットウィンドウを使っているので個人的には正直あまりいらない機能ではありますが、大多数の方が効率的にブラウジング出来るようになると思います。
カスタマイズについて
これは以前からFirefoxにあった機能ですが、便利なアイコンをFirefoxのツールバーに好きなように配置出来るというものです。
画面右上にあるハンバーガーメニューから「カスタマイズ」で色々とカスタマイズ出来るのでやってみてください☆
サイドバーについて
今回のアップデートで大きく変わったのがサイドバー機能だと思います。
F1で簡単にサイドバーを呼び出したり、ツールバー上に配置されたアイコンをクリックするだけでサイドバーを呼び出す事ができます。
以前は「タブの位置はツリー型タブのオプションで設定」していたのですが、今回からFirefoxのサイドバー内で簡単に設定出来るようになりました。
これでわざわざアドオンを開いてツリー型タブを開いて設定を開いて…という手間が必要なくなりましたね☆
※そもそもタブの位置はそんなに頻繁に変更するものでもありませんでしたが…（笑）
このサイドバーですが、今回紹介するツリー型タブもこのサイドバーの中に表示されます。
次項でもう少し詳しく説明しますが、Firefox 57からは「画面上部にあるタブはそのまま」、「ツリー型タブはサイドバー」という形になるようです。
とても便利で革新的な機能だと思いますが、ひとつ残念なのは「サイドバーの一番上のメニュー（？）がとにかく邪魔！」という事です。
これ、どうにかならないかな…(-_-;)
生まれ変わったツリー型タブとは？
ツリー型タブが今回のアップデートで更新された内容の中からいくつか個人的に良いと思ったものを紹介します。
個人的に気に入っている機能の紹介になるので、その他のアップデート内容に付きましては本家のサイトにてご確認ください。
Firefoxの新サイドバーに統合
生まれ変わった新しいツリー型タブは、Firefox 57に搭載された「新サイドバーに統合」される形になりました。
なのでこれまでと違い、「タブをツリー型にするのではなく、サイドバーへツリー型で別途表示する」という形になりました。
使い方としては、F1でサイドバーを呼び出し、一番上のプルダウンの中から「ツリー型タブ」にチェックを入れればOKです。
タブが不要な場合はF1で簡単に表示・非表示を切り替えられるので、使い方によっては非常に便利になりました。
テーマに黒ベースが登場
今回テーマの中に「Plain Dark」というテーマが追加されました。
個人的には以前のグレーベースも気に入ってた（あれ、これはFirefoxで設定だったかな…）のですが、今回の黒ベースはかなり気にっています。
本当はタブの文字色も変更出来たら最高だったのですが、これは他のプラグインで対応するしかないですね。
コンテキストメニューに任意のメニューを追加
コンテキストメニューとは「右クリックで表示されるメニュー」の事で、タブの上で右クリックしたときに表示されるメニューに追加する項目を設定出来ます。
コンテキストメニューは多すぎるとうざいですし、逆に必要なものがないといちいちメニューを探すのが面倒です。
ここを自分の好きなように設定出来るとかなり便利ですね☆
新しいタブの挙動
これまでとは全く違い、新しいタブを開いた時の挙動をかなり細かく設定できるようになりました。
「新しい小タブを開く位置」や「ピン留めされたタブから新しいタブを開く位置」といったものまで設定出来るのは私が知っているブラウザの中ではFirefoxだけですね。
さらに「指定した時間内に連続して開かれたタブを自動的にグループ化する」など、正直「そこまで出来るのか！」と思うような項目まであります。
ツリーの挙動
この設定項目に関しても、以前とは比べ物にならないほど細かく設定出来るようになっています。
中でも「新しいツリーが作られた時は、自動的に他のツリーを折りたたむ」や、「親のタブを閉じた時の挙動」の項目は利用者にとって嬉しい設定項目だと思います。
これがスゴイ！詳細設定
なにがスゴイって、ツリー型タブ内の設定でCSSを自分で記述出来るという事です。
今までは「stylish」などのプラグインを使ってカスタマイズしていた事がここで出来ちゃうんです。
※まだ検証していませんが、ここで設定出来るのは恐らくサイドバー内のCSSやツリー型タブ関連のものだと思います。
これはちょっと上級者用の設定項目なのでほとんどの方は編集する事がないポイントだとは思いますが、ここまで進化したのかー！とひとり驚いています。
なんとデバッグモードまで！！
もう、「ここまでやっちゃうの！？」と思ってしまうほど究極の機能がこれです。
はっきり言って開発者以外使うことがないだろうというデバッグモード！
ツリー型タブの開発者さんが何を想ってここまでの機能を提供してくれているのかわかりませんが、なんという親切な開発者さんなんでしょう。
まだまだ全部試せてませんが、デバッグモードのチェックマークを入れると、下に項目一覧が表示されます。
かなりの項目数があるのですが、これまた親切は事に「右側にResetボタンまで用意」してくれているので、興味がある方は色々と試してみると良いですね☆
まとめ
今回はFirefoxの大型アップデート（バージョン57）による変更点と、それに伴いFirefoxの最重要プラグインであるツリー型タブの大変貌について紹介しました。
今回のアップデートは今までのものとは違い、個人的にかなり大きなアップデートになった印象を受けています。
実際にFirefoxでブラウジングしていても以前よりも体感でサクサク動いている感じがしますし、シングルプロセスからマルチプロセスに変更されたというのも大きいです。
以前公開した記事の通り、現在Kinzaをメインブラウザで使っているのですが、これを機に再度Firefoxをもう少し多用してみようかと想っています。
Kinzaに関しては以下の記事で詳しく書いていますのでご覧になってみてください。
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
上のタブは消して、ツリーのみの表示ってできないのでしょうか？
現状では上のタブの消し方は私もわかりません。
もし上部タブを非表示する方法がわかったら追記で書こうかと思います。
ご返信いただきありがとうございます！やはりそうでしたか、、、また見に行きますね！
こんばんわ。
画面上部のタブについて、非表示に出来ましたのでただ今記事を書いている所です。
仕事の関係上明日に間に合うか微妙ですが、完成次第公開する予定です。
お待たせして申し訳ありませんが、もう少しの間お待ち下さい(｡-人-｡)ｶﾞｯｼｮｳ
お待たせしました。本日記事を公開致しましたのでご覧ください。
https://tips4life.me/hide_top_of_screen_tab-for-tree_style_tab