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
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/19268837
※半角英数字のみのトラックバックは受信されません。

この記事へのトラックバック

ブログでアフィリエイト!初心者必見
Excerpt: ブログでのアフィリエイトが初心者の方にとって重要な、クラウドに関する記事を集めてみました。ブログでのアフィリエイトが初心者の方は、是非、参考にしてくださいね。
Weblog: クラウドに関する記事
ERROR: NOT PERMITED METHOD: blog_name I html
Tracked: 2006-09-30 17:36
タグクラウド
×

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