朝顔日記 - 2006/9月

Firefox 2.0 で搭載され、おそらくデフォルト設定で有効になると思われるタブごとに付くクローズボタンの是非が各地で話題になっているようなので、私もちょっと書いてみましょう。

その前に、Firefox のタブをどうやって閉じるかってな記事を以前にもなんか書いた記憶があるのでそれをまず読み直してみます。ついでに関連リンクなど。

• 朝顔日記 - どうやって Firefox のタブを閉じるか
• 新秀の介の日記(2005-09-17)
• 「タブを閉じる」の UI - えむもじら

タブにクローズボタンは不要派の拡張あれこれさんは次のように主張されます。

昨日いろいろ余計なものを着けたと書きましたが、えむもじら「 Firefox 2.0 Beta 2 のタブ」（2006年9月1日(金)） でまずはインストールしてから発言せよ．初心者が直感的に理解しやすいようにであると書かれています．

筆者はそうは思えないのです．もし初心者に優しくと言うのであればもっと早くから実装しているはずで、最初はごたごたない方が良いと言う判断があったからだと思えます．マウスの中ボタン（Windows の場合）で簡単に閉じられるのですからわざわざボタンを付けて外観を損なう必要がないと判断したのではないでしょうか．これは Opera、IE 7、Safari がそうだからと言うことが強く影響しているのではないかと勘ぐっています．もっとも Opera はクローズボタンを各タブに付けない設定があるのでどうせならこれも導入して貰いたかった選択肢です．Firefox 2 Beta 2 のオプションのタブでは項目が減っているし当然その選択はありません．

Firefox 1 系は今から思うとタブブラウザではなかったと思います。タブも使えるブラウザ位かな。そのくらいの位置だということを設定画面も物語っていると思います。というのは、1.0 系ではタブブラウズのための設定はいわゆる隠し設定で、browser.tabs.showSingleWindowModePrefs を有効にしないと設定用の UI が表示されないというものでした。ようやく 1.5 系になって UI はデフォルトで表示されるようになりましたが、相変わらずデフォルト設定はタブではなく、ウィンドウで開くようになっています。なぜか？ それはタブブラウズをデフォルトにするためにはそれに必要な機能が装備されていなかったからだと私は思います。私が考えるタブブラウザに必要な装備は以下のようなものです。

• すべてのタブにアクセスするための UI
• タブを開くための UI
• タブを閉じるための UI
• タブを閉じるのアンドゥ

Firefox 2.0 ではとりあえずこれらがすべて装備されるのでようやく堂々とタブブラウザが名乗れるようになったのではないかと思っています。もちろん、各種拡張機能を導入したりすることで Firefox 1.0 の頃からでも十分にタブブラウザとして働かせることは可能でしたが、2.0 になってようやく素の Firefox でタブブラウザになったと思うのです。拡張機能なしではタブブラウザとして使えないということであれば、とても初心者の人にタブブラウザとして勧めることは出来ないでしょう。初心者は拡張機能で機能を拡張できることも知らないわけですから。

IE ベースであっても Sleipnir などタブブラウザを使っていたユーザであればタブブラウズの何たるかをもちろん知っているでしょうが、素の IE を使っている人に乗り換えてもらおうと思えばよほどわかりやすくしておかないと、タブブラウズの何たるかすらわかってもらえずにアンインストールされるのが関の山です。ましてや、もうじき IE7 によってタブブラウザが一般的になろうかという昨今、少なくとも IE7 よりもわかりやすいインターフェースもしくは同等のインターフェースが必要なのではないでしょうか。

拡張あれこれさんは、これは Opera、IE 7、Safari がそうだからと言うことが強く影響しているのではないかと勘ぐっています と書かれているのをみると Opera や IE7、Safari の UI を真似ることを嫌っておられるように思えますが、私はいいところはどんどんパクればよいと思います。

ヘビーユーザーからしてみれば、余計な UI のようであっても初心者にはありがたい UI だと思うし、そういう UI が必要ないヘビーユーザー向けに about:config などから設定できる各種隠し設定も用意されています。タブの閉じるボタンに関して言えば、browser.tabs.closeButtons が用意されていますね。これをデフォルトで閉じるボタンを表示しないようにしておいて、隠し設定で表示するようにするとかは Firefox 初心者に親切であるとはとても思えません。

