Movable Type 備忘録

タグクラウドのフォントサイズの計算式

Apr152008
Author: bzbell
Categories: Customize
Tags: Customize, TagCloud

Next Page: EntryCategory プラグイン
Prev Page: MathOperatorExpander プラグイン

おはようございます^^

Open MagicVox.net さんとこでおもしろそうな記事が紹介されてました (￣∇￣)/

タグクラウドのフォントサイズの計算式について

タグクラウドのフォントサイズ計算式に対数関数が使われてます。

これからお仕事行かなきゃなので試せないけど、帰宅したら試してみようと思います。
どんなふうに表示が変わるかなぁ o(●´∀｀●)o ワクワク

お試しあれぇ～♪

- 2008.04.15 追記 -

お仕事中だけど気になって試してみました (;￣∇￣A 内緒でお願いします。
時間がないので詳しい説明は省きます (m;_ _)mペコ

コードは以下の通りです。

var tagclouds = {
    version: '1.0.4',
    weight: 1,        // フォント重み(大きい値にするとフォントが小さくなる)
    font_size_min: 12,// 基準となるフォント最小サイズ
    font_size_max: 41,// 基準となるフォント最大サイズ
    count_min: Math.log(<MTTags limit="1" sort_by="count" sort_order="ascend"><$MTTagCount$></MTTags>), // 最小タグ数(自然対数仕様)
    count_max: Math.log(<MTTags limit="1" sort_by="count" sort_order="descend"><$MTTagCount$></MTTags>),// 最大タグ数(自然対数仕様)

    init: function() {
        var tags       = new Array();
        var now        = (new Date()).getTime();
        var tagsNode   = document.getElementById('tags');
        var childNodes = tagsNode.childNodes;

        this.font_size_min /= this.weight;
        this.font_size_max /= this.weight;

        for (var i = 0;i < childNodes.length;i++) {
            var e = childNodes.item(i);

            if (e.nodeName.match(/li/i)) {
                var s = e.title.split(':');

                var d    = s[2].split('-');
                var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;

                e.style.fontSize = this.calc_fontsize(s[1]) + 'px';

                if (diff < 15) {
                    e.className = 'rank_1';/*      ～ 15日*/
                }
                else if (diff < 30) {
                    e.className = 'rank_2';/*  15日～ 30日*/
                }
                else if (diff < 90) {
                    e.className = 'rank_3';/*  30日～ 90日*/
                }
                else if (diff < 180) {
                    e.className = 'rank_4';/*  90日～180日*/
                }
                else if (diff < 365) {
                    e.className = 'rank_5';/* 180日～365日*/
                }
                else if (diff >= 365) {
                    e.className = 'rank_6';/* 365日～     */
                }


                tags.push([e, s[1]]);
            }
        }

        tagsNode.style.display = 'block';
    },

    calc_fontsize: function (count) {
        count = Math.log(count);// 自然対数仕様
        return (this.font_size_max - this.font_size_min) * (count - this.count_min) / (this.count_max - this.count_min) + this.font_size_min;
    }
};

JavaScript の Math.log 関数を使用しています。
タグクラウドの表示は以下の通りです。

<ul id="tags" class="tag_list">
    <MTTags sort_by="modified_on" sort_order="ascend">
    <li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTBlogID$>" rel="tag"><$MTTagName$></a></li>
    </MTTags>
</ul>

<script type="text/javascript">
tagclouds.weight = <MTIf name="tag_fontweight"><$MTGetVar name="tag_fontweight"$><MTElse>2</MTIf>;
tagclouds.init();
</script>

後は再構築するだけぇ (●＞∀＜●)／

わたしのサイトではタグクラウドページとサイドバーに表示してる最近のタグとで併用してますので、サイドバーに表示する際には基準となるフォント最小／最大サイズを半分にして表示させてます。

それをやってるのが tagclouds.weight になります。また、以下は使用前、使用後のイメージです。違いは明らかですね (￣∇￣)b
いい感じです (●´∀｀●)

後ほど、配布してますテンプレートでもフィードバックしたいと思います。
フィードバックしました (●＞∀＜●)