朝顔日記 - 2006/5月

Firefox 用の YouTube 検索プラグインを作った。Video search 専用です。

YouTube の仕様変更に伴い、検索プラグインも更新しました。

関連記事

YouTube 検索プラグイン更新

徒波｜Firefox で見るソースを見易くする　【userContent.css】 という記事を見つけて、なるほど Firefox はソースビューワーの表示も変えられるのかと感心した勢いで、常用しているエディタ、xyzzy の html+-mode の表示に似せたスタイルを書いてみた。

@namespace url(http://www.w3.org/1999/xhtml);
body#viewsource {
  font-family:'MS Gothic' !important;
  color: #fff !important;
  background-color:#333 !important;
  line-height:140% !important;
  margin: 0em !important;
  padding:0.5em !important;
}

body#viewsource .start-tag,
body#viewsource .end-tag {
  color: #87ceeb !important;
  font-weight: bold !important;
}

body#viewsource .comment {
   color: #fffacd !important;
   font-style: normal !important;
}

body#viewsource .doctype {
  color: #ffff00 !important;
  font-style: normal !important;
}

body#viewsource .attribute-name {
  color: #00ff00 !important;
  font-weight:normal !important;
}

body#viewsource .attribute-value {
  color:#ffc0cb !important;
  font-weight: normal !important;
}

先の記事でも触れられていますが、ソースビューワーのスタイルを書くときの肝は、chrome に対するスタイルではなく、content に対するスタイルを書く必要があるという点です。すなわち、userChrome.css に書いても駄目で、userContent.css に書く必要があるという事ですね。つまり内部的にはコンテンツに対して、ソース表示用の特殊なスタイルをあてがっているというような仕組みになるんでしょうか。

自分でいじる場合は、Firefox インストールディレクトリの res ディレクトリ にある viewsource.css を参考にいじるといいでしょう。UserContent.css に書くと確認するのにいちいち Firefox を再起動する必要がありますが、Stylish （参考 朝顔日記 - Stylish いいよ）を使えば、その手間無しに確認できるし、オンオフ切替も手軽に出来るのでオススメです。Stylish は 0.3.1 以降でサイト別スタイル以外のグローバルなスタイルのオン・オフも手軽に出来るようになってかなり便利になっています。

ところで、ソース表示画面の見映えを変更するだけでなくそもそも別のエディタ等で表示したいという方も多いかと思います。Firefox 内蔵のソースビューワーを使わずに外部エディタを起動するための拡張やスクリプトなども色々ありますが、実は 昨年の11月末辺り以降の trunk なナイトリーでは、外部エディタを呼び出す機能もネイティブ実装されています。view_source.editor.external を true にセットして、view_source.editor.path にソースを渡したいアプリのパスを入れてやれば OK です。Firefox 2.0 には実装されますのでお楽しみに～。:p)

5月5日(金)～6日(土)にかけて、長野県小谷温泉をベースにふたつの山に登って来ました。ひとつは日本百名山で有名な雨飾山です。ただ、雨飾山の本峰ではなく隣の P2 というところです。もうひとつは雨飾山の隣にあって山スキーのフィールドとして有名な大渚山です。両者とも例年であれば5月の連休だと、時期的に遅いのですが今年は雪が多いので十分に楽しめました。

初日は雨飾山 P2 です。登山口のキャンプ場まで車で入れました。キャンプ場でおおよそ 3m の積雪だそうで駐車場の回りは雪の壁になっていました。駐車場よりスキーを履いてしばらく大海川の雪原を行きます。

夏道の取り付きより少し手前から左の尾根に取り付きます。傾斜が急でシール登行だと大変なのでアイゼンを履いてスキーを担いで登ります。立派なブナの林を登り切ると P3 から P2 に続く尾根に出ます。P2 手前のコル状に荷物をデポして P2 を目指します。最後は結構な急傾斜です。

P2 の頂上からは目の前にそそり立つ雨飾山本峰が見えます。すぐ目の前にありますがこのルートからは容易に登られるようなものではないので眺めるだけです。:p)

