HTML5のドラフト仕様書からMicrodataの抄訳

2009年11月30日

5 Microdata -- HTML5

この記事では、11月24日付けのHTML5ドラフト仕様書から、第5章 Microdataの一部を訳したものです。

この仕様はまだ策定中のもので、原文中にもいたるところに「This section is non-normative」(これは規定ではない)と表記されており、今後変更される可能性があります。

この仕様書を基にMicrodataを分かりやすく解説した記事として1つ前の記事「HTML5のMicrodataとは何か?」を書きましたので、併せてご参照ください。

以下から始まる抄訳は、自由に引用、転載していただいてかまいません。その際にできれば出典としてこの記事へのリンクを貼っていただけると幸いです。

5 Microdata

5.1.1 Overview

コンテンツの中にマシンリーダブルなラベルをつけたい、といった要求が時折ある。例えば、汎用のスクリプトがそのページに特化したサービスを提供することを可能にする。それによってページをカスタマイズするといった用途に使うといったケースがある。

こうした目的のために使えるMicrodata機能をここでは紹介する。Microdataは、コンテンツと一緒に、ネスト可能なname-valueのペアをドキュメントに付加できる。

5.1.2 The basic syntax

おおまかにいえば、Microdataはname-valueのペアのグループからなる。1つのグループはitemと呼ばれ、そのname-valueのペアはプロパティである。itemとプロパティは通常の要素によって表現される。

itemを作成するには、itemscope属性が用いられる。

プロパティを追加するには、itemの子要素に対してitemprop属性が用いられる。

以下の例は、2つのitemがあり、それぞれにnameプロパティがある。

<div itemscope>
  <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
  <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

プロパティは一般に文字列の値を持つ。以下のitemは3つのプロパティを持っている。

<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called 
    <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

プロパティはURLの値を持つこともできる。その場合、a要素とそのhref属性、img要素とそのsrc属性などを用いる。

次の例は、itemが1つのプロパティ"image"と、その値をURLで持つ。

<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google">
</div>

プロパティは日付、時間、あるいは日時の値を持つこともできる。これはtime要素とそのdatetime属性を用いる。

以下の例では、itemは1つのプロパティ"birthday"を持ち、その値は日付となっている。

<div itemscope>
  I was born on <time itemprop="birthday" 
    datetime="2009-05-10">May 10th 2009</time>.
</div>

プロパティを宣言する要素にitemscope属性を用いることによって、プロパティはname-valueペアのグループを持つことができる。

ほかのitemの一部分となっていないitemのことをtop-level microdata itemと呼ぶ。

以下の例では、外側のitemが人を表し、内側のitemはバンドを表している。

<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>Band: <span itemprop="band" itemscope>
    <span itemprop="name">Jazz Band</span> 
    (<span itemprop="size">12</span> players)</span>
  </p>
</div>

外側のitemは2つのプロパティ"name"と"band"を持っている。"name"の値は"Amanda"、そして"band"の値はその右側のitemであり2つのプロパティ"name"と"size"を持っている。bandの"name"は"Jazz Band"、"size"は12"である。

この例の外側のitemは、top-level microdata itemである。

itemscope属性を持つ要素の子要素となっていないプロパティは、itemref属性によりitemと関連付けすることができる。

以下の例は前述の例と同じであるが、すべてのプロパティはitemとは分離されている。

<div itemscope id="amanda" itemref="a b"></div>

<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>

itemは、複数のプロパティに対して同じ名前で異なった値を持つことができる。

以下の例は、2つの味のアイスクリームを表している。

<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>

1つのitemが2つのプロパティ"flavor"を持つが、1つは"Lemon sorbet"であり、もう1つは"Apricot sorbet"である。

1つの要素で複数のプロパティを一度に設定することもできる。同じ値を持つ複数のプロパティを何度も宣言しなくて済む。

以下の例は、itemの中で2つのプロパティ"favorite-color"と"favorite-fruit"が共通の値"orange"を設定している。

<div itemscope>
  <span itemprop="favorite-color favorite-fruit">orange</span>
