はてブをシンプルに表示するSimpleHatebuを作った

はてブのタイル表示が非常に評判が悪くてシンプルにはてブを表示するページを作るのが流行ってるっぽい。ちょっと時期が過ぎたような気がしなくもないけど、便乗してSimpleHatebuってのを作ってみた

どんなもの?

Yahooのニュースサイトのデザインを参考にカテゴリ別に表示する新着ページ。カテゴリを選択すればそのジャンルの新着が表示される。下の数ははてブ数の閾値を選択できる。至って単純。

開発の話

このページはすべてjavascriptで動いてる。どうやって値をとっているかというと、Google Feed APIを使ってる

はてブってエントリーページにmode=rssのクエリパラメータを渡してあげるとrssで取得できるようにできてるから、そのRSSをGoogle Feed APIで取得してきてボタンが押されるたびに表示を入れ替えているっていう仕組み。Google Feed APIの使い方はすごい簡単。Google Feed APIの大本をもってきて、

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

こんなかんじで取れる

	google.load("feeds", "1");
	google.setOnLoadCallback(initialize);

	var initialize = function() {
		// URL指定してFeed作る
		var feed = new google.feeds.Feed('取得したいFeedのURL');
		// 取得するFormatを指定。JSONでも取れる
		feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
		// 取得する件数を指定
		feed.setNumEntries(10);
		// 実際に取得
		feed.load(function(result) {
			// とれた値で好きに動かしましょー
		});
	};

で、再読み込みした時にカテゴリとかはてブの閾値とかが元に戻るのが気に食わなかったんでjQueryCookieを使って選択してるカテゴリとかをCookieにセットしてみた。こいつも使い方はすごい簡単。まず大本を持ってきて、

        <script type="text/javascript" src="./js/jquery.cookie.js"></script>

こんな感じで値の保存と取得ができる

	// 保存
	$.cookie('key', 'value');
	// 取得
	key = $.cookie('key');

本当はすべてのエントリーに対してはてブ数の閾値を設定できるようにしたかったんだけど、なぜかthresholdのクエリパラメータを設定してカテゴリのエントリーを取得すると最新のものではなく8月31日のデータがとれてしまう。はてな側が返答してる値が最新じゃないからこっちじゃどうしようもなくて本気だすとHTMLをGETしてパースして表示みたいなことをやるしかないみたいで、それをやるにはサーバ側のコードがどうしても必要だからしょうがなくカテゴリ別のものは新着だけしか取れないようにしてる。

まとめ

もともとはタイルでも見やすく作れるんじゃね?ってことでタイルっぽく作ろうとしてたんだけど、全然見やすくならなかった。タイルのいいところって情報をカテゴライズしたい場合にしか有効じゃないんだと思う。はてブみたいに文字データが基本でタイルでやろうとするとどうしても目の動きがきつくなるから、シンプルに文字だけで表示してカテゴリーごとにタイルにするっていうYahooニュースみたいな作りじゃないと見づらいと思う。それにしてもGoogle Feed APIはすごい便利。これ使えば簡単にiGoogleも再現できるんじゃないかなー。今度時間があったら作ってみようかな。