Hatena::Groupweb

vantguarde

 | 

9.20

タグクラウドをマークアップするhTagcloud

| 06:07

microformatiqueにてhTagcloudなるものが提案されています。Tagcloudをどうマークアップするかという仕様の内容はもちろん、microformatsのprocessに沿った策定の進め方を取っていること、どちらもすばらしいものだと思います。

まずはケーススタディから。Flickr, Technorati, del.icio.usなどのサイトのタグクラウドがどのような構造をしているかを調べ、共通点を挙げていきます。

タグの表現方法

  • アルファベット順に並んだタグスペースへのリンク(たまにpopularity)
  • タグは基本的に一単語
  • popularityは今までつけられたタグを総合して算出されているが、先週一週間や過去24時間の人気度もある。

「タグ」というもの、その仕組みなんかにはコンセンサスがとれているようです。

マークアップ

マークアップについてはバラバラ。それぞれ好き勝手やってるみたい。

面白いのがTechnoratiが使っているem要素をネストして用いているweightの表現。スタイル指定が非常に楽なのでこれは賢いなあと思うのですが、強調となるのかすこし疑問です。

こうして共通点を洗い出したのち、いくつかのissueなどを考えフォーマットの策定をはじめます。.01なプロポーザルは次のようなものになってます。

<div class="hTagcloud">
	<ul class="popularity">
		<li class="vvvv-popular"><a href="/tags/Web+Standards+Group">Web Standards Group</a></li>
		<li class="vvv-popular"><a href="/tags/accessibility">accessibility</a></li>
		<li class="popular"><a href="/tags/beta+tester">beta tester</a></li>
		<li class="vvv-popular"><a href="/tags/css">css</a></li>
		<li class="v-popular"><a href="/tags/ex-coder">ex-coder</a></li>
		<li class="vv-popular"><a href="/tags/usability">usability</a></li>
		<li class="vvvv-popular"><a href="/tags/wsg">wsg</a></li>
 	</ul>
</div>

weightの指定がもう少しうまくならないものかなあと少し考えてみてるんですが、何かないかなあ。とはいえ現時点でもかなり良いものになっているように思います。

 | 
Contact: @vant / lepetitcroissant@gmail.com.