簡易はてブ (カテゴリ別人気エントリー)を作りました

2008年11月27日プログラミングTIPS

はてなブックマークリニューアル記念第4弾となる「簡易はてブ (カテゴリ別人気エントリー)」を作りました！（第1弾：はてはてブラウザー、第2弾：簡易はてブ (注目エントリー版)、第3弾：簡易はてブ (人気エントリー版)、第4弾：簡易はてブ (カテゴリ別人気エントリー)）

簡易はてブ (カテゴリ別人気エントリー)

昨日リリースした「簡易はてブ」2作品から、さらにいろいろな意見を取り入れ、1からデザインしなおしたサービスとなります。詳細は以下からどうぞ。

JSとCSSを使ったタブ切り替え型カテゴリ別表示

昨日リリースした「簡易はてブ (注目エントリー版)」と「簡易はてブ (人気エントリー版)」はシンプルなことを心がけて、無駄な画像も使わずHTMLサイズも10KB程度におさめて作りました。iPhoneからも使いやすい、ケータイでもレイアウトが崩れないと評判です。

その一方で、これではRSSと変わらないといった意見や、以下のような意見（ululunさんのコメント）もありました。

はてブニュースで良いかな、これなら。　はてブニュース風で各カテ単位の記事見出し＆ハイパーリンクなら「あると思います」

また、新しいはてなのデザインを見て、「スクロール幅」が縦に広がりすぎたという意見もたくさん出てきています。LSTYさんの

　堀江貴文を含めて「スクロール幅」に無頓着な人というのはwebデザインのセンスがないと思う。
　何か意図があるのなら良いけれど、意味もなくページ上部にでかい画像を置いて、スクロールしないと記事本文が読めないとか、ああいうデザインを採用する神経が不明だ。

あんたジャージでどこ行くの: ひと目で分かる「はてな」のデザインセンスより

これらの意見を聞いて、「だったら、javascriptとCSSを使って、タブ切り替え型にしてみたらどうかな？」と思い、簡易はてブ (カテゴリ別人気エントリー)を作ってました。縦スクロールを最小限におさえ、各カテゴリ単位の人気エントリーをタブで選択・切り替えできるようになっています。

簡易はてブ (カテゴリ別人気エントリー)

各カテゴリの人気エントリーを、リンクとブックマーク数だけの簡易表示に仕上げています。カテゴリの変更は上部タブをクリックすることで、サクサクと切り替わります。カテゴリを変更する度に待ち時間が発生したりはしません。快適にカテゴリを横断して楽しむことができます。名前は「簡易」ですが、ある意味本家サイトよりも高機能かもしれません。

転送量の圧縮、ページ表示の省エネ化

はてなブックマークの人気エントリーページは各ページが重く、純粋なHTMLのみのサイズ（画像やJSファイルなどは無視したサイズ）を調べてみたところ、以下のようになりました。

ページ	HTMLのみのサイズ(KB)
はてなブックマーク - 人気エントリー	120
はてなブックマーク - 人気エントリー - 社会	120
はてなブックマーク - 人気エントリー - 政治・経済	90
はてなブックマーク - 人気エントリー - 生活・人生	110
はてなブックマーク - 人気エントリー - スポーツ・芸能・音楽	70
はてなブックマーク - 人気エントリー - 科学・学問	80
はてなブックマーク - 人気エントリー - コンピュータ・IT	120
はてなブックマーク - 人気エントリー - ゲーム・アニメ	100
はてなブックマーク - 人気エントリー - おもしろ	70
はてなブックマーク - 注目の動画	50
合計	930

はてなブックマークの全てのカテゴリーページの合計は、純粋なHTMLファイルだけで1MB近くありました。各ページにアクセスする度に、大量の画像取得・表示処理や200以上のリンク生成処理をしていることになります。全てのページにアクセスするのはかなり重い処理となります。はてなのサーバーが軽ければまだしも、はてなのサーバーは基本的にいつも重いので、ストレスもたまりやすくなります（人間もコンピューターも）。

「簡易はてブ (カテゴリ別人気エントリー)」の方はどうかというと、全てのカテゴリを一括で取得でき、そのサイズは100KB程度です。HTML容量だけでも1/10に圧縮され、リンク生成やレンダリングなどの処理も軽くなっています。

簡易はてブ (カテゴリ別人気エントリー)

なお、簡易はてブ (カテゴリ別人気エントリー)は最低30分以上の間隔を開けて更新しています。これははてなへの負荷を増やしすぎないための対策ですので、リアルタイムの情報が欲しい方は、直接はてなブックマーク本家サイトの方をご利用ください。また、はてなのサーバーの調子が悪いときは何も表示されなくなりますので、時間をおいてからアクセスしてください。

ZAPAブログ2.0