livedoorクリップに各種ソーシャルブックマークのコメントを埋め込むGreasemonkeyスクリプト(管理人日記)

2007年05月13日 - ニュース過去ログ

さっそく、昨日作った各種SBMコメント取得APIを使って、前から欲しかったGreasemonkeyスクリプトを作った。

最近よくやる(仮称)メソッド。なんか名前すら決まってないベータ版な感じを出したい。

まず、上のリンクからGMスクリプトをインストールします。そして、livedoorクリップの適当な画面を開いてみる。

livedoorクリップの画面の「3 users」とあるところが、「3 users!」に変化する。

livedoorクリップのいろんな画面で「3 users」とか書いてあるリンクがあります。このGMスクリプトを入れると、このリンクが上記のように「3 users!」となります。びっくりマークが追加されたわけです。

そして、このびっくりマークが追加されたリンクをクリックすると、以下のようになります。

livedoorクリップの画面にコメント一覧が埋め込まれる。

livedoorクリップ、はてなブックマーク、del.icio.usに付けられたコメントの一覧がその場に表示されるわけです。いわゆるAjaxな感じなので、ちょっと待てばパっと表示されます。

コメント一覧が出たあと、リンクは通常のものに戻ります。つまりもう一度クリックすれば従来通りの動作をするということです。

livedoorクリップのマイクリップ以下ではない画面に表示される「3 users」のボックスが「3 users!」に変化する。

上記のようなリンクでも動作します。

当然ですが、ログイン状態とかは関係ないし、他人のマイクリップやトップページなども含め、livedoorクリップのサイト内のほとんどのページで動作するはずです。

もちろん、昨日のSBM comments APIを使っています。

GM_xmlhttpRequestでこのAPIを呼び出して、返されたJSONをもとにhtmlを組み立てて埋め込んでいます。

なんだかんだで作るのに5時間くらいかかりました。悩んだところをメモしておきます。

LDCのhtmlソースはname属性が無いのでgetElementsByName使えない → class属性はキレイに入ってるので、getElementsByTagAndClass作った
トップとかマイクリップとかでhtmlが微妙に違うけど、メンドイなあ → どのときも"clip-meta"っていうclassのdivがあるので、適当な親要素からこれを探すように作れば共通のコードでいける。
DOMってinsertBeforeはあるけどinsertAfterは無いよね → target.parentNode.insertBefore(element, target.nextSibling)でinsertAfterっぽい動作する
URLに"#"が含まれてるとAPI呼べない → LDCのhtmlソースにあるページのURLは基本的にURLエンコードされてないが、"#"だけは"%23"になってるようだ。"%23"だけを"#"に戻せばよい。
APIが返す日付のフィールドがエポック秒で困る → new Date()してsetTime(msec)すれば日付になる。msecなので1,000倍するのをお忘れ無く。
トップとかの「3 users」の画像はどう扱おうかな → 画像だと思ったらあれテキストだった。びびった。

livedoor Readerのentry_widgetsのところにこういう機能を追加するGreasemonkeyも欲しい。

でも作り方がよくわからないのれす。

Operaでも動作するように直しました。修正について詳しくは2007.08.24の日記を参照してください。

この記事のURI:: http://muumoo.jp/news/2007/05/13/0commentlistinsertionforldc.html