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,	  	  	  	  "hei...
Web::oEmbed https://metacpan.org/module/Web::oEmbeduse	  Web::oEmbed;my	  $consumer	  =	  Web::oEmbed-­‐>new({	  	  	  	  ...
oEmbed - provider
oEmbed - discovery<link	  rel="alternate"	  type="application/json+oembed"	  	  href="http://flickr.com/services/oembed?ur...
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...
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...
まとめ• oEmbed べんり• べんりモジュール公開しましたー• Embed も含んだ Text::Hatena フルセット 最新版を今春リリース予定• ついでにはてなブログも正式化
ご清聴ありがとうございました
oEmbed と Text::Hatena
Upcoming SlideShare
Loading in...5
×

oEmbed と Text::Hatena

2,070

Published on

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

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

No Downloads
Views
Total Views
2,070
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

oEmbed と Text::Hatena

  1. 1. oEmbed と Text::Hatena 2012/3/17 id:onishi 株式会社はてな 大西康裕
  2. 2. 自己紹介• id:onishi / 大西康裕• 株式会社はてな • チーフエンジニア • はてなダイアリー/ブログ ディレクター • Devel::KYTProf • Text::Hatena• 正規表現だけで何とかしようとしすぎる
  3. 3. 動画埋め込み
  4. 4. 埋め込みタグ
  5. 5. はてな記法[http://www.youtube.com/watch?v=XDB9-­‐TUrzc0:movie]
  6. 6. その実装• 動画サービス毎に個別対応• 正規表現もりだくさん• サイトの変更に追従するのたいへん• :movie :image :sound ...
  7. 7. oEmbed• URL 埋め込み仕様• 写真や動画コンテンツをサードパー ティに埋め込むためのAPI• http://oembed.com/
  8. 8. oEmbed - spec• URL scheme: http://www.flickr.com/photos/*• API endpoint: http://www.flickr.com/services/oembed/
  9. 9. oEmbed - request• url• maxwidth (optional)• maxheight (optional)• format (optional) JSON or XML
  10. 10. 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/"}
  11. 11. 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  />
  12. 12. oEmbed - provider
  13. 13. 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="..."  />
  14. 14. Text::Hatena::Embed[http://www.youtube.com/watch?v=XDB9-­‐TUrzc0:embed]
  15. 15. Text::Hatena::Embed• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover
  16. 16. 遅い
  17. 17. リクエストしたくない<script  src="https://gist.github.com/$GIST_ID.js"></script><iframe  width="420"  height="315"    src="http://www.youtube.com/embed/$VIDEO_ID"></iframe>
  18. 18. Text::Hatena::Embed• 定義済の変換を正規表現で行う• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover
  19. 19. instagram貼れへんの?
  20. 20. oEmbed非対応サイト• 写真共有サイトでもoEmbed対応サイ トは少ない• oEmbedには対応していなくてもアレ に対応している!!
  21. 21. Text::Hatena::Embed• 定義済の変換を正規表現で行う• Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover• og:image を取得して画像タグを出力
  22. 22. Text::Hatena::Embed https://github.com/onishi/Text-Hatena-Embedmy  $embed  =  Text::Hatena::Embed-­‐>new;print  $embed-­‐>render($url);
  23. 23. まとめ• oEmbed べんり• べんりモジュール公開しましたー• Embed も含んだ Text::Hatena フルセット 最新版を今春リリース予定• ついでにはてなブログも正式化
  24. 24. ご清聴ありがとうございました
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×