</div>

5.1.3 Typed items

これまで紹介してきた例は、ドキュメントの中でMicrodataをどうやってマークアップするかだが、これらは再利用を想定したものではなかった。

Microdataは、さまざまな著者や読者が協力してマークアップの新しい利用を行おうとする際に非常に有用である。

この目的では、それぞれのitemに型を与えることが必要となる。それらは"http://example.com/person"や"http://example.org/cat"、あるいは "http://band.example.net/"といったURLで指定できる。

itemの型は、itemscope属性を持つ要素のitemtype属性の値として指定される。

以下のitemは、"http://example.org/animals#cat"となる。

<section itemscope itemtype="http://example.org/animals#cat">
  <h1 itemprop="name">Hedral</h1>
  <p itemprop="desc">Hedral is a male american domestic shorthair, 
    with a fluffy black fur with white paws and belly.</p>
  <img itemprop="img" src="hedral.jpeg" alt="" 
    title="Hedral, age 18 months">
</section>

この例では、"http://example.org/animals#cat"型のitemは3つのプロパティ"name"、"desc"、"img"を持っている。

itemは1つだけ型を持つことができる。型はボキャブラリを定義することで、プロパティに意味(context)を与える。

例えば、"http://census.example/person"という型のitemのプロパティ"class"は、経済的な意味(censusは人口調査)での階級(class)を指し、"http://example.com/school/teacher"の型を持つitemのプロパティ"class"が、先生(teacher)が受け持つ教室(class)を指すであろう。

5.1.4 Global identifiers for items

itemは、グローバルな識別子を持つトピックの情報を提供する場合がある。itemには、グローバルな一意性を持つ情報(topic)が与えられる場合がある。例えば、本はISBNによってグローバルに特定できる。

(itemtype属性で指定される)ボキャブラリには、itemid属性のURLによって一意に表現されるglobal identifierを関連付けることができる。

itemid属性のURLの意味は、どのボキャブラリが使われるかに依存している。

以下の例では、特定の本を示している。

<dl itemscope
    itemtype="http://vocab.example.net/book"
    itemid="urn:isbn:0-330-34032-8">
  <dt>Title
  <dd itemprop="title">The Reality Dysfunction
  <dt>Author
  <dd itemprop="author">Peter F. Hamilton
  <dt>Publication date
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996
    </time>
</dl>

この例のボキャブラリ"http://vocab.example.net/book"は、itemid属性のurn:URLによってISBNで本が指定されることを定義している。

5.1.6 Using the microdata DOM API

Microdataの情報をスクリプトで取り出したとき、例えばあるアプリケーションの形式でその情報が提供されたときなど、利用者にとってさらに有用なものになるだろう。

top-leve microdata itemsのデータにアクセスするためには、document.getItems(typeNames)メソッドが提供されている。これは、特定の型あるいはすべての型の複数のitemを、NodeListの形で返す。

itemscope属性を持つそれぞれのitemはDOM形式で表現されている。それぞれの要素はelement.itemscopeIDL属性がTrueにセットされる。

itemの型は、itemscope属性を持つ要素に対してelement.itemTypeIDL属性によって得られる。

以下の例は、getItems()メソッドによって特定の型を持つすべてのtop-level microdataの複数itemのリストが得られることを示している。

var cats = document.getItems("http://example.com/feline");

itemとなっている要素が取得できたら、それらのプロパティはpropertiesIDL属性によって取得できる。この属性は、HTMLPropertiesColletionを返す。これは、itemに含まれる1つかそれ以上のプロパティをすべて列挙する。

またこれは、名前でインデックス化することもできる。この場合、その名前のプロパティとなっているオブジェクトを返す。

プロパティを持つそれぞれの要素は、その値を返すitmValueIDL属性を持つ。

以下の例は、"http://example.net/user"型の最初のitemを取得し、そのitemの"name"プロパティを表示する。

var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].content + '!');

(抄訳ここまで)

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : HTML5 , Web標準



≫次の記事
HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める
≪前の記事
HTML5のMicrodataとは何か?

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus