tmty.jp

(2009-01-03追記) ここで紹介している clearSB のソースコード一式は、GitHub へ移管されました。


clearSB – GitHub


====




firefox の右上にある検索ボックスは、検索後にフォームに検索文字列が残るようになっている。で、後ろから忍び寄ってきた人や、ちょっと席を離れたとき(大体ロックしてるけど)にスクリーンを覗いてきた人に何を検索したか見られることがあったりする。

今のところ、特に恥ずかしい思いを過去にしたわけでもないのだが、勝手に消えてくれた方がなんとなく嬉しい。というわけで、そんな機能を firefox の拡張(addon)で作ってみようと思い立った。SearchBox を Clear するので、名付けて clearsb (クリアエスビー) です。

参考にしたサイトは、次の通り。とくにまとめサイトの方がわかりやすかった。

• 拡張の作成 – Mozilla Firefox まとめサイト
• Building an Extension – MDC

できあがった拡張(xpi)はこちらの trac に置いておいたので、ご興味の方、どうぞお持ちください。win 環境 Firefox 2.0.0.3 と linux 環境 Firefox 2.0.0.6 で動作確認済です。初めて作ったものなので、何かと行き届かない部分はご容赦を。あ、あと、最低限のコードしかしてないので、環境によっては変な動きをするかもしれません。ご利用は自己責任でお願いします。

以下、作業メモ。xpi の実体は zip 圧縮されたファイルなので、伸張すれば、簡単に解読できますです。

まず、ディレクトリ構成は、こんな感じ。

<拡張を作るディレクトリのルート>$ ls -R
.:
chrome  chrome.manifest install.rdf
./chrome:
content  skin
./chrome/content:
about.xul  clearsb.js  clearsb.xul
./chrome/skin:
clearsb.png  clearsbb.png

上記の通り、ごく少量のファイルで拡張が作れてしまうわけだが、自作のアイコンや about 用のダイアログが不要であれば、用意するファイルは、次の 4 つだけで良い。

• インストール方法を記述した /install.rdf
• 配布ファイルの構成を記述した /chrome.manifest
• 拡張の UI への割当て方法を記述した /chrome/content/clearsb.xul
• 拡張の実処理を記述した /chrome/content/clearsb.js

これだけだから、中身も全部貼っておく。

/install.rdf

<br /> <?xml version="1.0"?><br /> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"<br /> xmlns:em="http://www.mozilla.org/2004/em-rdf#"><br /> <Description about="urn:mozilla:install-manifest"><br /> <em:id>{786ac958-0f07-46cf-b072-529a4160e8fe}</em:id><br /> <em:name>clearsb</em:name><br /> <em:version>0.1</em:version><br /> <em:description>検索アクション後に検索ボックスに入力した文字列をクリアする</em:description><br /> <em:creator>tmtysk</em:creator><br /> <em:homepageURL>http://blog.tmty.jp/</em:homepageURL><br /> <em:iconURL>chrome://clearsb/skin/clearsb.png</em:iconURL><br /> <em:aboutURL>chrome://clearsb/content/about.xul</em:aboutURL><br /> <em:type>2</em:type><br /> <!-- Target Application this extension can install into,<br /> with minimum and maximum supported versions. --><br /> <em:targetApplication><br /> <Description><br /> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><br /> <em:minVersion>2.0.0.0</em:minVersion><br /> <em:maxVersion>2.0.*</em:maxVersion><br /> </Description><br /> </em:targetApplication><br /> </Description><br /> </RDF><br />

なお、em:id(GUID) はオンラインサービスで取得してきた。

/chrome.manifest

overlay chrome://browser/content/browser.xul chrome://clearsb/content/clearsb.xul
content clearsb jar:chrome/clearsb.jar!/content/
skin clearsb default jar:chrome/clearsb.jar!/skin/

拡張の実体とスキンがどこにあるかを規定するファイル。chrome:// で始まる URI を適宜書き換えれば、ディレクトリ構成はわりと自由にいけるぽい。

/chrome/content/clearsb.xul

<br /> <?xml version="1.0"?><br /> <overlay id="clearsbOverlay"<br /> xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><br /> // JavaScript をインポートする<br /> <script type="application/x-javascript" src="chrome://clearsb/content/clearsb.js"> </script><br /> </overlay><br />

ここで処理の実体である clearsb.js を指定している。

/chrome/content/clearsb.xuljs

var ClearSB = {
// 初期化処理 .. サーチアクションにリスナをバインドする
init: function() {
sb = document.getElementById("searchbar");
eval("sb.handleSearchCommand = " + sb.handleSearchCommand.toString().replace(
"{", "{ ClearSB.onSearch();"));
},
// サーチアクション時に呼ばれる
// 検索エンジンに文字列が渡るよう、1msec 後にフォームをクリアする
onSearch: function() {
setTimeout(function() {
sb = document.getElementById("searchbar");
sb._textbox.textValue = "";
}, 1);
}
};
// 起動時に上記のオブジェクトをロードする
window.addEventListener("load", ClearSB.init, false);

実は、肝心のこれだけのコードの書き方がなかなかわからなかった。まず、検索ボックスの検索アクションに function を bind させる方法がわからず(上記 init で eval してるところ)、次に、検索時に検索ボックスを空にすると検索エンジンに検索文字列が渡らないという現象に悩まされた(上記 onSearch で setTimeout してるところ)。
結局、いろいろ探しているうちに、userchrome.js の上で同じ事をやってる人を、こちらのブログのコメント欄で発見し、これを頼りに上記のように書いてみたら、ようやくうまくいった感じ。この辺のプロパティ名とかがオフィシャルにまとめてあるところが見付からないんだな.. どなたかご存知でしたら教えてください。

最後に、上述のまとめサイトのチュートリアルに掲載されているパッケージング用のスクリプトを用意して、こいつを PATH の通ったところに突っ込む。(今回の構成用に、微妙にファイル名をカスタマイズしてあります。)

#!/bin/sh -f
x=$(pwd)
x=${x##*/}
rm $x.xpi
# archive chrome (non-compressed)
mkdir -p build/chrome
cd chrome
find . ! -name '.*' -exec zip -0 ../build/chrome/$x.jar {} ;
cd ..
cp -f chrome.manifest install.rdf build
# archive whole (compressed)
cd build
find . ! -name . -exec zip -9 ../$x.xpi {} ;
cd ..
rm -rf build

これを、冒頭に書いたルートのディレクトリから実行してやると、xpi ができあがり。簡単な事をやりたかった割には時間がかかってしまった。でも JavaScript でブラウザを拡張していくという感覚は面白いな。乗り遅れたな..

あ、最後に、アイコン作ってくれた嫁さんと、動作確認に協力してくれた(「小倉智昭」を検索しっぱなしで恥ずかしい思いをしたばかりの) 弟に感謝。

(2007/10/31 18:59 追記) clearsb.js のファイル名表記が間違ってたので直しました。

amachangさんの声がけで集まった勉強会に行ってきました。

いやー、濃い濃い。

正直、ついていけたのは、SWFのバイトコードの話だけでした。これはこれで偏ってるな..(^^;; たまたま最近いろいろいじる機会があったので、僕もTAKESAKOさんバリに、白紙にHEX-BIN変換メモ＆SWF読み下しの日々が続いていたのです。DefineShape4とか、PlaceObject3とか、読んでると死にますよねw
しかし、yossyさんが言ってた「ActionScriptだと書けない処理をバイトコードで実装する」ってアプローチは目からウロコ。最適化だけじゃないんですねー。建設的なアイデア！(そっちのほうが自然なアプローチなのかも??)
ともかく、ご興味の方、とりあえずAdobeが出してるspecのbasic data typeを理解して、headerだけでも読んでみては。バイトコードって最初は手を付けづらいけど、丁寧に読むと、ちゃんと挙動が理解できるから楽しいですよ！

しかし、勉強会で出たネタ、「とりあえず、試そう！」と思ったモノが多すぎる。環境作りから必要なのもあるけど、少なくとも↓は、ちゃんといじるぞ。

• Apolloとニコニコプレゼン
• RubyCocoa
• Progression

あ、Firebugのソース読みもやろう！
あ、fladdictさんの書いたアレも読む！
.. って、こんなにやれるのかな、ほんとに。

とにかくとにかく、いろんな方にお会いできて楽しかったです！amachangさん、お誘いありがとうございました (_ _) 皆さんとお話できませんでしたが、これからもどうぞよろしくおねがいします。

Firebugのコンソールにソースコードコピペするだけで読み込める事に気づいた。や、当たり前なんだけど、これは気づかなかった。ちょっと試すたびに <script type= … とか html 用意するのメンドクセーと思っていたので。

GoogleがBlog Bar Wizardなるものをリリースしてた。ウィザード形式で、ブログ検索の結果を出力するバーがつくれる。生成されたコード(結構長い)を <div id=”blogBar-bar”> &lt/div> で括ってやる ぺたって貼るだけ。
試しに Qcodo 検索結果で貼ってみる。

こんなかんじ。日付表示がオカシイな。ちょっとカスタマイズすれば、使いようによっては面白そうだ。

最近流行りの javascript ツールをいろいろ使ってみるうちに、ちゃんと javascript を勉強していない自分に気づいた。そもそも動作原理をよく知らん。

ということで、amazon で本を物色して、この本に決めた。邦訳版は第3版まで出てて、なかなか評判も良いみたい。ちょと内容が古いとか。

ふと原著を当たってみたら、去年8月に改定されたばかりで、5版まで出てる。なるほど、最近一気に話題になったから、いろいろ内容も見直されてるのかな。

つーことで原著買いました。翻訳されるのがいつになるか分からないし。洋書は .com で買った方が安いけど、送料入れるとギリギリ .co.jp で買った方がオトク。問題は、読める(理解できる)のか、という点

届いたらちょっとずつネタにしていきます。誰か、輪読会やろうぜ。