Embed Size (px)
DESCRIPTION
HTML5の拡張として用意されるMicrodataの入門用スライドです。2010年7月31日のSwapSkills vol.6で利用した資料です。GoogleのRich Snippetsについても言及しています。
Citation preview
Microdata: A Primermasataka yakura
トピック: Microdata
1. Microdataとは?2. Microdataの書き方3. Rich Snippets
Microdata?
機械処理しやすいように情報をマークアップする仕組み。
Microformatsとの違い
microformatsはclassやrelを使う。
<div class=vcard>
<div class=hentry>
<a href=... rel=tag>
Microdataは専用の属性を使う。
<div itemscope>
<p itemprop=prop>
<div ... itemtype=“...”>
Microformatsはフォーマットの集まり。
hCard, hCalendar, hAtom,hReview, hRecipe, hProduct, etc...
各フォーマットごとに固有の処理が必要になる。
hCardの処理系を作ってもhCalendarには対応できない……
Microdataは処理モデル。
フォーマットによって処理が変わることはない。
書き方を覚えてしまえばどのフォーマットも使える。
DOM APIも用意されておりスクリプトからも扱いやすい。
μfはタスクにフォーカス。Microdataは処理にフォーカス。
Microdataを書く
Microdata専用の属性は5つ。
•itemscope•itemprop•itemtype
•itemref•itemid
•itemscope•itemprop•itemtype
•itemref•itemid
Microdataの核は「アイテム」
アイテムを単位としてデータを記述していく。
itemscope ― アイテムの宣言
itemscopeがアイテムを定義する。
<p> 矢倉といいます。
<section itemscope><p> 矢倉といいます。</section>
このアイテムにはまだデータがない。
itemprop ― データを与える
プロパティと値を与えてデータを表現する。
<section itemscope><p> 矢倉といいます。</section>
<section itemscope><p><span itemprop=name> 矢倉 </span>といいます。
</section>
アイテムの「name」に「矢倉」という値が入る。
基本的には要素の内容が値になる。
リンクや画像、時間などは例外。
<p> 1984年3月19日生まれです。うお座です。
<p><time datetime=1984-03-19>1984年3月19日
</time> 生まれです。
<time>の場合はdatetimeの値が使われる。
<section itemscope><p><span itemprop=name> 矢倉 </span> ...
<p><time itemprop=bdaydatetime=1984-03-19> 1984年3月19日</time> 生まれです。うお座です。
</section>
アイテムの「name」は「矢倉」「bday」は「1984-03-19」
<a href=“http://twitter.com/myakura”>Follow me (@myakura)</a>
<a>の場合はhrefの値が使われる。
<a itemprop=twitterhref=“http://twitter.com/myakura”>Follow me (@myakura) </a>
「twitter」は「http://twitter.com/myakura」
複数のプロパティをスペースで区切って指定可能。
<a itemprop=“weblog url”href=“http://....”> my blog </a>
入れ子のアイテム
アイテムを入れ子にして複雑なデータを表現できる。
Q.「矢倉」ってなんて読む?
A.「やくら」です。
<p><ruby> 矢倉 <rt> やくら </rt> </ruby>といいます。
<p><ruby itemscope><span itemprop=name> 矢倉 </span><rt itemprop=yomi> やくら </rt></ruby> といいます。
itempropを持つ要素にitemscopeを与え入れ子にする。
<div itemscope><p><ruby itemprop=name-ruby itemscope><span itemprop=name> 矢倉 </span><rt itemprop=yomi> やくら </rt></ruby> といいます。</div>
nameとyomiは外側のアイテムに追加されない。
<div itemscope><p><ruby itemprop=name-ruby itemscope><span itemprop=name> 矢倉 </span><rt itemprop=yomi> やくら </rt></ruby>といいます。</div>
<item><prop id=“name-ruby”><item><prop id=“name”> 矢倉 </prop><prop id=“yomi”> やくら </prop>
</item></prop>
</item>
itemtype ― フォーマット指定
Microdataでは好きな名前をつけられる。
既存のボキャブラリを使ってもよい。
itemtypeにボキャブラリのURLを指定する。
<section itemscopeitemtype=“http://microformats.org/profile/hcard”><p><span itemprop=fn> 矢倉 </span>といいます。<p><time itemprop=bday datetime=1984-03-19>1984年3月19日</time> 生まれです。うお座です。<p><a itemprop=urlhref=“http://twitter.com/myakura”>Follow me (@myakura)</a>
</section>
fn, bday, urlがhCardのものと認識される。
itemref ― プロパティの参照
スコープ外のプロパティにidを与え、それを取り込む。
<section itemscope> <!-- 本のデータ --><h1 itemprop=title> HTML5&API入門 </h1><p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <!-- 本の表紙 --><img src=cover.jpg ...></figure>
<section itemscope><h1 itemprop=title> HTML5&API入門 </h1><p itemprop=desc> 世界初のHTML5本。...</section>...<figure><img src=cover.jpg ... itemprop=photo></figure>
photoはスコープの外。アイテムに追加されない。
<section itemscope><h1 itemprop=title> HTML5&API入門 </h1><p itemprop=desc> 世界初のHTML5本。...</section>...<figure><img src=cover.jpg ... itemprop=photo></figure>
プロパティに idを与えitemrefから参照させる。
<section itemscope itemref=cover><h1 itemprop=title> HTML5&API入門 </h1><p itemprop=desc> 世界初のHTML5本。...</section>...<figure><img ... id=cover itemprop=photo></figure>
photoのデータがアイテムに追加される。
itemid ― IDを与える
グローバルなIDを与えられるボキャブラリで利用する。
<article itemscope itemtype=“.../book”itemid="urn:isbn:978-4-8222-8422-0"><h1 itemprop=title> HTML5&API入門 </h1><p itemprop=desc> 世界初のHTML5本。...</article>
Microdataの作成と確認
JSON Outputで生成されるデータを確認できる。
型を指定していればvCard, iCalendarの出力もできる。
Rich Snippets
Googleが導入した検索結果表示の仕組み。
検索結果のスニペット部分がちょっと目立つ(ことがある)。
•レビュー•レシピ•イベント
•プロフィール•製品情報
構造化マークアップが検索結果に反映される。
Microdata, RDFa,microformatsに対応。
Rich Snippets andStructured Markupgoo.gl/ZVmq
Rich Snippetsの紹介や各フォーマットの説明など。
Rich SnippetsTesting Tool Beta
google.com/webmasters/tools/richsnippets
Rich Snippetsの表示を確認するWebサービス。
まとめ
MicrodataはHTMLからデータを表現する仕組み。
Microformatsと異なりまずデータの処理方法を定義。
Microdataの核はアイテム。アイテムがデータを構成する。
itemscopeでアイテムを定義しitempropでプロパティを与える。
Microdataの導入例にRich Snippetsがある。
ドキュメントやツールも提供されている。
使えるので、使ってみよう!
ありがとうございました。