以前、OpenSearch 形式の検索プラグインを用意しておいてページになんか書いておくとと、来たるべき Firefox 2.0 や IE7 なんかだとそれを自動検知して、ブラウザの検索エンジンに追加できるようになって、そのサイトをよく利用する人に喜ばれます（本当か）というようなことを、朝顔日記を OpenSearch Autodicovery 対応にや、Re:Firefox 2 の検索エンジン（もしくは SearchPlugin Generator） などで書きました。CMS や Blog サービスなんかを使っていれば、システム自体に検索機能が備わっていることが多くその実現は容易なわけですが、システムに検索機能が備わっていない場合はどうしたらいいでしょうか。そういう場合は、Google の特定のサイト内検索の機能を使えばよいのです。

実は、Firefox 2.0 が出たらネタにしようと思って以前から作って一時は密かに配布もしていた朝顔日記サイト内検索 by Google があるのでそれをご披露してみましょう。:p)

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/" xmlns:os="http://a9.com/-/spec/opensearch/1.1/">
<os:ShortName>朝顔日記(Google)</os:ShortName>
<os:Description>朝顔日記サイト内検索(Google)</os:Description>
<os:InputEncoding>UTF-8</os:InputEncoding>
<os:Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAAhFBMVEUWJl7///8xZtoYQc5UqfOAl+QaQcY9guUjO4whUdRYddthwftKluwiSdAqWNZScdoxTa9La9kmTdEpOGtmzP85deBRo/BHj+qUqOgeRc1evPktX9ghStZatfcnTtNixPwgOpIWKGWGm+UpVNVKmu40bd1ChOUyWdg7eeEvYtlXr/RIkurYoaDoAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEyLzAxLzAyE1rwngAAACF0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgNC4w6iYndQAAAJJJREFUeJxdzlsTgiAQhmENO9J22DYLGZZKQKv///8CZXLG926f2YuvKGcV5f01tTxH2CEAMDOkHgmUEMMBQohNBqbUG9QI21pKaay1fYa1ubGrmBu3GsEZ3coa0fzB4qLZM1Od4UohfAIi+QxaGtNo9KQyoK++B+iJYATEtBXiDcOwY9e1KhXnDx+nZzF1iTDrB1V5DvuDWNo8AAAAAElFTkSuQmCC</os:Image>
<os:Url
type="text/html"
method="GET"
template="http://www.google.co.jp/search?q={searchTerms}&amp;sitesearch=diary.noasobi.net&amp;hl=ja&amp;ie=utf-8&amp;oe=utf-8&amp;domains=diary.noasobi.net">
</os:Url>
</SearchPlugin>

os:Image のところには、アイコンをデータスキームで埋め込むか、アイコンの URL を記述しておけばいいようです。自サイトに置いたアイコンを参照してもらってもいいと思いますが、無駄なトラフィックになると思うのでデータスキームで埋め込むといいでしょう。画像をエンコードしてデータスキームにするには、The data: URI kitchen が便利です。

あと、os:ShortName や os:Description なんかを適切なものに書き換えておくのは当然として、os:Url の部分も注意深く見て、自分のサイトに合わせて書き換えてください。

os:Url 要素の template 属性の部分を再掲して説明します。見やすいように、& の前に改行を入れてありますが、実際は改行無しになります。

template="http://www.google.co.jp/search?q={searchTerms}
&sitesearch=diary.noasobi.net
&hl=ja
&ie=utf-8
&oe=utf-8
&domains=diary.noasobi.net"

強調部分をよく見て適切なものに書き換える必要があります。ちなみに、{searchTerms} の部分が入力される検索語に置き換わります。これがないと検索語が Google に渡りません。＞拡張あれこれさん

で、出来上がったら適当な名前を付けて保存します。ここでは、asagaonikki_googleserach.xml とでもしておきます。これをサーバの適当な場所にアップします。ここではルートに置いたことにします。あとは、以下のような記述を html の head 要素のところに書いておきます。

<link rel="search" type="application/opensearchdescription+xml" href="/asagaonikki_googlesearch.xml" title="朝顔日記サイト内検索(google)" />

もちろん、href 属性や title 属性は自分のところのものに合わせてテキトーに書き換える必要があります。

これで html 手書き派のあなた（誰）も、OpenSearch Autodiscovery に対応した UA 向けに自サイトで検索エンジンを提供できるようになります。使う人がいるかどうかわかりませんが、少なくとも自分用としても便利ですよ。:p)

