LDR/Fastladderの各記事に何かをするUserJSを書くとき

タイトル変更した→旧「LDR/Fastladderではてなブックマーク登録数を表示させる」

既にいいのがあったので、ここらへんは読み飛ばしてください。


どっかにありそうだったけど探すのが面倒だったので作った。需要があったっぽかったし。

  • LDR_hateb_count.user.js
// ==UserScript==
// @name	LDR_hateb_count.user.js
// @include	http://reader.livedoor.com/reader/
// @include	http://fastladder.com/reader/
// ==/UserScript==

(function(win){
win.ItemFormatter.TMPL.tmpl = win.ItemFormatter.TMPL.tmpl.replace(/(<span id="pin)/, '<a href="http://b.hatena.ne.jp/entry/[[ item ]]" style="height:18px;margin-right:4px;float:left;"><img alt="" border="0" src="http://b.hatena.ne.jp/entry/image/[[ link ]]"></a>\n$1');
})(this.unsafeWindow || window)

Opera & Firefox で試したけど、たぶん全部の UserJS 機構で動くはず。Greasemonkey 用ダウンロードリンク


こっから本題

LDR/Fastladder の各記事に何かをくっつける UserJS の類 (ちょっと探したところ↓とか) は多いと思うのだけど、

書き換えは以下のタイミングに大別できると思う。

タイミング 特徴 柔軟性
AFTER_PRINTFEED DOM を弄るのが重そうだし、実際にはこのタイミングでは全部のフィードが表示されていないため、setTimeout などで複数回実行しないといけない。 高い
BEFORE_PRINTFEED DOM ではなく文字列操作なので気分はラクだけど、同じフィードを何度も表示すると操作が何度も実行されてしまう。(ので既に書き換えたかどうか判定する必要がある) 中くらい
テンプレート直接弄る 基本的に実行は1回 & 速い。 低い

できるなら下のほうでやりたい。

全部のフィードが表示されてから実行される COMPLATE_PRINTFEED というレジスターが (ソースを見ると) あるっぽいのだけど、まだ出来ていないらしい。(COMPLETE でないのはミスか)


ちなみに、上のスクリーンショットで「Permalink」の変わりに URL が表示されているのは、テンプレートを書き換えたのではなく CSS でやっている。

div.item_info a{
	color: #008080;
	text-decoration: none;
	content: attr(href) "\A";
}
div.item_info a:visited{
	color: #800080;
}

CSS でやる方法を上の表にあてはめて考えるならこんな感じになる。

タイミング 特徴 柔軟性
COMPLATE_PRINTFEED 未完。早く作って。 極めて高そう
AFTER_PRINTFEED DOM を弄るのが重そうだし、実際にはこのタイミングでは全部のフィードが表示されていないため、setTimeout などで複数回実行しないといけない。 高い
BEFORE_PRINTFEED DOM ではなく文字列操作なので気分はラクだけど、同じフィードを何度も表示すると操作が何度も実行されてしまう。(ので既に書き換えたかどうか判定する必要がある) 中くらい
テンプレート直接弄る 基本的に実行は1回 & 速い。 低い
CSS ほぼ負荷なし。 極めて低い

entry_widget、channel_widgetというAPIがあるのをコメントで教えてもらった

各記事表示時に実行されるもので、この位置に何かを足すことができる。

表でいうなら、こんな感じかな。

タイミング 特徴 柔軟性
COMPLATE_PRINTFEED 未完。早く作って。 極めて高そう
AFTER_PRINTFEED DOM を弄るのが重そうだし、実際にはこのタイミングでは全部のフィードが表示されていないため、setTimeout などで複数回実行しないといけない。 高い
entry_widget 将来の仕様変更に左右されにくい。 どちらとも言えない
BEFORE_PRINTFEED DOM ではなく文字列操作なので気分はラクだけど、同じフィードを何度も表示すると操作が何度も実行されてしまう。(ので既に書き換えたかどうか判定する必要がある) 中くらい
テンプレート直接弄る 基本的に実行は1回 & 速い。 低い
CSS ほぼ負荷なし。 極めて低い

innerHTML での書き換えなので、「何かをくっつける」ためには柔軟性があって良い API だと思う。「何かをする」のは難しいかも? 頑張れば出来そうな気もするけど。

「何かをする」スクリプトの例↓


続きを書いた。