Uploaded on

矢倉 眞隆 株式会社ミツエーリンクス …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
731
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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