はてなブログのカテゴリー表示をタグクラウドにするコードを改造してみた

このブログでもサイドバーで使っているタグクラウドのコードです。元ネタはこちらの記事になります。

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする！ - TMD45INC!!!

オリジナルだと件数が 20 件を超えると、全て同じサイズで表示されるようになってしまうので、よくあるタグクラウドの計算方法を使うようにしてみました。

あと、個人的な趣味で書き方を変えたので、もはや跡形もないですが一応改変したということで。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
<script>
    !function ($) {
        var range = 11, base = 90;
        var data = [];
        var list = $(".hatena-module-category ul li a");
        list.each(function () {
            data.push(parseInt($(this).text().match(/\((\d+)\)/)[1]));
        });
        var min = Math.min.apply(null, data), max = Math.max.apply(null, data);
        var sqrtMin = Math.sqrt(min), sqrtMax = Math.sqrt(max);
        var factor = range / (sqrtMax - sqrtMin);
        list.each(function (i) {
            var count = data[i];
            var level = parseInt((Math.sqrt(count) - sqrtMin) * factor) * 10 + base;

            var elem = $(this);
            var text = $.trim(elem.text());

            elem.css("font-size", level + "%");

            elem.text($.trim(text.replace(/\([^\(\s +]+\)/, '')));
            elem.prop("title", text);
        });
    }(jQuery);
</script>

現状ではフォントサイズを 11 段階、最低サイズは 90% という設定にして使っています。

特に説明する必要はない気もしますが、最初のループで件数を取得して、次のループで実際にフォントサイズを計算するという簡単なコードです。

ちなみに、このコードは jQuery を読み込んでいるので、サイドバーに入れるよりもはてなの言う通りにフッターに入れた方が良いと思いました。自分はフッターに入れて使っていますが、特に問題なく使えています。

ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ

コードとは全く関係ないですが、jQuery を Google ではなく Microsoft から読み込むようにしているのは個人的な趣味です。

Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library

tracert や ping を叩いてみると、案外 Microsoft CDN のがホップ数少なくて高速だったりするので、毛嫌いせずに使ってみるのも良いかと。