Successfully reported this slideshow.

oEmbed と Text::Hatena

1

Share

Upcoming SlideShare
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Loading in …3
×
1 of 25
1 of 25

oEmbed と Text::Hatena

1

Share

Download to read offline

Description

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

Transcript

  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::oEmbed use  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-Embed my  $embed  =  Text::Hatena::Embed-­‐>new; print  $embed-­‐>render($url);
  23. 23. まとめ • oEmbed べんり • べんりモジュール公開しましたー • Embed も含んだ Text::Hatena フルセット 最新版を今春リリース予定 • ついでにはてなブログも正式化
  24. 24. ご清聴ありがとうございました

Description

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

Transcript

  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::oEmbed use  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-Embed my  $embed  =  Text::Hatena::Embed-­‐>new; print  $embed-­‐>render($url);
  23. 23. まとめ • oEmbed べんり • べんりモジュール公開しましたー • Embed も含んだ Text::Hatena フルセット 最新版を今春リリース予定 • ついでにはてなブログも正式化
  24. 24. ご清聴ありがとうございました

More Related Content

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×