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,587 views

Published on

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

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

No Downloads
Views
Total views
2,587
On SlideShare
0
From Embeds
0
Number of Embeds
593
Actions
Shares
0
Downloads
4
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. ご清聴ありがとうございました

×