タグがずらりと並んで表示され、よく使われるものは大きくなる。この表示方法がタグクラウドと呼ばれている。
私が初めてタグクラウドを見たのはflickrのpopular tagsページだったと思うのだが、重み付けリストをシンプルに視覚化する方法としてセンスがいいなあと感心した覚えがある。
残念ながらseesaaブログには、タグ機能やタグクラウドを表示する機能はない。
seesaaブログでのタグにあたるものはカテゴリになるのだが、考えてみればカテゴリ一覧も重み付けリストである。これをタグクラウド風に表示させるのも面白いかもしれないということで、挑戦してみた。
まず、Javascriptでタグクラウドを生成するようなものはないかと探してみると、「Cloud JS」というRSS形式のデータファイルからタグクラウド生成するJavascriptを発見。
このスクリプトのタグクラウドを生成している部分を見てみると、それほど難しい処理ではなさそうだったので、ロジックを参考にしながらカテゴリ表示のコンテンツを改造した。
以下が、カテゴリをタグクラウド風に表示するようにする手順である。
- コンテンツからカテゴリを選んで「コンテンツHTML編集」をクリックする。
- HTMLの記述を次のように書き換える。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<script type="text/javascript"><!--
var density = 1;
var seed = 4;
var highest_count = 0;
url_array = new Array();
name_array = new Array();
count_array = new Array();
<% loop:list_category -%>
url_array[url_array.length] = "<% category.page_url %>";
name_array[name_array.length] = "<% category.name | tag_break %>";
count_array[count_array.length] = <% category.article_count | __or__ | echo("0") %>;
<% /loop -%>
for (var i = 0; i < count_array.length; i++)
{
if (count_array[i] > highest_count) {
highest_count = count_array[i];
}
}
var dif = Math.floor((highest_count - density) / seed);
for (var i = 0; i < name_array.length; i++)
{
var size_string = "70%";
var font_size = 1;
if (count_array[i] > highest_count - dif) {
size_string = "190%";
font_size = 5;
}
else if (count_array[i] > dif * 2) {
size_string = "160%";
font_size = 4;
}
else if (count_array[i] > dif) {
size_string = "130%";
font_size = 3;
}
else if (count_array[i] > dif / 2) {
size_string = "100%";
font_size = 2;
}
if (count_array[i] >= density) document.write('<a href="', url_array[i], '" title="', count_array[i] ,'件のエントリー"><span class="font_', font_size, '" style="font-size: ', size_string ,'">', name_array[i], '</span></a> ');
}
//--></script>
<noscript>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
</noscript>
<% content.footer -%>
</div>
これで、カテゴリの表示がタグクラウド風になる。Javascriptが動作しない環境では、以前の表示になるようにしてある。
このblogでは、カテゴリ付けをサボっていたので、カテゴリが少なく雲(クラウド)にはどうやっても見えないのが残念 =p
2006/10/2 追記。
Seesaaブログにタグクラウドが実装されたので、わざわざカテゴリをタグクラウド風にする必要はなくなった。
