Your SlideShare is downloading. ×
  • Like
oEmbed と Text::Hatena
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

oEmbed と Text::Hatena

  • 1,940 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,940
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
2
Comments
0
Likes
1

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

Transcript

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