oEnbed - 外部のコンテンツを自サイトに埋め込むためのプロトコル

下記のエントリで紹介されている oEnbed^*1 というプロトコルが興味深かったのでメモ。

WordPressはFlickrやYouTubeのURLを張り付けるだけで表示してくる : ARTIFACT ―人工事実―

はてなブログが外部サイトの埋め込み機能を強化したのだが、これでoEmbedというプロトコルを始めて知った。便利な機能だと思ったのだが、調べてみると2009年ぐらいからは話題になっていたようだ。

自分も全くノーマークでしたが、便利そうなので忘れないうちにちょっと仕様を調べてみました。
これがあれば、外部のサイトのコンテンツの引用が便利になりますね。逆に自分のサイトの引用され方も指定することも出来ますし。

† Twitter でちょっとためしてみる

Twitter がサポートしている oEnbed の仕様は GET statuses/oembed | Twitter Developers にあります。

とりあえず今回は下記のツイートを例に oEnbed を試してみます。

おはようございます
— hsur (@hsur) March 6, 2012

上記のツイートの埋め込みは Twitter のウェブページからコードを取ってきて貼りましたが、Tweet の ID が分かれば下記のような URL にアクセスすることによって json で情報を得ることができます。

https://api.twitter.com/1/statuses/oembed.json?id=177174844683730944

{"type":"rich","author_name":"hsur","height":null,"html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp\u003E\u304a\u306f\u3088\u3046\u3054\u3056\u3044\u307e\u3059\u003C\/p\u003E&mdash; hsur (@hsur) \u003Ca href=\"https:\/\/twitter.com\/hsur\/status\/177174844683730944\" data-datetime=\"2012-03-06T23:32:29+00:00\"\u003EMarch 6, 2012\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E","cache_age":"31536000000","author_url":"https:\/\/twitter.com\/hsur","provider_name":"Twitter","version":"1.0","provider_url":"http:\/\/twitter.com","width":550,"url":"https:\/\/twitter.com\/hsur\/status\/177174844683730944"}

上記の json の html の中身をデコードすると下記のようになります。
これは、 Twitter のウェブから直接埋め込み用のコードをとってきたものと同じになっています。

<blockquote class="twitter-tweet"><p>おはようございます</p>— hsur (@hsur) <a href="https://twitter.com/hsur/status/177174844683730944" data-datetime="2012-03-06T23:32:29+00:00">March 6, 2012</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Discovery をサポートしているサービスであれば、このような json を取得するためのエンドポイントをコンテンツの URL から得ることができるので、これを応用すれば汎用のコンテンツ埋め込み機能を実装することが出来るということのようです。ちなみにTwitter は oEnbed プロトコル自体には対応していますが、Discoveryのサポートはしていないようですね。

そのうち Nulceus 向けの実装を書くかもしれません。