NHN Cloud NHN Cloud Meetup!

   

oEmbedの紹介

2016.04.26

1,310

目次

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公式サイトで参照したオープンソースのライブラリのリストです。

簡単にoEmbedを使用できるようなサービスもあります。
http://embed.ly/

NHN Cloud Meetup 編集部

NHN Cloudの技術ナレッジやお得なイベント情報を発信していきます
pagetop