Your SlideShare is downloading. ×
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
Talk microdata
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Talk microdata

815

Published on

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

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

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

No Downloads
Views
Total Views
815
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

×