Big Sky

jQueryでマウスホバーでリンクに影をつけるカッコいいプラグインを見つけました。

nakajima's jquery-glow at master - GitHub

Make your elements glow. Ooooh.

http://github.com/nakajima/jquery-glow/tree/master

以下実行例

続きを読む...

時代は便利になった物です。

MOONGIFT: » XMLをJSONにするXSLT「xml2json.xslt」:オープンソースを毎日紹介

xml2json.xsltを見ていたらma.la氏のAmazon最速検索を思い出した。あちらはAmazon AWS専用になるだろうが、xml2json.xsltはそれをもっと汎用的なものにしたと考えられるだろう。

http://www.moongift.jp/2009/04/xml2json-xslt/

javascriptとXSLTを使うならば、AWSサーバから見えるサーバを用意しないといけないのですがYahoo! YQLを使えばそれも要りません。
YQLといえばPipesに毛の生えた様な物だと思う方もいらっしゃるかもしれませんが、解析した結果をXMLやJSONで返す事ができJSONならばDOMツリーをJSONで表現してくれます。
例えばgithubで自分が公開したりforkしたりしているプロジェクトの一覧を作る場合、何を使って作りますか？Pipes？CGI？YQLならば簡単です。

続きを読む...

貧乏なので買えません。
カラースターショップ - はてな

ソース

// ==UserScript==
// @name           poor man's hatena color star
// @namespace      http://mattn.kaoriya.net/
// @description    poor man's hatena color star
// @include        http://*
// @include        https://*
// ==/UserScript==

(function() {
    // extend version of $X
    // $X(exp);
    // $X(exp, context);
    // $X(exp, type);
    // $X(exp, context, type);
    function $X (exp, context, type /* want type */) {
        if (typeof context == "function") {
            type    = context;
            context = null;
        }
        if (!context) context = document;
        exp = (context.ownerDocument || context).createExpression(exp, function (prefix) {
            return document.createNSResolver((context.ownerDocument === null ? context
                                                                             : context.ownerDocument).documentElement)
                           .lookupNamespaceURI(prefix) ||
                   document.contentType === "application/xhtml+xml" ? "http://www.w3.org/1999/xhtml" : "";
        });

        switch (type) {
            case String:  return exp.evaluate(context, XPathResult.STRING_TYPE, null).stringValue;
            case Number:  return exp.evaluate(context, XPathResult.NUMBER_TYPE, null).numberValue;
            case Boolean: return exp.evaluate(context, XPathResult.BOOLEAN_TYPE, null).booleanValue;
            case Array:
                var result = exp.evaluate(context, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                for (var ret = [], i = 0, len = result.snapshotLength; i < len; i++) {
                    ret.push(result.snapshotItem(i));
                }
                return ret;
            case undefined:
                var result = exp.evaluate(context, XPathResult.ANY_TYPE, null);
                switch (result.resultType) {
                    case XPathResult.STRING_TYPE : return result.stringValue;
                    case XPathResult.NUMBER_TYPE : return result.numberValue;
                    case XPathResult.BOOLEAN_TYPE: return result.booleanValue;
                    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
                        // not ensure the order.
                        var ret = [], i = null;
                        while ((i = result.iterateNext())) ret.push(i);
                        return ret;
                }
                return null;
            default: throw(TypeError("$X: specified type is not valid type."));
        }
    }

    var stars = ['star-red.gif', 'star-green.gif', 'star.gif#', 'star-blue.gif'];
    setInterval(function() {
        $X('//img[@src="http://s.hatena.ne.jp/images/star.gif"]').forEach(function(n) {
            n.src = "http://s.hatena.ne.jp/images/" + stars[parseInt(Math.random() * 4)];
        });
    }, 1000);
})();

インストール

poor-mans-hatena-color-star.user.js

WassrのAPIには、imageパラメータによる画像アップロードがあるのですが、これに困ってる人がいたので、人助け。

Wassr [お気軽メッセージングハブ・ワッサー]

質問です。Firefox の Live HTTP Headers で確認すると Web のフォームから画像をアップロードすると素のバイナリデータが送信されています。API を利用した POST でも素のバイナリデータで送信しなければならないのでしょうか？

http://wassr.jp/channel/wassr_api/messages/hNHcDCCtja

試しにvimperatorから出来ないか挑戦してたらハマってハマって...色々試してたんですが、どうも画像だけがアップロードされない。
送信データを以下の様な関数で保存して目で確認してみたけど、あってる。

function writeToFile (filePath, content) {
    try {
        netscape.security.PrivilegeManager.enablePrivilege ('UniversalXPConnect');
        var file = Components.classes["@mozilla.org/file/local;1"].createInstance (Components.interfaces.nsILocalFile);
        file.initWithPath (filePath);
        if (! file.exists ()) file.create (0, 0664);
        var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance (Components.interfaces.nsIFileOutputStream);
        out.init (file, 0x20 | 0x02, 00004, null);
        out.write(content, content.length);
        out.close();
    } catch (e) {
        throw e;
    }
}

で、最後の最後は自前でCGIを立ててデータを確認してみた所、なんとデータが欠けてる!!

もしかしてsendじゃ送れないんじゃないか？と思ったらXMLHttpRequestにsendAsBinaryなんてメソッドがあった。

XMLHttpRequest - MDC
This method was added in Firefox 3.

A variant of the send() method that sends binary data.

void sendAsBinary(
  in DOMString body
);

Parameters

body

The request body as a DOM string. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).

