簡易はてブ (カテゴリ別人気エントリー)を作りました
2008年11月27日 プログラミングTIPS
はてなブックマークリニューアル記念第4弾となる「簡易はてブ (カテゴリ別人気エントリー)」を作りました!(第1弾:はてはてブラウザー、第2弾:簡易はてブ (注目エントリー版)、第3弾:簡易はてブ (人気エントリー版)、第4弾:簡易はてブ (カテゴリ別人気エントリー))
昨日リリースした「簡易はてブ」2作品から、さらにいろいろな意見を取り入れ、1からデザインしなおしたサービスとなります。詳細は以下からどうぞ。
昨日リリースした「簡易はてブ」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分以上の間隔を開けて更新しています。これははてなへの負荷を増やしすぎないための対策ですので、リアルタイムの情報が欲しい方は、直接はてなブックマーク本家サイトの方をご利用ください。また、はてなのサーバーの調子が悪いときは何も表示されなくなりますので、時間をおいてからアクセスしてください。
関連リンク
- はてブ300ブクマ以上のエントリまとめ
- ツンデレサーチ! はてなについて調べてきたわ!
- ツンデレ知恵袋 はてなについての質問を探してきたわ!
- 「シリコンバレーなら日本の30倍儲かる」と近藤社長
- はてなでニュースサイトを運営するとスパム扱いされる
- はてなのRSSを表示したら、著作権料の支払いを求められました
- 本人を偽ったスパムメッセージだったみたいです…
- ポケットはてなは著作権侵害ではないのだろうか
- ポケットはてながやっているのは、つまりはこういうこと
- ポケットはてなの対策が取られました
- はてなユーザーはこれくらい知っていて当たり前
- 増田に投稿してみてわかったこと
- 増田ではてなの文句言ってる人ではありません
- このブログをはてなブックマークしているユーザーランキング
- はてなブックマークの注目エントリで注目されにくくする方法
- セルクマって、恥ずかしい行為だと思っていた…
- ブログアクティブユーザー数ランキング(2007年9月版)
- はてなの円グラフについて思うこと
- 「簡易はてブ」作りました
- ブログの☆の総数を取得できるAPIを組み込みました
- 第8弾!はてブ人気エントリ*注目エントリ最新情報
- はてブコメント最新情報作りました。
- はてなブックマークリニューアルおめでとう!
- 「はてはてブラウザー」リリースしました!
- ツンデレサーチ! はてなについて調べてきたわ!