このブログの更新は Twitterアカウント @m_hiyama で通知されます。
Follow @m_hiyama

メールでのご連絡は hiyama{at}chimaira{dot}org まで。

はじめてのメールはスパムと判定されることがあります。最初は、信頼されているドメインから差し障りのない文面を送っていただけると、スパムと判定されにくいと思います。

参照用 記事

マイクロフォーマットとクリーンHTML

ここ何日かマイクロフォーマット(microformats)の話題を続けています。僕がマイクロフォーマットを思い出したキッカケは、WebAPIのデータ形式について考えていたときです。マイクロフォーマット方式でマークアップされたHTML断片をWebAPIで使えないかな?と思ったのです。

多くのWebAPIでは、特定のURLにHTTPリクエストを送ると、XMLJSONのデータが応答として返ってきます。仮に、とあるAPIJSON形式の人物情報を返してくるとします。独自に人物情報のデータ形式を考えるよりは、何か標準を採用すれば、考える手間も省けるし、相互運用性からも好ましいでしょう。

そこで、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経由で純粋なデータを受け取って、あとは全てプログラムで処理するならXMLJSONが便利でしょう。しかし、見た目はCSSデザインで付加する、あるいはJavaScriptによる多少の変形とCSSを組み合わせる、というような前提/用途では、クリーンHTMLを応答(戻り値)に使うのは悪くないと思います。そのとき、純粋なデータとそのHTMLエンコードの等価性を保証するために、マイクロフォーマット方式のマークアップは適切だと思うのです。