朝顔日記

iMa さんが、FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」 (インターネット帳面) にて、link 要素を可視化して、Opera のナビゲーションバーのようにしてみせるユーザースタイルを発表しておられますが、私の場合、Link Widgets という Firefox 用の拡張機能を使っているので特に必要ないわけですが、Link Widgets では表示しきれない link 要素（たとえば、スタイルシートとか）をも表示させたかったので、そんなのを書いてみました。

といっても、link要素とCSSのみでナビゲーションを作る で参照リソースとして上げられている /2006/08/18/displaying-link-elements というスタイルシートを全面的にパクっております。head 要素を適当な位置に固定配置して、hover で表示させているのは同様で、その位置をブラウズの邪魔にならないように隅っこに押しやっただけともいいます。:p)

@namespace url(http://www.w3.org/1999/xhtml);

head, link {
  display: none !important;
}

head {
  background: #ffffff !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid red !important;
  overflow:auto !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  display: block !important;
  z-index: 1000 !important;
}

head:hover {
  padding: 1em !important;
  margin-left:2em !important;
  background-image: none !important;
  width: 30% !important;
  height:100% !important;
}

head:hover link[href]{
  display: list-item !important;
  margin-left:2em !important;
}

link:after {
  content: attr(title) " (" attr(rel) attr(rev) ")" !important;
}

このユーザースタイルを導入すると、右上の角に小さい四角のエリアが表示されますが、これにマウスを重ねると、link 要素がすべて可視化されて、リストのように表示されます。以下そのスクリーンショットのサムネイルです。等倍画像へリンク（約17KB）しています。

ソース表示画面でも小さい四角が表示されたりするのが、ちょっとアレなんですが。あと、フレームなサイトとかだと、すべてのフレームに四角が出たり。

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

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 の便利拡張機能 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 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)