冬通りに消え行く制服ガールは、夢物語にリアルを求めない。

■ jAutoPagerize 03:35

• http://github.com/cho45/jAutoPagerize/raw/iframe/jautopagerize.user.js (iframe版)
• http://github.com/cho45/jAutoPagerize/raw/master/jautopagerize.user.js (HTMLDocument 版)

github に移して iframe で読みこむ版をつくってみた (id:javascripter さんの AutoPageLoader とおなじ)。なんで iframe にしなかったんだっけ……と思いつつなのでブランチになってる。google image でも效くようになってうれしいです。

iframe にすると、lazy load されているわけでないならブログパーツとかも全部どうにかなってしまうのでいい感じ。DOMContentLoaded で iframe 削除ってて、はてなスターはつかないので filter でつけてやる必要があった。

いろいろあって Safari 対応のコードとか残ってたけど全部削除した。Chrome が GM_xmlhttprequest に対応したらまた考えよう……

名前も変えて github にうつそうとおもったけど、なんかもうこういう虐げられてます感がでる名前でもういい気がしたのでとりあえずそのままにした。

いつもつかってるテスト用サイト

• http://nicovideo.g.hatena.ne.jp/cho45/ (ブログパーツ)
• mixi 日記 (おかしいことになりやすい代表)
• google (必須だから)

■ jAutoPagerize ブログパーツのたいおう 13:54

gist の貼り付けコードとかが見えなくなるのがうざいので手をいれた

http://coderepos.org/share/changeset/28585

document.write だけ想定してるのでダメなときはすごくダメかもしれない……

document.write の書きかえを同期的に局所化できないので、必ず一箇所ずつ読みこんでロードするように loop と Deferred つかってる。

■ jAutoPagerize が一部ページでクソ重い現象の解消 04:20

fotolife の編集ページを jAutoPagerize させるとクソ重くてどうしようもないので、野生の勘で体感速度を向上させるハックを入れた。

http://coderepos.org/share/changeset/28350

L245 に追加した行をコメントアウトしたりインしたりして http://f.hatena.ne.jp/*/edit みたいなページをロードすると劇的に差を体感できる……

なんでこうなるかっていうのはいまいちよくわからないけど

• 画像が読みこまれると周りの要素がつらつらと再フローされる (width/height がかいてないから?)
  • あとこのサムネイルに設定されてるセンタリングのための onload ハンドラが重い?
• 画像が多いのでこれがめっちゃ走りまくる

なのかなぁと思ったので、それを解消できそうな感じのことをしてる。思惑通りにいってるかは微妙なんだけど、少なくとも早くなったことは確かなのでとりあえずよかった

Fx のスクロールはブラウザのパフォーマンスおちに敏感すぎる。flickr も早くなるかと思ったけどよくわからなかった

■ Deferred 01:20

jQuery Deferred とか言っていますがコアは全く jQuery に依存しないので (いい名前がおもいつかないから jQuery バインディングのほうのなまえでよんでる) http://svn.coderepos.org/share/lang/javascript/jquery-deferred/jquery-deferred.js の Deferred 関数と必要な関数をコピペしたら GM でもうごきます。setTimeout/clearTimeout にだけ依存してるのでその実装があるならどこでもうごくはず。

他の非同期なやつを Deferred 化するのは jQuery Deferred だと

function wait (n) {
	var d = new Deferred(), t = new Date();
	var id = setTimeout(function () {
		clearTimeout(id);
		d.call((new Date).getTime() - t.getTime());
	}, n * 1000)
	d.canceller   = function () { try { clearTimeout(id) } catch (e) {} };
	return d;
}

こんな感じになってます。Deferred#call がコールバック起動で、Deferred#fail がエラーバック起動です。

MochiKit のコードだと (機能がちょっと違いますが)

    /** @id MochiKit.Async.wait */
    wait: function (seconds, /* optional */value) {
        var d = new MochiKit.Async.Deferred();
        var m = MochiKit.Base;
        if (typeof(value) != 'undefined') {
            d.addCallback(function () { return value; });
        }
        var timeout = setTimeout(
            m.bind("callback", d),
            Math.floor(seconds * 1000));
        d.canceller = function () {
            try {
                clearTimeout(timeout);
            } catch (e) {
                // pass
            }
        };
        return d;
    },

引数 (value) をわたすためにチェインつかってるのがおもしろいすね。

ついでに jAutoPagerize でつかっているやつ。

function CachedResource (uri, convertfun, expire) {
	var d   = Deferred(); // new なしでいける。
	var key = uri;
	var v   = {};
	try { v = eval(GM_getValue(key)) || ({}) } catch (e) { log("parse error: may be uneval bug") }
	d.clear = function () {
		GM_setValue(key, "");
		return this;
	};
	if (v.time && v.time > (new Date).getTime() - expire) {
		log("Cache Hitted: " + key);
		setTimeout(function () { d.call(v.body); }, 10);
	} else {
		log("Cache expired; getting... " + key);
		GM_xmlhttpRequest({
			method  : "GET",
			url     : uri,
			onload  : function (req) { try {
				var res = convertfun(req.responseText);
				GM_setValue(key, uneval({time:(new Date).getTime(), body:res}));
				log(key, uneval({time:(new Date).getTime(), body:res}));
				log("Cached: " + key);
				d.call(res);
			} catch (e) { d.fail(e) } },
			onerror : function (e) {
				d.fail("HTTPError:"+e);
			}
		});
	}
	return d;
}

■ jAutoPagerize / はてなスター 03:17

フィルタの適用方法を変えて、importNode されたノード個々に対してフィルタを適用するようにした。本家と挙動が違うかもしれない。(フィルタ書いたことなくてよくわからない)

でもってはてなスターがロードされているページではデフォでスターをロードするようにした。Hatena.Star に特定ノード以下に制限してロードするのがあったのでそれつかってみた。(はてダのクイックページャのソースからたどった)