oembed と text::hatena
TRANSCRIPT
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 フルセット最新版を今春リリース予定
•ついでにはてなブログも正式化
ご清聴ありがとうございました