HTML5の拡張として用意されるMicrodataの入門用スライドです。2010年7月31日のSwapSkills vol.6で利用した資料です。GoogleのRich Snippetsについても言及しています。

1. Microdata: A Primer
masataka yakura

3. Web 標準 Blog
standards.mitsue.co.jp

4. トピック: Microdata

5. 1. Microdataとは?
2. Microdata の書き方
3. Rich Snippets

6. Microdata?

7. HTML Microdata
whatwg.org/html5#microdata

8. 機械処理しやすいように
情報をマークアップする仕組み。

9. Microformats との違い

10. microformats は
classやrelを使う。

11. <div class=vcard>
<div class=hentry>
<a href=... rel=tag>

12. Microdata は専用の属性を使う。

13. <div itemscope>
<p itemprop=prop>
<div ... itemtype=“...”>

14. Microformats は
フォーマットの集まり。

15. hCard, hCalendar, hAtom,
hReview, hRecipe, hProduct, etc...

16. 各フォーマットごとに
固有の処理が必要になる。

17. hCardの処理系を作っても
hCalendarには対応できない……

18. Microdata は処理モデル。

19. フォーマットによって
処理が変わることはない。

20. 書き方を覚えてしまえば
どのフォーマットも使える。

21. DOM APIも用意されており
スクリプトからも扱いやすい。

22. μf はタスクにフォーカス。
Microdata は処理にフォーカス。

23. Microdata を書く

24. Microdata 専用の属性は5つ。

25. •itemscope •itemref
•itemprop •itemid
•itemtype

26. •itemscope •itemref
•itemprop •itemid
•itemtype

27. Microdata の核は「アイテム」

28. アイテムを単位として
データを記述していく。

29. itemscope ― アイテムの宣言

30. itemscope が
アイテムを定義する。

31. <p> 矢倉といいます。

32. <section itemscope>
<p> 矢倉といいます。
</section>

33. このアイテムには
まだデータがない。

34. itemprop ― データを与える

35. プロパティと値を与えて
データを表現する。

36. <section itemscope>
<p> 矢倉といいます。
</section>

37. <section itemscope>
<p>
<span itemprop=name> 矢倉 </span>
といいます。
</section>

38. アイテムの「name」に
「矢倉」という値が入る。

39. 基本的には
要素の内容が値になる。

40. リンクや画像、時間などは例外。

41. <p> 1984年3月19日生まれです。
うお座です。

42. <p>
<time datetime=1984-03-19>
1984年3月19日
</time> 生まれです。

43. <time> の場合は
datetime の値が使われる。

44. <section itemscope>
<p><span itemprop=name> 矢倉 </span> ...
<p><time itemprop=bday
datetime=1984-03-19> 1984年3月19日
</time> 生まれです。うお座です。
</section>

45. アイテムの「name」は「矢倉」
「bday」は「1984-03-19」

46. <a href=“http://twitter.com/myakura”>
Follow me (@myakura)</a>

47. <a> の場合は
href の値が使われる。

48. <a itemprop=twitter
href=“http://twitter.com/myakura”>
Follow me (@myakura) </a>

49. 「twitter」は
「http://twitter.com/myakura」

50. 複数のプロパティを
スペースで区切って指定可能。

51. <a itemprop=“weblog url”
href=“http://....”> my blog </a>

52. 入れ子のアイテム

53. アイテムを入れ子にして
複雑なデータを表現できる。

54. Q.「矢倉」ってなんて読む?

55. A.「やくら」です。

56. <p>
<ruby> 矢倉 <rt> やくら </rt> </ruby>
といいます。

57. <p><ruby itemscope>
<span itemprop=name> 矢倉 </span>
<rt itemprop=yomi> やくら </rt>
</ruby> といいます。

58. itemprop を持つ要素に
itemscope を与え入れ子にする。

