bits and bytes

Firebugクックブック #2

Fri, 29 Aug 2008 13:11:03 +0900

前回に引き続き、自分がよくあるブラウザ上での単純作業をFirebugコンソールで片付けている方法の紹介です。前回はブラウザに表示されているデータをこっち側に持ってくる作業をどうやっやるかでした。今回はブラウザの向こう側のデータをFirebugで操作するにはどうするかです。

ボタンをクリックさせる

ウェブのサービスを使っていて、今までに投稿したものを全部消したくなったり(でもアカウントは消したくないとか)することがあります。管理画面で投稿を消すことはできるけど、いちいちクリックしていかないといけなくて面倒.... という時にはFirebugでフェイクのクリックイベントを作って送れば、自動でクリックさせることができます。 Twitterのfavoritesを全部外したい、というのを例としてあげます。TwitterのfavoritesはAPIがあるのでAPIを使う手もありますが、サービスによってはAPIが使えないこともよくありますよね。まずFirebugでHTMLを調べると

こういう構造になっています。favoriteを外すためのリンクを持っているaタグは div.status_actions a というCSSセレクタで表すことができるので

$$('div.status_actions a').map ( function (a, i) {
    setTimeout( function () {
      var e = document.createEvent('MouseEvent');
      e.initMouseEvent("click", 1,1, null,null,0,0,0,0,0,0,0,0,0,null);
      a.dispatchEvent(e)
    }, i * 1000);
} );

document.createEventとevent.initMouseEventを使ってaタグにクリックイベントを送信すれば、自分でクリックしないでfavoriteを外すことができます。この方法だとFirefoxに表示されているだけのfavoritesしか外せません。1ページに表示されている量よりも多い量を対象にしたい時はAutoPagerizeを使って、対象にしたい量だけ読み込んでから実行すると、1ページに収まらない量を対象にすることができます。 setTimeoutの中で実行しているのは、一度に大量のリクエストをサーバに送って迷惑をかけたりしないようにするためです。大量にリクエストを送ることになるときには必ず入れましょう。

クリックしたあと確認のダイアログが出るとき

twitterのfavoriteのように、クリックしたら即操作が反映されるものは比較的少数です。削除のように元に戻せない操作のときにはjavascriptで確認が表示されることが多いです。Flickrで写真を削除しようとしたときには確認画面が出てきて、けっきょくまたクリックしないといけなくなったりします。

そういうときにはこの確認画面を出しているconfirm関数を上書きしてしまいましょう。Firebugコンソールで

window.confirm = function () {
  return true;
}

と書いて一度実行しておけば、confirmは出てこなくなって、常にOKを押したことにすることができます。(参考: Googleマップのアラートを消す最悪の方法 - p0t)

HTTPリクエストを送る

クリッイベントを作るだけじゃうまくいかない、クリックしたあと別のページに遷移してしまってスクリプトの実行が中断されてしまう、そういうときはもうXMLHttpRequestを使ってリクエストを作って送ります。 wassr で全 follow するブックマークレット - IT戦記がちょうどそれをやっているので、まねしてFriendFeed - Recommended Friendsでお勧めされているひとをsubscribeするというFriendFeedバージョンを作るのを例にします。まずLive HTTP Headers :: Firefox Add-onsを使って、送信されているリクエストを確認します。

POST /account/newfriends HTTP/1.1

Host: friendfeed.com

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

X-Requested-With: XMLHttpRequest

Referer: http://friendfeed.com/settings/recommended


id=06c27bf8-2cfd-11dd-be28-003048343a40&at=12419835770643829971_1218795910

subscribeボタンを押すとこういうリクエストがPOSTで送信されています。まずはPOSTのパラメータになっているidとatをページの中から探してきましょう。ユーザのIDを示しているGUIDみたいなidはtdタグにuseridという属性で示されていました。

atは調べてみたらcookieの中に入っている値でHTMLには入ってないのですがgetCookie('AT')で得ることができました。材料が揃ったところで、あとはコードを書けばいいだけです。

$x('//td[@userid]').map ( function (e, i) {
  setTimeout( function () {
    var body = [
     "id=" + e.getAttribute("userid"),
     "at=" + getCookie("AT")
    ].join("&");
    var r = new XMLHttpRequest();
    r.open("POST", "/account/newfriends", false);
    r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    r.send(body);
  }, i * 1000);
} )

XMLHttpRequestは同じドメインにしかリクエストを送れないので、同じドメインであるFriendFeed - Recommended Friendsを開いて、Firebugでこのスクリプトを実行すると、おすすめされたひとをみんなsubscribeすることができます。

あとがき

Firebugを使うと、クッキーで認証がかかっていて、ほかのスクリプト言語でコードを書くにはめんどくさい、というときにも、作業そのもののコードを書くだけですませられるので簡単です。最近はJSONやJSONPで結果を返してくれるAPIも増えたので、ますますFirebugは細かい作業をこなすのに使いやすくなっています。

Firebugクックブック #1

Fri, 22 Aug 2008 21:00:07 +0900

最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。

ページの中からテキストや属性の値を拾う

ページの中から特定の部分の文字列を抜き出して、特定の条件に当てはまるものだけをリストアップしてファイルに保存したい、ということがないでしょうか。perl+Web::Scraperでやることもできますが、ページにcookieなどで認証がかかっている場合ログイン処理を書くのがちょっと面倒です。書いたスクリプトを何回も使うならスクリプトを書く甲斐もありますが、単に今ちょこっとページからデータを取り出したいだけで二度と使わないようなときや、ページがjavascriptで動的に生成されていてHTMLファイルを持ってきただけでは手も足も出ない、というような時にはFirebugの出番です！ブラウザはHTMLをレンダリングするためにあるようなものですしHTMLもブラウザで表示するために書かれているようなものです。ブラウザの上であれば、タグの構造や要素がページ上のどこにあるのかを目で見て確認しながら作業ができるのでブラウザできることならブラウザでやるとストレスなくすすめられます。例として、このブログの左側にあるタグクラウドのタグ名の横についている数字を取り出して、全部足す、というのをやってみましょう。

HTMLをみるとこうなっています。liの下のaのsupの中に数字が入っているのでsupを全部取り出して足し算すれば数がわかります。

var total = 0;
var a = $x("//li/a/sup");
for ( var i = 0; i < a.length; i++ )
    total += parseInt( a[i].textContent );
total // 210

XPathで対象のsup要素を全部取り出して、その中の数字を足しています。textContentプロパティには要素の子孫にあるテキスト全部が入っています。そのまま+演算子で足していくとタグの数が文字列として連結されていってしまうのでparseInt()を使って数値として足し算されるようにしています。 WebKitでサポートされているJavaScript1.6のべんりなArrayメソッドで紹介したArrayの拡張メソッドを使って

var total = 0;
$x("//li/a/sup").map ( function (a) {
 return total += parseInt( a.textContent );
} ).pop(); // 210

