2組のタブを持つタブ付きインターフェースの例：上部の水平タブは、ウィクショナリーウェブ サイト内のさまざまなページに移動できます。左側の垂直タブは、特定のスペルが含まれる言語を表し、選択されたタブにはエスペラント語の「jam」（すでに）という単語が表示されています

インターフェースデザインにおいて、タブとは、複数のドキュメントやパネルを1つのウィンドウ内に収めることができるグラフィカルユーザーインターフェースオブジェクトであり、ドキュメントセットを切り替えるためのナビゲーションウィジェットとしてタブを使用します。[1]タブは、 Webブラウザ、Webアプリケーション、テキストエディタ、設定パネル、ウィンドウマネージャ、タイルウィンドウマネージャで最もよく使用されるインターフェーススタイルです。

2025 年のLibreOffice Writerのタブ付き UI 。

タブは、紙のファイルやカードインデックスに挿入される従来のカードタブをモデルにしています（デスクトップのメタファーに倣って）。通常、ウェブページやアプリ上では、紙面と同じようにグラフィカルに表示されます。

タブは水平バーまたは垂直リストとして表示されます。水平タブは複数行にまたがる場合があります。場合によっては、ドラッグ＆ドロップ操作によってタブの順序を変更したり、複数行にまとめたりすることもできます。実装によっては、既存のタブを別のウィンドウで開いたり、複数のタブを範囲選択して移動、閉じる、または分離したりする機能をサポートしている場合があります。[2]

歴史

1982年[4]にIBM PC向けに発売されたWordVisionワードプロセッサ[3]は、おそらくタブ付きインターフェースを備えた最初の市販製品でした。[4]

NeWSウィンドウ システム上のパイ メニューを備えたHyperTIESブラウザーとGosling Emacsオーサリング ツール

ドン・ホプキンスはNeWSウィンドウシステム用のタブ付きウィンドウフレームのいくつかのバージョンを開発し、フリーソフトウェアとしてリリースしました。ウィンドウマネージャはこれをすべてのNeWSアプリケーションに適用し、ユーザーはタブをウィンドウの任意の端にドラッグできるようになりました。[5]

UniPressのGosling EmacsテキストエディタのNeWSバージョンは、1988年に複数のタブ付きウィンドウを備えたもう1つの初期の製品でした。 [6]これは、1988年にメリーランド大学ヒューマンコンピュータインタラクションラボで、ベンシュナイダーマンのハイパーメディアブラウザHyperTIES（インタラクティブ百科事典システムのNeWSワークステーションバージョン）用のオーサリングツールの開発に使用されました。[7] [8] HyperTIESは、ウィンドウの管理とPostScriptアプレットによるハイパーメディアドキュメントの閲覧のためのパイメニューもサポートしていました。

Boeing Calcは少なくとも1987年からタブ付きシート（いわゆるワードパッド）を採用していましたが、 [9] [10]、 BorlandのQuattro Proは1992年にスプレッドシートのタブ化を普及させました。Microsoft Wordは1993年にサブメニューを簡素化するためにタブを採用しました。[4] 1994年には、BookLink TechnologiesがInternetWorksブラウザにタブ付きウィンドウを搭載しました。同年、テキストエディタUltraEditも、現代的な複数行タブ付きインターフェースを備えて登場しました。タブ付きインターフェースのアプローチは、 1997 年にInternet Explorer シェルの NetCaptorに引き継がれました。これに続いて、1999 年のIBrowse、 2000 年のOpera (バージョン 4 のリリース - ただし、それ以前にも MDI インターフェースがサポートされていました)、2000 年 10 月の MultiViews ( Mozilla Application Suite [11]の拡張機能として 2001 年 4 月 1 日に MultiZilla に名前が変更されました)、2001 年初頭のGaleon 、2001 年 10 月のMozilla 0.9.5、2002年 10 月のPhoenix 0.1 (現在のMozilla Firefox ) 、2003 年1月のKonqueror 3.1、2003年のSafariなどが続きました。

ユーザーはウェブ閲覧やウェブ検索においてタブの使用を急速に受け入れました。2009年6月に実施されたタブ閲覧行動に関する調査では、タブセッションの57%でタブを切り替え、36%のユーザーがその期間中に少なくとも1回は新しいタブを使用して検索エンジンの検索結果を開いていたことが明らかになりました。[12]

それ以来、ブラウザタブには数多くの追加機能が登場しました。例えば、OmniWebバージョン5のビジュアルタブブラウジングは、メインブラウザウィンドウの左または右のドロワーにページのプレビュー画像を表示します。また、タブの順序を変更したり、特定のウィンドウのタブペインで開いているすべてのWebページをグループまたはブックマークフォルダにブックマークしたり（すべてのページを同時に開き直すことも可能）する機能も備えています。Microsoft Internet Explorerでは、タブファミリーを異なる色で表示します。