各地既報の Firefox に日本発のマスコット登場！ だれか僕の名付け親になってください!! ですが、せっかくマスコットが出来たのなら使ってみよう企画です。ということでページの背景画像にしてみました。

このマスコットの画像は、「Creative Commons 帰属-非営利-派生禁止 2.1 日本」ライセンスのもとに自由に使ってよいそうなのですが、それを厳密に守るとどうやら画像の大きさを変更したりできないようなので、画像は無加工のままです。まぁそれはいいのですが、ちょっと困ったのが、あなたは原著作者のクレジットを表示しなければなりません というくだりです。背景画像は環境によって常に表示されるわけではないので、どこでこれを明示するかに悩みました。画像そのものに画像のメタデータとしてそういうデータを埋め込むのがスマートな感じですが、変形、加工してはならないそうなので駄目です。

その後ライセンスが変更になったようです。

で、考えたのが画像のメタデータを別のファイルにして用意しておき、これを link 要素で示しておくという方法です。head 要素内に以下のように記述しました。

<link rel="meta" href="style/mascot-front.rdf" title="背景画像 mascot-front.png のメタデータ" />

背景画像 mascot-front.png のメタデータは、mascot-front.rdf にあるよと書いたつもりです。で、mascot-front.rdf の書き方は FOAFとRSSを用いた画像メタデータ -- Image description with FOAF and RSS あたりを参考に捏造してみたのですが、よくわかっていないので変なことをしているかもしれません。:p)

なお、肝心のスタイルですが IE でもマスコットの画像は表示されるのですが、表示位置がアレなことになっています。まぁキニシナイでください。:p)

おまけ(謎)

profile.html

その後、ライセンスが「Creative Commons 帰属-非営利 2.1 日本」 になったようなので、mascot-front.rdf をそのように変更しました。派生禁止が取れたのでこれからは改造することも出来ますね。むふふ。

Firefox 2.0 以降で搭載される機能に microsummary というのがあります。どういった機能かというと通常どこかのページをブックマークしたときは、そのページのタイトルがブックマークのタイトルになるのですが、そのページ用の microsummary generator があれば、ページタイトルではなくページ内の任意の語句などをブックマークのタイトルにして、かつそのページのその部分に変更があれば自動的にブックマークタイトルも変更されるという機能です。

たとえば、オークションに気になる商品があったとしてそのページをブックマークするとします。Yahoo!オークションなんかだと商品名がタイトルになりますね。これだとオークション終了までの残り時間や現在の価格なんかを知りたい場合はそのページを実際に開いてみないとわかりません。しかし、microsummary 対応になっていれば、ブックマークタイトルに残り時間や現在の価格を表示させることが可能になります。

ということで、Yahoo!オークション用の microsummary generator を作ろうかと思いましたが、私はオークションはしないし、汎用的な generator にするにはオークションページの URL を分析する必要があるのですが、なんかいろいろあって難儀そうだったので、別のものを作ってみることにしました。

なんか実用的なのがいいなと考えて選んだのは天気予報。Yahoo!天気情報 の県別表示よりもうひとつ細かい区分の県内の地域別のページ用の microsummary generator です。例えば、Yahoo!天気情報 - 東部(富山)の天気 とかですね。この富山県東部の天気予報のページを元に説明しましょう。

Yahoo! の天気予報を使ったことがある人はご存知だと思いますが、ページには今日の天気、明日の天気、そして週間天気予報が載っています。このうち明日の天気の部分を抜き出すようにしてみました。まずは以下の Yahoo!天気情報用の microsummary generator を Firefox 2.0 Beta2 などの microsummary に対応した UA にインストールします。Fx 1.5 では駄目です。3.0系の Minefield なら大丈夫です。

generator をインストールしたらこれで準備は完了です。Yahoo!天気情報ヘ行ってブックマークしたい自分の住んでいる地域を Firefox で表示させます。で、ブックマークを追加します。2.0系と 3.0系では2006年9月9日現在、UI が異なるのでそれぞれのスクリーンショットを以下に示します。まずは 2.0系です。

2.0系だと、明日の天気の晴後曇の部分がブックマーク追加ダイアログの Name 欄で選択可能になっています。これはもちろん天気が変われば自動的に違うものになります。

次は、3.0系のスクリーンショットです。

3.0系では、Name 欄ではなく、Summary という欄が別途新設されています。もっともどちらも正式版ではないので今後さらに変更があるかもしれません。3.0系ではブックマークの管理が Places というSQLite ベースのものになるので、そこらへんの絡みで UI の違いがあるのかもしれませんね。

