Your SlideShare is downloading. ×
0
Microdata: A Primermasataka yakura
Web 標準 Blogstandards.mitsue.co.jp
トピック: Microdata
1. Microdataとは?2. Microdata の書き方3. Rich Snippets
Microdata?
HTML Microdatawhatwg.org/html5#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   •itemref•itemprop    •itemid•itemtype
•itemscope   •itemref•itemprop    •itemid•itemtype
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=bday datetime=1984-03-19> 1984年3月19日 </time> 生...
アイテムの「name」は「矢倉」「bday」は「1984-03-19」
<a href=“http://twitter.com/myakura”> Follow me (@myakura)</a>
<a> の場合はhref の値が使われる。
<a itemprop=twitter href=“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> </rub...
name と yomi は外側のアイテムに追加されない。
<div itemscope><p> <ruby itemprop=name-ruby itemscope>  <span itemprop=name> 矢倉 </span>  <rt itemprop=yomi> やくら </rt> </ru...
<item> <prop id=“name-ruby”>   <item>    <prop id=“name”> 矢倉 </prop>    <prop id=“yomi”> やくら </prop>   </item> </prop></it...
itemtype ― フォーマット指定
Microdata では好きな名前をつけられる。
既存のボキャブラリを使ってもよい。
Microdata Vocabularieswhatwg.org/html5#mdvocabs
Data-Vocabulary.orgwww.data-vocabulary.org
itemtype にボキャブラリの URLを指定する。
<section itemscopeitemtype=“http://microformats.org/profile/hcard”> <p><span itemprop=fn> 矢倉 </span>といいます。 <p><time itempr...
fn, bday, url がhCard のものと認識される。
itemref ― プロパティの参照
スコープ外のプロパティにid を与え、それを取り込む。
<section itemscope> <!-- 本のデータ --> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<fig...
<section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=c...
photo はスコープの外。アイテムに追加されない。
<section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=c...
プロパティに id を与えitemref から参照させる。
<section itemscope itemref=cover> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figu...
photo のデータがアイテムに追加される。
itemid ― IDを与える
グローバルなIDを与えられるボキャブラリで利用する。
<article itemscope itemtype=“.../book”  itemid="urn:isbn:978-4-8222-8422-0"> <h1 itemprop=title> HTML5&API入門 </h1> <p item...
Microdata の作成と確認
HTML5 Microdata Templatesmicrodata.freebaseapps.com
Live Microdatafoolip.org/microdatajs/live/
JSON Outputで生成されるデータを確認できる。
型を指定していればvCard, iCalendar の出力もできる。
Rich Snippets
Google が導入した検索結果表示の仕組み。
検索結果のスニペット部分がちょっと目立つ (ことがある)。
•レビュー   •プロフィール•レシピ    •製品情報•イベント
構造化マークアップが検索結果に反映される。
Microdata, RDFa,microformats に対応。
Rich Snippets andStructured Markupgoo.gl/ZVmq
Rich Snippets の紹介や各フォーマットの説明など。
Rich SnippetsTesting Tool Betagoogle.com/webmasters/tools/richsnippets
Rich Snippets の表示を確認するWebサービス。
まとめ
Microdata は HTML からデータを表現する仕組み。
Microformats と異なりまずデータの処理方法を定義。
Microdataの核はアイテム。アイテムがデータを構成する。
itemscopeでアイテムを定義しitempropでプロパティを与える。
Microdata の導入例にRich Snippets がある。
ドキュメントやツールも提供されている。
使えるので、使ってみよう!
ありがとうございました。
Contactyakura-masataka@mitsue.co.jp
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Upcoming SlideShare
Loading in...5
×

Talk microdata

843

Published on