59. <div itemscope>
<p><ruby itemprop=name-ruby itemscope>
<span itemprop=name> 矢倉 </span>
<rt itemprop=yomi> やくら </rt>
</ruby> といいます。
</div>

60. name と yomi は
外側のアイテムに追加されない。

61. <div itemscope>
<p>
<ruby itemprop=name-ruby itemscope>
<span itemprop=name> 矢倉 </span>
<rt itemprop=yomi> やくら </rt>
</ruby>
といいます。
</div>

62. <item>
<prop id=“name-ruby”>
<item>
<prop id=“name”> 矢倉 </prop>
<prop id=“yomi”> やくら </prop>
</item>
</prop>
</item>

63. itemtype ― フォーマット指定

64. Microdata では
好きな名前をつけられる。

65. 既存のボキャブラリを
使ってもよい。

66. Microdata Vocabularies
whatwg.org/html5#mdvocabs

67. Data-Vocabulary.org
www.data-vocabulary.org

68. itemtype に
ボキャブラリの URLを指定する。

69. <section itemscope
itemtype=“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=url
href=“http://twitter.com/myakura”>
Follow me (@myakura)</a>
</section>

70. fn, bday, url が
hCard のものと認識される。

71. itemref ― プロパティの参照

72. スコープ外のプロパティに
id を与え、それを取り込む。

73. <section itemscope> <!-- 本のデータ -->
<h1 itemprop=title> HTML5&API入門 </h1>
<p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure> <!-- 本の表紙 -->
<img src=cover.jpg ...>
</figure>

74. <section itemscope>
<h1 itemprop=title> HTML5&API入門 </h1>
<p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure>
<img src=cover.jpg ... itemprop=photo>
</figure>

75. photo はスコープの外。
アイテムに追加されない。

76. <section itemscope>
<h1 itemprop=title> HTML5&API入門 </h1>
<p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure>
<img src=cover.jpg ... itemprop=photo>
</figure>

77. プロパティに id を与え
itemref から参照させる。

78. <section itemscope itemref=cover>
<h1 itemprop=title> HTML5&API入門 </h1>
<p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure>
<img ... id=cover itemprop=photo>
</figure>

79. photo のデータが
アイテムに追加される。

80. itemid ― IDを与える

81. グローバルなIDを与えられる
ボキャブラリで利用する。

82. <article itemscope itemtype=“.../book”
itemid="urn:isbn:978-4-8222-8422-0">
<h1 itemprop=title> HTML5&API入門 </h1>
<p itemprop=desc> 世界初のHTML5本。...
</article>

83. Microdata の作成と確認

84. HTML5 Microdata Templates
microdata.freebaseapps.com

86. Live Microdata
foolip.org/microdatajs/live/

88. JSON Outputで
生成されるデータを確認できる。

90. 型を指定していれば
vCard, iCalendar の出力もできる。

91. Rich Snippets

92. Google が導入した
検索結果表示の仕組み。

93. 検索結果のスニペット部分が
ちょっと目立つ (ことがある)。

94. •レビュー •プロフィール
•レシピ •製品情報
•イベント

100. 構造化マークアップが
検索結果に反映される。

101. Microdata, RDFa,
microformats に対応。

102. Rich Snippets and
Structured Markup
goo.gl/ZVmq

103. Rich Snippets の紹介や
各フォーマットの説明など。

104. Rich Snippets
Testing Tool Beta
google.com/webmasters/tools/richsnippets

105. Rich Snippets の表示を
確認するWebサービス。

108. まとめ

109. Microdata は HTML から
データを表現する仕組み。

110. Microformats と異なり
まずデータの処理方法を定義。

111. Microdataの核はアイテム。
アイテムがデータを構成する。

112. itemscopeでアイテムを定義し
itempropでプロパティを与える。

113. Microdata の導入例に
Rich Snippets がある。

114. ドキュメントや
ツールも提供されている。

115. 使えるので、使ってみよう!

116. ありがとうございました。

117. Contact
yakura-masataka@mitsue.co.jp