開発

アプリケーション内のタブの動作は、基盤となるウィジェットツールキット（たとえばFirefoxはGTKを使用）フレームワークによって決まります。標準化が不十分なため、動作はアプリケーションごとに異なる場合があり、ユーザビリティに問題が生じる可能性があります

タブ買いだめ

ブラウザのタブを溜め込む人の Chromium 上のタブ バー。

タブホーディングとは、ウェブブラウザのタブをデジタル的に溜め込むことです。ユーザーは、調べ物や完了すべきタスクのリマインダーとしてタブを溜め込むことがあります[13] （専用のリマインダーソフトウェアを使用するのではなく）。タブを整理したり、集中力を高めたりするために、複数のブラウザウィンドウを使用することもあります[13]。しかし、複数のウィンドウを開いたままにしておくと、タブの乱雑さが悪化する可能性があります[14]。

タブの溜め込みは、ストレスや情報過多[14] 、注意散漫、そしてコンピュータのパフォーマンス低下につながる可能性があります。また、開いているタブへの感情的な執着に発展することもあり、[15] 、クラッシュや再起動時にタブが失われるのではないかという不安[13]、逆にタブが適切に復元されたときの安堵感[16]などが含まれます。タブの溜め込みをする人は、この行動を不安[17] 、 取り残されることへの不安[18] 、先延ばし[19]、そして不適切な個人情報管理に起因するものとしています[ 20] 。[15]

タブの買いだめの蔓延は、Mozillaなどのブラウザベンダーによって認識されており、ブラウザや拡張機能のメモリとタブの管理機能に影響を与えてきました。 [ 16 ]このような機能には、関連するタブを視覚的に整理して折りたたむことができるタブのグループ化、タブをハイパーリンクのリストに変換する機能、[20]、高レベルのタスクをタブではなくファーストクラスのオブジェクトとしてフレーミングするなどの代替インターフェースパラダイムが含まれます。 [22] [15] 2021年の研究では、ナレッジワーカーやその他のユーザーがブラウザのタブをより適切に管理および利用できるように、Webブラウザのコードに対するより優れたツールと変更を可能にするUI設計の考慮事項が開発されました。[15] [23] [さらなる説明が必要]

実装

GNOMEテキストエディタのタブ
GNOME Webのタブ

タブを持つCSSフレームワークには、 Bootstrap [24] 、Tailwind CSS [25]、Foundation [26]などがあります。

タブを持つウィジェットツールキットには、 Notebook [27]ウィジェットを使用するGTKやTabBar [28]ウィジェットを使用するAdwaitaライブラリ、 QTabWidgetウィジェットを使用するQtなどがある。 [29]

参照

