users」の正体はてなブログ2016.05.23コンテンツの有用さ?を表す指標として、はてなユーザのみでなく幅広いネットユーザやサービスに利用されている「はてブ数」。赤の太字に下線、ピンクの背景というスタイルは多くの方になじみのあるものと思います。何気なく目にしているコイツ、テキストのように見えますが、テキストではありません。何モノなのか?その正体とは?なぜそうなったのか?無駄に深掘りすると見えてくるものとは?...といったお話をしてみたいと思います。必要なのは、10人に1人まとめ:はてな陣営の努力が見えたはてブ数はテキストではないどこからどうみても文字でしょ!なこのパーツ。実は小さなgif画像でできています。URL・・・http://cdn.b.st-hatena.com/images/users/gif/normal/00001.gifという感じで、はてブ数に応じたgif画像が1つ1つ準備されています。テキストを使わないのか?その理由テキストと画像を比べると一般的にはテキストのほうが軽いと思いますよね。ここはもう一歩深く踏み込んでみましょう。画像とテキスト、各々の場合について軽さ(表示の早さ)を比較する思考実験をしてみたいと思います。ダウンロードの開始からデータが表示されるまでの流れに沿って以下の通り。技術的にはもっとたくさんの要素が絡むんですが、画像vsテキストという比較に直接関与しないもの(DNSルックアップの速度や接続先CDNサーバとの接続確立までの時間など)は今回は無視しています。バイトデータサイズが小さほうが当然ダウンロード時間が短くて済むため、gif画像の圧倒的勝利です。テキストの場合HTMLに用いるタグやクラス名に依存するものの、以下ソースの場合で文字数は最小で141文字、データサイズは約420バイトです。フォントサイズなどを追加で指定する場合はサイズはもっと増えます。画像のデータサイズは主に画像の縦横の大きさと内容に依存します。13pxサイズ:100~200バイトのようです。利用可能ブラウザキャッシュとは、1回表示したページやその中で使われている画像をPCやスマホ側に保存しておくことで、2回目以降表示するときにダウンロードの必要をなくし、ページを高速に表示させるためのしくみです。そのため、一般的にはブラウザキャッシュが効く=軽くなる、と言うことができます。PCやスマホ内にキャッシュ済のデータがあるか判断する際はそのデータのありか(URL)を検索条件として使います。データの中身がテキストであろうと画像であろうと、URLが決まればキャッシュのしくみを使うことができます。したがって、テキストの場合もgif画像の場合もキャッシュは利用可能です。対応するgif画像をインラインで描画レンダリングとは、PCやスマホにダウンロードされたデータをブラウザに表示するための処理を指します。処理の順番はコードの書き方などに依存するので詳細は割愛しますが、必要なステップはおおよそ上に書いたとおりです。定性的な比較になってしまいますが、テキストの方が処理のステップが多く、またHTMLの走査という比較的重めの処理が必要であるため、表示に時間がかかるものと推定されます。(とはいえそこまで影響があるわけではないと思いますが・・・)一方gif画像は、単に指定された小さなファイルを読み込むのみなので今回の場合はテキストよりも早いのでは?と推定されます。したがって、レンダリング速度はgif画像の勝ちとします。勝敗まとめ以上まとめると、思考実験による定性的な比較ではgif画像の方が優勢であることがわかりました。表示を軽くするにはgif画像を使うほうがよさそうです。◯はてブ数の上限はいくつ?さて、gif画像を使う理由がわかったところで、次に気になるのはgif画像で準備されているはてブ数の上限は?ということ。ははてブ数1の場合から。画像・・・URL・・・http://cdn.b.st-hatena.com/images/users/gif/normal/00001.gifどうやらURLの最後のgifファイル名がはてブ数に対応しているようです。命名規則は5桁数字.gif。forbiddenエラーが返ってきます。forbidden)URL・・・http://cdn.b.st-hatena.com/images/users/gif/normal/20001.gifというわけで、今のしくみにおいて適切に表示可能なはてブ数の上限は20000であると言えます。今後はてブ数の上限を超える可能性さて、この上限値は今現在はてブ数が20000を超えるページが存在しないため設定されているものと推定されます。今後、はてブ数20000を超えるページがでてくる可能性はあるのでしょうか?歴代はてブ数とはてなユーザ数をもとに推定してみようと思います。歴代史上最多はてブ数まず、はてな史上もっともはてブを集めたページを調べてみました。ちなみに2位はTwitter(9119ユーザ)、Googleは6位(7443ユーザ)、Amazonは11位(6143ユーザ)です。英語の勉強法がGoogleより上位に食い込んでいたり、論文の書き方や肩こりの解消法が10位以内に入っていたりと、どことなくはてなっぽさを感じますね。Japanにもう6000回ブックマークがつけばはてブ数20000を超えるという状態です。今後のはてブ数の伸びしろを見極めるため今現在のはてなのアクティブユーザ数を見てみます。関する説明資料」の7ページ目に「2015年7月時点のアクティブユーザは5400万人」という記載があります。なんと日本人の3人に1人がはてなのサービスを利用していることに!(ほんとかよ)残念ながらアクティブユーザと判断する基準およびサービスごとの利用者の割合は開示されていません。そこで仮にアクティブユーザ数は全はてなユーザの1%、はてブ利用者をそのうち10%と厳しめの想定で試算すると、5.4万人が今現在はてブを利用していることになります。Japanがはてブ20000に達するまで必要なはてブ数は残り約6000。はてブユーザの数はごく少なく見積もっておよそ5.4万人。Japanをはてブするとはてブ上限20000に到達することになります。本記事の初出が2016年5月23日。Japanのはてブ数は14203→14489と約280増えています。Japanのはてブが上限の20000に達するにはあと20年くらいかかることになります。当面は大丈夫そうですね。まとめ:はてな陣営の努力が見えたというわけで、ブログのパフォーマンスチューニングをしている中で見つけたはてブトリビアのご紹介でした。それだけのことですが、深堀りしてみると可能な限り軽く、表示速度を早くしたい、というはてな陣営の努力を垣間見ることができました。はてな運営のみなさま、本当にお疲れさまです。ちなみに重いことで有名な「はてなスター」も一部でgif画像を利用しているようです。興味のある方はぜひ解析してみてください。はてなブログスポンサーリンクシェアTwitterFacebookはてブPocketLINEコピーフォローNAEブログ実験室naelab関連記事はてなブログブログタイトルにおすすめ!雰囲気たっぷりの英語Webフォント16選はてなブログ魔改造によるはてなブログの高速化。jQuery/JavaScriptをフッターに移動する方法はてなブログ目指せ最高の使い心地。18:21おじゃまします。最近はてぶを使いはじました。他のブックマークでusersを使っているのははてぶ以外ないですか。19:47蓮さんコメントありがとうございます。users」の表記ははてブ以外見たことりません。12:08迅速な回答ありがとうございます。びっくりしたのは興味あるブログがあり、はてブで検索すると、ユーザー数がでてきて、そのブログに対してコメントしているのですね。はてブの対象者だけですけど、それでも役にたちます。海外もこのようなサービスがあればいいのですが。13:41海外でいえば、はてなブックマークが参考にしたと言われているdel.icio.usが源流とは思います。TumblrやDiggも機能的にはソーシャルブックマークですし、Pinterestも画像のみ対象ですが同類です。ネットの記事にコメントを入れる点だと、NewsPicksもそうかもしれません。12:19>del.icio.usなんか廃止になったうわさがありますが、URLをクリックすると、7月24日に再開するとでてました。https://gyazo.com/c2712b0f023ae46ebb13baa33f7bf8b0はてブをある程度知ってから海外の方にも注視していこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。