はてブでの人気エントリーをGoogle AJAX Feed APIを使って表示する
みなさん、こんにちは、まーしーです
昨日の選挙ではいろいろ代わってしまったようですね。
どっちに転んだとしても日本で生活していくことになりますし、その枠組みの中でがんばるっきゃないよな〜、
と改めて決意して仕事することにした月曜日です。
今日は勉強がてら人気記事を表示する方法を調べてみました。
linker journalの人気記事を表示してみました
linker journalの人気記事をサイドバーに表示してみました。
今回ははてブのブックマーク数をベースに表示させています。
結果としてハムさんがわかりやすいエントリーを書いてくれていたので、それを参考にしたらささっと出来てしまいました。
はてなブックマークでの人気のエントリーが自動的に表示されるようにしてみた | THE HAM MEDIA
http://h2ham.seesaa.net/article/101931075.html
ソース部分は下にまとめておきます。
最初にjQueryとGoogle AJAX Feed APIを使う設定を事前にしておきます。
はてブでのjournalのブックマークされてる記事一覧は
http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Flinker.in%2Fjournal%2F&sort=count&threshold=3
というfeedでわかるので
var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Flinker.in%2Fjournal%2F&sort=count&threshold=3");
としてあげることで変数のfeedをつかって記事一覧のfeedを扱うことが可能になります。
このあたりはGoogle AJAX Feed APIのリファレンスに書いてあります。
Feed(url) 指定されたフィード URL をダウンロードできる新しい Feed インスタンスを作成します。
クラス リファレンス - Google AJAX Feed API - Google Code
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html
読み込む数はsetNumEntries(num)で指定します。
setNumEntries(num)
このフィードによってロードされるフィード エントリの数を num に設定します。デフォルトで、Feed クラスは 4 つのエントリをロードします。
クラス リファレンス - Google AJAX Feed API - Google Code
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html
そしてその指定した数だけリピートするために
for (var i = 0; i < result.feed.entries.length; i++) {
}
となります。result.feed.entries.lengthとかけるかどうか、ですね。
ドキュメントに書いてありますが、個人的にはココでつっかかるような気がします。
で、その繰り返しの中でエントリーを一件ずつ取得して 記事のタイトル（entry.title）やリンク（entry.link）を取得しています。
取得したものはuseFeedに代入されているのですが
useFeed += <li>~~~</li>
というところでuseFeedに繰り返した数だけの <li>~~~~</li>が追加されていきます。
は
useFeed = useFeed + <li>~~~</li>;
と同義です。
最後の
$("#hatenalist").html('<ul>' + useFeed + '</ul>');
でHTML内の#hatenalistに<ul><li>~~~</li></ul>を追加しています。
メモ
今回の人気リストを表示させるに当たってどうやって表示させようかな〜と考え始めて、はてブのAPIのドキュメントとかをみたりしたんですがちんぷんかんぷん。
ん〜。勉強がてらJSONとかでやれるのかな〜？？とか素人頭で考えてみたりしました。
１つのPermalinkに対して色々ゲットできる、というのはわかったのですが、その先が詰まってしまいました。
JSONといったらハムさんが記事書いてたな、とおもってハムさんのサイトにいったらはてブの一覧がありまして。
お、と思いサイト内検索してみたら、今回の方法があったという感じでした。
流石ですね。
JSONだとどうやるのかな？いまいちその辺ができるのかどうなのかもわかってないので、JSONは改めて勉強しようと思います。。
今後の課題
今回やってみてとりあえずの課題は
- 全然わかってないキャッシュとかその辺
- 他の方法がないか？
- はてブ以外も含める方法を考える
このあたりでしょうか。
まとめ
結果として、特定URL以下の人気記事一覧のFeedがhttp://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Flinker.in%2F&sort=count&threshold=3のfeedを知ってるかどうかなのかな、という気がしています。
まだまだWebサイトを見てない、つかってないですね。
んで表示される記事一覧をみると、ぎりぎり最後に自分のが滑り込んでるレベル。
差を感じますね〜。
ここからいなくなるのも時間の問題というところではありますが、上に目標がいるので頑張るのみです。
ソース
<script type="text/javascript">
//<![CDATA[
google.load("feeds", "1");
$(document).ready(function(){
var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Flinker.in%2Fjournal%2F&sort=count&threshold=3");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var useFeed = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var Title = entry.title.replace("｜linker journal｜linker" , "");
useFeed += '<li><a href="' + entry.link + '">'+ Title + '</a><a href="http://b.hatena.ne.jp/entry/'+ entry.link + '"><img src="http://b.hatena.ne.jp/entry/image/'+ entry.link + '" /></a><a href="http://b.hatena.ne.jp/append?'+ entry.link + '"><img src="/images/icon-b_entry.gif" alt="このエントリーをはてなブックマークする" title="このエントリーをはてなブックマークする" width="16" height="12" /></a></li>';
}
$("#hatenalist").html('<ul>' + useFeed + '</ul>');
}
});
});
//]]>
</script>
<div id="hatenalist"></div>
参考記事
- Google AJAX Feed APIではてなブックマークの人気エントリーを表示
http://weboook.blog22.fc2.com/blog-entry-122.html - Google AJAX Feed API を使ってJavaScriptでサイトにRSSフィードを表示する方法 | THE HAM MEDIA
http://h2ham.seesaa.net/article/100840896.html - はてなブックマークでの人気のエントリーが自動的に表示されるようにしてみた | THE HAM MEDIA
http://h2ham.seesaa.net/article/101931075.html
