ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > 簡易はてブ (カテゴリ別人気エントリー)を作りました

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

このエントリーをはてなブックマークに追加
2008年11月27日 カテゴリ:プログラミングTIPS
はてなブックマークリニューアル記念第4弾となる「簡易はてブ (カテゴリ別人気エントリー)」を作りました!(第1弾:はてはてブラウザー、第2弾:簡易はてブ (注目エントリー版)、第3弾:簡易はてブ (人気エントリー版)、第4弾:簡易はてブ (カテゴリ別人気エントリー)
簡易はてブ (カテゴリ別人気エントリー)
http://zapanet.info/new/hatebu/

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

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

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

その一方で、これではRSSと変わらないといった意見や、以下のような意見(ululunさんのコメント)もありました。
はてブニュースで良いかな、これなら。 はてブニュース風で各カテ単位の記事見出し&ハイパーリンクなら「あると思います」

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

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

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

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

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

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

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

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

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

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

関連リンク

はてブ300ブクマ以上のエントリまとめ
ツンデレサーチ! はてなについて調べてきたわ!
ツンデレ知恵袋 はてなについての質問を探してきたわ!
「シリコンバレーなら日本の30倍儲かる」と近藤社長
はてなでニュースサイトを運営するとスパム扱いされる
はてなのRSSを表示したら、著作権料の支払いを求められました
本人を偽ったスパムメッセージだったみたいです…
ポケットはてなは著作権侵害ではないのだろうか
ポケットはてながやっているのは、つまりはこういうこと
ポケットはてなの対策が取られました
はてなユーザーはこれくらい知っていて当たり前
増田に投稿してみてわかったこと
増田ではてなの文句言ってる人ではありません
このブログをはてなブックマークしているユーザーランキング
はてなブックマークの注目エントリで注目されにくくする方法
セルクマって、恥ずかしい行為だと思っていた…
ブログアクティブユーザー数ランキング(2007年9月版)
はてなの円グラフについて思うこと
「簡易はてブ」作りました
ブログの☆の総数を取得できるAPIを組み込みました
第8弾!はてブ人気エントリ*注目エントリ最新情報
はてブコメント最新情報作りました。
はてなブックマークリニューアルおめでとう!
「はてはてブラウザー」リリースしました!