NHN Cloud Meetup 編集部
oEmbedの紹介
2016.04.26
1,296
oEmbedを使ってWebコンテンツをより効率的に共有できる方法がありましたので、簡単に内容を紹介したいと思います。
1.はじめに
YouTubeのビデオをコミュニティ掲示板や、SNSで共有したい場合、リンクをUPしたり、<iframe>で構成されたソースコードを入れておく必要があります。しかし、ほとんどのコミュニティやSNSではセキュリティ上、タグの入力を可能にしていません。結局のところ、YouTubeのビデオリンクを共有するしかありませんが、例えばFacebookにYouTubeのリンクを入力すると、自動でYouTubeのビデオが付きます。
どのように可能にしているのでしょうか?
単純に考えると、YouTubeのビデオID値をアドレスで解析し、YouTubeで提供されるソースコードフォームに合わせて<iframe>タグを作成することで、挿入することができます。
しかし、この方法はあまりよくありません。YouTubeが提供しているリンクやソースコードのフォームは変更される可能性があり、その度にコードを変更する必要があります。さらに、このようなコンテンツを提供しているサイトはYouTube以外にも数えきれないほど存在し、すべてのサイトに対応するのは、非常に大変なことです。
これを打開するために、oEmbedフォーマットが提案され、現在Facebookなどで活用されています。
2. oEmbedとは?
oEmbed公式サイトによると、
oEmbedは、他のサイトのURLに内蔵された表現を可能にするFormatである。
ユーザーがResourceに対応するリンクを入力すると、WebサイトがResourceを直接解析することなく、内蔵されたコンテンツ(写真やビデオなど)を表示できるようにするシンプルなAPIである。
oEmbedは2008年、Slackの共同創業者であるCal Hendersonが提案したOpen Formatです。公式Formatではありませんが、影響力のあるサービス(ex:YouTube、Facebook、Slideshare、WordPressなど)が参加したことで、かなり普及しました。
oEmbedを使った簡単な例を見ると、consumer(上記のFacebookのようなSNSやコミュニティ)は、以下のようなHTTP Requestを生成します。
http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json
Provider(YouTube)はoEmbed responseを返却します。
{ "version": "1.0", "type": "video", "provider_name": "YouTube", "provider_url": "http://youtube.com/", "width": 425, "height": 344, "title": "Amazing Nintendo Facts", "author_name": "ZackScott", "author_url": "http://www.youtube.com/user/ZackScott", "html": "<object width=\"425\" height=\"344\"> <param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param> <param name=\"allowFullScreen\" value=\"true\"></param> <param name=\"allowscriptaccess\" value=\"always\"></param> <embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\" type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed> </object>", }
consumer(Facebook)がURLをWebサイトに動画を挿入できるように構造化されたデータに変換します。
次に、Providerになる方法を簡単に説明しましょう。
3. Providerになる
3.1可能なタイプ
- photo
- video
- link
- rich:ContentsとしてHTMLを使用するタイプ。コンテンツをiframeに入れて、動的なコンテンツの挿入を可能にします。しかし、XSS攻撃の可能性があるため、consumerは最大限このタイプを回避しようとするでしょう。
3.2 oEmbed応答を作成する
oEmbed応答は、JSONまたはXMLの両方で可能です。それぞれのタイプは、レスポンスヘッダにContent-typeを割り当てる必要がります。
応答に使用できるパラメータの種類は、oEmbed公式サイトから確認できます。
3.2.1 JSON応答
JSON応答はmime-typeをapplication/jsonにして、formatパラメータをjsonで要請すると応答してくれます。また、すべてのテキストは、UTF-8
エンコードにする必要があります。
{ "foo": "bar", "baz": 1 }
3.2.2 XML応答
XML応答はmime-typeをtext/xmlにして、formatパラメータをxmlで要請したときに行われます。Response bodyのRoot Elementはoembed
にする必要があります。
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <oembed> <foo>bar</foo> <baz>1</baz> </oembed>
3.2.3 API endpoint
consumerがoEmbed要請を送信するAPI endpointを作成します。
一般的にドメイン/oembed 形式で、URLとformatをパラメータとして受け取ります。
ex)
http://www.foo.com/oembed?format=json&url=http%3A%2F%2Fwww.foo.com%2Fview%2F1
3.3 Discovory – WebドキュメントのoEmbed情報を露出させる
oEmbed Providerは、HTML文書headでoEmbedを見つけられるように、タグを付けられます。
ex)
<link rel="alternate" type="application/json+oembed" href="http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=json" title="oEmbed FOO" /> <link rel="alternate" type="text/xml+oembed" href="http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=xml" title="oEmbed FOO" />
しかし、通常のconsumerはセキュリティ(XSS)上、Web文書に含まれる情報が信頼できないので、これらをあまり使用していません。
3.4 Provider Listに登録する
大半のconsumerはWhiteListに含まれるproviderにのみoEmbedを可能にしています。
consumerのWhiteListに登録するには、まずoembed.comのProvider Listに登録する必要があります。
Provider Listに登録される方法は簡単です。
1. oEmbed GitホームページからGITアドレスを確認する
2. GIT CLoneをした後、
3. providers.ymlにWebサイトの情報とoEmbed情報を追加する
- provider_name: Foo provider_url: 'http://www.foo.com/' endpoints: - url: 'http://www.foo.com/oembed' discovery: true example_urls: - 'http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1' - 'http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=json'
4. Pull Requestsを要請する
4. consumerとしてoEmbedを活用したい場合
「Providerになる」の章を読むと、consumerとしてoEmbedを活用する方法が理解しやすくなるでしょう。大きく2つの方法があります。
1つは、oEmbedサイトから提供されるproviders.jsonを参照して、providerのoEmbed API EndPointを確認できます。
もう1つの方法は、Webページに要請を送信した後、HTMLを解析し、headのoEmbed情報からタグの有無を確認することで、API Endpointが分かります。しかしこの場合は、潜在的にXSS攻撃の可能性があり、あまり使用されていません。直接実装する方法もよいですが、すでに様々なオープンソースライブラリがあります。以下はoEmbed公式サイトで参照したオープンソースのライブラリのリストです。
- PHP:php-oembed(http://code.google.com/p/php-oembed/)
- PHP:Services_oEmbed(http://pear.php.net/package/Services_oEmbed)
- PHP:Essence(https://github.com/felixgirault/essence)
- PHP:Embera(https://github.com/mpratt/Embera)
- Perl:Web-oEmbed(http://search.cpan.org/~miyagawa/Web-oEmbed/)
- Ruby:oembed_links(http://github.com/netshade/oembed_links)
- Python:pyoembed(http://github.com/rafaelmartins/pyoembed/)
- Python:PyEmbed(http://pyembed.github.io)
- Python:python-oembed(https://github.com/abarmat/python-oembed)
- Django:micawber(https://github.com/coleifer/micawber)
- Java:java-oembed(https://github.com/michael-simons/java-oembed)
- .Net:oEmbed API Wrapper(http://oembed.codeplex.com/)
- JQuery:oEmbed API Wrapper(https://github.com/starfishmod/jquery-oembed-all)
- Node.js:oEmbed API Gateway(https://github.com/itteco/iframely)
簡単にoEmbedを使用できるようなサービスもあります。
http://embed.ly/