Edit

Page

Page title:

Page body:

[18] [DFN[[RUBYB[[[サイドバー]]]@en[sidebar]]]]は、90年代末から00年代にかけて流行した
[[Webブラウザー]]の[[利用者インターフェイス]]要素です。 [[Webブラウザー]]の主たる[[閲覧領域]]の表示領域の左右
(主に左側) に何らかの情報を表示するものです。その後は衰退しています。

* Web ブラウザにおける表示領域横の補助域

[16] 次のようなものがありました。

- [[WinIE]] (4+): [[Explorer Bar]]
-- [[検索]], [[お気に入り]], [[履歴]]など。
-- 拡張ソフトウェアにより追加可能。
-- 表示領域下側などにも追加可能。 (開発者が決定、利用者は変更不能。)
-- 同時に表示可能なのは1つだけ。 (左側と下側にそれぞれ1つずつ。)
- [[Mozilla Suite]]: [[Sidebar]]
-- [[検索]], [[栞]], [[履歴]]など。
-- [[拡張]]ソフトウェアにより[[パネル]]を追加可能。
-- [[利用者]]が任意の [[Web頁]]を追加可能。
-- 同時に表示可能なのは1つだけ。
- [[Mozilla Firefox]]: [[Sidebar]]
-- [[栞]], [[履歴]]など。
-- [[拡張]]ソフトウェアにより[[パネル]]を追加可能。
- [[Opera]]
- [[Firefox]]: [[Side View]]
- [[Chrome]]
-- [DFN[[RUBYB[サイドパネル][side panel]]]]

* 歴史

[FIG(data)[ [69] [[HTML要素概説]]

:[F[要素名]]:[CODE[sidebar]]
:日付:[TIME[2000]]
:説明:
[TIME[1994]]の [[USENET]] の投稿で、
[[雑誌]]の sidebar に相当する
[CODE[sidebar]]
があれば有用かもと指摘したものがある。
:出典:
[REFS[

-
[DFN[NSHTMLChris]]:
[CITE@en[Netscape & New HTML: lets see some standards.]], 
[DATA(.author)[[[Chris Garrigues]]]],
[TIME(.published)[1994/11/04 0:47:19][1994-11-04T04:47:19]],
[TIME[2024-10-07T08:46:40.000Z]] <https://groups.google.com/g/comp.infosystems.www.providers/c/uKpD25l80Fk/m/vz2XoCS5-AcJ>

]REFS]

]FIG]

** IE エクスプローラーバー

[REFS[
- [34] [CITE[Adding Explorer Bars (Internet Explorer - Browser Extensions)]] <http://msdn.microsoft.com/workshop/browser/ext/tutorials/explorer.asp>
- [35] [CITE[Explorer Bar Style Guide (Internet Explorer - Browser Extensions)]] <http://msdn.microsoft.com/workshop/browser/ext/overview/explorer_bar_style.asp>
]REFS]

[44] [[IE]] は [DFN[[CODE(HTML)@en[[[target]]=[[_main]]]]]] を実装していて、
主たる[[閲覧文脈]]で開くことを指示できました。

[59] [[エクスプローラーバー]]の検索機能に、当時のいくつかの主要な[[検索エンジン]]サイトが対応していました。
通常よりも横幅が狭くても見やすく設計されている他、
[[リンク]]には [CODE[[[target]]=[[_main]]]] が指定されていました。

[31] ''Source Tree'' <http://www.cheztabor.com/SourceTree/index.htm>: [[フレーム]]や[[スタイルシート]]のような [[Web頁]]の[[資源]]構成を [[TreeView]] で表示してくれる。ソース公開、ライセンス不詳。

[32] >>31 [[DOMInspector]] の IE 版を期待したけどそうではないみたい。

[33] ''ieHTTPHeaders'' <http://www.blunck.info/ieHTTPHeaders.html>: [[LiveHTTPHeaders]] の WinIE 版といったところ。ソース非公開の[[無料ソフトウェア]]。

[FIG(quote)[
[FIGCAPTION[
[36] [CITE[過去の秘密]] ([TIME[2009-03-10 09:07:28 +09:00]] 版) <http://www.toyoshima-house.net/diary/aday.cgi?TOP=282>
]FIGCAPTION]

>2001年4月8日之頁
>
・IE6 pb
>ということで、遅れながらも導入。噂のExplorer Barを見てみる。
ってことで、やはりMozillaのside barとほぼ同等のもののようです。
msdnでさっと調べてみたら、サンプルを発見。Mozillaと同様に
Java Scriptを使って特定のURLをbarとして放り込んでやることが
できます。ページ自体はMozillaと共用可能。追加script側で個別に
対応してやればおっけーです。試しにmozillaで使ってるアンテナの
side barを放り込んでやったら、うまく動いています。
bar用ページを作る際の主な注意点はmozilla同様にリンクは
target="_content"の属性を追加しないと、bar側のページで
移動してしまう、という事くらいですか。
>#Beアンテナを追加するサンプルはこちら(Mozilla/IE6の両対応の
サンプルにもなってますんで)。
]FIG]

