V.S.A. III

[Secure-SBM:024] タグのビジュアル表示

こんにちは，五十嵐です．タグのビジュアル表示．．．つまるところ，フォントの大きさを変えようということ．どこぞのソーシャル・ブックマークのサービスと同じようにしてみようということです．

こんな感じ．

一番良く使われるタグ
よく使われるタグ
結構使われるタグ
まぁまぁ使われるタグ
あまり使われないタグ
ほとんど使われないタグ
一番使われないタグ

ここで，方針としては，タグの大きさの修飾はスタイルシートに任せて，とにかく 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
初めから知っていれば．．．

参考：