2006年06月14日

seesaaブログでカテゴリをタグクラウド風に表示する

最近よく見かけるようになった「タグクラウド」。ソーシャルブックマークなどタグによる分類をしているサービスでは、大抵使われていると思う。
タグがずらりと並んで表示され、よく使われるものは大きくなる。この表示方法がタグクラウドと呼ばれている。
私が初めてタグクラウドを見たのはflickrpopular tagsページだったと思うのだが、重み付けリストをシンプルに視覚化する方法としてセンスがいいなあと感心した覚えがある。

残念ながらseesaaブログには、タグ機能やタグクラウドを表示する機能はない。
seesaaブログでのタグにあたるものはカテゴリになるのだが、考えてみればカテゴリ一覧も重み付けリストである。これをタグクラウド風に表示させるのも面白いかもしれないということで、挑戦してみた。

まず、Javascriptでタグクラウドを生成するようなものはないかと探してみると、「Cloud JS」というRSS形式のデータファイルからタグクラウド生成するJavascriptを発見。

このスクリプトのタグクラウドを生成している部分を見てみると、それほど難しい処理ではなさそうだったので、ロジックを参考にしながらカテゴリ表示のコンテンツを改造した。

以下が、カテゴリをタグクラウド風に表示するようにする手順である。

  1. コンテンツからカテゴリを選んで「コンテンツHTML編集」をクリックする。

  2. 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ブログにタグクラウドが実装されたので、わざわざカテゴリをタグクラウド風にする必要はなくなった。
posted by cuckoo at 18:57 | Comment(0) | TrackBack(1) | blog
タグクラウド

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。