** WebTV の [CODE(HTMLe)[sidebar]] 要素

[22] [[HTML]] の [DFN[[CODE(HTMLe)[sidebar]] [[要素型]]]]は、
[[WebTV]] が [[Sidebar]] として表示する[[内容]]を入れるものとして実装していました。

:出現できる文脈:[CODE(SGML)[%[[block]]]] な文脈
:[[内容模型]]:[CODE(SGML)[([VAR[%[[block]]]]* | [VAR[%[[inline]]]]*)]]
:[[DOM]] [[界面]]:[CODE(DOMi)[[[HTMLElement]]]]
:[[属性]]:
,属性名,属性値,既定値,説明,出典
,[CODE(HTMLa)[[[align]]]],,,,非標準
,[CODE(HTMLa)[[[bgcolor]]]]   ,[CODE(SGML)[%[[Color]]]],(透明?)    ,[[背景色]],非標準,[WebTV]
,[CODE(HTMLa)[[[width]]]]     ,   ,(自動?)    ,横幅,非標準,[WebTV]

[23] [[WebTV]] では、画面左側にレンダリングされます。

;; [30] 同じページの一部分が[[サイドバー]]となるのですから、
現在で言う [CODE(HTMLe)@en[[[iframe]]]] や [CODE(CSS)@en[[[overflow]]]] による[[スクロール]]可能領域にも近いかもしれません。

[REFS[
- [24] ''The <sidebar></sidebar> Element - WebTV MSN TV Tag - Separates an area on the left side of the page similar to frames'' <http://webdesign.about.com/library/tags/bltags-sidebar.htm>
-- [67] 消滅確認 [TIME[2024-08-21T13:11:41.600Z]]
-- [68] 
[CITE[The sidebar Element - WebTV MSN TV Tag - Separates an area on the left side of the page similar to frames]], [TIME[2024-08-21T13:11:32.000Z]], [TIME[2005-09-21T11:16:09.294Z]] <https://web.archive.org/web/20050921111300/http://webdesign.about.com/library/tags/bltags-sidebar.htm>

]REFS]

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[sidebar]]
:日付:[TIME[2000]]
:説明:
[[WebTV]] は 
[CODE[sidebar]]
を実装していた。
[[サイドバー]]として画面左側に表示するものだった。
:出典:[[<sidebar>]]

]FIG]

** DTBook の [CODE[sidebar]] 要素

[SEE[ [CODE[aside]] ]]

** IE6 Media Bar

[54] [[IE6]] は[[エクスプローラーバー]]の一種として [DFN[[[Media Bar]]]]
を実装していました ([[IE7]] で削除)。

[57] [CODE(HTML)@en[[[target]]=[[_media]]]] で [[Media Bar]]
で開くことを指示できました。

[REFS[
- [55] [CITE@en[mediaBar Behavior ()]] ([TIME[2016-02-25 16:07:30 +09:00]] 版) <https://msdn.microsoft.com/ja-jp/ms533791>
- [56] [CITE@en[Using the Media Bar in Internet Explorer]] ([TIME[2016-02-25 16:07:42 +09:00]] 版) <https://msdn.microsoft.com/en-us/library/ms533101(v=vs.85).aspx>
]REFS]

** Mozilla のサイドバー