さてブックマークの保存先ですが、2.0系と3.0系では挙動が異なるようで、2.0系であればどこに保存してもいいようですが、現状の3.0系はいわゆるブックマークツールバーに置かないと駄目なようです。それもフォルダの中では駄目で、ブックマークツールバーのルートに置く必要があるようです。まぁ、ここらは今後色々変更があるかもしれませんが。

で、以下がブックマークツールバーに配置したYahoo!天気情報 - 東部(富山)の天気のスクリーンショットです。表示がYahoo!天気情報 - 東部(富山)ではなく、晴後雨になっているのがわかるでしょか。

もちろんこのブックマークをクリックすれば、通常のYahoo!天気情報のページへ飛びます。どうでしょ？ 結構便利そうではないですか。

他に実用的なものとしては、sks blog ≫ Firefox 2.0のMicrosummaries generatorを作ってみたに、価格.com の製品情報ページの製品名と最安価格を表示するものなんかがあります。これも結構便利ですね。microsummary 全般の解説については、ブックマークのライブタイトルを実現する Microsummary - えむもじらが詳しいですし、自分で microsummary generator を作ってみようという場合は、Creating a Microsummary - MDC に日本語の解説があります。

自分で microsummary generator を作る場合にもっとも難儀なのが、適用させる、あるいはさせないページを正規表現を使って記述する pages 要素の部分と、抜き出す部分 XPath を使って指定する template 要素の部分だと思うのですが、XPath の記述を補助する便利な拡張機能が、Creating a Microsummary - MDC で紹介されています。XPath Checker がそれですが、これは便利な拡張機能なので、是非インストールしておきましょう。

今日になって、sks blog ≫ Yahoo! ピンポイント天気 マイクロサマリ にピンポイント天気用の microsummary generator が既にあるのに気がつきました。ま、いいか。

Yahoo Weather の html がたまに変わるためかうまく動作しない場合があったので、若干変更した。

Firefox 2.0 以降で搭載される機能に Microsummaries というのがあるわけですが、Yahoo!オークション の microsummary generator を作ってみました。

使い方は、generator をインストールしてヤフオクの気になる商品のページへいってそれをブックマークするだけです。詳しくはこないだ書いた Yahoo!天気情報の microsummary generator を作ってみた とかをご覧ください。なお、Firefox 1.5 系では動作しません。2.0 系や 3.0 系でお試しください。

上記スクリーンショットはブックマークツールバーに配置したYahoo!天気と、幻の焼酎と PowerMac G5 に microsummary を使ったところです。ヤフオク用は、現在の金額、残り時間、商品名の順で表示するようになっています。幻の焼酎を例に取れば、現在の金額が 59,000円で残り時間が4時間ですね。

オークションが終了したりして不要になれば、普通のブックマークと同様削除すれば、なくなります。ブックマークを削除しても generator はなくならないので、generator 自体不要になった場合は、プロファイルの microsummary-generators にある、yahoo-auction.xml を削除すれば OK です。

テスト不十分なのでうまく動かない場合もあるかもしれません。うまく動かないページをご報告いただければもしかすると対処できることもあるかも。私には対処できないかもしれませんが。:p)

Firefox の便利拡張機能 ScrapBook でお馴染みの Gomita さんが、ツールバーボタンの中クリックで閉じたタブを復元するという userChrome.js 用のスクリプトを発表されました。Gomita さんのスクリプトは「新しいタブを開く」を中クリックすることで、いわゆる Undo Close Tab を実現するものです。それにインスパイヤーされて「新しいタブを開く」ボタンではなく、専用のボタンを用意してこれをクリックすることで Undo Close Tab を実現する userChrome.js 用のスクリプト、名付けて UndoCloseTabButton.uc.js なるものをでっち上げてみました。

Firefox 2.0 系以降で搭載される機能を呼び出しているので、Firefox 1.5 系では使えません。

//This script will add "Undo Close Tab" button on the toolbar

