HTML5のMicrodataとは何か？

2009年11月30日

5 Microdata -- HTML5

HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。

最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。

<div itemscope>
  <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p>
</div>

この文書をWebブラウザで表示しても、

僕の名前は山田太郎です。

と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。

Microdataとは、文書の内容に対して機械に分かる形式で意味づけを行うセマンティックWebのための新しい仕様といえるでしょう。

これまでHTML5の仕様の中でMicrodataが紹介されることは多くありませんでした。そのため現在のところWebで検索しても日本語での解説はほとんど見つかりません。この記事ではそのMicrodataについて紹介していきます。

MicrodataとMicroformats

Microformats Wikiにようこそ！ · Microformats Wiki

HTML文書に意味づけをするための仕様はMicrodataが初めてではありません。よく知られているのの1つは、2005年頃から使われ始めたMicroformatsでしょう。

Microformatsの簡単な例として、人間関係を示すXFNと呼ばれるMicroformatsの記述例を紹介しましょう。

<a href="http://jane-blog.example.org/" 
  rel="sweetheart date met">Jane</a>

a要素のリンク先で相手を表し、Microformats用の特別な属性としてrel属性が定義され、その属性の値として"sweetheart date"といった人間関係を表す文字列を付加できます。

すでにMicroformatsがあるのに、なぜ新たなメタデータのための仕様としてMicrodataを策定したのでしょうか。明確な理由は分かりませんが、想像することはできます。

以下は私見ですが、Microformatsは利用者独自の形式を開発しにくく、勝手な方法でやろうとしても名前空間を設定する標準的な方法がなかったため、名前がほかの人の開発したものと衝突しやすい欠点がありました。また、Microdataで記述されたメタデータを読み出すための標準的な方法もありませんでした。こうしたことなどから、Microformatsは普及が進んだとはいえない状況にあります。

HTML5のMicrodataの仕様を参照すると、これらの欠点を解消し、定義しやすく使いやすいことを目指したのではないかと想像できます。

Microdataの記述法

Microdataは比較的簡単なルールで記述できます。先ほどの例をもう一度見てみます。

<div itemscope>
  <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p>
</div>

1行目のdivタグ（あえてタグと書きます）にitemscope属性がついています。このdivタグの開始タグから終了タグまでがアイテム（item）と呼ばれます。

itemの中にはitempropでプロパティが記述されます。Microdataのメタデータの本体は、このプロパティ名とその値のペアとして表記されます。この例ではプロパティ名がname、値は山田太郎になります。

もう1つ例を紹介しましょう。今度は名前空間が設定されている例です。

<section itemscope itemtype="http://example.org/person">
  <h1 itemprop="name">山田太郎</h1>
  <p itemprop="desc">この名前は日本の代表的な名前です</p>
  <img itemprop="img" src="yamada.jpeg" alt="" >
</section>

1行目、itemの始まりを示すitemscope属性に続き、名前空間を示すためitemtype属性にURLが設定されています。これでnameのようなありふれたプロパティ名でも安心して使えるようになります。

2行目でnameプロパティが設定され、その値が山田太郎となっています。

4行目のimgタグに注目してください。ここはitemのプロパティとしてimgプロパティが設定されていますが、imgタグやaタグのように内容を持たないタグ（要素）では、srcやhrefの値がプロパティの値となります。ですので、ここではimgプロパティの値がyamada.jpegとなるわけです。

Microdataの情報はDOMで読み出せる

Microdataのもっとも嬉しいところは、標準的なDOMの操作で値が取り出せるようになることでしょう。これによってMicrodataを活用した多様なアプリケーションの登場を期待することができます。

例えば、getItems(名前空間名）で、特定の名前空間を持つすべてのitemをノードリストの形で取得できます。名前空間名を省略すれば、Microdataのメタデータを含んでいるすべてのitemを取得できます。

var itemlist = document.getItems();

JavaScriptでこのように記述すれば、変数itemlistにMicrodataのメタデータを含む要素が取得できます。

要素を取得したら、property属性を使ってプロパティの値を取り出すことができます。

var pvalue = itemlist.properties['name'][0].content

上記は、itemlistの最初のitemからnameプロパティの値を取り出すためのコードです。

Microdataで何ができるのか？

Microdataの用途は、既存のMicroformatsなどで想定されていた用途と基本的には同じと思われます。例えば、個人のプロフィールページにメタデータとしてどこが苗字でどこが名前で、どこがミドルネームかなどを示すデータを埋め込むことによって、ネット上のさまざまなアプリケーションで自分の名前を正式に認識してもらうことが可能になります。

また、製品レビューのページ、あるいはレストランのレビューといったページでは、星の数を共通のフォーマットで埋め込むことによって、ネット上にあるさまざまな人のレビューを集計しやすくなるでしょう。

あるいは病院や商店の営業時間、休業日などを機械が読み取れる形で埋め込んでおくと、検索エンジンに「あの病院の営業時間は？」と質問するだけで、検索エンジンがあらかじめ読み込んでおいたメタデータを基に「朝9時から5時までです」と答えてくれるようになるかもしれません。そうなれば、いちいち答えの書いて��るWebページへジャンプして自分で情報を探す必要がなくなります。

これ以外にも、Microdataのメタデータ埋め込みによって機械がWebページの中味を理解できるようになれば、さまざまなアプリケーションの可能性が開けてくるはずです。

もう大きな変更はなさそう（追記あり）

Microdataの仕様はまだドラフト段階で、今後も変更の可能性はあります。しかし10月にはグーグルによってユーザビリティテストが行われ、その結果がいまのitemscopeやitempropなどのボキャブラリに反映されるなど、安定化が進められています。

また、10月27日に行われたWHATWGによるHTML5仕様のラストコールには、MicrodataによるvCard、vEventなどのボキャブラリを含んでいることからも、今後大きな変更はないのではないかと予想されます。

追記（12/1）：10月21日に、MicrodataをHTML5から分離しようという提案が行われていました「ISSUE-76: CHANGE PROPOSAL: Separate Microdata from HTML5 Specification」。Bug 8220 - Remove microdataとして登録されています。これによりまだ変更があるかもしれません。

次の記事「HTML5のドラフト仕様書からMicrodataの抄訳」では、より詳しくMicrodataを知るためにHTML5のドラフト仕様書からMicrodataの部分の抄訳を公開します。というのも、この解説を書くために結局はHTML5の仕様書を読む以外、詳しくMicrodataを解説しているドキュメントが見つからなかったためです。自分で理解するために訳したのですが、せっかくなので公開させていただきます。

ちなみに、HTML5の概要を把握するには、以前の記事「いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0」をご参照ください。