- [1] ''Netscape 6/Mozilla Sidebar Tab List new arrival'' <http://mozilla.to/mozx/sb/index.php?lang=ja>
- [2] ''How to use - Sidebar (CBUG 2002/ 2/11) - Mozilla.jp'' <http://www.mozilla.jp/cbug/20020211/sidebar>
- [3] ''Netscape 6 My Sidebar のホームページ'' <http://wp.netscape.com/ja/sidebar/index.html?cp=ijasmix>
- [4] ''XUL Apps > Sidebar Window - outsider reflex'' <http://white.sakura.ne.jp/~piro/xul/_sidebar.html> Sidebar を別窓で
- [5] ''Threaded Index (moz-users ML)'' <http://www.mozilla.gr.jp/ml/logs/moz-users/1800/thread.html> 1824〜 (spam よけで認証が必要。名前: mozilla, 合言葉: mozilla)
- [6] で、 >>5 によれば、 Sidebar から主窓の色々を取得するには、 [CODE(JS)[window._content]] が使えるけど、非同ドメインだと安全上使えない、と。回避策は [[chrome:]] を使う。
- [7] ''Mozilla Evangelism Sidebars'' <http://mozilla-evangelism.bclary.com/sidebars/> の CSS とか DOM の索引の Sidebar が便利。
- [8] [[XPInstaller]] を使って Sidebar を追加するにはどうしたらいいですか?
- [9] >>8 [[mozdev.org]] の幾つかの Sidebar を使うソフトウェアでは、 xpi で入れた後に利用者が手動で installer を実行しています。 installer の addpanel.js は ''mozdev.org - CVS Web: moji/source/moji/content/'' <http://www.mozdev.org/source/browse/moji/source/moji/content/> などにあります。
- [10] >>9 addpanel.js の license は明記されていませんが、 ''mozdev.org - www: copyright'' <http://www.mozdev.org/copyright.html> によれば [[MPL]] になります。
- [11] >>9 だけどうちの Moz 1.3a では動きませんでした。
- [12] >>8-11 普通なら [CODE(JS)[window.sidebar.addpanel()]] で用は足りるんですけど、 [[chrome:]] だとこれで追加できません。困るなあ。
- [13] ''window.sidebar'' <http://mozilla.org/docs/dom/domref/dom_window_ref116.html#1021427>
- [14] Sidebar のようなものって、例えば [[IE]] の [[Explorer Bar]] とか、前からあったんだけど、実はもっと前、 [[Mosaic]] variants の時代にもそれっぽいのを実装したやつがいたんだ。だけど、それは普及しなかったからやがて忘れられた。
- [15] >>14 Mosaic から今まで、ブラウザの界面はまったく進歩していないという人もいるけど、これって決して空白の10年なんかじゃないんだよね。みんな忘れちゃってるだけなんだ。中にはほんとに駄目で消えていったアイデアもあるだろうけど、本当に有用なのに[[ブラウザ戦争]]とかのせいで忘れられたアイデアもきっとあるはず。新しいアイデアを考えて実装するのはもちろん、そういうのもどんどん発掘していってほしい。

[20] [DFN[[CODE(JS)@en[[[window.sidebar]]]]]]
に[[サイドバー]]関係の [[API]] が用意されていました。

[61] 
例えば [CODE(DOMm)@en[addMicrosummaryGenerator]] [[メソッド]]がありました。

** 閲覧文脈キーワード [CODE(HTML)@en[_content]]

[45] [[Gecko]] は [CODE(HTML)@en[[[target]]=[[_content]]]] を実装していて、
主たる[[閲覧文脈]]で開くことを指示できました。

[41] [[Gecko]] には [CODE(JS)@en[[[window]].[[content]]]] / [CODE(JS)@en[[[window._content]]]] があります。

[42] [CITE@ja[content - DOM | MDN]]
( ([TIME[2012-08-03 21:04:44 +09:00]] 版))
<https://developer.mozilla.org/ja/docs/DOM/window.content>

[43] 以前は [[Chrome]] でも使えていた気がしますが [SRC[要出典]]、今は使えません。 [TIME[2013-01-13T03:27:49.300Z]]

** navLinkSidebar

[58] [[navLinkSidebar]] は、 [[Mozilla Suite]] の[[拡張機能]]として実装された[[サイドバー]]でした。
主たる[[閲覧文脈]]で表示した[[文書]]に含まれる [CODE(HTMLe)@en[[[link]]]] 
[[要素]]から、[[目次]]に相当するものを探して自動的に[[サイドバー]]内で表示するものでした。

** HTML5 の [CODE(HTMLe)@en[sidebar]] 要素

[19] [[Web Applications 1.0]] 
案で[[内容]]そのものではない情報を入れる[[要素型]]として検討されていましたが、
2005年4月以降の原案では [CODE(HTMLe)[[[aside]]]]
に要素型名が変更されています。

[28] これは「sidebar」という名前こそ共通していますが、本項の「サイドバー」
とは異なるものです (し、それで混同を防ぐため改称されています)。

;; [29] [CODE(HTMLe)@en[[[aside]]]] も参照。

[27] 似た要素型として [[HTML 3]] の [CODE(HTMLe)[[[banner]]]],
[[HTML 4]] の [CODE(HTMLe)[[[map]]]],
[[Web Applications 1.0]] の [CODE(HTMLe)[[[header]]]],
[CODE(HTMLe)[[[footer]]]] があります。

