TagCloudPlus

mt3.3標準のプラグイン、WidgetManager用のWidgetを作ってみました。
といっても標準のタグクラウドに毛が生えたようなものですが。
sizeとcolorの「+」「-」をクリックすると、それぞれフォントサイズと色の濃淡を動的に変更できます。
もうちょっと使い勝手を良くしたいですね。
また、少しアニメーションを入れてみたら面白いかもしれません。 使い方
・使いたいブログのテンプレート編集画面で「テンプレート・モジュール」を開く
・「モジュールを新規作成」をクリック
・テンプレート名に「Widget: タグ クラウド プラス」を入力(名前は何でも良いのですが、「Widget: 」の部分を変えると動きません)
・モジュールの内容に以下のコードを貼り付けて「保存」

<!-- 
name: TagCloudPlus
author: Akira Sawada
version: 0.3
-->

<div class="module-tagcloud module">
    <h2 class="module-header">Tag cloud Plus</h2>
    <div class="module-content" id="tag_cloud_plus_info">
    </div>
    <div class="module-content">
        <a href="javascript:void(0)" onclick="sizeDown()"> << </a>
        size : <span id="tag_cloud_plus_size_info"></span>
        <a href="javascript:void(0)" onclick="sizeUp()"> >> </a><br />

        <a href="javascript:void(0)" onclick="sizeBaseDown()"> << </a>
        basesize : <span id="tag_cloud_plus_size_base_info"></span>
        <a href="javascript:void(0)" onclick="sizeBaseUp()"> >> </a><br />

        <a href="javascript:void(0)" onclick="colorDown()"> << </a>
        color : <span id="tag_cloud_plus_color_info"></span>
        <a href="javascript:void(0)" onclick="colorUp()"> >> </a>
    </div>
    <div class="module-content">
        <ul class="module-list" id="tag_cloud_plus_list">
        </ul>
    </div>
</div>

<script type="text/javascript">

var sizeWeight = 8;
var sizeBase = 12;
var colorWeight = 8;
var rankMax = 64;

var tcpTags =
[
<MTTags>
    {
        "name" : "<$MTTagName$>",
        "rank" : "<$MTTagRank max="64"$>",
        "link" : "<$MTTagSearchLink$>",
    },
</MTTags>
];

function buildCloud(){
    document.getElementById('tag_cloud_plus_list').innerHTML = "";
    for(var i in tcpTags){
        var tag = String();
        tag = '<li class="module-list-item" style=" font-size : '
            + rank2FontSize(tcpTags[i].rank) + ';"><a href="'
            + tcpTags[i].link + '" style=" color : '
            + rank2Color(tcpTags[i].rank) + ';">'
            + tcpTags[i].name + '</a></li>\n'; /*need this \n but i don't know why.*/
        document.getElementById('tag_cloud_plus_list').innerHTML += tag;

    }
    document.getElementById('tag_cloud_plus_size_info').innerHTML = sizeWeight;
    document.getElementById('tag_cloud_plus_size_base_info').innerHTML = sizeBase;
    document.getElementById('tag_cloud_plus_color_info').innerHTML = colorWeight;
}

function rank2Color(rank)
{
    var col = Math.round((rank - rankMax / 2) * colorWeight / 4 + 128);
    col = col > 255 ? 255 : col;
    col = col < 0 ? 0 : col;
    return 'rgb(' + col + ',' + col + ',' + col + ')';
}

function rank2FontSize(rank)
{
    return Math.round((1 - rank / rankMax ) * sizeWeight + sizeBase) + "px";
}

function sizeUp()
{
    sizeWeight += 1;
    buildCloud();
}

function sizeDown()
{
    sizeWeight -= 1;
    buildCloud();
}
function sizeBaseUp()
{
    sizeBase += 1;
    buildCloud();
}

function sizeBaseDown()
{
    sizeBase -= 1;
    buildCloud();
}
function colorUp()
{
    colorWeight += 1;
    buildCloud();
}

function colorDown()
{
    colorWeight -= 1;
    buildCloud();
}

/*at first we must build tag cloud*/
buildCloud();

</script>

IEでは動かないみたいなので、そのうち直します。