• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Talk microdata
 

Talk microdata

on

  • 905 views

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

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

Statistics

Views

Total Views
905
Views on SlideShare
727
Embed Views
178

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 178

http://swapskills.info 178

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