(function() {
  var newButton = document.createElement("toolbarbutton");
  newButton.setAttribute("label", "Undo Close Tab");
  newButton.setAttribute("oncommand", "undoCloseTab();");
  newButton.style.listStyleImage = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANBAMAAABiGeI2AAAAA3NCSVQICAjb4U%2FgAAAAGFBMVEX%2F%2F%2F%2F%2FAAD%2FAAD%2FAAD%2FAAD%2FAAD%2FAAD%2FAACiLPTRAAAACHRSTlMAESJEiLvu%2F51AIaUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMTcvMDbCkRaPAAAAIXRFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyA0LjDqJid1AAAAKUlEQVR4nGNQcWBgcWIwL2BgLyaBVAczWMtc0h0YGMPLSxgYGJiMBRgAHdUN4vm5VA0AAAAASUVORK5CYII%3D)";
  newButton.style.padding = "0";

  var urlbar = document.getElementById("urlbar-container");
  urlbar.parentNode.insertBefore(newButton, urlbar.nextSibling);
})();

このまま無改造で使うと、ロケーションバーの右隣に Undo Close Tab 用のボタンが追加されるはずです。ボタンの位置を違う場所にしたい場合は、スクリプト最後の方をテケトーにいじる必要があります。

ボタンのアイコンがかなり手抜きなので、誰かいいのを作ってくださると喜びます。:p)

userChrome.js の使い方については手前味噌ですが、Firefox の拡張機能、userChrome.js の私の使い方をどうぞ。

なお、似たような機能を持ちさらに高機能な拡張機能として、Undo Closed Tabs Button というのがあり、それを使うと閉じたタブの履歴を出して、そこから開き直すといったようなこともできます。

Firefox Builds フォーラムを見ていたら、Tab Overflow Feature. というスレが立っていて、ちょっと面白いユーザスタイルが出ていたのでご紹介。

Firefox 1.5 まではたくさんタブを開いたときに、タブバーに表示しきれない溢れ出たタブにはアクセスできなかったのですが、Firefox 2.0 からはタブバーの両端にスクロール用のボタンが装備され、これを使うことでタブバーをスクロールさせてタブバーから溢れたタブにアクセスできるようになります。この機能がついたことで、ようやく Firefox もタブブラウザに最低限必要な機能が装備されたと言えると思うのですが、実際は結構使いづらいというのが正直なところです。私の場合は、これを使ってスクロールさせることは稀で、タブバーの右端に装備されたタブの一覧を表示させるボタンから表示させたいタブにアクセスすることがほとんどです。

標準装備の Tab Oveflow の機能のどこらへんが使いづらいかというと、おそらく開いているタブの総数がぱっと見わからないということと、現在アクティブなタブがタブバー上でどの辺に位置しているかが把握しづらいからだと思われます。そこで、スレに出ていたユーザスタイルシートの出番です。Frank 氏が出したスタイルに、hhh 氏が追加したものを合わせるとこんな感じになります。まずはスタイル。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-strip  {
  background:none!important;
  min-height: 38px !important;
}
.scrollbutton-up, .scrollbutton-rel-box, .scrollbutton-down {
  display: none !important;
}
arrowscrollbox > scrollbox {
  overflow:auto;
}

で、これを適用させると以下のスクリーンショットのようになります。

スクロールバーを表示することでかなり操作しやすなりました。が、問題点もあって溢れ出るほどタブを開いていない場合に、表示がちょっとアレですねぇ。以下にタブがひとつだけの時のスクリーンショットを載せておきます。

ご覧頂くとわかりますが、タブの高さがやたら高くなってしまうんですねぇ。まぁそうなるように指定しているからなんですが。

まぁ、それにしても面白いアイディアなんで、これを元になんか考えてみようと思いました。

Firefox の外観や閲覧するページの外観をユーザスタイルシートでカスタマイズするのに便利な Stylish という拡張機能があるのですが、管理画面がやや見づらかったので改善するユーザスタイルシートを書いてみました。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
treechildren#styles-children::-moz-tree-row(even) {
  background:#efefff;
  color:#000000;
}

treechildren#styles-children::-moz-tree-row(odd) {
  background-color: #feffff;
  color:#000000;
}

これを使う前は、以下のスクリーンショットのような感じ。

で、スタイル適用後のスクリーンショットは以下のような感じ

Stylish 3.2 以降をお使いの場合は、Stylish Manager striped style | userstyles.org よりお手軽にインストールできます。まぁ、Stylish 使っていない人には用事のないスタイルなんですが。:p)

元ネタは、サイドバーのブックマークや履歴を見やすくする だったりします。多謝。＞くでんさん

んで、そもそも Stylish って何よ？ という方は、スクリーンショットがやや古くなっていますが、Stylish いいよ をどうぞ。

コードをちょっと修正しました。