南に目をやると翌日登る予定の大渚山がやや低い位置に見えます。雨飾山本峰の標高が、1963m で P2 の標高が 1838m にたいして、大渚山の標高は 1566m です。写真で見えている側ではなく、裏側から登る予定です。こうしてみると、上が尖っていないので見映えは余りよくないですね。:p)

P2 から荷物をデポした地点までの快適な滑降の後、昼食宴会です。折りしも私の地元のスミレ山の会のメンバーが宴会中でそれに混ぜてもらいます。今晩は小谷温泉付近でテント泊だというと、余った酒や食料をたくさんくださいました。ありがとうございます。＞スミレのみなさん。

宴会後、キャンプ場まで下りましたが、雪がかなり腐っており快適な滑りというよりは高度を下げたという感じでした。まぁ、あまりにも天気がよかったので仕方がないところです。1時間もかからずキャンプ場まで戻りました。

小谷温泉付近の手頃なブナ林の中にテントを設営後、小谷温泉の露天風呂へ。お湯がぬるくて上がるのに勇気がいる温泉でしたが、後で湯冷めしなかったのはさすがに温泉です。まだ明るいうちからテントの中で宴会をして、夕方の6時半くらいには寝てしまったようです。

明るくなってからゆっくり起きだし、朝食のラーメンをすすった後テントを撤収して今日登る大渚山の登山口、大草連まで車で移動します。大草連の集落の辺りには既にほとんど雪がなく、これはルートの変更かと思われたのですが、付近にいたおじさんに、林道を少し行けば雪はあるはずだとの情報を頂き、とりあえず行ってみることに。案の定5分ほどスキーは担ぎましたがあとはスキーを使って登行できました。写真は、林道から尾根に取り付くあたりです。

最初の段差を越えれば後は頂上直下以外は快適なシール登行です。が、前日の疲れかはたまた飲み疲れかなかなか苦労しました。:p)

3時間半ほどかかってようやく大渚山の山頂です。北に目をやると昨日登った雨飾山が指呼の間に望めます。

写真の向かって右にある肩の部分が P2 です。

ラーメンとビールの昼食の後、いよいよお楽しみの滑降です。前日と違って曇っているためか雪はさほど腐っておらず結構快適に滑ることが出来ました。それでも下部の広い雪原は流水による縦溝がひどかったですが。

雪原の末端が林道で、後はこれを辿ることで大草連まで戻って終了。帰りに来馬温泉風吹荘の熱いお湯で汗を流して終了。

少し前の、BonEcho（次期 Firefox 2.0 に向けた開発版）や、Minefield（Firefox 3.0 以降に向かう開発版）から検索バーが、Firefox 1.5 のものよりも少しグレードアップしました。Firefox 2.0 からは検索プラグインの仕様が変わって、OpenSearch 方式の xml をベースにしたものになります。この OpenSearch には、Autodiscovery の仕様も定められており、対応した UA 向けに、サイトが持つ検索エンジンの存在を知らしめることが可能です。今回の検索バーのグレードアップによってサイトが検索エンジンを提供していれば、それを手軽に追加できるようになったわけです。

具体的にどうなるかは以下のスクリーンショットをご覧ください。上が検索エンジンを提供していないサイトで、下がこのサイトです。

検索バーの右端の虫眼鏡アイコンの色が変わっていますね。色がつくことで表示中のページが検索エンジンを提供していることを示しているようです。検索バーの一番右端の▼アイコンをクリックすると一番下に検索エンジンを追加するインターフェースが表示されます。これをクリックすることで手軽に検索エンジンを追加することが可能です。

自サイト用の検索エンジンを UA に知らしめる方法は簡単で、Autodiscovery にあるように、link 要素を使って以下のように記述します。

<link type="application/opensearchdescription+xml"
 rel="search" href="(検索エンジンを定義した xml ファイルの URL)">

私の場合は、以前このサイト用に検索プラグインを作っていたので、改めて検索エンジン用の description ファイルを作らなくても Firefox が自動的に変換したファイルを所定の位置に置いて link 要素をひとつ追加するだけで、このサイトを OpenSearch Autodiscovery に対応にすることが出来ました。現在のナイトリーだと、従来の検索プラグインをインストールすると自動的に Open Search 方式の description ファイルに変換してくれます。（従来の検索プラグインは、プロファイルの searchplugins ディレクトリの中の searchplugins-backup というディレクトリに格納してバックアップされます。）

