Your SlideShare is downloading. ×
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
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

HTML5勉強会 ライトニングトーク資料

1,985

Published on

HTML5勉強会 ライトニングトーク用の資料です。

HTML5勉強会 ライトニングトーク用の資料です。

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • Microformats派の自分としては。

            *'``・* 。
            |     `*。
           ,。∩      *    もうどうにでもな~れ
          + (´・ω・`) *。+゚
          `*。 ヽ、  つ *゚*
           `・+。*・' ゚⊃ +゚
           ☆   ∪~ 。*゚
            `・+。*・ ゚

    派閥が多すぎるんですよ。
    シェア争いすごいですね。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,985
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
1
Likes
3
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
  • 初めましてGrow!の竹野です。\n「オレオレ拡張はやめて、マイクロデータを使って行きましょう!」\nというタイトルでライトニングトークさせて頂きます。\nよろしくお願いします。\n今日はデザインがテーマっていうことなんですけど、\n申し訳なくマイクロデータの話をします。\n
  • ウェブのソーシャルボタンってたくさんあります。\nこれらのソーシャルボタンのソースを覗いて行きます。\n
  • facebook対応する前のfacebookのイイネボタンのソースです。\nfbっていうタグを勝手に宣言してjsでレンダリングする際に「イイネ」ボタンをレンダリングするようになっています。\nこれって、html的にいうと全く標準化されていなくて汚い状態です。\n\n\n\n
  • そこで、最近。。。でもないですけど、\nfacebookはhtml5対応した版の「イイネ」ボタンも提供されています。\n今度はカスタム属性「data-xxxx」の形式にすることにより、\nデータを定義しています。これはhtml5準拠と言えます。\n\nちなみにtwitterも、、、、、\n
  • twitterもカスタム属性を使うことによってTweetボタンを表現しています。\n\nでも。。。。\n
  • カスタム属性を使うことにより、html5の標準には準拠しているけど、\nそれって自分がやりたいように宣言しているから、検索エンジンとかはそのデータを活用ができていないです。\n\nそこでこういう書き方をしたら\n
  • こっちの方がいいですよね?\nこれはGrow!ボタンっていうボタンのソースなのですが、\nitemtypeを定義することフォーマットを決めて、\nその中に属性を定義しています。\n\nこれのメリットとしましては,,,,\n\n\n
  • 検索エンジンにmetaデータを拾ってもらいやすくなる。\nマイクロデータをもとに\nGoogle、Yahoo!、Microsoft 3社が共同でセマンティックウェブを導入しやすい環境作りに取り組んでいます。\nマイクロデータのサポートも始めています。検索エンジンにも意味を伝えやすい。\n\nfacebookのOpen Graphにアドレスを張った場合には、1ページに対して1つです。\n1ページに複数のコンテンツあった場合に理解させることができない。\n\nhtmlのmetaデータもheadタグに表示する物に対してなので、イイネされた時に正しいデータがとれない可能性もある。\n\n先ほども話にありましたが、Google,Yahooとかがマイクロデータをもとにセマンティックウェブに近づけようと頑張っているので、\nマイクロデータでmeta情報を記述しておくとみんなが幸せになれるかも知れません。\n\n
  • Google+1ボタンはマイクロデータを推奨しています。\nボタンが置いてあってない場合に上の順番でmetaデータを取りにいって、情報を取得します。\n\n
  • Grow!というサービスは、Grow!ボタンを押してもらえることによって、\n1Grow!=1$相当の報酬を得ることができて、 \n日本ではamazon ギフトカードで受け取れる様になっています。\n\n例えばライブラリを作っていたり、自分のコンテンツを持ってる人がいたら\n是非Grow!ボタンを置いてみください。\n\nこれは僕のgithubpagesなんですが、自分で作ったjquerypluginを公開しています。\nGrow!はこんな感じにGrow!ボタンを通じてチップが受け取ることができます。\n\n
  • ありがとうございました!\n\nGrow! me! http://growbutton.com/yamitake\n
  • Transcript

    • 1. オレオレ拡張はやめて、マイクロデータ使って行きましょう! Social Tipping Platform http://growbutton.com Grow! inc. Jun Takeno
    • 2. これからボタン業界の話をします様々なソーシャルボタンたち。。。
    • 3. likeボタン xhtmlの時代Likeボタンのソースって?<fb:like href="http://growbutton.com"send="true" width="450" show_faces="true"></fb:like>
    • 4. likeボタン html5対応版Likeボタンのソースって? (Custom Data Attribute)<div class="fb-like" data-href="http://growbutton.com" data-send="true" data-width="450" data-show-faces="true"></div>
    • 5. ちなみにTweetボタンTweetボタン Custom Data Attribute<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://growbutton.com/yamitake" data-text="Grow! Me!" data-via="GrowBt" data-related="yamitake" data-hashtags="GrowBt">Tweet</a>
    • 6. ?これって結局オレオレ拡張じゃない?Custom Attribute使ってたら、結局変わらないよね?
    • 7. Grow!ボタン ➡こっちの方が良いよね。<span itemscope itemref="rectangle" itemtype="http://growbutton.com/ns#button">   <span itemprop="url">[URL]</span>   <span itemprop="title">[Title]</span> <span itemprop="image">[Image]</span> </span>
    • 8. マイクロデータのメリット1.検索エンジンにmetaデータを拾ってもらえる。2.1ページ内に複数のデータを定義できる。 1.Open Graphだと単一な物になってしまう。 2.html metaデータも同様3.みんなが統一するとみんな幸せ。
    • 9. Google +1 ボタンはちゃんとしてるよ!1.マイクロデータを参照(google推奨)2.Open Graphを使用する3.htmlのmetaタグ4.googleにお任せ
    • 10. Grow!ボタンの宣伝! ※Grow!社はweb標準を推奨します.http://yamitake.github.com/
    • 11. Grow!は既に800万コンテンツをマイクロデータでmeta化してきました。これってすごくないですか?マイクロデータ使って行きましょう! Social Tipping Platform http://growbutton.com THANK YOU FOR YOUR KIND ATTENTION.

    ×