アーカイブ
Tyzohブログ - ikarashiさんのエントリ
 ikarashiさんのエントリ配信

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

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

こんな感じ.

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


ここで,方針としては,タグの大きさの修飾はスタイルシートに任せて,とにかく 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さんのブログを読む | コメント (0) | トラックバック数 (0) | 閲覧数 (4889)
Trackback is not accepted now.
印刷用ページ 友達に送る
 
投稿された内容の著作権はコメントの投稿者に帰属します。
サイト内検索
ブログ カレンダー
«  «  2008 3月  »  »
24 25 26 27 28 29 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5