oEmbed と Text::Hatena
Upcoming SlideShare
Loading in...5
×
 

oEmbed と Text::Hatena

on

  • 2,252 views

はてなブログでのoEmbed活用例など

はてなブログでのoEmbed活用例など

Statistics

Views

Total Views
2,252
Views on SlideShare
1,680
Embed Views
572

Actions

Likes
1
Downloads
2
Comments
0

2 Embeds 572

http://onishi.hatenablog.com 571
http://s3.goodpic.com 1

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

oEmbed と Text::Hatena oEmbed と Text::Hatena Presentation Transcript

  • oEmbed と Text::Hatena 2012/3/17 id:onishi 株式会社はてな 大西康裕
  • 自己紹介• id:onishi / 大西康裕• 株式会社はてな • チーフエンジニア • はてなダイアリー/ブログ ディレクター • Devel::KYTProf • Text::Hatena• 正規表現だけで何とかしようとしすぎる
  • 動画埋め込み
  • 埋め込みタグ
  • はてな記法[http://www.youtube.com/watch?v=XDB9-­‐TUrzc0:movie]
  • その実装• 動画サービス毎に個別対応• 正規表現もりだくさん• サイトの変更に追従するのたいへん• :movie :image :sound ...
  • oEmbed• URL 埋め込み仕様• 写真や動画コンテンツをサードパー ティに埋め込むためのAPI• http://oembed.com/
  • oEmbed - spec• URL scheme: http://www.flickr.com/photos/*• API endpoint: http://www.flickr.com/services/oembed/
  • oEmbed - request• url• maxwidth (optional)• maxheight (optional)• format (optional) JSON or XML
  • oEmbed - response{        "version":  "1.0",        "type":  "photo",        "width":  240,        "height":  160,        "title":  "ZB8T0193",        "url":  "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",        "author_name":  "Bees",        "author_url":  "http://www.flickr.com/photos/bees/",        "provider_name":  "Flickr",        "provider_url":  "http://www.flickr.com/"}
  • Web::oEmbed https://metacpan.org/module/Web::oEmbeduse  Web::oEmbed;my  $consumer  =  Web::oEmbed-­‐>new({        format  =>  json});$consumer-­‐>register_provider({        url    =>  http://*.flickr.com/*,        api    =>  http://www.flickr.com/services/oembed/,});my  $response  =  $consumer-­‐>embed("http://www.flickr.com/...");print  $response-­‐>render;  #=>  <img  />
  • oEmbed - provider
  • oEmbed - discovery<link  rel="alternate"  type="application/json+oembed"    href="http://flickr.com/services/oembed?url=...&format=json"        title="..."  /><link  rel="alternate"  type="text/xml+oembed"    href="http://flickr.com/services/oembed?url=...&format=xml"        title="..."  />
  • Text::Hatena::Embed[http://www.youtube.com/watch?v=XDB9-­‐TUrzc0:embed]
  • Text::Hatena::Embed• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover
  • 遅い
  • リクエストしたくない<script  src="https://gist.github.com/$GIST_ID.js"></script><iframe  width="420"  height="315"    src="http://www.youtube.com/embed/$VIDEO_ID"></iframe>
  • Text::Hatena::Embed• 定義済の変換を正規表現で行う• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover
  • instagram貼れへんの?
  • oEmbed非対応サイト• 写真共有サイトでもoEmbed対応サイ トは少ない• oEmbedには対応していなくてもアレ に対応している!!
  • Text::Hatena::Embed• 定義済の変換を正規表現で行う• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover• og:image を取得して画像タグを出力
  • Text::Hatena::Embed https://github.com/onishi/Text-Hatena-Embedmy  $embed  =  Text::Hatena::Embed-­‐>new;print  $embed-­‐>render($url);
  • まとめ• oEmbed べんり• べんりモジュール公開しましたー• Embed も含んだ Text::Hatena フルセット 最新版を今春リリース予定• ついでにはてなブログも正式化
  • ご清聴ありがとうございました