Home > Latest topics

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

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

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

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

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

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

また、素の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 > 拡張機能, , , , , 時刻:23:24 | Comments/Trackbacks (3) | Edit

Comments/Trackbacks

Tab Scope

Tab Scope(Gomita氏のアドオン)はどこかに入りますでしょうか?
FaviconizeTabとの組み合わせがパワフルです。

Commented by ultra at 2007/10/31 (Wed) 11:50:54

タブ関連のUIまとめ

Piro氏がタブのUI関連の拡張をほぼ網羅したリストを作成した。なかなか参考になる。 私も私でいろいろ考えているので、トラバ先から流れてきた酔狂な人はBagelのスレを覗いてみませんか?私の書き込みばっかりでアレですが。 今考えているのは、「戻る・進む」を削除すると

Trackback from GeckoとWebKitに首っ丈 NEET Edition at 2007/10/31 (Wed) 21:41:32

認識している

本日は「認識している」をキーワードに検索、自信が把握している範囲についてつづられているテキストを、ピックアップしてみようかと思います。

Trackback from たのしい検索 ゆかいな検索 at 2009/04/28 (Tue) 20:10:57

TrackBack ping me at


の末尾に2014年1月19日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2007-10-30_toomanytabs.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2014年1月19日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード