Jul 26, 2005

Tagwireでタグクラウドを実現する

Tagwire Pluginでは、ブログで使用しているすべてのタグをリスティングする機能を持ちます。また、その際にタグの名前以外にタグの使用個数、タグの最終利用時刻を取得することができます。

したがって、タグの一覧を表示する際に使用頻度に応じてサイズを変更するとか、タグの最終利用時刻に応じて濃淡を変更するとか、当然ですがそういうことは普通にできます。search.cpan.org: HTML::TagCloud - Generate An HTML Tag Cloudに食わせる用のデータを作るもよし、タグデータと表示用の処理を含むJavascriptを生成するのもよし、タグデータXMLを生成してえーじゃっくすでほげほげするもよし、まあ好きなように使えます。

ここでは私のTagCloudのページのテンプレート(抜粋)を貼り付けておきます。ときどきソースをくださいと言われるので。少し変更すればTags Pluginなどにも転用できます。

<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日以上経ったタグはグレーで、一年以上経ったタグはより薄いグレーで、それぞれ表示しています。

About Me

My Photo

つくばで働く研究者

Total Pageviews

Amazon

Copyright 2012 Ogawa::Buzz | Powered by Blogger
Design by Web2feel | Blogger Template by NewBloggerThemes.com