ちなみに、朝顔日記サイト内検索用の description ファイルは以下のようなものです。

• asagao_search.xml

ご覧頂くとわかりますようにごく簡単な xml ファイルです。手で書いてもたいしたことないので、サイト内検索を設置しているブロガー（何）のみなさんや、そうでない人も Google の特定のサイト内検索の機能を使って、ぜひ OpenSearch Autodiscovery に対応させてみましょう。Firefox 用には、検索エンジンの選択をわかりやすくするために、アイコンファイルをデータスキームで埋め込む必要がありますが、以前、データスキーム な URL を作るツールで紹介した、The data: URI kitchen を使えばデータスキームな画像も簡単に作成可能です。

と、長々と書きましたが、朝顔日記を OpenSearch Autodiscovery 対応にしてみたので、対応した UA を使っていれば、朝顔日記サイト内検索を簡単に検索エンジンに追加できるようになりました。対応した UA をお使いの方はご利用くださいませ。

関連記事

Another 朝顔日記 - 検索バーの虫眼鏡消し

おまけ（何）

Meta Data Profile

Bon Echo alpha 2（次期 Firefox 2.0 の alpha2） より、現在開いているタブの状態を保存して、次回起動時に復元するセッションレストアの機能が装備されるわけですが、今日現在の実装ではまだ、UI がありません。about:config より browser.sessionstore.resume_session を true にセットすると常にセッションを復元するようになり、browser.sessionstore.resume_session_once を true にセットするとそのとき1回限りセッションを復元するようになります。他にも、browser.sessionstore.resume_from_crash というのもあって、これはクラッシュした後に前回のセッションを復元するかどうかを問い合わせてくれるようになる設定です。browser.sessionstore.resume_from_crash を true にセットしておけば、クラッシュしても安心ですね。

私の場合、常にセッションの復元はしたくないけど、たまにしたいときもあるというような使い方なので、browser.sessionstore.resume_session は、false にセットしておいて、browser.sessionstore.resume_session_once を必要に応じて true にセットしてやれば良さそうです。browser.sessionstore.resume_session_once は、1度 true にセットしても次回起動時は勝手に false になってくれるという便利なもののようです。しかし、about:config からいちいちセットするのは面倒なので、メニューにこれを true にセットする機能を追加する拡張を作ってみました。名付けて Save Session というものです。（べた

この拡張機能をインストールするとツールメニューに Save Session という項目が付け加わるので、次回起動時にセッションを復元したいときだけこれを選択します。すると次回起動時にセッションが復元されるはずです。選択せずに普通に終了させると復元されません。browser.sessionstore.resume_session が true になっていると当然常に復元されるので注意が必要です。

• インストール savesession.xpi (約2KB require Fierfox 2.0a2 - 3.0a1)

何か UI が実装されて2、3日後に不要になるような気配が漂っていますが、気にしません。:p)

微妙にバージョンナップage

Save Session 1.2 をリリースしました。

かなり以前からサーバインストール型なRSSリーダー、フレッシュリーダーのベータ版を試用していたのですが、5月末日で使用不能になるらしいのと、これまで使ってきてなかなか便利なので、正式版に入れ替えた上でブロガーライセンスを申請することにしました。

アンテナをふたつ持っているのに、この上まだいるかという気がしないでもないですが、うまく更新を拾えないというか、拾い過ぎるサイトや、wiki など1ページづつアンテナで捕捉しきれないような場合にも、こういう RSS リーダーは便利ですね。

ということで記念に、思考停止日記 Live Bookmarks以外のRSS Readerを指定する方法 に習って、最近の Firefox ナイトリーに装備されたロケーションバーの Feed アイコンをクリックしたら任意のオンライン Feed リーダーに登録する機能を使って、簡単にフレッシュリーダーに登録できるようにしときました。

about:config を使い以下の Preference Name と Value を新たに作成しました。

Preference Name	Value
browser.contentHandlers.types.4.title	FreshReader
browser.contentHandlers.types.4.type	application/vnd.mozilla.maybe.feed
browser.contentHandlers.types.4.uri	http://diary.noasobi.net/freshreader/feedsubindex.php?u=%s

