Introduction of Ez Sidebar & Sidebar Window イージーSidebar&Sidebarウィンドウの紹介

Mozilla.Party.jp 5.0のXULコンテスト用に作成した、イージーSidebarSidebarウィンドウの資料です。

コンセプト

Sidebarを「思い通りに使える」ようにする。

概要

この拡張機能は、Sidebarを別ウィンドウに分離して表示する機能と、ドラッグ&ドロップによる任意のパネルの追加・並べ替え機能を提供します。

SidebarはWebブラウズを補助する機能をウィンドウ左端に表示しておく機能で、Internet ExplorerやOpera、 Safariなど、他のWebブラウザも同様の機能を備えています。しかしMozillaのSidebarは残念ながら十分には洗練されていません。もっと「思うとおりに」気軽にSidebarを使いこなせないものだろうか。そう考えて作成したのが、この拡張機能です。

「Sidebarウィンドウ」はバージョン2までの名称で、Seamonkey用に開発したものです。バージョン3以降は「イージーSidebar」と名を改め、Firefox専用に開発しています。

Sidebarの改善ポイント

標準のSidebarでストレスが溜まるポイントについて、私は特に、「Sidebarが固定されていること」「カスタマイズがしにくいこと」の2点に着目しました。これはどちらもアフォーダンス特性を生かし切れていないせいで起こる問題だと、私は考えています。

「ウィンドウ一体型で、表示位置も固定されている」という問題

SeamonkeyでもFirefoxでも、Sidebarはブラウザウィンドウの内側、Webページ表示領域の左に縦長に表示するよう固定されています。

注目したいのは、タイトルバーがあり、その右上にクローズボックスがあるというところです。この外見は「ウィンドウ」に酷似しています。ウィンドウに似ているのだから、このSidebar部分は自由に移動できるはずだ……このように「形状・外見から心理的な誘導がはたらくこと」を「アフォーダンス特性」と言います。しかし実際には、Sidebarにはそのような機能がありません。「できそうなのにできない」せいで、ストレスが生じてしまうのです。

また、実用上でも、Sidebar表示中はページの表示幅が狭くなるために内容が読みづらくなりますし、ブラウザ内でタブを多数開いている場合、タブの数に比例して開閉時の反応速度が著しく低下します

この問題を解決する方法として私は、Sidebarをブラウザウィンドウから独立させて、自由に配置できるようにすることを考えました。

Sidebarを自由に配置できるようにする――分離可能なSidebar(Sidebarの別ウィンドウ表示)の実現

この拡張機能では、ブラウザウィンドウ内のSidebarは常に非表示にしておき、ブラウザウィンドウからSidebarに関する部分のコードだけを抜き出したものを別のウィンドウで表示する、という方法をとっています。つまり、本当にSidebarを分離するのではなく、互いの表示・非表示を排他的に制御することで「一つのSidebarをブラウザにくっつけたり分離したりしている」ように見せかけるわけです。

違和感なく動作させるための工夫

ただ、こうしてSidebar部分のコードだけを抜き出して作ったウィンドウはそのままではまともに動作しません。以前、同じアプローチで作られた拡張機能を見かけましたが、検索パネルが全く動作しないなどの問題があり、実用には耐えませんでした。

この拡張機能では、組み込まれる各種のパネルに対して、まるで自分が通常通りにブラウザウィンドウの中で開かれているかのように見せるために、少々イリーガルながらいくつかの対策を施しています。

メソッド・関数の書き換え

まず基本として、ブラウザウィンドウ内で呼ばれることを前提に書かれている関数について、「現在のウィンドウ(つまり分離されたSidebar)」ではなく「ブラウザウィンドウ」を対象に動作するように上書きしています。ページ表示領域のコンテナを返す関数getBrowser()、渡されたURIのリソースを読み込むloadURI()、新しいタブを開くopenNewTabWith()などがその対象です。

プロパティの書き換え

また、関数・メソッドだけでなく各種のグローバル変数・プロパティについても書き換えを行っています。先に述べた「同じアプローチで作られた拡張機能」との最大の違いはこの部分です。

