朝顔日記2006/9月 -

Firefox 2.0 のタブのクローズボタン

publish
2006-09-03T00:26:38+09:00
tags
はてぶ

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

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

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

昨日いろいろ余計なものを着けたと書きましたが、えむもじら「 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 初心者に親切であるとはとても思えません。

[ 「Firefox 2.0 のタブのクローズボタン」へコメントをつける ]

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060903a.html

自分のサイトで検索エンジンを提供しよう

publish
2006-09-05T12:11:18+09:00
tags
はてぶ

以前、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 属性の部分を再掲して説明します。見やすいように、&amp; の前に改行を入れてありますが、実際は改行無しになります。


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"

強調部分をよく見て適切なものに書き換える必要があります。ちなみに、{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)

[ 「自分のサイトで検索エンジンを提供しよう」へコメントをつける ]

この記事へのツッコミ

1: 拡張あれこれ (2006-09-06T13:15:03+09:00)
やっと謎が解けた思いです.
私のサイトの検索拾っていく人がいるかは疑わしいのですが少なくとも自分ではよく自サイト検索するので有り難うございます.
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060905a.html

デフォルトスタイルに Firefox の例のマスコットを使ってみた

publish
2006-09-06T15:54:45+09:00
tags
はてぶ

各地既報の 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 の例のマスコットを使ってみた」へコメントをつける ]

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060906a.html

Yahoo!天気情報の microsummary generator を作ってみた

publish
2006-09-09T14:25:06+09:00
tags
はてぶ

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系のスクリーンショット

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

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

3.0系のスクリーンショット

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

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

で、以下がブックマークツールバーに配置したYahoo!天気情報 - 東部(富山)の天気のスクリーンショットです。表示が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 がたまに変わるためかうまく動作しない場合があったので、若干変更した。

[ 「Yahoo!天気情報の microsummary generator を作ってみた」へコメントをつける ]

トラックバック

1: しげふみメモ/feed meterランキングのMicrosummary generatorを作成 (2007-10-30T22:45:38+09:00)
RSS フィード メーター - ランキングのサイト別ページのランキングの Microsummary generator を作ってみました。ブックマークのライブタイトルで対象サイトのランキングが確認できるようになります。ライブタイトルと Microsummary については、以下のページが参....
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060909a.html

Yahoo!オークション用の microsummary generator

publish
2006-09-14T19:23:47+09:00
tags
はてぶ

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)

[ 「Yahoo!オークション用の microsummary generator」へコメントをつける ]

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060914a.html

閉じたタブを復元するボタンを追加する userChrome.js スクリプト

publish
2006-09-17T14:50:07+09:00
tags
はてぶ

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 というのがあり、それを使うと閉じたタブの履歴を出して、そこから開き直すといったようなこともできます。

[ 「閉じたタブを復元するボタンを追加する userChrome.js スクリプト」へコメントをつける ]

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060917a.html

Tab Overflow 用ユーザスタイルシート

publish
2006-09-19T12:42:38+09:00
tags
はてぶ

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

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

標準装備された Tab Overflow のスクリーンショット

標準装備の 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;
}

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

スタイルを適用した Tab Overflow のスクリーンショット

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

タブがひとつだけの時のスタイル適用画面のスクリーンショット

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

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

[ 「Tab Overflow 用ユーザスタイルシート」へコメントをつける ]

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060919a.html

Stylish のスタイル管理画面をまだらに

publish
2006-09-27T18:22:47+09:00
tags
はてぶ

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 いいよ をどうぞ。

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

[ 「Stylish のスタイル管理画面をまだらに」へコメントをつける ]

この記事へのツッコミ

1: おおやま (2006-09-27T18:55:30+09:00)
 エントリーと関係ない話で申し訳ないのですが、最近の朝顔日記ですが、Firefox 1.5.0.7 で閲覧しようとすると以下のエラーにて閲覧することができません。

