tweetbarをバラしてみた
普段TwitterをFirefox拡張のtweetbarで読み書きしてるんですが、
- URLに「-」が含まれていると、リンクが途中で切れていることがある
- 「@」付きのIDが最初の1つしかリンクされない
という不満があります。そこで、xpi・xul・javascriptには不慣れですが、ちょっとバラして中を見てみました。
ディレクトリ構成は、
$ unzip -l tweetbar-1_0.xpi Archive: tweetbar-1_0.xpi Length Date Time Name -------- ---- ---- ---- 0 03-20-07 15:33 chrome/ 0 03-20-07 14:55 chrome/content/ 1302 03-20-07 15:24 chrome/content/sidebar-overlay.xul 6630 03-20-07 16:23 chrome/content/tweetbar.html 518 03-20-07 15:25 chrome/content/tweetbar.xul 1430 03-20-07 14:41 chrome/license.txt 0 03-20-07 14:41 chrome/locale/ 0 03-20-07 14:56 chrome/locale/en-US/ 266 03-20-07 14:56 chrome/locale/en-US/tweetbar.dtd 0 03-20-07 15:33 chrome/skin/ 847 03-20-07 14:41 chrome/skin/activity-blue.gif 847 03-20-07 14:41 chrome/skin/activity-white.gif 139425 03-20-07 14:41 chrome/skin/mootools.v1.00.js 212 03-20-07 15:29 chrome/skin/toolbar-button.css 67 03-20-07 15:03 chrome/skin/twitter-arr.gif 4148 03-20-07 15:27 chrome/skin/twitter-icon.png 7850 03-20-07 15:10 chrome/skin/twitter.png 319 03-20-07 15:23 chrome.manifest 1178 03-20-07 16:12 install.rdf -------- ------- 165039 19 files
な感じです。これはxpiの仕様ですかね。
で、本体はjavascriptで書かれているハズなのでmootools.v1.00.jsを見てみるも、どうも違う。。。実際の表示部分であるtweetbar.htmlを見てみると、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>tweetbar</title> <script type="text/javascript" src="chrome://tweetbar/skin/mootools.v1.00.js"></script> <script type="text/javascript" src="http://mikedemers.net/tweetbar/1.0/tweetbar.js"></script> :
うがっ。外部ファイルですか。。。ということで、取得。
$ unzip tweetbar-1_0.xpi
$ cd chrome/skin/
$ wget http://mikedemers.net/tweetbar/1.0/tweetbar.js
取得したtweetbar.jsを眺めつつ、不満の元凶を捜します。すると、expand_statusメソッドにある正規表現がどうも臭い。オリジナルは
expand_status: function(s) { return s.toString().replace(/\</,'<').replace(/(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_-\.]*(\?\S+)?)?)?)/, this.anchor_tag('$1')).replace(/\@([0-9a-z_A-Z]+)/g, this.anchor_tag('http://twitter.com/$1'.toLowerCase(),'@$1','$1 on twitter')); },
となっていて、3つのreplaceを実行しています。その2つ目
replace(/(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/, ...)
を見てみると、「/」以降の「-」が外れていました。まずは
replace(/(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_-\.]*(\?\S+)?)?)?)/, ...)
と修正。
続いて、3つ目のreplace
replace(/\@([0-9a-z_A-Z]+)/, ...)
を見てみると、ここで「@xxxxx」という文字列にリンクを付けているっぽい。すべての「@xxxxx」をどうやって変換すりゃいいやら。。。whileでグルグル回すわけにはいかないし。。。正規表現ということで、globalフラグが使えるかどうか調べたところ、http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:String:replace#.E4.BE.8B:_replace_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.A7.E3.81.AE_global_.E3.83.95.E3.83.A9.E3.82.B0.E3.81.A8_ignore_.E3.83.95.E3.83.A9.E3.82.B0.E3.81.AE.E4.BD.BF.E7.94.A8にしっかりサンプルが書いてありました。ということで、
replace(/\@([0-9a-z_A-Z]+)/g, ...))
と修正。
ついでに、tweetbar.htmlで外部javascriptファイルを読み込んでいるのをローカルに変更。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>tweetbar</title> <script type="text/javascript" src="chrome://tweetbar/skin/mootools.v1.00.js"></script> <script type="text/javascript" src="chrome://tweetbar/skin/tweetbar.js"></script> <!-- <script type="text/javascript" src="http://mikedemers.net/tweetbar/1.0/tweetbar.js"></script> --> :
zipコマンドで元に戻して
$ zip -ru tweetbar-1_0.xpi ./* updating: chrome/content/tweetbar.html (deflated 71%) updating: chrome/skin/tweetbar.js (deflated 78%) $
tweetbarをアンインストール/再インストール。結構うまくいきました。
とりあえず、Do You PHP?にUPしてありますので、地雷踏んでみたい方はどうぞ ;-)