https://developer.mozilla.org/en/XMLHttpRequest#sendAsBinary%28%29

はよ言えや！

見事送信する事が出来ました。

function createMultipartData(data, boundary) {
    var ret = [], boundary = "BOUNDARY-" + (boundary||'')+Math.floor(0x1000000 + Math.random() * 0xffffff).toString(16);
    for (var item in data) {
        if (!data.hasOwnProperty(item)) continue;
        var obj = data[item];
        if (obj.filename) {
            ret.push(
                '--' + boundary,
                'Content-Type: '+obj.contentType,
                'Content-Length: '+obj.content.length,
                'Content-Disposition: form-data; name="'+item+'"; filename="'+obj.filename+'"',
                'Content-Transfer-Encoding: binary',
                '',
                obj.content
            );
        } else {
            ret.push(
                '--' + boundary,
                'Content-Disposition: form-data; name="'+item+'"',
                '',
                String(obj)
            );
        }
    }
    ret.push('--' + boundary + '--', '');
    return {
        contentType : "multipart/form-data; boundary=" + boundary,
        content: ret.join("\n")
    };
}


function getFileContents(aFilePath) {
    var file = Components.classes['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(aFilePath);
    var fstream = Components.classes['@mozilla.org/network/file-input-stream;1'].createInstance(Components.interfaces.nsIFileInputStream);
    fstream.init(file, 1, 1, Components.interfaces.nsIFileInputStream.CLOSE_ON_EOF);
    var bstream = Components.classes['@mozilla.org/network/buffered-input-stream;1'].createInstance(Components.interfaces.nsIBufferedInputStream);
    bstream.init(fstream, 4096);
    var binary = Components.classes["@mozilla.org/binaryinputstream;1"].createInstance(Components.interfaces.nsIBinaryInputStream);
    binary.setInputStream(fstream);

    var data = "", size = 0;
    while ((size = binary.available()) > 0) {
        data += binary.readBytes(size);
    }
    return data;
}

var sendData = createMultipartData({
    status: "image upload from vimperator!",
    source: "vimperator/wassr.js",
    image: {
        filename: "example.jpg",
        contentType: "application/octet-stream",
        content: getFileContents("C:\\example.png")
    }
});

var req = new XMLHttpRequest();
req.open("POST", "http://api.wassr.jp/statuses/update.json");
req.setRequestHeader("Content-Type", sendData.contentType);
req.setRequestHeader("Content-Length", sendData.content.length);
req.sendAsBinary(sendData.content);

こんなんでどうでしょうか？
てかFirefox2の時、どうしてたの？苦笑

githubのJSON APIを使って、リポジトリのコミットログを取得してバッヂを作ってみました。
呼び出しは

$(function() {
    $('#github-badge').githubBadge({ repos : [
        {author: 'mattn',    name: 'gist-vim'  },
        {author: 'mattn',    name: 'gtktwitter'},
        {author: 'miyagawa', name: 'remedie'   },
        {author: 'otsune',   name: 'plagger'   }
    ]});
});

こんな感じ。
現状、スクリプトではcssを当てていません。外部cssで適当に弄って下さい。
現状APIからgistは取れなさそうなので、対応していませんがそのうちAPIが出来るやもしれませんね。
これからもう少しカッコよくして行くつもりですが、よろしければどうぞ。
実行画面は以下
mattn/jquery-github-badge @ GitHub
ソースはこの辺にあります。