[REFS[
- [25] [CITE['''['''whatwg''']''' [wa1] 2.4.10. The address element]] 
<http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2005-March/003349.html>
- [26] [CITE['''['''whatwg''']''' [wa1] 2.4.10. The address element]] 
<http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/2005-March/003355.html>
]REFS]

** リンク型 [CODE(HTML)@en[sidebar]]

[21] [[リンク型]] [CODE(HTML)@en[[[sidebar]]]] が使われることがありました。
[[Firefox]] が実装していました。

[37] [[HTML5]] で標準化されました。

[40] [[サイドバー]]内の[[閲覧文脈]]は、
[DFN[[RUBYB[二次的閲覧文脈]@en[secondary browsing context]]]]として特別な[[最上位閲覧文脈]]のようなものに位置付けられました。

[38] しかしあまり実装されませんでした。更に [[W3C]] [[HTML WG]]
で政争の具にされ、ますます状況は混迷しました。

[REFS[
- [46] [CITE@en[Web Applications 1.0 r6483 Move rel=sidebar to the wiki.]]
( ([TIME[2011-08-17 13:45:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6482&to=6483>
- [48] [CITE[Bug 11183 – "sidebar" might not be a proper use of a link relation]]
( ([TIME[2011-08-27 21:51:01 +09:00]] 版))
<http://www.w3.org/Bugs/Public/show_bug.cgi?id=11183>
- [47] [CITE[IRC logs: freenode / #whatwg / 20110817]]
( ([TIME[2011-08-27 21:50:37 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110817>
- [49] [CITE@en[Web Applications 1.0 r6994 Remove a paragraph from the W3C copy on chair request.]]
( ([TIME[2012-02-15 05:29:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6993&to=6994>
- [50] [CITE@en[Web Applications 1.0 r7794     Rewrite the link following stuff to better match reality.]]
( ([TIME[2013-04-09 05:41:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7793&to=7794>
- [52] [CITE@en[rel-sidebar · Microformats Wiki]] ([TIME[2013-09-18 00:51:51 +09:00]] 版) <http://microformats.org/wiki/rel-sidebar>
]REFS]

[51] [CITE@en[862147 – drop support for window.sidebar.addSearchEngine (and window.sidebar in general)]]
( ([TIME[2013-11-13 21:06:41 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=862147>

*** 削除

[REFS[
- [39] [CITE@en[Remove secondary browsing contexts (<link rel="sidebar">) · whatwg/html@9ff8553]] ([TIME[2016-02-25 15:47:03 +09:00]] 版) <https://github.com/whatwg/html/commit/9ff855330bbc1316bfd3959ae4cb98d8d6c647a1>
]REFS]

[53] [[HTML Standard]] からは削除されましたが、
[[microformats wiki]] からは削除されていませんので、
利用が禁止されたわけではありません。
しかし [[microformats wiki]] の参照先は [[HTML Standard]]
なので、定義が不明となってしまっています。
[TIME[2016-02-25T07:01:48.800Z]]

** Chrome サイドパネル

[64] 
[[令和時代]]になって [[Chrome]] は[[サイドパネル]]と称して[[サイドバー]]機能を標準搭載するようになりました。

[65] 
[[Google]] による[[画像検索]]などに使われています。

;; [66] 正直あまり使い勝手はよくありません。

*メモ

[17] [CITE@ja[スラッシュドット ジャパン | サイドバー症候群]] ([TIME[2007-04-25 20:54:44 +09:00]] 版) <http://slashdot.jp/article.pl?sid=07/04/24/2316222&from=rss>
([[名無しさん]] [WEAK[2007-04-25 11:55:45 +00:00]])

[FIG(quote)[
[FIGCAPTION[
[60] ([TIME[2016-03-19 16:57:18 +09:00]] 版)
<https://pukiwiki.logue.be/>
]FIGCAPTION]

> 
> <link rel="sidebar" href="https://pukiwiki.logue.be/SideBar" type="text/html" title="サイドバー"/>

]FIG]

[62] [CITE@en[862147 - remove window.external.addSearchEngine]]
([TIME[2018-01-07 14:06:20 +09:00]])
<https://bugzilla.mozilla.org/show_bug.cgi?id=862147>

[63] [CITE@en-US[翻訳もSNSもこれひとつで!ウェブパネル機能! | Vivaldi日本語公式ブログ]]
([TIME[2019-11-21 17:20:37 +09:00]])
<https://jp.vivaldi.net/vivaldi_tips/vivaldi_tips_webpanel/>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)