矢倉 眞隆 株式会社ミツエーリンクス
2010(vol.6)「HTML5を学ぶなら、セマンティックを学べ!」マイクロデータ

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
843
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Talk microdata"

  1. 1. Microdata: A Primermasataka yakura
  2. 2. Web 標準 Blogstandards.mitsue.co.jp
  3. 3. トピック: Microdata
  4. 4. 1. Microdataとは?2. Microdata の書き方3. Rich Snippets
  5. 5. Microdata?
  6. 6. HTML Microdatawhatwg.org/html5#microdata
  7. 7. 機械処理しやすいように情報をマークアップする仕組み。
  8. 8. Microformats との違い
  9. 9. microformats はclassやrelを使う。
  10. 10. <div class=vcard><div class=hentry><a href=... rel=tag>
  11. 11. Microdata は専用の属性を使う。
  12. 12. <div itemscope><p itemprop=prop><div ... itemtype=“...”>
  13. 13. Microformats はフォーマットの集まり。
  14. 14. hCard, hCalendar, hAtom,hReview, hRecipe, hProduct, etc...
  15. 15. 各フォーマットごとに固有の処理が必要になる。
  16. 16. hCardの処理系を作ってもhCalendarには対応できない……
  17. 17. Microdata は処理モデル。
  18. 18. フォーマットによって処理が変わることはない。
  19. 19. 書き方を覚えてしまえばどのフォーマットも使える。
  20. 20. DOM APIも用意されておりスクリプトからも扱いやすい。
  21. 21. μf はタスクにフォーカス。Microdata は処理にフォーカス。
  22. 22. Microdata を書く
  23. 23. Microdata 専用の属性は5つ。
  24. 24. •itemscope •itemref•itemprop •itemid•itemtype
  25. 25. •itemscope •itemref•itemprop •itemid•itemtype
  26. 26. Microdata の核は「アイテム」
  27. 27. アイテムを単位としてデータを記述していく。
  28. 28. itemscope ― アイテムの宣言
  29. 29. itemscope がアイテムを定義する。
  30. 30. <p> 矢倉といいます。
  31. 31. <section itemscope><p> 矢倉といいます。</section>
  32. 32. このアイテムにはまだデータがない。
  33. 33. itemprop ― データを与える
  34. 34. プロパティと値を与えてデータを表現する。
  35. 35. <section itemscope><p> 矢倉といいます。</section>
  36. 36. <section itemscope><p> <span itemprop=name> 矢倉 </span> といいます。</section>
  37. 37. アイテムの「name」に「矢倉」という値が入る。
  38. 38. 基本的には要素の内容が値になる。
  39. 39. リンクや画像、時間などは例外。
  40. 40. <p> 1984年3月19日生まれです。 うお座です。
  41. 41. <p> <time datetime=1984-03-19> 1984年3月19日 </time> 生まれです。
  42. 42. <time> の場合はdatetime の値が使われる。
  43. 43. <section itemscope> <p><span itemprop=name> 矢倉 </span> ...<p><time itemprop=bday datetime=1984-03-19> 1984年3月19日 </time> 生まれです。うお座です。</section>
  44. 44. アイテムの「name」は「矢倉」「bday」は「1984-03-19」
  45. 45. <a href=“http://twitter.com/myakura”> Follow me (@myakura)</a>
  46. 46. <a> の場合はhref の値が使われる。
  47. 47. <a itemprop=twitter href=“http://twitter.com/myakura”> Follow me (@myakura) </a>
  48. 48. 「twitter」は「http://twitter.com/myakura」
  49. 49. 複数のプロパティをスペースで区切って指定可能。
  50. 50. <a itemprop=“weblog url” href=“http://....”> my blog </a>
  51. 51. 入れ子のアイテム
  52. 52. アイテムを入れ子にして複雑なデータを表現できる。
  53. 53. Q.「矢倉」ってなんて読む?
  54. 54. A.「やくら」です。
  55. 55. <p> <ruby> 矢倉 <rt> やくら </rt> </ruby> といいます。
  56. 56. <p><ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。
  57. 57. itemprop を持つ要素にitemscope を与え入れ子にする。
  58. 58. <div itemscope><p><ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。</div>
  59. 59. name と yomi は外側のアイテムに追加されない。
  60. 60. <div itemscope><p> <ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。</div>
  61. 61. <item> <prop id=“name-ruby”> <item> <prop id=“name”> 矢倉 </prop> <prop id=“yomi”> やくら </prop> </item> </prop></item>
  62. 62. itemtype ― フォーマット指定
  63. 63. Microdata では好きな名前をつけられる。
  64. 64. 既存のボキャブラリを使ってもよい。
  65. 65. Microdata Vocabularieswhatwg.org/html5#mdvocabs
  66. 66. Data-Vocabulary.orgwww.data-vocabulary.org
  67. 67. itemtype にボキャブラリの URLを指定する。
  68. 68. <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=url href=“http://twitter.com/myakura”> Follow me (@myakura)</a></section>
  69. 69. fn, bday, url がhCard のものと認識される。
  70. 70. itemref ― プロパティの参照
  71. 71. スコープ外のプロパティにid を与え、それを取り込む。
  72. 72. <section itemscope> <!-- 本のデータ --> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <!-- 本の表紙 --> <img src=cover.jpg ...></figure>
  73. 73. <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=cover.jpg ... itemprop=photo></figure>
  74. 74. photo はスコープの外。アイテムに追加されない。
  75. 75. <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=cover.jpg ... itemprop=photo></figure>
  76. 76. プロパティに id を与えitemref から参照させる。
  77. 77. <section itemscope itemref=cover> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img ... id=cover itemprop=photo></figure>
  78. 78. photo のデータがアイテムに追加される。
  79. 79. itemid ― IDを与える
  80. 80. グローバルなIDを与えられるボキャブラリで利用する。
  81. 81. <article itemscope itemtype=“.../book” itemid="urn:isbn:978-4-8222-8422-0"> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</article>
  82. 82. Microdata の作成と確認
  83. 83. HTML5 Microdata Templatesmicrodata.freebaseapps.com
  84. 84. Live Microdatafoolip.org/microdatajs/live/
  85. 85. JSON Outputで生成されるデータを確認できる。
  86. 86. 型を指定していればvCard, iCalendar の出力もできる。
  87. 87. Rich Snippets
  88. 88. Google が導入した検索結果表示の仕組み。
  89. 89. 検索結果のスニペット部分がちょっと目立つ (ことがある)。
  90. 90. •レビュー •プロフィール•レシピ •製品情報•イベント
  91. 91. 構造化マークアップが検索結果に反映される。
  92. 92. Microdata, RDFa,microformats に対応。
  93. 93. Rich Snippets andStructured Markupgoo.gl/ZVmq
  94. 94. Rich Snippets の紹介や各フォーマットの説明など。
  95. 95. Rich SnippetsTesting Tool Betagoogle.com/webmasters/tools/richsnippets
  96. 96. Rich Snippets の表示を確認するWebサービス。
  97. 97. まとめ
  98. 98. Microdata は HTML からデータを表現する仕組み。
  99. 99. Microformats と異なりまずデータの処理方法を定義。
  100. 100. Microdataの核はアイテム。アイテムがデータを構成する。
  101. 101. itemscopeでアイテムを定義しitempropでプロパティを与える。
  102. 102. Microdata の導入例にRich Snippets がある。
  103. 103. ドキュメントやツールも提供されている。
  104. 104. 使えるので、使ってみよう!
  105. 105. ありがとうございました。
  106. 106. Contactyakura-masataka@mitsue.co.jp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×