これをやっておくと簡単に登録できますね。便利だー。

Firefox 2.0a2 以降に装備されたセッション・レストアの機能を使って1回だけセッションを保存する拡張機能、Save Session をバージョンアップしました。微修正なので、手で書き換えた方がマシな感じですが…。

• Firefox 拡張、Save Session を作ってみた

なお、最近の Minefield では一時的にセッションレストアの機能が無効になっているので動作しません。

Mozilla Firefox Thunderbird の拡張あれこれ-MEMO - えむもじら を受けて、Mozilla Firefox Thunderbird の拡張あれこれ-MEMO さんが、これは困ったな という記事を書いておられますが、便乗でちょっと。:p)

パーマネントリンクの件は悩むところです． とありますが、現状でもいわゆるパーマネントリンクは存在するわけで、問題なのは、例えば、mon-extension-memo.html の見出しが、<a href="#memo06519b" class="not">■(5/19b)</a> になっていることではないかと。ここが、<a href="mon-extension-memo06_05-2.html#memo06519b" class="not">■(5/19b)</a> のようになっていれば、パーマネントリンクが明示できるわけです。まぁ、見出しアンカーはパーマネントリンクとしてわかりにくいとかいう話しもありますが、それはここでは置いておくことにして。

あと RSS のことで言えば、RSS からの飛び先が mon-extension-memo.html ではなく、アーカイブのほうになっていると有難いかな。具体的にいえば、http://beau.g-com.ne.jp/mon-extension-memo.html#memo06519b ではなく、http://beau.g-com.ne.jp/mon-extension-memo06_05-2.html#memo06519b みたいな感じですね。こうなっていれば、RSS リーダーから興味のある記事に飛んだ場合でも、再度パーマネントリンクのある場所を探し回らなくても飛んだ先がパーマネントな場所になるわけです。ご一考いただければうれしいです。

あとは、各記事ごとのコメント欄あるいは、個別でなくてもいいので掲示板かなんかあると、ちょっと言及したい場合に便利だとは思います。

ということで、今後も盛りだくさんな情報を期待しております。よろしくどうぞ。

拡張機能スレ(何) の part 12 で、userChrome.js の使い方がわからん、というような質問が出ていたのでちょっとググってみましたが今のところあまり情報が無いようなので、userChrome.js の簡単な説明と私の使い方などを少し書いてみます。

ご存知のように、Firefox には、userContent.css と userChrome.css というふたつのユーザスタイルシートがあって、userContent.css のほうは、web ページのコンテンツに対するユーザスタイルを定義するものであるのに対して、userChrome.css は Firefox 自体の外観に対するユーザスタイルを定義するものです。

これらはあくまでスタイルシートですが、最近の流行（？）が、ユーザースクリプトと呼ばれるものです。Firefox であれば、GreaseMonkey などの拡張機能を導入することで実現できますし、Opera なんかは標準装備しているようですね。

これらのユーザースクリプトを使うと、ページが本来持っている機能以上のものをページに付加することが出来るわけです。GreaseMonkey スクリプトはページに対して適用させるもので、Firefox のユーザスタイルシートになぞらえて言えば、userContent.js とでも言うようなものです。で、今回紹介する userChrome.js ですが、これはページに対してというよりは Firefox 自体にスクリプトを追加するようなイメージです。

このようなことを行うには従来、単体のスクリプトでなく拡張機能という形にパッケージングしたものを使って拡張していたわけですが、userChrome.js という拡張機能を導入すると、追加した単体のスクリプトを userChrome.js 経由で実行できるようになります。JavaScript は得意だけど、拡張の作り方とかわがんね、というような方でも簡単に（？） Firefox に機能を追加することが出来ます。

userChrome.js の使い方ですが、拡張機能の方の userChrome.js (userChrome.js.xpi)をインストール後、再起動したら使えるようになるわけですが、userChrome.js という拡張機能はプロファイルの chrome フォルダに置いた、userChrome.js という名前のファイルを読み込んで実行するようになっています。ですから、実行させたいスクリプトを、userChrome.js に記述しておけばよいということになりますね。

