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

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::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. 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には対応していなくてもアレ
に対応している！！

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

23. Text::Hatena::Embed
https://github.com/onishi/Text-Hatena-Embed
my
$embed
=
Text::Hatena::Embed-­‐>new;
print
$embed-­‐>render($url);

24. まとめ
• oEmbed べんり
• べんりモジュール公開しましたー
• Embed も含んだ Text::Hatena フルセット
最新版を今春リリース予定
• ついでにはてなブログも正式化

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