やっぱり技術革新の源はエロだね

greasemoneky javascript DMMimager

前から書いてみたかったGreasemonkeyを書いてみた。
あと、ついでにXPathも使ってみた。
初めてのことづくしで丸一日かかったorz
よくわかってないので、おかしなソースを書いているかもしれないがｷﾆｼﾅｲヽ(`Д´)ﾉ
download->DMMimager -- Userscripts.org
早速、試したい方はこちら（成人リンク）*1

できること

  1. DMMでの全サムネイルのオートロード
  2. DMMでのジャケット写真の先読み

「DMMでの全サムネイルのオートロード」
DMMでは「全部見る」というリンクをクリックしないと
全てのサムネイルが見れないのを、勝手にajaxでロードさせます。

「DMMでのジャケット写真の先読み」
ジャケット写真にmouseoverさせると、リンク先の拡大写真を表示する。mouseoutで消える。
拡大写真のページはウィンドウサイズを勝手に変更してきやがりますが、それから解放される。

しょーもない技術的な説明

「全部見る」というTextNodeを持つAncherを取るためにXPathを使いました。

$X('//A[contains(string(.),"\u5168\u90E8\u898B\u308B")][1]')

\u5168\u90E8\u898B\u308B

は「全部見る」の16進数表記。こうしないと動きませんでした。


$XはXPathを使うためのユーティリティ関数。
私製版、GreasemonkeyでXPathを楽に使う関数 @蕪浅録奏から頂きました。
ありがとうございます。
$X内で使ってるlog関数はfirebugのコンソールに出すためのログ関数。
無駄に指定しなきゃいけないnullとか無駄に長いsnapshotLengthやsnapshotItemから解放されます。

function $X(xpath, node) {
        var node = node || document
	log('xpath=' + xpath);
        var nodesSnapshot = document.evaluate(xpath, node, null,
            XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
        var data = []
        for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
            data.push(nodesSnapshot.snapshotItem(i))
        }
        return (data.length >= 1) ? data : null
}

var logEnable = false;
function log(str) {
	if(console.log && logEnable) console.log(str);
}

その他

ロードするHTMLページをさらにXPathするために、
HTMLドキュメント化する必要があったのでLDRizeからソースを拝借しました。
thanks to id:swdyh!
でも実はよくわかってないｗ

function createDocumentFragmentByString(str) {
	var range = document.createRange()
	range.setStartAfter(document.body)
	return range.createContextualFragment(str)
}
function createHTMLDocumentByString(str) {
	var html = str.replace(/<!DOCTYPE.*?>/, '').replace(/<html.*?>/, '').replace(/<\/html>.*/, '')
        var htmlDoc  = document.implementation.createDocument(null, 'html', null)
        var fragment = createDocumentFragmentByString(html)
        htmlDoc.documentElement.appendChild(fragment)
        return htmlDoc
}

バグ

  1. 一覧画面でもジャケット写真と勘違いして取ってきてしまいます
  2. 商品ページによっては、サムネイルの配置が崩れます

1つ目のバグはジャケット写真を1つ目のJPEG画像で取っているため。
回避方法が浮かばないのと、実害がないので無視。
その他、バグがあったら教えてください。

参考

Dive Into Greasemonkey の日本語訳 (PDF)がよかった。
Greasemonkeyの解説としてもいいですが、JavaScriptの基礎的なことや
XPathについても書かれていて一読の価値ありだと思う。

*1:人気ランキング1位だそうです