で、私の場合ですが、フォーラムの userChrome.js スレ の zeniko 氏の発言にある、Sub-Script Loader というのを使ってユーザスクリプトをロードするようにしています。どうやるとかいうと、Sub-Script Loader を userChrome.js とリネームしてプロファイルフォルダの chrome フォルダに置いておきます。あとは自分の使いたいスクリプトの名前を hogehoge.uc.js としておけば、すべて Sub-Script Loader が読み込んでくれるという方式です。

Sub-Script Loader は chrome フォルダにあるファイルの末尾が .uc.js なファイルを読み込んでくれるように作られているようです。userChrome.js ファイルに複数のスクリプトを記述してもいいのかもしれませんが、機能ごとにスクリプトを分けておいたほうが扱いやすいと考えてこの方法を採用しています。

userChrome.js という拡張はかなり強力で、UI はありませんが有名どころの SuperDragAndGo や、ieview なんかが拡張としてではなく、単一のスクリプトサンプルとして先の userChrome.js スレに上げられています。Firefox の内部にちょっと詳しくてスクリプト書ける人であれば、拡張で実現するようなこともさくっと実現できてしまうわけですね。

userChrome.js と似たような機能を持つ拡張機能としては、JSActions や ContextMenu Extensions があり、私は適宜使い分けています。ちょっといじると相互に動くようになったりするのでどれかですべてを動かすことも出来るかもしれません。まぁ私の場合は、スクリプトに弱いのでそれ用のものをそのまま使うだけなんですけどね。:p)

Firefox 質問スレ part 31 に、Web Developer のツールバーのラベルの文字列を少なくしたいという質問が出ていました。メインメニューの表示を変えるには、Shortmenu を使えば簡単に出来るんですが、拡張機能のツールバーだとそうは行きません。ということでどうにかできないかと考えました。

まぁ、ぶっちゃけ拡張機能をバラして中にある、menu.dtd あたりを直接書き換えれば簡単に出来ると思うのですが、バージョンアップがあった時には、再度改造する必要があるのが難点です。改造しないで書き換えるとなると拡張機能を作るというのが従来のパターンでした。が、Web Developer の表示を変更する拡張機能とかあまりにもニッチな割に作るのが面倒です。ということで、ここは userChrome.js でやってみましょう。

実は私の場合、メインメニューの書き換えも最近は shortmenu ではなくて、userChrome.js でやっています。Firefox を究める256のテクニック に載っている「メニューバーのラベル文字列を短くする」スクリプトというのをちょっといじって使っているわけです。このメインメニュー用のものをちょっと書き換えてやれば Web Developer のツールバーのラベル文字列にも適用出来ます。以下、Web Developer のツールバーのラベル文字列を2文字にするための userChrome.js 用のスクリプト、名付けて shortmenu_for_webdeveloper.uc.js です。

(function() {
    var nodes = document.getElementById('webdeveloper-toolbar').childNodes;
    for (var i = 0, max = nodes.length; i<max; i++) {
        var label = nodes[i].getAttribute('label');
        label = label.charAt(0)+label.charAt(1);
        nodes[i].setAttribute('label', label);
    }
})();

2行目の webdeveloper-toolbar とかの id は、DOM Inspector で調べればわかります。で、メインメニューバーと Web Developer ツールバーにスクリプトを適用させたのが以下のスクリーンショットです。メインメニューのほうが4文字で、Web Developer のほうが2文字になっています。

userChrome.js って何？ って方は、Firefox の拡張機能、userChrome.js の私の使い方 をどうぞ。

ついでに、Firefox を究める256のテクニック のほうもまだの方はよろしくおながいします。:p)

HTML DOM Visualizer - SmallStyle (2006-05-28) 経由。Websites as graphs - an HTML DOM Visualizer Applet を使うと指定したサイトの html を解析して DOM を視覚化して見せてくれるとのこと。ということで、このサイトのを試しにやってみました。

色のついた玉(何)はそれぞれ以下の要素を表わしているそうです。

blue

for links (the A tag)

red

for tables (TABLE, TR and TD tags)

green

for the DIV tag

violet

for images (the IMG tag)

yellow

for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)

orange

for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)

black

the HTML tag, the root node

blockquote がオレンジなのはちょっと納得がいかない。気にしませんが。