Talk microdata
Upcoming SlideShare
Loading in...5
×
 

Talk microdata

on

  • 928 views

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

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

Statistics

Views

Total Views
928
Views on SlideShare
749
Embed Views
179

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 179

http://swapskills.info 179

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Talk microdata Talk microdata Presentation Transcript

  • 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> 生まれです。うお座です。</section>
  • アイテムの「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> </ruby> といいます。</div>
  • name と yomi は外側のアイテムに追加されない。
  • <div itemscope><p> <ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。</div>
  • <item> <prop id=“name-ruby”> <item> <prop id=“name”> 矢倉 </prop> <prop id=“yomi”> やくら </prop> </item> </prop></item>
  • 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 itemprop=bday datetime=1984-03-19> 1984年3月19日</time> 生まれです。うお座です。 <p><a itemprop=url href=“http://twitter.com/myakura”> Follow me (@myakura)</a></section>
  • fn, bday, url がhCard のものと認識される。
  • itemref ― プロパティの参照
  • スコープ外のプロパティにid を与え、それを取り込む。
  • <section itemscope> <!-- 本のデータ --> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <!-- 本の表紙 --> <img src=cover.jpg ...></figure>
  • <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=cover.jpg ... itemprop=photo></figure>
  • photo はスコープの外。アイテムに追加されない。
  • <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img src=cover.jpg ... itemprop=photo></figure>
  • プロパティに id を与えitemref から参照させる。
  • <section itemscope itemref=cover> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</section>...<figure> <img ... id=cover itemprop=photo></figure>
  • photo のデータがアイテムに追加される。
  • itemid ― IDを与える
  • グローバルなIDを与えられるボキャブラリで利用する。
  • <article itemscope itemtype=“.../book” itemid="urn:isbn:978-4-8222-8422-0"> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。...</article>
  • 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