タグクラウドのマークアップ

最近 巡回しているサイトで、ちょっと面白いエントリーがあったので、紹介がてら、自分でも考えてみようかと。

Marking Up a Tag Cloud （24 Ways）

del.icio.us, Flickr, Technorati の (X)HTML ソースを比較しながら、タグクラウドの適切なマークアップについて考察しているエントリーです。といっても、著者の Mark Norman Francis は、これらにいきなりダメ出しをしています。いわく、「問題は、みんな間違っていることだ」（The problem is, everyone's doing it wrong.）と。

del.icio.us のタグクラウド

まずは del.icio.us。いきなりですが、確かにこれはひどい。(^ ^;)

<div class="alphacloud">

<a href="/tag/.net" class="lb s2">.net</a>
<a href="/tag/advertising" class=" s3">advertising</a>
<a href="/tag/ajax" class=" s5">ajax</a>

</div>

Mark が指摘する、タグがそもそもリストにすらなっていない（that is one of the worst examples of tag cloud markup I have ever seen. とも..）という問題のほか、以下のような欠点も見受けられます。

• タグがリスト化されておらず、ベタ打ちテキストのままになっている
• class 名が、セマンティックな名前ではなく、外見上の見栄えをベースにした名前（s2, s3 → size2, size3?）になっている
• class 名に、パッと見て理解しにくい独自の略語（lb, s2, s3）が使用されている

Flickr のタグクラウド

次は Flickr。これも、あまり変わらない。というか、部分的には悪くなってるような気すらします。(^ ^;;)

<p id="TagCloud">

&nbsp;<a href="/photos/tags/06/" style="font-size: 14px;">06</a>&nbsp;
&nbsp;<a href="/photos/tags/africa/" style="font-size: 12px;">africa</a>&nbsp;
&nbsp;<a href="/photos/tags/amsterdam/" style="font-size: 14px;">amsterdam</a>&nbsp;

</p>

• del.icio.us 同様、タグがリスト化されていない
• 視覚的な区切り文字としてしか意味を成していない空白文字（&nbsp;）
• 個々の a要素に直接、見栄え指定のスタイルが挿入されている
• 文字の大きさと論理的な意味（セマンティクス）の相関関係がわからない
• 文字の大きさが px で指定されている（IE 6- で文字の大きさが固定されてしまう）

Technorati のタグクラウド

そして Technorati。これがまだしもいちばんマトモで面白いんですが..。何というか、もはや、どちらの方がどれだけ重要なのか、見た目には分からないですね。(^ ^;;;)

<ol class="heatmap">

<li><em><em><em><em><a href="/tag/Britney+Spears">Britney Spears</a></em></em></em></em></li>
<li><em><em><em><em><em><em><em><em><em><a href="/tag/Bush">Bush</a></em></em></em></em></em></em></em></em></em></li>
<li><em><em><em><em><em><em><em><em><em><em><em><em><em><a href="/tag/Christmas">Christmas</a></em></em></em></em></em></em></em></em></em></em></em></em></em></li>
<li><em><em><em><em><em><em><a href="/tag/SEO">SEO</a></em></em></em></em></em></em></li>
<li><em><em><em><em><em><em><em><em><em><em><em><em><em><em><em><a href="/tag/Shopping">Shopping</a></em></em></em></em></em></em></em></em></em></em></em></em></em></em></em></li>

</ol>

まずは（ようやく出てきた）良い点。

• タグがリスト化されている
• アルファベット順に並べられているので ol要素（順序つきリスト）を使っている

そして欠点。

• 最大15個にも及ぶ、おびただしい em要素のネスト（いくつ階層があるのか、パッと見ただけでは分からない）

em や strong要素のネストで強調の度合いを示すという手法は確かに面白いんですが、Technorati のように最大15階層もネストされたのでは、人間の目にも優しくないし（マークアップミスのリスクを伴いますし）、パーサーにも負担を掛けるしで、さすがに考えものですよね。em より強い強調が strong という点については、僕も個人的に、前々から em と strong を分ける必然性があるのだろうか？という疑問がないでもないんですが（class 属性で強調の度合いや性質の違いは吸収できるはず）。追い打ちをかけるように、Mark はさらに、「スクリーンリーダーなんてどうするの？絶叫させればいいの？」なんて皮肉を言ってます。(笑)