参考文献

  1. ^ Khola, Vivek (2023-02-17). 「タブ（インターフェース）」. www.blogger.com
  2. ^ Elliott, Matt (2014年1月28日). 「ChromeまたはFirefoxで複数のタブを操作する方法」. CNET . 2021年10月29日閲覧。
  3. ^ Manes, Stephen (1984-04-03). 「Taking A Gamble With Word Vision」. PC Magazine - The Independent Guide To IBM Personal Computers . 第3巻、第6号. PC Communications Corp. pp.  211– 221. ISSN  0745-2500. 2015年3月17日時点のオリジナルよりアーカイブ。 2015年2月15日閲覧。
  4. ^ abc Seymour, Jim (1994-03-15). 「Everything Old Is New Again」. PC Magazine . 第13巻第5号. Ziff-Davis Publishing Company . pp.  99– 100. ISSN  0888-8507 . 2015年2月15日閲覧。
  5. ^ Hopkins, Don (1989年10月). 「PSIBER空間の形状：PostScriptインタラクティブバグ除去ルーチン」. Don Hopkinsのウェブサイト. 2010年3月1日閲覧。
  6. ^ ホプキンス、ドン(1988年8月17日). 「ドン・ホプキンスからジェームズ・ゴスリング、デイビッド・S・H・ローゼンタール、オーウェン・デンズモア、ジェリー・ファレルへのNeMACSにおけるテキスト選択に関するメール」ドン・ホプキンスのウェブサイト.
  7. ^ Hopkins, Don (2005年9月29日). 「HyperTIES ハイパーメディアブラウザとNeWS用Emacsオーサリングツール」. Don Hopkinsのウェブサイト. 2010年3月1日閲覧。
  8. ^ Hopkins, Don . 「HCILデモ - HyperTIESオーサリング」YouTube .
  9. ^ マロイ、リッチ（1987年6月）「スプレッドシート - 多次元性と自然言語を提供する高度なプログラムの新世代」BYTE誌レビュー（ソマー1987年ボーナス版）  69～ 75頁。 2020年2月12日閲覧。[1][2][3]
  10. ^ corwyn. 「Boeing Calc - 最初の真の3Dスプレッドシート」。2006年2月19日時点のオリジナルよりアーカイブ
  11. ^ van Rantwijk, HJ. 「Mozdev.org - multizilla: history」. Mozilla . 2008年12月7日時点のオリジナルよりアーカイブ。2010年3月1日閲覧。
  12. ^ Jeff Huang、Ryen W. White (2010). 「Webにおける並列ブラウジング動作」(PDF) .第21回ACMハイパーテキスト・ハイパーメディア会議 (HT '10) 議事録.
  13. ^ abc Ramis, Ali Jaffe (2023年10月24日). 「このタブ（または他のタブ）を閉じる前に、ちょっと立ち止まって…」ニューヨーク・タイムズ. 2024年9月25日閲覧。
  14. ^ ab Ma, Rongjun; Lassila, Henrik; Nurgalieva, Leysan; Lindqvist, Janne (2023-04-19).ブラウジングが乱雑になったとき：ブラウジングの乱雑さ、ブラウジング習慣、そして対処の相互作用の探究とモデリング. ACM. p. 1–29. doi :10.1145/3544548.3580690. ISBN 978-1-4503-9421-5。
  15. ^ abcd 「タブ の過負荷を克服：研究者がブラウザのタブをより適切に管理するためのツールを開発」techxplore.com . 2021年6月14日閲覧
  16. ^ ab Ahmed, Zo (2024年5月5日). 「後悔ゼロ：Firefoxのパワーユーザーは2年間7,500個のタブを開いたままにしていた」. TechSpot . 2024年9月25日閲覧。
  17. ^ Koebler, Jason (2015年4月3日). 「私はデジタルゴミ箱火災の中で生きている」. VICE . 2024年9月25日閲覧。
  18. ^ Cassella, Carly (2021年5月9日). 「ブラウザのタブに埋もれつつある現状を科学者たちは解決したい」. ScienceAlert . 2024年9月25日閲覧。
  19. ^ Kehayias, John (2021年1月21日). 「1,000枚のタブで死ぬ：タブ買いだめの告白」VICE . 2024年9月25日閲覧。
  20. ^ ab Samuel, Alexandra (2017年7月11日). 「ブラウザのタブの乱雑さは新たな溜め込み」. JSTOR Daily . 2024年9月25日閲覧。
  21. ^ ナビゲーション、ソーシャルリンク (2020年5月13日). 「GoogleがChromeユーザーにタブの過負荷地獄からの脱出方法を提供」TechRadar . 2024年9月25日閲覧。
  22. ^ クルカルニ、ミンチュ語;カプール、クシティジ。マダラ、デーヴァ・スーリヤ・ヴィヴェク。バンサル、サンチット。ハンガル、スディンドラ（2019）。Sailboat による Web ブラウジングの区画化。 ACM。 p. 1～8。土井：10.1145/3364183.3364187。ISBN 978-1-4503-7716-4。
  23. ^ Chang, Joseph Chee; Hahn, Nathan; Kim, Yongsung; Coupland, Julina; Breneisen, Bradley; Kim, Hannah S; Hwong, John; Kittur, Aniket (2021-05-06). 「タブの使用期限：ブラウザタブ使用のコスト構造における課題」. 2021 CHI Conference on Human Factors in Computing Systems の議事録. Association for Computing Machinery. pp.  1– 15. doi : 10.1145/3411764.3445585 . ISBN 9781450380966 S2CID  233987809 [4]で入手可能
  24. ^ 「ナビゲーションとタブ」. getbootstrap.com . 2025年1月27日閲覧。
  25. ^ 「Tailwind CSSタブ - 公式Tailwind UIコンポーネント」www.tailwindui.com . 2025年1月27日閲覧。
  26. ^ 「タブ | Foundation for Sites 6 ドキュメント」. get.foundation . 2025年1月27日閲覧。
  27. ^ "Gtk.Notebook". docs.gtk.org . 2025年1月27日閲覧。
  28. ^ "Adw.TabBar". gnome.pages.gitlab.gnome.org . 2025年1月27日閲覧。
  29. ^ "QTabWidget クラス | Qt Widgets 6.8.1". doc.qt.io . 2025年1月27日閲覧。
ウィキメディア・コモンズには、タブ（GUI）に関連するメディアがあります
  • タブパネルウィジェット
  • ASP.NET AJAXコントロールツールキット
  • Scriptaculous AJAXタブ 2010年3月22日アーカイブWayback Machine
  • タブ ウィンドウ デモは、The NeWS Toolkit 2.0 (1991) 用のパイ メニュー タブ ウィンドウ マネージャーの開発です。