Hatena::ブログ(Diary)

by edvakf in hatena

2009-03-16

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 用ダウンロードリンク

f:id:edvakf:20090316170223p:image

こっから本題

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があるのをコメントで教えてもらった

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

f:id:edvakf:20090316235948p:image

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

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

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

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


続きを書いた。

worldcup1962worldcup1962 2009/03/16 19:03 テンプレートを使った場合はテンプレートが変わったときに対応する必要があるので、widgetsというAPI(?)を使ったほうがいいと思います。 http://la.ma.la/blog/diary_200610182325.htm

edvakfedvakf 2009/03/16 23:00 やっぱりあったんですね。それも本家から。
後で記事を修正しておきます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証