Mark Norman Francis 案

そして最後に Mark の代替案です。

論理構造: (X)HTML ソース

<ol class='tag-cloud'>

<li class="somewhat-popular"><span>44 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/125shaftesburyavenue/' class='tag'>125 Shaftesbury Avenue</a></li>
<li class="not-popular"><span>2 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/airlinefood/' class='tag'>airline food</a></li>
<li class="ultra-popular"><span>344 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/austin/' class='tag'>austin</a></li>
<li class="not-very-popular"><span>12 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/badjoke/' class='tag'>bad joke</a></li>

</ol>

ポイントは以下の通り。

• タグはリスト化する必要がある（li要素で括る）
• ここではアルファベット順に並べるので、タグリスト全体を順序つきリストで括る（ol要素を使う）
• それぞれのタグをつけられた画像が何点あるのかを明示的に記述する（この部分は span要素で括っておく）
• それぞれのタグがつけられている頻度（というか累積数）をクラス分けする（li要素の class の値として挿入）
• microformats 対応サイト向けに、これがタグであることが分かるようにしておく（rel='tag' を挿入する）

で、実際にこれをブラウザ上で見せる際のポイント。

• タグは一行ずつ分けて表示されるよりも、隣り合っていた方がいい
• タグの累積数に関する情報は邪魔なので、画面上からは消しておきたい（ただしスクリーンリーダーには読める状態にしておきたい）
• それぞれのタグをつけた画像の一覧へのリンクを、それぞれのタグに対してつけておきたい

見栄え: CSS ソース

/* display the individual items next to each other, not one-per-line */
.tag-cloud LI { display: inline; }
/* hide the extra context from CSS-enabled browsers, but not screenreaders */
.tag-cloud SPAN { position: absolute; left: -999px; width: 990px; }
/* size is purely presentational, based upon the class */
.tag-cloud .not-popular { font-size: 1em; }
.tag-cloud .not-very-popular { font-size: 1.3em; }
.tag-cloud .somewhat-popular { font-size: 1.6em; }
.tag-cloud .popular { font-size: 1.9em; }
.tag-cloud .very-popular { font-size: 2.2em; }
.tag-cloud .ultra-popular { font-size: 2.5em; }

なるほど、これで確かにすっきりしますね。素晴らしい！

改善が見込める点

一応、個人的に感じた不満点も挙げておきます。（Mark への feedback のために英語でも書いてみましたけど、間違いにお気づきの方は、是非、ご指摘くださいませ。ちょっと自信ないです..。Please tell me if my English is wrong. :-p）

• • タグの使用頻度の名前がやや曖昧で、レベル差や上下関係を想像しづらい。
  • The namings of classes to define the levels of popularity is bit fuzzy. It might be difficult for human to classify them clearly.
• • タグの累積適用数を括った span を隠すのには、visibility: hidden; か、メディアタイプごとに display: inline | none; を個別指定した方が better！
  • I think using visibility property, or branching by media types might be better, rather than using the off-left method to hide the SPANs. (take a look at the follwing example sources.)

Example 1

/* It might depend on implementations of each screen reader. So yet this is not the best answer. */
.tag-cloud SPAN {

visibility: hidden;

}

Example 2

/* This example looks much better than the above one. */
@media screen, print, handheld {

.tag-cloud SPAN {

display: none;

}

}
@media speech, aural {

.tag-cloud SPAN {

display: inline;
speak: normal;

}

}

Any way, thanks for your excellent article, Mark!

追記: はてな

ちなみに はてな のタグクラウドがどうなっているのかも見てみました。

<li><a href="/t/life" style="line-height: 100%; font-size: 25pt; text-decoration: none;" class="tag">life</a><span class="tagcount">12</span></li>

なるほど。悪くはないけど、style の個別指定がちょっと..ですね。class の値は複数指定できるんだし。