ここ何日かマイクロフォーマット（microformats）の話題を続けています。僕がマイクロフォーマットを思い出したキッカケは、WebAPIのデータ形式について考えていたときです。マイクロフォーマット方式でマークアップされたHTML断片をWebAPIで使えないかな？と思ったのです。
多くのWebAPIでは、特定のURLにHTTPリクエストを送ると、XMLやJSONのデータが応答として返ってきます。仮に、とあるAPIがJSON形式の人物情報を返してくるとします。独自に人物情報のデータ形式を考えるよりは、何か標準を採用すれば、考える手間も省けるし、相互運用性からも好ましいでしょう。
そこで、hCardのサブセットを使うことにします。スキーマ（型定義）を示すことはしませんが、例えば次のJSONオブジェクトは人物情報のインスタンスだと考えられます。
{
"vcard" : {
"fn" : "檜山 正幸",
"email" : ["hiyama{AT}chimaira{DOT}org"],
"url" : ["http://www.chimaira.org/", "http://d.hatena.ne.jp/m-hiyama/"]
}
}
このようなデータが、GET http://www.example.jp/people/m-hiyama.vcard とかで返ってくる、とそんなイメージ。
JSON形式は、プログラムで扱いやすいですが、人間が目で見るには向いてません。やっぱりHTML形式のほうが人間には向いてます。そこで、次のようなテンプレートで人物情報をHTMLにすることにします。
<div class="vcard"> {* -- 必須プロパティ fn -- *} <div class="fn">{$vcard.fn}</div> {* -- オプショナルな複数プロパティ email -- *} {if $vcard.email} <ul class="email-list"> {foreach from=$vcard.email item=email} <li class="email">{$email}</li> {/foreach} </ul> {/if} {* -- オプショナルな複数プロパティ url -- *} {if $vcard.url} <ul class="url-list"> {foreach from=$vcard.url item=url} <li><a class="url" href="{$url}">{$url}</a></li> {/foreach} </ul> {/if} </div>
テンプレートが展開された最終形は次のとおり：
<div class="vcard"> <div class="fn">檜山 正幸</div> <ul class="email-list"> <li class="email">hiyama{AT}chimaira{DOT}org</li> </ul> <ul class="url-list"> <li><a class="url" href="http://www.chimaira.org/">http://www.chimaira.org/</a></li> <li><a class="url" href="http://d.hatena.ne.jp/m-hiyama/">http://d.hatena.ne.jp/m-hiyama/</a></li> </ul> </div>
生成されたHTML断片は、マイクロフォーマットのhCardとして解釈できるので、比較的簡単なデータ抽出アルゴリズムでJSONデータを再現できます。つまり、このHTML断片はJSONデータと（構造的データとしては）まったく等価です。
また、このHTML断片には、装飾や視覚的効果のための要素・属性は一切入っていません。あくまでデータの表現形式としてHTMLを使っているのであって、レンダリングは意識してないのです。このような形態・目的・用途のHTMLデータをクリーンHTMLと呼ぶことにします。
クリーンHTMLに、装飾・視覚的効果を施すことができないのかというと、大丈夫、できます。最近は、単純な要素構造を持つHTMLにCSSでスタイル付けするデザイン手法が主流となりつつあります。クリーンHTMLには、データの構造と意味を示唆するためのクラス名が入っていますが、このクラス名はスタイリング／デザインにも使えます。次は、人物情報をスタイリングする際のCSSスタイルシート・スケルトンです。
/* 人物情報のトップレベル */ div.vcard {} /* メールアドレス */ div.vcard li.email {} /* URL */ div.vcard a.url {} /* ==== 補助的な要素 ==== */ /* メールアドレスを列挙するリスト */ div.vcard ul.email-list {} /* URLを列挙するリスト */ div.vcard ul.url-list {} /* URLを列挙するリストの項目 */ div.vcard ul.url-list li {}
デザインのスキルがある方なら、そこそこ見栄えのするスタイルを作れるのではないでしょうか。要素構造＝DOMツリーが単純なので、DOM操作で要素を変形・加工をするのもやりやすいでしょう。
WebAPI経由で純粋なデータを受け取って、あとは全てプログラムで処理するならXMLやJSONが便利でしょう。しかし、見た目はCSSデザインで付加する、あるいはJavaScriptによる多少の変形とCSSを組み合わせる、というような前提／用途では、クリーンHTMLを応答（戻り値）に使うのは悪くないと思います。そのとき、純粋なデータとそのHTMLエンコードの等価性を保証するために、マイクロフォーマット方式のマークアップは適切だと思うのです。