と書くことも可能です。(Firebug consoleではjavascript1.6までしか使えないようなのでreduceは使えません)。Firefox3であれば使えます(ref. Twitter / TOYAMA Nao: @ku http://tinyurl.com/5qf4...)。

CSSセレクタを使う

上の例ではXPathを使って要素を選択しましたが、XPathはクラス名を指定して何か取り出したい時には div[@class="pager"] というふうに書かないといけません。それに比べてCSSセレクタなら同じことを div.pager とかけるのですごく楽です。こんどははてなブックマーク - いまさら人に聞けない Firebug tipsにつけられたタグを全部リストアップしてみましょう。つけられている数が少ないタグは"タグ"のところにはでてこないので、各ブックマークにつけられたタグを全部とりだします。

こういうHTMLなので、こんどはCSSセレクタを使って取り出します。

var stash = {};
$$("a.user-tag").map ( function (a) {
    stash[a.textContent] = stash[a.textContent] ? 
            stash[a.textContent] +1 : 1;
} );
stash

これで、タグ名をキー、タグの総数が値になったハッシュを取り出すことができます。

作った文字列をクリップボードにコピーする

値を取り出せても所詮はjavascriptでそれをファイルに保存することができません。これは致命的です。が、Firebugコンソールにはcopy()という、渡された文字列をOSのクリップボードにコピーする関数があります。さっき作ったタグ名とタグの数ハッシュを、タブ区切りのファイルにして保存したい、というのを想定してみましょう。

copy(
  keys(stash).map ( function (k) {
    return [k, stash[k]].join("\t")
  } ).join("\n")
);

Firebugにはkeys()というperlのkeyに相当する関数があり、ハッシュからキーだけを配列にして返してくれます。これを使って全部のキーと値を取り出して、join()で改行をはさんで連結してクリップボードに保存しています。クリップボードにデータが入ったら適当なエディタに張り付けて保存すればタブ区切りのファイルのできあがりです(タブがみにくくてすみません)。

スクリプトからは扱いにくいHTMLからはFirebug+javascripを使えば、自分でログインするためのコードを書いたりする必要もなくこうやってデータを取り出すことができます。TSVなどの扱いやすいデータになればあとはエクセルに入れてグラフを作ることも、ほかのスクリプト言語で読み込むことも簡単にできます。

つづく

今回はウェブ上にあるデータを、Firebug consoleを使って効率よく編集する方法をご紹介しました。 Firebugを使えば、HTMLに使われるすべてのタグのリストをjavascriptの配列として持っておきたい、というときにもIndex of the HTML 4 Elementsを開いて

$$('table a').map ( function (a) { return a.textContent })

と入力するだけで、簡単に取り出すことができます。ウェブとコンピュータとを繋ぐブラウザは現代のコマンドラインです。ちょっとでもコマンドラインを使えると飛躍的に細かい作業がはかどるのと同じように、Firebugで細かい作業ができるようになると、ウェブの情報を簡単に利用することができるようになります。次回はもう一歩進めてFirebugからHTTPリクエストを送ったりします。それではまた。

日時表記のフォーマットの名前とperl/PHP/javascriptでのつくりかた

Fri, 08 Aug 2008 19:00:16 +0900

毎回毎回日時を出力する時にどうすればいいのか思い出せなくて毎回毎回調べていてばかみたいなのできちんとまとめてみます。

日時のフォーマット名

まず、よく使われる日時表記の名前を把握することが大切です。名前がわからないと検索のしようがありません。

ISO8601

ISO8601はたぶん一番なじみが深いものだと思います。 MySQLのdatetime型の表記 2008-08-06 19:38:56 はISO8601です。 ISO8601は日時を表すだけでなく、年だけや時刻だけを表せるほか、期間を表すことができます。また、多様な書き方を許していて、間にある記号を省略して20080806 193856というのもISO8601として正しい日時になります。英語のwikipediaのISO 8601が詳しいです。

W3CDTF

W3CDTFはatomのフィードで使われている 2003-12-13T18:30:02Z みたいなやつです。この書式は実はISO8601に含まれているのですが(なのでISO8601がパースできるパーサならW3CDTFもパースできます)、仕様を決める時に日付の書式をISO8601にすると、ISO8601が多様な書式を許していることで実装が煩雑になってしまいます。それを避けるために導入されたものだそうです。

RFC2822/822

RFC2822/822は日本人には読みにくい Mon, 23 Apr 2007 11:10:53 +0900 という形式のものです。個人的には、曜日はいらないだろ、と毎回思っています。メールやHTTPのヘッダ、RSS2.0の日時表記に使われています。

ctime

ctimeはPOSIXで規定されているasctimeというCの関数が出力するフォーマットです。こんな Thu Feb 3 17:03:55 GMT 1994 かんじでRFC2822/822と似ていますが、月の名前が月の日付よりも先にきているものです。ブラウザ上で何かする時にはjavascriptのDateオブジェクトのtoString()の結果くらいでしかお目にかかることはありませんが、ブラウザ以外のC言語で実装されているソフトウェアではよく使われています。身近なところではapacheのエラーログの日付表記がctimeになっています。

各言語での作り方

以下は自分が普段よく使うperl, PHP, javascriptでどうやったら各日付のフォーマットを作れるかのメモです。もっといい方法、ほかの言語ではどう書くか、など教えていただけたらうれしいです。

	ISO8601 (2008-08-08 01:11:05)	W3CDTF	RFC2822	ctime
perl	$_ = DateTime->now->datetime; s/T/ /;	DateTime::Format::W3CDTF-> format_datetime( DateTime->now )	DateTime::Format::Mail-> format_datetime( DateTime->now )
PHP	preg_replace('/T\|[\+Z].+/', ' ', date('c'))	date('c')	date('r')
javascript	ISO8601DateUtils.jsm(extensionのみ)	ISO8601DateUtils.jsm(extensionのみ)		(new Date).toString()

テーブルはGenerate HTML Tables Clean and Fastでつくりました。地味ですが、タブで隣のセルに移動できたり、地味に便利でした。

参考

大切じゃないパスワードを記録するためのiPhone用ブックマークレットとclient-side storageの可能性

Fri, 01 Aug 2008 18:34:29 +0900

JavaScript++かも日記: 【iPhone】iPhone用 JavaScriptデータベースプログラミング入門 (1)でiPhoneのSafariでもclient-side storageが実装されていてjavascriptからSQLite3を利用できる、というのを知りました。 Firefox3に載っているsqliteよりもちょっとバージョンが古いのでFirefox3でSQLite3の全文検索機能を使って日本語を検索するのはまだできないようですが、できるようになるのも時間の問題でしょう。ためしにちょっと触ってみようと思ってclient-side storageをバックエンドにして、入力したパスワードを保存して次回から入力を楽にするためのbookmarkletをつくりました。 client-side storageはHTMLに書かれたjavascriptから読み出すことができ、データベースに書き込んだときのドメインと同じドメインにあるjavascriptからはURLが違っていても読み出すことができます。このブックマークレットは、ユーザ名とパスワードを平文で保存するので本当に重要なユーザ名/パスワードを保存しないでください。

ブックマークレット

dumbkeychain

つかたかた

いちどSafariにブックマークレットを入れて、iTunesからブックマークを同期するとiPhone/iPod touch上にブックマークレットを送ることができます。手で入力するのはムリです。今回は30日間限定オンラインアルバム | 30days Album™で動作を確認しました。30daysは、Flashでアップロードしたい写真をはじめに全部いっぺんに選んであとは待っておくだけでアップロードできて、誰でも見られるようにしたくないときにも見てほしい人にアカウントを作ってもらったりする必要もなく、メールでURLをパスワードを送るだけですみます。なにより写真がきれいに見えるデザインになっています！ flickrでいいじゃんと思うかもしれませんが、一般的にはflickrあまり知られてなくて、英語だからアカウントを作ってもらうのも面倒がられたりして、アップローダをダウンロードしてこないとたくさんアップロードするのが大変で、そのアップローダがうまく動かなかったりするので、いろんなひとに写真を見てほしい時にはぜんぜん使えません。今知ったけどモバイル版もリリースされています！裏側も30days Album Information | 30days Album を支える技術 #0 〜サーバ構成概要によればperbal+lighty+rails/catlyst+MogileFS+Gearman/TheSchwartz+MySQLと手堅くおもしろい作りになっています。機会があったらぜひお試しください！ 30daysは今年自分が最も感銘を受けたサービスなので、つい話がおおきくそれてしまいましたが、ブックマークレットの話に戻ります。ログイン画面でdumbkeychainブックマークレットを呼び出してからフォームを送信すると、そのとき送信したユーザ名とパスワードがsqliteに保存され、次回から同じログイン画面(URLのパスをキーにしてデータを保存しているので、ログインするページのパスが変わるものはうまく機能しません)でdumbkeychainブックマークレットを呼び出すと

sqliteに保存されているユーザ名とパスワードが自動的に入力されます。あとは送信ボタンを押すだけでログインできます。

上に書いたように、このブックマークレットはあまり安全でないので、ちゃんとしたいのなら最強のパスワード管理ソフト 1Password [Mac OS X] | Lifehacking.jpで紹介されている1Passwordがいいとおもいます。

HTML+js+client-side storageでなにができるか

今回はブックマークレットからclient-side storageを利用しましたが、これはウェブアプリケーションで使う時に威力を発揮します。ウェブベースのRSSリーダを考えてみましょう。携帯端末の通信速度もかなり向上しましたが、通信をはじめる時にはわりと時間がかかります(基地局との接続確確立に時間がかかるのでしょうか？)。電車に乗っているときには、電車がトンネルや地下にはいってしまうと通信できなくなります。しかしclient-side storageを使うことでこれらの問題を解決することができます。ユーザが記事を読んでいる間にXMLHttpRequestを使ってバックグラウンドでデータを読み込んでsqliteに書き込んでおけば、端末のメインメモリを消費することもなくデータを保存することができ、ユーザがデータを要求した時には容易に取り出すことができるのでユーザのアクションに対するレスポンスを大きく改善することができます。バックグラウンドでデータをあらかじめダウンロードしてsqliteにいれていれば、電車が圏外に移動してもsqliteからデータを読み出すことができます。うまくいけば駅に停車している間に圏外になっている間に読むだけの量をあらかじめ読んでおくことができるかもしれません。 UIの作り込みをのぞいたロジック部分はOSX上のsafari+javascriptで開発することができるので、あんまり互換性のないiPhoneシミュレータ+自分でメモリを解放しないといけないObjective-CでiPhoneのネイティブアプリケーションを書くのに比べると、圧倒的に短期間で容易に作ることができます。

モーション検地やマルチタッチさえ捨てれば、開発コストを考えると、JavaScriptでスゴイ完成度高いiPhone用のwebアプリを作るほうが楽そうな気もする。フィードバックや更新、配布コストの面から考えても。 fladdict» ブログアーカイブ » iPhone APPの開発は待ちか？

で書かれているとおり、開発が困難で時間のかかるネイティブアプリケーションでしかできないことは、カメラや加速度センサといったデバイスの機能を利用したいときだけです。 client-side storageが加わったことでHTML+javascriptだけでできることも大きく広がるので、同じだけの開発努力を注ぐならHTML+javascriptが正解という場合も多そうです。

参考

コード

( function () {
    var d = document;
    var e,i,j;
    function p () {
        l=d.location;return l.host + l.pathname
    }
    function _X(xpath, ctx) {
        exp = ctx.ownerDocument.createExpression(xpath, null);
        rs = exp.evaluate(ctx, XPathResult.ANY_TYPE, null);
        ns = [];
        while (i = rs.iterateNext()){ns.push(i);}
        return ns;
    }
    tgfm = null;
    for ( i = 0; i < d.forms.length ; i++ ) {
        f = d.forms[i];
        e = f.elements;
        for ( j = 0; j < e.length; j++) {
            if ( e[j].type == 'password' ) {
                tgfm = f;
                break;
            }
        }
        if ( tgfm )
            break;
    }
    ifnd = 0;
    n = 'dumbkeychain';
    db = openDatabase(n,'1.0',n);
    db.t = db.transaction;
    db.t(function(tx) {
        tx.executeSql('SELECT * FROM acs WHERE host = ?', [p()], function(tx, rs) {
            row = rs.rows.item(0);
            row.account.split(/\x02/).map ( function ( p ) {
                v = p.split(/\x01/);
                tgfm[v[0]].value = v[1];
            } );
            ifnd = 1;
        });
    });
    db.t(function(tx) {
        tx.executeSql('CREATE TABLE acs (id INTEGER PRIMARY KEY, host TEXT, account TEXT)');
    } );
    if ( !ifnd ) {
        tgfm.addEventListener( 'submit' , function (e) {
            ctx = d.documentElement;
            v = [];
            f = tgfm;
            for ( j = 0; j < f.elements.length; j++) {
                i = f.elements[j];
                t = i.type ;
                if ( t.match(/^text|password$/)) {
                    v.push( [i.name , i.value].join('\x01') );
                }
            }
            v = v.join('\x02');
            db.t(function(tx) {
                l = d.location;
                tx.executeSql('INSERT INTO acs VALUES(NULL, ?, ?)', [p(), v ] );
            } );
            return 1;
        }, true);
    }
} )()

XPathで書いたルールに従って複数ページにまたがったデータをあつめるjavascript製クローラ(失敗作)

Sat, 26 Jul 2008 00:14:28 +0900

ページからデータをとりだそうとするとき、詳細な情報が書かれているページは別に用意されていて、もとのページと詳細ページのデータを混ぜ合わせないと全部のデータが得られないことがあります。例としてTwitterが挙げられます。タイムラインのページでは、発言が長い時は発言の末尾が省略されて ... になるため、発言の個別ページにいって発言全体を取得する必要があります(と思って今確認したら、今は長くても発言全体が表示されるようになってました...)。以前に作ったWeb::Scraperのjavascriptバージョンwebscraper.jsはひとつのページからしかデータが取れなかったので、複数のページからもデータが取れるもの急いで作りました。 Firefoxであればブックマークレットから呼び出したり、Firebugコンソールで使えます。

スクリプト

jscrawler.js

つかいかた

Twitterのタイムラインのページ( http://twitter.com/home など )で

make_deferred_document(document, {
    paragraph: 'id("content")//tr',
    data: {
        name: './/a[@class="url"]/img/@alt',
        id: './/td[@class="content"]/strong/a',
    },
    subRequest: {
        url: './/a[@class="url"]/@href',
        paragraph: '.',
        data: {
            bio: './/span[@class="bio"]',
            url: './/div[@class="user_icon"]/a/@href'
        }
    }
} ).next( extractor ).next( function (data) {
        console.log(data);
} )

こんなかんじで取り出す部分を指定して使います。そうすると

タイムラインのページからリンクをたどってユーザの個別ページにあるbio(自己紹介のところです)部分といっしょに、ユーザのIDと表示名を取得することができます。と、ここまでは一見よさそうなんですけど....

よくみると全部に同じデータが入っていて、しかもタイムラインのページで取り出しているid,nameと個別ページから取り出しているbioのデータとが同じ人のものではなくほかの人のものが混ざっている状態なのでした.... 途中まで、時間的都合で再起的にたどるのはあきらめて2段階しかたどれない実装でいいやと思って書いていて、そのときはちゃんと動いてたのですが、やっぱりルールに従って何段階でもたどれるようにしたいと思って書き直したのが失敗でした。こういう、ほかのページをXMLHttpRequestで取得して全部のページのロードと処理が終わってから非同期でなにかを処理するときにはJSDeferredが便利です。MochiKitのDeferredも同じように使えます(がJSDeferredに比べてファイルのサイズが大きいのでちょっとしたのが書きたい時にはちょっとおおげさなかんじがします)。 javascriptで複数ページからデータを集めてくるのは、ずっとまえから欲しかったので再度挑戦したいと思います....

Firefoxのヒストリぜんぶをfaviconにして見る！

Fri, 18 Jul 2008 16:31:22 +0900

最近はほとんどどのサイトにfaviconが置かれるようになりました。Ruby on Railに似せて作られたPHPのアプリケーションフレームワークCakePHPではデフォルトでcakePHPのfaviconが入るようになっていたりします。サイトのfaviconは、ブラウザのブックマークから目的のサイトを探す時のように、大量にあるリストから自分の探しているものを見つける手がかりになります。ロシアで最大のシェアを誇るサーチエンジンyandexの検索結果にはfaviconが一緒に表示されるようになっています。

yandexで表示されているfaviconのURLはhttp://favicon.yandex.net/favicon/ru.wikipedia.orgという形式になっていて、faviconよりあとの部分を変えればそのURLのfaviconが表示されるようになっていました。が、さすがにロシアローカルのサーチエンジンなので日本のサイトはほとんどfaviconがでてきません。そこでURLを渡すとそのfaviconを返してくれるAPIというのがないのか探してみたらFavicon API (ファビコン) α版というのがありました。 Firefox3にもnsIFaviconServiceというなまえの"URLを渡すとそのfaviconを返してくれる"機能が入っています。これを使ってブラウザのヒストリをfaviconにして表示してみたらおもしろかったりするかなーと思ってやってみました。履歴からプライベートじゃないデータを全部捨てて、残ったURLのfaviconを並べてできたのが下のものです。

大半が検索の履歴になっているのはいいとして(ウェブの検索以外にGoogle Code Searchをよく使っています)、なんかやたらflickrにアクセスしてるかんじがしますねー。というのは文字で書いてある履歴を眺めていてもなかなかわかりませんが、こうしてfaviconにして並べてみると一目瞭然です。

つくりかた

Firefoxの履歴にアクセスするにはFirefoxの内部にアクセスするためのchrome特権というものが必要なのでFirefoxのToolsにあるError Consoleを使います。

javascriptやCSSのエラーが表示されるところです。このダイアログのCode:の部分にjavascriptを書くとchrome特権つきでコードを実行することができます(参考: JavaScriptコンソールからパスワードぶっこ抜き - hogehoge)。

ここに下のテキストエリアにあるコードをコピーして実行してください。このコードは以下のコードからいらないスペースや改行を削って作ったものです。

var m="@mozilla.org/";
var c=Components;var cc=c.classes;var ci=c.interfaces;
var hs = cc[m+"browser/nav-history-service;1"].getService(ci.nsINavHistoryService);
var result = hs.executeQuery(hs.getNewQuery(), hs.getNewQueryOptions());
var root = result.root;root.containerOpen = true;
var a = [];
for (var i=0; i < root.childCount; ++i) {
    try {
        var node = root.getChild(i);
        var fs = cc[m+"browser/favicon-service;1"].getService(ci.nsIFaviconService);
        var ios = cc[m+'network/io-service;1'].getService(ci.nsIIOService);
        var u= ios.newURI(node.uri, null, null);
        var favicon = fs.getFaviconForPage( u);
        a.push(favicon.spec);
    }
    catch (ex) {    }
}
var cs = cc[m+"browser/nav-history-service;1"].getService(ci.nsINavHistoryService);
cc[m+"widget/clipboardhelper;1"].getService(ci.nsIClipboardHelper).copyString("<"+a.map ( function ( n ) {
    return "img src='" + n+ "' width='16' height='16'";
} ).join("/>\\n<")+"/>");

これを実行するとクリップボードにfaviconがたくさん書かれたHTMLがコピーされるのであとは適当なテキストエディタにはってHTMLとして保存したあと、ブラウザで開けばあなたの履歴をfaviconでみることができます。

libxmlのHTMLパーサ+XPathでid関数が使えなくてはまる

Fri, 11 Jul 2008 19:32:29 +0900

さいきんlibxmlでHTMLを読み込んでXPathで要素を取り出すのが一部([xml][libxml2][c]XMLをHTTPで取得して、XPathで指定された中身をC言語で取り出す方法 - グニャラくんのグニャグニャ備忘録@はてな)ではやっています。これにちょっと癖があってはまりました。



  hello
  world

こういうHTMLファイルを読み込んで id("list")/li というXPathを評価させるとなぜか何にもマッチしないのです。でもこれを //*[@id="list"]/li に置き換えるとhelloとworldを囲んでいるliふたつにマッチするようになるので、パース自体は問題ないようです。で、いろいろいじっていたらなんでもいいのでHTMLにDOCTYPEをいれるとid関数が使えるのに気がつきました。




  hello
  world

にするとid("list")/liでliふたつがマッチするようになりました。 Module HTMLparser from libxml2にはthis module implements an HTML 4.0 non-verifying parser with API compatible with the XML parser ones. と書かれていて、ベリファイしないけどHTML4.0のパーサというのがどういう意味なのかわかりませんが(HTML4.0で定義されている要素であれば、その論理構造を考慮した上でwell-formedにしてくれるということでしょうか)、とりあえずid関数が使えるようになりました。

クローンサービスのAPIデザイン

Fri, 04 Jul 2008 21:40:43 +0900

最近トラブル続きのTwitterのかわりにWassrを使いはじめたひとたちにフォローしていただいてたくさんメールが来ました。去年たくさんできたtwitterみたいなサービスの中で、自分が注目していたのはもごもごとWassrです。このふたつのサービスにはTwitter同様APIが用意されているだけでなく、そのAPIがTwitterのAPIと互換になっていると書かれていたからです。 1年前に書けばよかったのにとおもいつつ、今日はサービスのAPIがほかのサービスと互換にすることについて書きます。

いいところ

既存のサービスと完全に同じAPIにすると、そのサービス用に作られたツールを少し改造すればそのまま新しいクローンのサービスで使うことができるようになります。 Twitterのクローンであれば、そのサービスにTwitterとおなじAPIを用意すれば、Twitter用に作られた多数のツールをそのまま流用することができます。実例として、Twitterのタイムラインを見たり投稿したりできるFirefoxの拡張機能TwitterFoxを使ってもごもごのタイムラインを表示、投稿できるかためしてみました。 twitternotifier@naan.net/components/nsITwitterNotifier.jsの中にあるtwitter APIのサーバ名が書かれている

const TWITTER_API_URL = "https://twitter.com/";

を、もごもごのAPIのサーバ名

const TWITTER_API_URL = "http://api.mogo2.jp/";

に書き換えるだけで、Twitterでいうfriends_timeline(ともだちの発言一覧)を得ることができました。もごもごにともだちがいないので自分一人ですけど....

Twitterfoxからもごもごに投稿することもできました。が、投稿はされていてページには反映されるもののTwitterfoxにはエラーが発生したと表示されるので、投稿のレスポンスがTwitterのAPIとは微妙に違っているのかもしれません。 Firefoxの拡張機能はたいていはjavascriptで書かれているので直接編集することができますが、Windowsで人気なTwitのようにOSネイティブのアプリケーションはバイナリエディタでしかAPIのエンドポイントを書き換えたりできません。そのアプリケーションがもともとアクセスするサーバの名前よりも、自分の新しいサービスのAPIのサーバの名前の方が長いとバイナリエディタで上書きすることができなくなってしまうので、同じ長さにするか、もしくはそれより短くしておくとバイナリの書き換えが不可能、ということがなくなります。

よくないところ

ほかのサービスとAPIを同じにするのはときとして大変です。FlickrのようにAPIの仕様が安定しているサービスもあれば、TwitterのようにAPIの仕様をたびたび変えているようなサービスとの互換性を維持していくのは面倒な作業になります。もごもごAPIもWassr API DocumentもTwitterと互換のAPIと書かれていますがTwitterfoxでアクセスしてみると(どこに原因があるのかはきちんと調べていませんが)やっぱりどこかで互換でなくなっているようでうまく動きませんでした。元のサービスにない新しい機能を追加した時に、元のサービスのAPIデザインとは別に設計した方が効率的にできることもあるでしょう。もとのサービスのデザインがいまいちだということもあるでしょう。

まとめ

いいところもわるいところもありますが、既存のサービスと似たサービスのAPIを設計する時、既存のサービス向けに作られた豊富なクライアントアプリケーションを使えるように完全互換にすることも検討してみてはいかかでしょうか。

他の事例

del.icio.usクローンのFaves(以前はblue dotsという名前でした)は、はじめSOAPのAPIしかありませんでしたが、あとになってdel.icio.us互換のAPIが実装されました。その結果del.icio.usのために書かれたAPIライブラリのホスト名を書き換えるだけでFavesのデータにアクセスできるようになって、非常に便利になりました。

TheSchwartzで仕事をあとにまわす

Wed, 25 Jun 2008 18:38:34 +0900

web2.0 時代のジョブキューサーバー Gearman と TheSchwartz の関係について - TokuLog 改めB日記に書かれているとおり、Gearmanは仕事を投げられたらすぐやって返す前提になっていて今やりたくないけどあとでやるみたいなのができません。たとえば、10分後にならできるんだけど、という仕事が来たとします。このときGearmanのワーカの中でsleepして10分待つと、後から来たほかの仕事を一切しないで10分待つことになってしまって、後から来た仕事が今すぐできるものだったとしても10分待たれさるのでGearmanだと今来た仕事のためにsleepして待つわけにはいきません。結果としてGearmanだとやってきた仕事を今すぐやるか、絶対やらないか、の二択になってしまいます。それだと困るので、もう一方のTheSchwartzだと、今やりたくないけどあとでやる、ことができるのかなーと思って調べてみたらできました。GearmanとくらべてTheSchwartzのほうはどうやって使うかあまり書かれてなかったので、TheSchwartzを使ってやってきた仕事を後に回す方法を書きます。

MySQLにテーブルを作る

Gearmanが仕事のキューをメモリ上に持つのに対して、TheSchwartzはデータベースに保存します。だからはじめにデータベースにテーブル作ったりするんだろうなと思ったのですがTheSchwartz - reliable job queue - search.cpan.orgにもTheSchwartz をためす - TokuLog 改めB日記にもテーブルを作ることについて触れられていません。なければ勝手に作ってくれるのかなと思ってSYNOPSISのコードを実行してみたけどやっぱり自動でできたりはしなそうだったので調べたらCatalyst and TheSchwartz: Reliable JobQueue in a great framework - Voxにschema.sqlを使うといいと書いてありました。このスキーマをmysqlで実行すればTheSchwartzのキューを管理するためのテーブルが出来上がります。

コード

セットアップができれば後はGearmanとおなじかんじです。workerで仕事の名前を登録して、仕事を待ちます。 Gearmanとちがうところは、関数を登録するのではなくTheSchwartz::Workerのサブクラスを作って、そのクラス名を登録するところ。仕事が来た時には作ったサブクラスのworkメソッドが呼び出されます。 TheSchwartzのサーバは、デフォルトでは5秒間隔でキューをチェックして、仕事があった時にはその仕事の名前に応じたワーカを起動します。workはふられた仕事に対してWORKINGにある4つのメソッドのうちのどれかを呼び出して終了します。

completed()

仕事を問題なくこなした時に呼び出します。TheSchwartzでは問題なく終わった時は、その結果をどこかに保存したりはできないようで、なにも引数はありません。そういうときはわざとfailしたことにするのかな。

failed($msg, $exit_status)

やったけどだめだったときに呼び出します。failedを呼ぶと、失敗した時刻、ジョブのID, $msg, $exit_statusがdbのerrorテーブルとexitstatusテーブルに記録されます。perlの実行時エラーでなどで失敗した時も同様にerrorテーブルに記録されるようになっています。

max_retriesが0以上に設定されている時はfailedを呼んでもジョブはキューから削除されずに、max_retriesの値に達するまで即時再度実行されるようになっています。常に失敗するような状態になっている時にmax_retriesが大きな値になっているとすごい勢いでループしてCPUを浪費するので注意が必要です。

permanent_failure( $msg, $exit_status )

リトライしてもだめなエラーの時にはpermanent_failureを呼び出すとmax_retriesに関わらずリトライされません。$exit_status = 1で呼び出すとさらにキューからジョブを削除されます。

replace_with

今のジョブをキューから削除してほかのジョブで置き換えたい時に呼び出します。たとえば、ログインしないとアクセスできないページのデータを読み込みたい時、持っているクッキーがまだ有効だと思ってアクセスしたらクッキーが無効でログインが必要になった場合、ページを読み込むといういまのジョブを

ログインページにアクセス
アカウント情報をpost
データを読み込みたいページにアクセス

という3つのジョブと入れ替えたい、というような時に使います。

今回はこの最後のreplace_withを使って今きた仕事を明日(24時間後)にするサンプルを作りました。 TheSchwartzには時間を指定してジョブを実行させることができるようになっていたりして、やってきた仕事を今すぐやるかやらないかしかないGearmanにくらべて柔軟な管理ができます。 Gearmanに比べるとスペルが覚えられないのとタイプしにくいのが難点です。

worker.pl

package MyWorker;
use base qw( TheSchwartz::Worker );

sub work {
    my ($class, $job) = @_;

    my $deferredJob = TheSchwartz::Job->new(
        funcname => $job->funcname,
        arg => $job->arg,
        run_after => time + 24 * 3600
    );

    $job->replace_with( $deferredJob );
}

package main;
use TheSchwartz;

my $client = TheSchwartz->new(
    databases => [{dsn => 'dbi:mysql:the_schwartz', user => 'root', pass => ''}],
    verbose => 1
);
$client->can_do('MyWorker');
$client->work();

client.pl

use TheSchwartz;
use JSON;

my $client = TheSchwartz->new(
    databases => [{dsn => 'dbi:mysql:the_schwartz', user => 'root', pass => ''}],
    verbose => 1
);

my $arg = {
    hello => "world",
    fizz => "buzz",
};
$client->insert('MyWorker' => to_json($arg) );

サービスのread/writeとコンテンツのfav

Fri, 20 Jun 2008 19:17:14 +0900

Permalinkという概念が浸透して、比較的最近作られたようなウェブのサービス上にあるリソースには、そのリソースを一意に表すことのできるURLが割り当てられているようになりました。このブログの記事を表すURLはhttp://labs.gmo.jp/blog/ku/2008/06/fav.htmlで、このURLにアクセスすればこのページがなくなったりしない限りは"多くのサービスに見られるコンテンツに対するfavという概念"について書かれた文章が得られます。このブログにある記事が増えたり減ったりしても、この記事を表すURLは変わりません。

read/write

ひとつのリソースに普遍的なひとつのURLが割り当てられていれば、そのURL自体をIDにしてリソースを読み書きすることができます。以前デバイスドライバ/FUSEのrestfs/SITEINFOの役割比較で触れたRESTfsはその前提の上に立つことで、ウェブのサービスをファイルとして読み書きする機能を提供しています。 RESTのAPIが提供されていないウェブのサービスであっても、ユーザがウェブ上でコンテンツを公開したりするためのサービスは、コンテンツひとつひとつを表すURLと、そのコンテンツに対する読み込みと書き込みの概念が存在します。コンテンツの読み込みは、ふつうにブラウザでそのコンテンツがあるページを閲覧することです。コンテンツの書き込みは、そのサービスが受け付けることのできる形式のリソースをサービスにアップロードすることです。YouTubeであればビデオを投稿することが書き込みにあたります。Flickrであれば写真のアップロード、twitterであればなにかつぶやいてみること、ブログであれば記事を書いて投稿すること、del.icio.usであればブックマークを新しく作ることです。このように多くのウェブのサービスはread/writeすることができます(writeはともかくreadできないサービスはないでしょう)。

fav

多くのウェブのサービスではread/writeのほかにもうひとつコンテンツに対して広く行われている操作があります。何がきっかけなのかわかりませんが、いまでは多くのサービスでそのコンテンツが気に入ったことを表すためにfavoriteマークをつけることができるようになっています。

YouTube: YouTubeにはそのビデオが好きだった時に♡マークのFavoriteボタンを押すと、自分のお気に入りのビデオのリストに追加されるようになっています。
Flickr: Flickrには☆マークのFAVESボタンがあります。これも自分のお気に入り写真のリストに追加されます。
Twitter: Twitterにも☆マークで"Favorite this update"というボタンがあります。星をつけると自分のお気に入りリストに入ります。ふぁぼったーというtwitterのお気に入りを集計しているサイトもあります。
ブログ: ブログには上に挙げたサービスのように、その投稿が気に入ったことを表すための機能はありません。そもそもその気に入った投稿が書かれているブログが自分のブログでない限りは、書き込むことができません。そのため、ブログの投稿を自分のお気に入りとしてリストしていくには、原理的に外部のサービスに頼る必要があります。そのお気に入りのブログの投稿を管理するための外部のサービスが、古くからあるブラウザのブックマークであり、現代的なものではdel.icio.usのようなソーシャルブックマーク、はてなスターやdiggやstumbleuponのような、おもしろかったらボタンを押す、サービスがあります(stumbleuponとdiggには"おもしろくなかった時に押すためのボタンもあります)。
del.icio.us: ひとつ上のブログのところで述べたように、del.icio.usがfav機能を持たないコンテンツに対してfavするためのサービスとして存在していて、投稿されるものがコンテンツであるという認識に立っていないからか、del.icio.us自体にはコンテンツである投稿されたブックマークひとつひとつに対するfavに相当する機能はありません。それはdel.icio.usがfavできないサービスに対するfavを保存しておくためのサービスだと考えることができるからかもしれません。del.icio.usが持っている、ひとつひとつのブックマークというコンテンツに対してfavをつけることはできないものの、ブックマークをしている人を "add to your network" することができます。

人を自分のネットワークに追加すると、your networkというページでネットワークに入っている人がポストしたブックマークの一覧に表示されるようになります。 "ひとつのURLに結びつけられたリソースに対する操作としてのfav"ではありませんが、そのユーザをひとつのリソースとしてとらえればfavとして考えることもできます。

サービスにfavという概念がないかで見てみるとamazonにも気に入った商品のリストを作るためのほしい物リストがあり、gmailにもメールに☆をつける機能があります。

last.fmでも"Express love for this track"があり、FriendFeedにも"like"があります。

まとめ

だからなにということもなくそれだけですが、ファイルシステムとしてマウントすることが可能なくらいファイルシステムと同じ性質を持っているインターネット上のサービスに、ファイルシステムには存在しないfavという概念が広く存在していることがおもしろいなと思いました。 RESTfsでそれぞれのサービスのread/writeをラップして一元的にread/writeできるのと同じように、それぞれのサービスにあるfavをラップして一元的にfavすることもできそうです。

WebKitでサポートされているJavaScript1.6のべんりなArrayメソッド

Fri, 13 Jun 2008 22:41:53 +0900

常識なのかもしれないですけど、先日たまたまJavaScript1.6で追加されたArrayの拡張メソッドがWebKitでもサポートされているのに気がつきました。ちゃんとした文書をみつけられなかったのですが[webkit-reviews] review denied: [Bug 6252] JavaScript 1.6 Array.lastIndexOf : [Attachment 10095] lastIndexOf javascript patchというのが出てきたので、WebKitでも正式にJavaScript1.6がサポートされてるようです。

こういうときにべんり

追加されたメソッドで最も便利なのがmap()です。mapは引数に関数を渡して使います。配列の各要素を引数にして渡された関数を実行して、関数の返した値を配列として返してくれます。mapは戻り値として配列を返すのに対して、何も返さないforEachもあります。何も返さないぶんforEachのほうが高速なんだと思いますが、タイプするときに難しいので、値を返さないときでも私はもっぱらmapを使っています。 mapの何が便利なのか、例としてjavascriptでURLのクエリ文字列をパースして、ひとつのオブジェクトにパラメータの名前をキーにして値を保持する処理を考えてみましょう。mapを使わずにふつうにforを使って書くとこうです。

var params = {};
var q = "q=prototype.js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a";
var pairs = q.split(/&/);
for(var i = 0; i < pairs.length; i++ ) {
    var pair = pairs[i];
    var nv = pair.split(/=/);
    var n = decodeURIComponent( nv[0] );
    var v = decodeURIComponent( nv[1] );
    params[n] = v;    
}

ループをまわすためにforを書いたり、URLエンコードされているかもしれない名前と値をデコードするために一度変数にいれたりしないといけません(params[ decodeURIComponent(nv[0]) ] = decodeURIComponent(nv[1])って書くのはちょっと嫌ですよね)。おなじ処理をmapを使って書くとこんなにすっきりします。

var params = {};
var q = "q=prototype.js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a";
q.split( /&/ ).map( function (pair) {
    var nv = pair.split(/=/).map( decodeURIComponent );
    params[ nv[0] ] = nv[1];
} );

mapの引数にした関数に配列の要素の値が直接渡されるので、インデックスのための変数が必要なくなるのと、パラメータの名前と値をデコードするのに2回decodeURIComponentを書かなくてよくなるのですっきりします。今回はわりとなじみがありそうな例としてクエリ文字列のパースをあげました。関数を引数に渡すのはなんか難しそうですが、forでループで書くのにくらべてmapだと書かないといけない量が少ないのでとりあえず楽ができます。ただけっきょくIEでサポートされてるわけではないので、SafariでJavaScript1.6のArray拡張が実装されていてもiPhone/iPod touch用のサイトくらいしか使える機会がないのが悲しいところです...

thisに注意!

ただクラスの中でmapを使うときには注意です。引数に渡した関数の中ではthisの値が変わっています(windowオブジェクトになっています)。さっきのコードがもし下のようにクラスメンバのparamsに結果を代入するようになっているとParser.paramsではなくwindow.paramsに結果が入ってしまいます。

var Parser = {
    params: {},
    parse: function (q) {
        q.split( /&/ ).map( function (pair) {
        var nv = pair.split(/=/).map( decodeURIComponent );
            this.params[ nv[0] ] = nv[1];
        } );
    }
}

これを避けるには2つ方法があります。よく使われているのが、mapの前にthisをselfに代入しておく方法です。一時的に代入しておくための変数はselfでなくても何でもいいですが、慣習としてselfが使われます。

var Parser = {
    params: {},
    parse: function (q) {
        var self = this;
        q.split( /&/ ).map( function (pair) {
            var nv = pair.split(/=/).map( decodeURIComponent );
            self.params[ nv[0] ] = nv[1];
        } );
    }
}

もうひとつはmapの第2引数にthisになるオブジェクトを指定する方法です(さっき知りました...)。関数内のthisで示されるオブジェクトを第2引数で変更することができます。

var Parser = {
    params: {},
    parse: function (q) {
        q.split( /&/ ).map( function (pair) {
            var nv = pair.split(/=/).map( decodeURIComponent );
            this.params[ nv[0] ] = nv[1];
        }, this );
    }
}

前者はスコープチェインをたどってselfという名前が解決されるのにくらべて、後者の方は同じスコープに名前があるぶん処理が軽いでしょう。WebKitでも同様に第2引数で関数内のthisを変更することができます。

JavaScript1.8だとさらに短く書けます!

WebKitでサポートされているのはJavaScript1.6のでですが、FirefoxのJavaScript1.8ではさらなるArrayの拡張というのがサポートされています。上のクエリ文字列のパースは、さらにJavaScript1.7で導入された分割代入とさらなるArrayの拡張に含まれているreduceを使うとさらにすっきりさせることができます。


var q = "q=prototype.js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a";
var params = q.split( /&/ ).reduce( function (_params, pair) {
    var [n, v] = pair.split(/=/).map( decodeURIComponent );
    _params[ n ] = v;
    return _params;
}, {} );

というふつうに便利なのでIEでも使えるようになるといいですね。

javascriptで作るGearmanクライアント

Thu, 05 Jun 2008 15:13:05 +0900

Webアプリケーションの中には、ときどき時間がかかる処理をしないといけない部分があります。アップロードされた画像のサムネイルを多数生成するときや、クライアントからのリクエストに応じてさらにリモートのサーバからファイルを取得してきたりするとき、ふつうに作るとユーザは処理が終わるまでの数秒~数十秒間待たされるのでイライラしてきます。こんなときには昨年のYAPCでLiveJournal: Behind The Scenesの中で紹介されている、perlで書かれた非同期処理サーバのGearmanが役に立ちます。Webアプリケーションから時間のかかる処理を別プロセスで動いているGearmanに依頼しておくことで、時間のかかる処理が終わるまで待つことなくユーザにレスポンスを返すことができます。ほんとうは、時間のかる処理の性質と、必要とされる機能に応じてGearmanとTheSchwartzとを使い分けるべきです。細かいことは web2.0 時代のジョブキューサーバー Gearman と TheSchwartz の関係について - TokuLog 改めChumbyとどきました日記をご参照ください。 GearmanはperlからだけでなくPHPやrubyやpythonにもポーティングされていて、ジョブを追加することができます。 Firefoxからも直接追加したいことがあったので、javascriptでGearmanにジョブを追加するコードを書きました。

var Pack = {
    VERSION: "0.0.3",
    _range: function (n) {
        var a = [];
        while (n--) { a.push(n) }
        return a;
    },
    _bytes: function (value, bytes) {
        return this._range(bytes).map( function(n) {
                    return String.fromCharCode( (value & (0xFF << ( 8 * n )) ) >> (8 * n) );
        } );
    },
    _16: function (n) { return this._bytes(n, 2) },
    _32: function (n) { return this._bytes(n, 4) },
    N: function (n) { return this._32(n).join(""); },
    n: function (n) { return this._16(n).join(""); },
    v: function (n) { return this._16(n).reverse().join(""); },
    C: function (n) { return String.fromCharCode( n ); }
};

	
function dispatch_background (method, uniqid, arg, host, port ) { 
	host = host || "localhost";
	port = port || 7003;
	
	var sts = Components.classes["@mozilla.org/network/socket-transport-service;1"].
            getService(Components.interfaces.nsISocketTransportService);
	
	var t = sts.createTransport (null, 0, host, port, null );
	var os = t.openOutputStream(0,0,0)

	var payload = [method, uniqid, arg].join("\0");
	var data = [
		'',
    	    [
   	 	"REQ",
    		Pack.N(18), // submit_job_bg
		Pack.N( payload.length ),
		payload
	    ].join("")
	].join( "\0" );

	os.QueryInterface(Components.interfaces.nsIAsyncOutputStream);
	os.write(data, data.length)
	os.close()

}

// dispatch_background("ticket", uniqid, '{"name":"ku"}');

GearmanのサーバはTCPのポート7003をlistenしています。ここにGearman/Util.pmの

sub pack_req_command {
    my $type_arg = shift;
    my $type = $num{$type_arg} || $type_arg;
    die "Bogus type arg of '$type_arg'" unless $type;
    my $arg = $_[0] || '';
    my $len = length($arg);
    return "\0REQ" . pack("NN", $type, $len) . $arg;
}

を参考に、同じパケットを作って送れば、どんな言語からでもジョブを追加することができます。

Firefox3の新機能 SmartBookmarkを使ってブックマークや履歴を一定の基準でリストアップする

Fri, 30 May 2008 17:16:31 +0900

(たしか)Firefox3beta5から、ブックマークツールバーに"Most Visited"や"Recently Bookmarked"という項目がデフォルトで入っているようになりました。プロパティをみてもタイトルしか表示されず、どういう仕組みになっているのかわかりません。表示する情報をいろいろ変えられるのならおもしそうだなーと思って、これの作り方を調べました。

以前からあるlivemarkと同じようなみためで、自分のブラウザの履歴やブックマークから一定の基準でフィルタされたデータがリスト表示されます。ちなみにlivemarkはSafariやIE7にもついているRSSをブックマークのフォルダとして登録できて、RSSのアイテムひとつひとつがブックマークとして表示される機能のことです。ほかにもFirefoxにはmicrosummariesというXPathでページの特定の部分を取り出して表示するめずしい機能があったりします。しげふみメモ:livedoor Reader購読者数のライブタイトルなどをご覧ください。

作り方

ソースコードをみてみると、このブックマークはFirefoxをインストールしたときにbrowser/components/nsBrowserGlue.jsで作られるようになっていました。 Firefox3で新しく導入されたannotation serviceというのが持っている機能のようです。コードをみると

place:queryType=1&sort=12&maxResults=10

のようなplace:ではじまるURLに似た文字列をnsINavBookmarksService#insertBookmarkに渡してブックマークを作った後、nsIAnnotationService#setItemAnnotationを設定しています。どうやって作るかわかったところで試しにひとつ作ってみましょう。Firefox3では、ブックマークにタグがつけられるようになっているので、タグにtoseeとつけたブックマークを新しいもの順で10件表示するsmarkBookmarkを作ってみます。

特権の必要なコードを実行するために、まずchrome://browser/content/browser.xulを開きます。ウインドウでchromeのアドレスを開いているときはFirebugのコンソールで特権の必要なコードを実行することができるようになります。


var SMART_BOOKMARKS_ANNO = "Places/SmartBookmark";
var bookmarksToolbarIndex = 0;

var bmsvc = Cc["@mozilla.org/browser/nav-bookmarks-service;1"].
                getService(Ci.nsINavBookmarksService);
var annosvc = Cc["@mozilla.org/browser/annotation-service;1"].
                getService(Ci.nsIAnnotationService);

var instance =  {
      _uri: function(aSpec) {
        return Cc["@mozilla.org/network/io-service;1"].
               getService(Ci.nsIIOService).
               newURI(aSpec, null, null);
      },
    run: function () {
      var smartBookmark = {
                     queryId: "ToReadBookmarks", 
                     itemId: null,
                     title: "toread",
                     uri: this._uri(
                                    "place:queryType=" +
                                    Ci.nsINavHistoryQueryOptions.QUERY_TYPE_BOOKMARKS +
                                    "&sort=" +
                                    Ci.nsINavHistoryQueryOptions.SORT_BY_DATEADDED_DESCENDING +
                                    "&terms=toread" +
                                    "&maxResults=" + 10 
                     ),
                     parent: bmsvc.toolbarFolder,
                     position: bookmarksToolbarIndex};

      smartBookmark.itemId = bmsvc.insertBookmark(smartBookmark.parent,
                                                      smartBookmark.uri,
                                                      smartBookmark.position,
                                                      smartBookmark.title);
      annosvc.setItemAnnotation(smartBookmark.itemId,
                                    SMART_BOOKMARKS_ANNO, smartBookmark.queryId,
                                    0, annosvc.EXPIRE_NEVER);
    }
};
instance.run()

コードは長いですが、重要なのはマゼンダで色を付けてある部分だけです。これで"toread"という名前のsmartBookmarkがブックマークツールバーに作られて、toseeというタグをつけたブックマークが表示されるようになります！(正確にはタグだけでなく、URLやページのタイトル、自分で書いた説明文にtoseeという文字列を含んでいるブックマークが表示されます)

place:で始まるパラメータをかえればほかのものを表示させることもできます。パラメータの解説は Places query URIs - MDC にあります。ざっとみたところ、ブックマークと履歴のデータをもとにして、特定の基準でデータをリストアップさせることができるようになっています。 twitter.comドメインでよくアクセスしているURL順で10件表示というようなこともできるので、何か面白い使い方ができると思います。GUIで簡単に設定したりできないのがもったいないところです....

jqueryのpackedバージョンは読み込みに(80msくらい)時間がかかる

Thu, 22 May 2008 20:24:59 +0900

先日The JUI 2008 Tokyoに参加させていただいて、その中でGreasemonkeyの中で使うならjQueryが便利だよ！というLightning Talkを聞きました。たぶんその発表をされていた内山さんが以前に書かれたWe Ain't Seen Nothin' Yet. : GreasemonkeyスクリプトにjQueryを読み込む汎用スクリプトを今朝読んでXPCNativeWrapperがあるのでグローバルのネームスペースにいろいろ設定したりするほかのライブラリだと使いにくいというのもあるのを知りました。

コードの評価にどれくらい時間がかかるのか

自分も以前にMochiKitの非同期処理をラップしてくれるDefferedを使いたくてMochiKitをまるまるスクリプトの中に入れて使ったことがありました。そのときMochiKitをまるまるいれたら読み込むのに100msくらいかかるようになった印象があったので、実際どれくらい時間がかかるのか測ってました。ライブラリ本体がブラウザのメモリキャッシュに入っている状態で、ライブラリ本体を読み込むscriptタグの前と後とでFirebugの機能であるconsole.time()/console.timeEnd()を使って時間を計りました。

何回もリロードして値の平均を取ったりするときは、いまのところFirefoxにしか実装されていませんがDOM:Storage - MDCを使って記憶しておくとページをリロードした後でもDOMストレージから同じ値をjavascriptのオブジェクトとして読み出せるので便利です。Firefox2から実装されています。

評価結果

scriptタグの読み込みオーバーヘッドを知るために、dataスキームを用いて空のjavascriptも評価させました。環境は2.16GHz Intel Core2Duo OSX10.5.2+Firefox3RC1です。

ライブラリ名	ファイルサイズ	実行時間(20回の平均)
data:text/javascript;base64,	0	24.9ms
jquery-1.2.5.js	98k	25.1ms
jquery-1.2.5-packed.js	31k	108.3ms
MochiKit.js(1.3.1 packed version)	111k	112.8ms
prototype-1.6.0.2.js	124k	118.5ms

結果からはjQueryの初期化処理がとても速いことがわかります。(オーバーヘッドを差し引くとほとんど0msで処理が終わっているのは、わりと測定値がばらついたので20回の計測だと誤差の範囲内に実行時間が収まってしまったからです。jQueryの本体のはじめと終わりで測ってみたら4ms程度でした)。ファイルサイズを小さくするために中身がこんな


eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCh
arCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function
(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e
(c)+'\\b','g'),k[c]);return p}('(G(){I w=19.4G,3k$=19.$;I D=19.4G=19.$=G(a,b){H 2t D.16.5r(a,b)};I
 u=/^[^<]*(<(.|\\s)+>)[^>]*$|^#(\\w+)

ふうに圧縮されているjQueryのpackedバージョンはevalしているのが災いしてなのか、ファイルサイズは1/3なのに実行時間はふつうのjQueryにくらべて80msくらい長くなってしまって、ほかのライブラリと同じくらい読み込みに時間がかかっていました。

まとめ

ページをロードするたびに毎回実行されるGreasemonkeyスクリプトの中で使用するなら、読み込みが圧倒的に速いjQueryが適しています。jQuery-packedはファイルサイズは小さいですが、読み込みは80msくらい遅くなってしまいます。Greasemonkeyスクリプトや、ブラウザキャッシュに永続的に残る設定でjQueryを使うのならpackedでないバージョンのほうが読み込み処理が速くなります。

追記 2008.5.23

Twitter / 文殊堂: @ku minifiedバージョンの方を使うべし＞jQ...でminifiedバージョン(改行やインデント等の不要なスペースを削っただけのもの)があるのを教えていただいたので、試してみました。通常バージョンと同じくらいの時間(4~5ms)で読み込まれてファイルサイズも少し小さい(51k)ので、Greasemonkey等に組み込むならminifiedバージョンが最適です。

infra-RED LED throwies をセンサバーのかわりにしてWiiリモコンを動かす

Fri, 16 May 2008 20:35:50 +0900

みなさまGraffiti Research Labをご存じでしょうか。ハイテク(とかローテクとか)を駆使して最先端のグラフィティをテーマに活動している集団で、ビルにレーザーで落書き映像を投影するL.A.S.E.R. Tagが有名です(MoMAで展示もあったそうで)。Graffiti Research Labにはいろんな作品があるんですが(ページの右側にリストされています)、その中で個人でもわりとお手軽に楽しめるのがGraffiti Research Lab » LED Throwiesです。

LED throwies の作り方

3Vのボタン型リチウム電池にLEDを挟んで磁石と一緒にテープでくっつけたらできあがり。あとは身近にある金属の部分がある何かにくっつけて楽しみます。部品の調達方法から組み立てかたまで、詳しいことはLED Throwies - Instructablesに載っています(日本だとリチウム電池と磁石が安く手に入らなくてひとつあたりの原価が100円を越えてしまいます。もし安く手に入るところがあったらぜひ教えてください！)。自分もちょっと前に作って遊んだことがあって、今日はそのとき買ったLEDを引っ張りだしてきました。下の写真は磁石なしバージョンです。

磁石でくっつけなくても透明なテープで貼ってしまえばどこにでも貼付けられます。どれくらいの間光ってるかはLEDの種類にも依りますが、青系で1日くらい、赤系だと2~3日くらい持ちます。

赤外線LED throwies

ここでいきなりはなしがきれいなLED throwiesからWiiのセンサバーのはなしになります。 Wiiのセンサバーは、センサとは名ばかりで実際にはセンサバーの中に入っている赤外線LEDから出た光をWiiリモコンで受け取ってリモコンの向きを検知しているので、赤外線を出すものであればなんでもセンサバーの変わりにできます。 Wiiのセンサーバーはろうそくで代用可能 - Engadget Japaneseならば、なんでもいいんじゃないの？と思って赤のLEDをセンサバーに見立ててWiiリモコンが使えないか試してみたけどさすがにふつうの赤のLEDでは代用できず。秋葉原で950nmをピークに持つ東芝の赤外線LED(スペックシートは行方不明...)を買ってきました(ちなみにピークは950nmでなくても920~970nmの範囲では問題なく動作しました)。それで作ったのが下の写真の赤外線LED throwiesです。

赤外線は目に見えないのでまったく光ってるように見えませんがこれで光っています(デジカメは赤外線の波長にも感度があるので映るのですが、そんなにはっきりとはうつりません)。

infra-RED LED throwies + Darwiin remote

OSXにはDarwiinRemoteというWiiリモコンでマウスを操作したりするツールがあります(WiiRemoCom Firefox3対応版でもDarwiinRemoteの基盤であるWiiRemoteFrameworkを利用しています)。これを使えばOSX上で簡単にWiiリモコンを使ってクリックしたりはできるのですが、センサバーを持ち歩くわけにもいかないのでマウスの操作が加速度センサでしかできないのが問題でした。が、この赤外線LED throwiesを Mac Book Pro の上にテープで貼って固定すればちゃんとセンサバーのかわりとして機能します！

きれいに撮れてないものの、画面の中にある黄色い■がWiiリモコンのIRセンサを認識している証拠でWiiリモコンを動かすとマウスが動いてボタンを押せばクリックできるので完全にマウスの代わりに使うことができます(ドラッグアンドドロップとかはできなかったかも)。赤外線LED throwiesはほんもののセンサバーと違ってテープでどこにでも貼ることができるので、いつでもどこでもWiiリモコン用のセンサバーとして使えます。プレゼン前にスクリーンの下に貼っておけばスクリーンをレーザーポインタで指し示す感覚でマウスを動かすことできるでしょう！ちなみにwindowsでもWiinRemoteでWiiリモコンをマウスの代わりに使えるそうなので、赤外線LED throwiesと組み合わせてWiiリモコンで指し示しながらのプレゼンが可能です。