MozillaやSidebarパネルで使われている多くの関数・メソッドは、ページ表示領域を取得するために_contentなどのグローバル変数(windowオブジェクトのプロパティ)を参照しています。この拡張機能では、このような変数をObjectクラスの隠しメソッドである__defineGetter__()を使ってゲッター(プロパティのように見えるが、プロパティとしてアクセスされた時には何らかの処理を行って結果を返すという特殊なメソッド)として再定義することで、常に最全面のブラウザウィンドウの内容領域を参照したり、ブラウザウィンドウがない場合は自動的にブラウザを開いたりといった動作を実現しています。

「カスタマイズしにくい」という問題

パネルの順番の入れ替えに関しても、アフォーダンス特性を生かし切れていない面があります。

SeamonkeyのSidebarは各パネルの見出しが縦に並んでいて、つまんで操作できるような機能を連想させます。実際、見出しをクリックすれば表示するパネルが切り替わります。しかし、そこから自然とわき起こる「つまんで移動できそうだ」という連想に対しては何も反応がありません。ここでも、「期待を裏切られた」というストレスが発生してしまいます。

機能的にも、パネルを並べ替えるためにわざわざ設定ダイアログを開いて専用のボタンを使わなければなりません。また、パネルを増やすには専用に制作されたページを決まった方法で取り込む必要があります。これでは、気軽にとっかえひっかえする使い方はできません

Firefoxの場合、Firebird 0.7よりも以前のバージョンではユーザーによるカスタマイズが全くできませんでした。Firebird 0.7以降ではブックマークの内容をSidebarパネルとして表示する「Webパネル」機能が実装されていますが、ブックマークのプロパティという直感的でない奥まったところを編集しなければならなかったり、ユーザー設定ツールバーを活用するなどの工夫を凝らさなければ便利には使えなかったり、といった所にまだまだ改良の余地があります。

カスタマイズを容易にする――ドラッグ&ドロップによる直感的な操作への対応

XULではondraggestureondragoverondragdropなどのイベントハンドラと、「nsDragAndDrop」ライブラリを組み合わせることで、ドラッグ&ドロップ時の動作を簡単に定義できます。この拡張機能においても、リンクやブックマークのドラッグ&ドロップによるパネルの追加操作や、パネルの順番の入れ替え操作を実現しています。

これにより、Sidebarの利用の幅は大きく広がります。パネルの追加・削除が容易になることで、一時的なページ置き場――ページホルダーとかプレースホルダーと呼ばれるような形での利用もできるでしょう。また、更新チェック機能を含む「アンテナ」(はてなアンテナなどが有名ですね)や、「連邦」「TECHSIDE」「カトゆー家断絶」などのいわゆる個人ニュースサイトをそのままSidebarパネルとして利用することもできます。

おわりに

Webブラウザに限りませんが、アプリケーションソフトはユーザーにとって空気のような存在であるのが望ましいです。できないことがあるのは当たり前ですが、「できそうに見えてできない」「見えているのに使えない」というのはストレスの元になります。

ブックマークなどの部分では「できそうなことは大概できる」ようになっているのに対して、Sidebarの実装は極端にお粗末なまま捨て置かれていると言わざるを得ません(Firefoxに至っては、当初はサードパーティ製のパネルの追加機能すら削除されていたのが後にやっと復活されました)。Sidebarが使い辛いからユーザーは見向きもしなくなり、ユーザーが使わないからSidebarはますますおざなりにされる。私にはこれは、Mozillaそのものが陥っていた(陥っている)悪循環の縮図のようにも思えます。

拡張機能の作者にとって、FirefoxのSidebarは、Seamonkeyのものに比べて格段に扱いやすく(独自のパネルを組み込みやすく)なっています。RSS Reader Panelなどの第三者の手による有用な拡張機能も、そのような改善がなければ登場し得なかったのではないでしょうか。それをもう一歩推し進めて、一般のユーザーにとっても使いやすいSidebarにする。この拡張機能が快適なWebブラウズの手助けに少しでもなれれば幸いです。