Microdata: A Primer

9,668 views

Published on

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

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,668
On SlideShare
0
From Embeds
0
Number of Embeds
1,020
Actions
Shares
0
Downloads
54
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Microdata: A Primer

  1. 1. Microdata: A Primer masataka yakura
  2. 2. Web 標準 Blog standards.mitsue.co.jp
  3. 3. トピック: Microdata
  4. 4. 1. Microdataとは? 2. Microdata の書き方 3. Rich Snippets
  5. 5. Microdata?
  6. 6. HTML Microdata whatwg.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 Vocabularies whatwg.org/html5#mdvocabs
  66. 66. Data-Vocabulary.org www.data-vocabulary.org
  67. 67. itemtype に ボキャブラリの URLを指定する。
  68. 68. <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>
  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 Templates microdata.freebaseapps.com
  84. 84. Live Microdata foolip.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 and Structured Markup goo.gl/ZVmq
  94. 94. Rich Snippets の紹介や 各フォーマットの説明など。
  95. 95. Rich Snippets Testing Tool Beta google.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. Contact yakura-masataka@mitsue.co.jp

×