こんにちは，五十嵐です．タグのビジュアル表示．．．つまるところ，フォントの大きさを変えようということ．どこぞのソーシャル・ブックマークのサービスと同じようにしてみようということです．
こんな感じ．
- 一番良く使われるタグ
- よく使われるタグ
- 結構使われるタグ
- まぁまぁ使われるタグ
- あまり使われないタグ
- ほとんど使われないタグ
- 一番使われないタグ
ここで，方針としては，タグの大きさの修飾はスタイルシートに任せて，とにかく 7 段階で表示することにします．使用されなくなったタグも残していますので，使用されている回数は最小 0 から最大値まであります．それを単純に 7 段階に分けることにします．つまり (最大値/7) の幅で class を分けます．
以前書いたつもりでしたが，メニューにタグ一覧をつけています．書き忘れていました．<div id=searchtag></div>というフィールドに非同期でタグを読み込みます．XML で読み込みますが，DTD は以下のようになります．
<!ELEMENT tags (tagentry*)> <!-- 全体のエントリ -->
<!ELEMENT tagentry (id,name)> <!-- タグの各エントリ -->
<!ELEMENT id (#PCDATA)> <!-- タグの ID 番号 -->
<!ELEMENT name (#PCDATA)> <!-- タグの名前 -->
ここに，"tagclass" を追加します．
<!ELEMENT tags (tagentry*)> <!-- 全体のエントリ -->
<!ELEMENT tagentry (id,name,tagclass)> <!-- タグの各エントリ -->
<!ELEMENT id (#PCDATA)> <!-- タグの ID 番号 -->
<!ELEMENT name (#PCDATA)> <!-- タグの名前 -->
<!ELEMENT tagclass (#PCDATA)> <!-- タグのクラス -->
こんな感じ．
<?xml version="1.0" encoding="UTF-8" ?>
<tags>
<tagentry>
<id>7</id>
<name>ウルトラマン</name>
<tagclass>tagclass4</tagclass>
</tagentry>
<tagentry>
<id>8</id>
<name>ウルトラマンメビウス</name>
<tagclass>tagclass1</tagclass>
</tagentry>
<tagentry>
<id>11</id>
<name>スタートレック</name>
<tagclass>tagclass7</tagclass>
</tagentry>
<tagentry>
<id>9</id>
<name>スーパー戦隊</name>
<tagclass>tagclass2</tagclass>
</tagentry>
...
</tags>
これをサイドメニューに読み込み，<span>で展開します．
修飾は style.css で 7 レベルの大きさで変えます．
.sidemenu-box #tagsearch .tagclass7 {
font-size: xx-large;
}
.sidemenu-box #tagsearch .tagclass6 {
font-size: x-large;
}
.sidemenu-box #tagsearch .tagclass5 {
font-size: large;
}
.sidemenu-box #tagsearch .tagclass4 {
font-size: medium;
}
.sidemenu-box #tagsearch .tagclass3 {
font-size: small;
}
.sidemenu-box #tagsearch .tagclass2 {
font-size: x-small;
}
.sidemenu-box #tagsearch .tagclass1 {
font-size: xx-small;
}
これで使用頻度にしたがって，タグの大きさが変わるようになりました．大きさで区別できないようなら，style シートを変更して，色の濃さを変えるなどの方法もありますが，今のところ，これでよいでしょう．
2007/06/27 記
【追記】
こんなの↓あるんですねぇ．
http://search.cpan.org/~lbrocard/HTML-TagCloud-0.34/lib/HTML/TagCloud.pm初めから知っていれば．．．
参考：
Keyword: Perl Catalyst Secure-SBM SSBM セキュア・ソーシャル・ブックマーク
ikarashiさんのエントリ配信
Rinza
開発日記