Latest topics > 大量のタブを管理するための様々なアプローチ

大量のタブを管理するための様々なアプローチ - Oct 30, 2007

タブをバカスカ開く人のために、いろんなアドオンが開発されている。とりあえず僕が存在を認識している物を、分類して列挙してみた。

素のFirefoxでは、タブが多くなると画面外に隠れるタブが出てきてしまい、タブを探したりタブを切り替えたりといった操作が非常に面倒になる。大量のタブをいかにして管理するか、という観点から考えられるアプローチはこんな感じだろうか。

• 一つのウィンドウの中で開くタブの数を少なくする。
  • ウィンドウを「タブのグループ」と見なして、ウィンドウ単位でタブのグループを使い分ける。
    • →Firefox Showcase：すべてのウィンドウを横断してタブのサムネイル一覧を表示する。
    • →タブカタログ：すべてのウィンドウを横断してタブのサムネイル一覧を表示する。タブのサムネイルはウィンドウごとにグループ化して表示する。
• 一度に大量のタブを一覧できるようにする。
  • 一つ一つのタブを小さく表示する。
    • →about:configでbrowser.tabs.tabMinWidthの値を変更。
    • →FishEyeTabs：ポインタが近づくとタブをリアルタイムに拡大して表示する。
    • →FaviconizeTab：タブをアイコンだけの状態に畳めるようにする。
  • 一つ一つのタブの大きさは変えない。
    • タブバーを複数行で表示する。
      • →Tab Mix Plus
      • →superT
      • →Tab Kit
    • タブバーを画面横に移動し、タブを縦に並べる。
      • →Vertigo
      • →Tab Kit
      • →ツリー型タブ
  • タブ以外の手段で一覧する。
    • ポップアップメニューで見る。
      • →タブバー端の「すべてのタブ」ボタン。
    • サイドバーで見る。
      • →Tab Sidebar：サムネイル表示。
      • →Tab Tree：ツリー表示。
    • サムネイル一覧で見る。
      • →Firefox Showcase
      • →タブカタログ

また、素のFirefoxでは、すべてのタブが同じように表示されるので、タブ同士の見分けが付きにくい。沢山のタブの中からいかにして操作したいタブを素早く見つけるか、タブを見分けるか、という観点からだとこうなるだろうか。

• サムネイルで見分ける。
  • →Tab Sidebar：タブの代わりに使えるサムネイル付きのボックスをサイドバーの中に表示する。
  • →情報化タブ：タブの中に小さなサムネイルを表示する。
  • →Firefox Showcase：すべてのタブをサムネイルで一覧する。
  • →Ctrl-Tab：すべてのタブをサムネイルで一覧する。
  • →タブカタログ：すべてのタブをサムネイルで一覧する。
• 色で見分ける。
  • →Colorful Tabs：それぞれのタブにランダムに色を付ける。
  • →ChromaTabs：それぞれのタブに、開いているページの背景色を反映させる。
  • →Aging Tabs：開いてから時間が経ったタブの色をだんだん変える。
• グループで見分ける。
  • 色でグループ分けする。
    • →Tab Kit：タブを色分け表示し、リンクから開かれたタブなどについて元のタブと同じ色を付けて、タブ同士の関連性を明示する。
  • 形、シルエットでグループ分けする。
    • →Tab Groups：タブのセットを丸ごと切り替える、より上位のレベルのタブをFirefoxに加える。
    • →Separe：任意の位置にセパレータ用の特殊なタブを置いて、関連するタブ同士を仕切って表示する。
    • →Separate tabs：Separeと同様のセパレータを表示し、同時に、開かれたタブを自動的にドメイン単位でグループ化する。
    • →ツリー型タブ：タブを上か下に表示する場合、リンクから開かれたタブなどについてグループを形成し、グループ同士の間にスペースを空けて表示する。
  • ツリーでグループ分けする。
    • →Tab Tree：タブの親子関係をサイドバー内でツリーとして表示する。ツリーの折り畳みが可能。
    • →Tab Kit：タブバーをウィンドウの左または右で縦に並べて、ツリー状にインデント表示し、タブ同士の親子関係を明示する。
    • →ツリー型タブ：タブバーをウィンドウの左または右で縦に並べて、ツリー状にインデント表示し、タブ同士の親子関係を明示する。ツリーの折り畳みが可能。

