oembed と text::hatena

oEmbed と Text::Hatena2012/3/17id: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:

• API endpoint:http://www.flickr.com/photos/*

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::oEmbedhttps://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  />

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]

•Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover

Text::Hatena::Embed

遅い

リクエストしたくない

<script  src="https://gist.github.com/$GIST_ID.js"></script>

<iframe  width="420"  height="315"    src="http://www.youtube.com/embed/$VIDEO_ID"></iframe>

•定義済の変換を正規表現で行う•Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover

Text::Hatena::Embed

instagram貼れへんの？

oEmbed非対応サイト

•写真共有サイトでもoEmbed対応サイトは少ない

• oEmbedには対応していなくてもアレに対応している！！

•定義済の変換を正規表現で行う•Web::oEmbedにプロバイダをプリセット• endpoint Auto-Discover• og:image を取得して画像タグを出力

Text::Hatena::Embed

Text::Hatena::Embedhttps://github.com/onishi/Text-Hatena-Embed

my  $embed  =  Text::Hatena::Embed-­‐>new;print  $embed-­‐>render($url);

まとめ• oEmbed べんり•べんりモジュール公開しましたー• Embed も含んだ Text::Hatena フルセット最新版を今春リリース予定

•ついでにはてなブログも正式化

ご清聴ありがとうございました