Nancy ではてなブログ用の人気エントリー API を作ってみた

はてなブックマークの人気エントリーをはてなブログに貼ろうと思ったんですが、公式のブログパーツでははてブロ向けのテーマが提供されていないし、タイトルの表示が気にくわなかったので、Nancy を使って API から自作しました。*1

既にこのブログのサイドバーには作成した API を使って人気記事を表示しています。

ブログ自体のタイトルが表示されないのと、クラス名や構造などを最新記事に合わせているので、選択しているテーマが反映されるようになってます。

そして Nancy で実装した API は以下のような感じ。/hatena/bookmark?url=... というリクエストで JSON を返すようにしています。

public class HatenaModule : NancyModule
{
    public HatenaModule()
        : base("/hatena")
    {
        Get["/bookmark"] = _ =>
        {
            var url = (string)Request.Query.url;

            if (string.IsNullOrEmpty(url))
            {
                return 400;
            }

            // はてなブックマークの RSS からデータ取得して解析

            return Response.AsJson(model);
        };
    }
}

実際にはキャッシュとか組み込んで、Windows Azure Web サイト上で動かしています。

非公開の API にはしていないので、はてなブログのデザイン管理画面から HTML モジュールを追加して、以下のタグを入力すると同じように人気エントリーを表示できます。

<script>
    $(function () {
        $.ajax({
            url: "http://rss2json.azurewebsites.net/hatena/bookmark",
            data: { url: "http://blog.shibayan.jp/" },
            dataType: "jsonp"
        }).done(function (entries) {
            var ul = $("#hatena-bookmark");

            $.each(entries, function () {
                var li = $("<li/>");

                var link = $("<a/>", { href: this.link }).append($("<span/>", { text: this.title }));
                var count = $("<a/>", { href: "http://b.hatena.ne.jp/entry/" + this.link, text: this.count + "users" });

                var container = $("<span/>").addClass("bookmark-count").append(this.count > 10 ? $("<strong/>").append(count) : this.count >= 5 ? $("<em/>").append(count) : count);
                        
                li.append(link, container);

                ul.append(li);
            });
        });
    })
</script>
<ul id="hatena-bookmark" class="hatena-urllist"></ul>

url は適当に設置するブログの URL に変更してください。

あと、このままだとブックマーク数表示が残念なことになるので、以下のような CSS を組み込んであげると良い感じに表示されるはずです。

.hatena-urllist .bookmark-count a {
    margin-left: 0.2em;
    text-decoration: underline;
}
.hatena-urllist .bookmark-count em a {
    background-color: #fff0f0;
    font-weight: bold;
    display: inline;
    font-style: normal;
    color: #ff6666;
}
.hatena-urllist .bookmark-count strong a {
    background-color: #ffcccc;
    font-weight: bold;
    font-style: normal;
    display: inline;
    color: red;
}

はてなが標準で対応するまでは動かしておこうと思います。適当にお使いください。

*1:はてなダイアリー向けのテーマを選ぶと、表示は出来るけどマークアップが残念すぎる