XML パースエラー: 要素が見つかりません。
URL: http://diary.noasobi.net/2006/09/diary_060927a.html
行番号: 1, 列番号: 1:
2: くでん (2006-09-27T18:57:03+09:00)
配色としてはJaneStyleから持ってきているので、それと同じ感じにしようとしたら偶数の列の#efefffに加えて奇数の列が#feffffですね。
treechildren#styles-children::-moz-tree-row(odd) { background-color: #feffff; }
プロパティについては
http://www.xulplanet.jp/xultu/treestyle.html
OS XのSafariがこういう列ごとに互い違いの配色を部分的に使っててかわいいので、需要がありそうなユーザスタイルなんですが……
http://images.apple.com/jp/safari/images/index_bookmarkwindow.jpg
3: のり (2006-09-27T21:51:15+09:00)
以前このようなことがありました。
http://diary.noasobi.net/2005/07/diary_050718a.html
まさか、また Firefox のバグということはないと思いますが、なんなんでしょうね。私のところでは再現しないんですよ。
「要素が見つかりません。」とのことですが、ソースを開いても中は空っぽなんでしょうか?
また、最近閲覧できないとのことですが、アクセスすると必ずパースエラーが発生しますでしょうか?
4: のり (2006-09-27T21:57:02+09:00)
web ページでも table なんかでこういうスタイルが手軽に使えるようになるといいんですがねぇ。>くでんさん
5: iimu (2006-10-02T17:24:10+09:00)
CSS3にも:nth-child()擬似クラスというのがありますので、期待しましょう。
http://zng.info/specs/css3-selectors.html#nth-child-pseudo
6: のり (2006-10-02T17:46:53+09:00)
Gecko エンジンの場合だと、support for :nth-*() pseudo-classes(bug 75375) とか、add support for pseudo-classes accepting argument(s)(bug 75374)辺りだと思うんですが、なかなか進展がないようですねぇ。
7: おおやま (2006-10-02T23:31:23+09:00)
 エラーの件ですが、ソースを表示させると空になってますね。
 リロードすると文字化けをおこして CSS も反映されずに表示されることもあります。
8: おおやま (2006-10-02T23:46:59+09:00)
 それと文字化けしているときの文字コードが Shift-JIS になっています。

 application/xhtml+xml でコンテンツを送っているのに先頭行に xml 宣言が入っていないことって関係ないですかね?

 ローカルに落としてみて、text/html で表示させるとちゃんと表示されます。
9: のり (2006-10-03T16:39:30+09:00)
application/xhtml+xml を解する UA には、xml 宣言を出力し、application/xhtml+xml として送出し、解さない UA(IE とか)には xml 宣言無しで、text/html で送出しているはずなんですが…。
文字化けしているときに、css が適用されないのは、文字化けしてからだと思うので、手動でエンコードを utf-8 にすれば、治ると思われます。
もしよければ、不調の時に
http://web-sniffer.net/
を使って、帰ってくる HTTP Response Header のおかしな点などがあれば教えていただけると原因究明の役に立つかもしれません。
よろしくお願いいたします。
10: おおやま (2006-10-03T20:53:05+09:00)
HTTP/1.x 200 OK
Date: Tue, 03 Oct 2006 11:47:07 GMT
Server: Apache/2.0.59 (Unix) PHP/5.1.6
X-Powered-By: PHP/5.1.6
Last-Modified: Tue, 03 Oct 2006 11:47:05 GMT
Etag: "542c538ba561a678cf3c9993cdec25ba"
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xhtml+xml; charset=UTF-8

 こんな感じです。
11: おおやま (2006-10-04T07:56:50+09:00)
 どうもメールで送ったスクリーンショットで表示されるときは、head 要素がちゃんと解釈されていないですね。

 それと「ページの情報」で確認してみたら content-type が text/html で、広報互換モードで表示されているようです。

 ソースを表示したら正常に表示されています。なんとなくですが、Gecko のバグっぽい気がしてきました。
12: のり (2006-10-04T11:08:20+09:00)
web-sniffer の結果は、正常に表示される時のもののように見えますが、異常があった時のものでしょうか。もっとも、web-sniffer を経由したときは正常だったということも考えられますが。であれば、Live HTTP Headers あたりを使って監視しないと駄目かなぁ。
送っていただいたスクリーンショットを見る限りは、head 要素の一部が欠落しているような感じですねぇ。
あと、気になるのは、ページ末尾に HTTP Response Header と思われる文字列が混入している事ですね。何でそんなことになるのか想像がつきません。

もう少しお付き合いいただけるのであれば、拡張等、すべて無効にした状態、あるいはセーフモードで試して頂けるでしょうか。もしかしたら、なんかの拡張が悪さしているということも考えられます。
13: おおやま (2006-10-04T16:18:50+09:00)
 すいません。
 ログは Live HTTP Headers を使用して取りました。http://web-sniffer.net/ では帰ってくるログはエラーメッセージのものでしたので。

 ちょっとこれから拡張周りを探ってみます。
14: おおやま (2006-10-04T16:57:12+09:00)
 結論だけ。
 NoScript で朝顔日記の JavaScript を許可してやると正常に表示されるようになりました。

 あとの詳細はわかりかねます。
15: おおやま (2006-10-04T17:20:25+09:00)
 ちなみに NoScript を無効にしても、やはりエラーメッセージ画面になっていました。
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/09/diary_060927a.html