Hatena::Groupweb

vantguarde

 | 

5.11

HTML5のmicrodata

| 02:04

おおおっ。きましたよーー

microdata in HTML5の最初のドラフトが上がってきました。ちょっと前にユースケースが集められてたので、追加する気なんだとちょっとびっくりしたのですが、すごいですねー

さて、ざっとですが読んだので紹介を。試しにここの簡単な概要を書くと、こんな感じになるようです。

<section item="com.example.weblog">
  <h2>このサイトについて</h2>
  <p><span itemprop="com.example.title">vantguarde</span>っていうweblogです。
  <p><span itemprop="com.example.author">id:vantguarde</span>がやってます。
</section>

itemは新しい「アイテム」を、itempropはハッシュでいうnameを表します。valueは要素のtextContentになるんでしょうか。

itemがネストされると、構造化されたデータを値に取る事が可能です。最新のエントリーについての情報を追加してみます。

<section item="com.example.weblog">
  <h2>このサイトについて</h2>
  <p><span itemprop="com.example.title">vantguarde</span>っていうweblogです。
  <p><span itemprop="com.example.author">id:vantguarde</span>がやってます。
  <p itemprop="com.example.latest" item>最新の記事は
    <a itemprop="com.example.permalink" href="/html5_microdata">
<span itemprop="com.example.title">HTML5のmicrodata</span></a>です。<br>
    <time itemprop="com.example.pubdate" datetime=2009-05-11>2009/05/11</time>に公開されました。
</section>

その他、idの付いた要素を参照し、アイテムの主語とするsubjectなんて属性も定義されています。RDFaからの影響がよく解る属性ですね。

itempropの語彙ですが、基本は例に挙げたようなJavaっぽいNamespaceを使うようです。ただドメイン持ってない人のためなのか、URLも使えるようです。URLといいつつHTML5の「URL」にはURIも含まれるはずなので、tag URIとかも使えるのかなとは思います(解決されるのかどうかはさておき)。

さて、microdataはmicroformatsよりも“human readable”に狂ってはおらず、機械に都合の良いデータも簡単に埋め込む事が出来るようです*1

使うのはproperty付きのmeta要素です。microdataの追加にあわせ「itempropがあるものはflow content」という定義が追加されました。これでbody内に書く事が可能です。

<section item>
  <h2 itemprop="com.example.label">コロッセオ</h2>
  <meta itemprop="com.example.lat" content="41.890278">
  <meta itemprop="com.example.long" content="12.492222">
  <p itemprop="com.exmaple.desc">ローマにある円形闘技場跡です。</p>
</section>

データの利用ですが、DOM APIが提供され、またJSONやRDFへの変換アルゴリズムも用意されてます。

面白いですね。RDFとの違いをざっと考えてみましたが、リテラルやURIを持つリソース(ObjectProperty)、データ型などの概念がないこと、同じプロパティを複数持てない事でしょうか。まあでも、語彙を工夫すればそこまで問題ない気がしています。

propertyなど属性名のコンフリクトは気になるところですが、RDFaの処理モデルを考えると問題ないのかなと。書く側に紛らわしいっていう問題は残りますが。

実装の段階でどうなるのかも含めていろいろ楽しみです。

*1:目的が機械のためのデータを表現することなので、出来ないと困るわけですが

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