「これが抜けてるぞ」というのがあったら指摘をよろしく。

僕自身は、以前はTBEで「複数行表示」且つ「グループを色分け」という使い方をしてたけど、TBEにツリー表示機能を加えてからは「ウィンドウ横でツリー表示」で「シルエット（インデント）でグループを判別」という使い方に変わった。

同じ色のタブの「グループ」が途中で改行されると混乱の元だし、そもそも色を判別しにくい環境だと、色での判別自体が困難になる（僕自身は特に色弱とか色盲とかの症状はないと思うけど）。それに比べて、タブのインデントのようにシルエットでのグループの明示は、色の再現性が悪い環境でも影響を受けないし、視認速度の点でも圧倒的に上回ってると思う。元々縦一列にシーケンシャルにタブが並んでいるから、複数行表示のような二次元の配置に比べれば視線の移動は少なく済みそうな気もする。

という事情があったのでツリー型タブではタブの複数行表示機能はオミットしたし、そもそもタブバーを画面の左右以外に置くという設定も設けるつもりは元々なかった（汎用性を高く作ってたら、たまたまできちゃった、という感じだ）。

多分、勘違いしちゃいけないというか固定観念に囚われちゃいけない部分だと思うんだけど。ここまで「タブ」という言葉を軸にして書いてみたけど、実際の所は別に「タブ」が重要なわけではない。たくさんあるWebページを一つの画面に表示しきれないから、現在表示されていない分のWebページへアクセスするための「目印」、「手がかり」だけを見えるいちに表示させておく。その概念を現実に僕らが目に触れる物に当てはめた時に、書類を綴じたファイルの中のあちこちを行ったり来たり、あるいは机の引き出しの中を行ったり来たりするために使っている「タブ」が、一番誰にでも分かるしっくり来るメタファだった、ただそれだけのことなんじゃないかと思う。

Separeのような「セパレータ」の導入やタブの色分け、タブにサムネイルを……というのは、「タブ」という現実のメタファに則って発想された、「多数のタブをより効率よく管理するための工夫」と言えると思う。それに対して、ツリー表示とかサムネイル一覧とかは、そういう「現実世界のメタファのタブ」の制約を超えて別の次元に飛び出している、「沢山のWebページ」というものをタブよりもより的確に視覚的に表現する試みと言えるんじゃないだろうか。Mac OS XのExposeもDockもそれと同じだと思う（どうでもいいけど、Windows Vistaのウィンドウ切り替えのアレは、見た目は派手だけど、前述のような「沢山のものをより効率よく一覧する」「沢山のものの中から目的のものを見つけ出す」という観点からの工夫には欠けていて、だから実用性はイマイチなんじゃないか？）。

「タブ」というメタファに依拠すると、そのUIの使い方を誰でもすんなりと理解できるようになるけれども、しかし同時に「タブ」という現実の存在が持つ色々な制約に発想が囚われてしまう。その制約から離れればツリーとか全サムネイル一覧とか、あるいは検索ベースの一覧のような物も生まれ出てくるけれども、今度は逆に、それが何を意味しているのかというメンタルモデルを構築する手がかりがないために、使い方が分からず戸惑ってしまうリスクが増える。あらゆる人を満足させられる一つの答えは、この世の中のどこかにあるんだろうか？　誰がそれを最初に見つけ出すんだろう？

分類：Mozilla > 拡張機能, Firefox, informationaltab, Mozilla, 拡張機能treestyletab , 時刻：23:24 | Comments/Trackbacks (3) | Edit

ツイート