自サイト内のはてなブックマーク人気エントリーをJSONPで取得

はてなブックマークの人気エントリーをJSONPで欲しい

下の表示は、ブログの人気記事を貼り付ける - はてなブックマークウィジェットで、生成されたスクリプトを貼って出力しています。

---

生成コードはこんなん。

<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://havelog.ayumusato.com/";
Hatena.BookmarkWidget.title = "ハブろぐの人気エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 4;
Hatena.BookmarkWidget.theme = "hatenadiary";
Hatena.BookmarkWidget.load();
</script>

つまり、この表示に使っているデータをJSONPで取得したい。このウィジェットで生成されるHTMLにCSSを適用しても、そこそこ満足はできそうだけど、どうせならナマのデータを取得して好きなようにしたいところ。

欲しい内容はこれと同じ

はてなブックマークに登録された自分のサイトのエントリー（ページ）一覧

http://b.hatena.ne.jp/entrylist?sort=count&url=http://havelog.ayumusato.com&mode=rssで、形式はRSSだが、内容的には欲しいデータと一致する。

ウィジェットの中身を観察

そもそもウィジェットはどこからデータを取得しているのだろうと、http://b.hatena.ne.jp/js/widget.jsを開けてみて、jsonで検索してみると...。

var createRequest = function(id) {
    var url = Hatena.BookmarkWidget.url;
    var sort = Hatena.BookmarkWidget.sort;
    return function () {
        var request = 'http://b.hatena.ne.jp/entrylist/json?' + [
            'callback=Hatena.BookmarkWidget.callbacks['+ id +']',
            'url='  + encodeURIComponent(url),
            'sort=' + sort
        ].join('&');
        var script = $E('script', { defer: 'defer', type: 'text/javascript', charset: 'utf-8', src: request });
        document.getElementsByTagName('head')[0].appendChild(script)
    }
};

いかにもJSONで返してくれそうなリクエスト先を発見。http://b.hatena.ne.jp/entrylist/json?sort=count&url=http://havelog.ayumusato.comで、期待通りにJSONで返してくれることが判明。

次回はこれを加工します

そんな感じで、JSONPで返してくれるリクエストURLを見つけたので、次回はこれを好きに加工する。ATNDのAPIとか、TwitterのSearchAPIあたりと一緒に、JSONPをゴニョゴニョするjQueryをば。

---