Ogawa::Memoranda

<style type="text/css">
ul#tags { border: 1px solid #CCC; padding: 10px; margin: 10px; display: none; }
#tags li { display: inline; }
#tags li a { border-width: 0; color: #000; }
#tags li.hot a { color: #00F; }
#tags li.old a { color: #777; }
#tags li.oldest a { color: #CCC; }
#tags li a:active, #tags li a:hover { color: #6C3; }
.coffButton { color: #000; background: #fff; border: 1px solid #ccc;
  padding: 2px; cursor: pointer; }
a.coffButton:hover { color: #000; background: #ccc; }
#coff { font-weight: bold; padding: 2px; }
</style>
<p>
Cutoff Parameter:
<a onclick="decCoff(5)" class="coffButton">-5</a>
<a onclick="decCoff(1)" class="coffButton">-1</a>
<a onclick="incCoff(1)" class="coffButton">+1</a>
<a onclick="incCoff(5)" class="coffButton">+5</a>
<span id="coff">0</span>
</p>
 
<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
 title="Tag: <$MTTag$>" 
 href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>
 
<script type="text/javascript">
function calcFontSize(count) {
	return count / 6 + 12;
}
var tags = new Array();
var now = (new Date()).getTime();
var tagsNode = document.getElementById('tags');
var childNodes = tagsNode.childNodes;
for (var i = 0; i < childNodes.length; i++) {
  var e = childNodes.item(i);
  if (e.nodeName.match(/li/i)) {
    var s = e.title.split(':');
    e.style.fontSize = calcFontSize(s[1]) + 'px';
    var d = s[2].split('-');
    var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;
    if (diff < 14) e.className = 'hot';
    else if (diff > 365) e.className = 'oldest';
    else if (diff > 60) e.className = 'old';
    tags.push([ e, s[1] ]);
  }
}
tagsNode.style.display = 'block';
 
var coff = 0;
var coffNode = document.getElementById('coff');
function decCoff(c) {
  if (coff == 0) return;
  coff -= c;
  if (coff < 0) coff = 0;
  coffNode.innerHTML = coff;
  refreshCoff();
}
function incCoff(c) {
  if (coff == 20) return;
  coff += c;
  if (coff > 20) coff = 20;
  coffNode.innerHTML = coff;
  refreshCoff();
}
function refreshCoff() {
  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];
    tag[0].style.visibility = (tag[1] <= coff) ? "hidden" : "visible";
  }
}
</script>

要はTagCloudに必要な情報をあらかじめ生成してタグをwrapしている要素のtitle属性に突っ込んでおき、Javascriptを使ってその情報を見た目に反映させています。ちなみにこの例では、使用頻度に応じてサイズを変更している他に、2週間以内に更新されたタグはブルーで、更新されてから60日以上経ったタグはグレーで、一年以上経ったタグはより薄いグレーで、それぞれ表示しています。