[32] oEmbed は、 Webページの情報の埋め込みに必要な情報の取得に関するプロトコルです。 HTTP と HTML の上位に構築されたプロトコルとなっています。

仕様書

プロトコル

[12]

rel=alternate

[19] oEmbed は <link rel=alaternate> による discovery を定めています。 >>1

[20] この URL について、 仕様書は 「The URLs contained within the href attribute should be the full oEmbed endpoint plus URL and any needed format parameter. No other request parameters should be included in this URL.」 と規定しています >>1。 oEmbed はエンドポイントに URL と format (JSON or XML) の引数を与えることを想定していて、それを含めることを求めているのですが、 「full」 という言葉は相対URLでなく絶対URLでなければならないと要求していると解釈できないこともありません。

[21] 仕様書の例は絶対URL になっています。

[22] 同時代の他の discovery 系の仕様は絶対URLを想定する仕様書になっていたり、 実装になっていたりしました。その時代背景から、絶対URL が暗黙に仮定されていたと主張できないこともありません。

[23] oEmbed 仕様書は現代の視点では (実は当時でも言う人に言わせれば...) 曖昧すぎて技術仕様書の体をなしていないと言わざるを得ません。 行間を読まずに厳密に解釈して理解することは不可能です。

[24] 敢えて厳密に解釈を試みるなら、 HTML Standard も oEmbed 仕様書も、 相対URL を禁止する特別の規定を欠いていますから、 相対URLも絶対URLも含む任意の URL が認められると解さざるを得ません。

[18] link 要素の href<link href> 属性の値が相対URL であったとしても、 Iframely は正しく解釈します。 はてなブログ は解釈に失敗するのか、無視します。

[25] また href に指定できる URL scheme に制限があるのかどうかも、よくわかりません。 一般的な実装は http: や https: に対応しているようです。それ以外の、 例えば data: を使ったときの挙動は定かではありません。 oEmbed の仕様書には URL を HTTP か HTTPS に制限する趣旨の記述が何箇所かみえますが、 それが href 属性値に適用されるのかどうか明確にできません。

[29] Iframely も はてなブログ も data: URL には対応していないようで、 oEmbed がないものと扱います。

MIME型

[31] Perlモジュール Web::oEmbed は、 応答の Content-Type: に json が入るか xml が入るかで分岐し、 それ以外は捨てているようです。 どちらかに適切に設定する必要があります。 また link 要素の MIME型は処理に影響しないようです。

データ

[26] Perlモジュール Web::oEmbed は、いくつかの条件がありますが、 最終的に html の値があれば、これを使います。

[27] はてなブログは、 html の値さえあればこれを埋め込み用 HTML として使うようです。

評価

[9] oEmbed は専用の API を用意して情報を提供する形のため、 サーバー側もクライアント側も (事前に oEmbed に対応していることとその API の URL を把握している場合を除き) 余分な一手間をかける必要があります。 YouTube や SlideShare のように埋め込みのための HTML 片を取得することに特に意義がある場合はともかく、 通常のHTMLの要素 (title など) や SNS用のWebページデータで得られる程度の情報しか提供できないのなら、 敢えて oEmbed を使う意味はなさそうです。

[10] つまり画像や動画、対話的内容などを提供するサービスで、 (単なるリンクではなく) その内容自体を埋め込むことが有用なら、 oEmbed は有益となります。逆に、文章の一部を要約として提供したり、 特徴的な一場面をサムネイル画像として提供したりする程度なら、 他の方法で十分ですし、利用者の体験はかえって悪くなるかもしれません。

実装

[11] oEmbed を提供しているサービスの一部は、 >>1 の一覧に掲載されています。 掲載されていなくても実装しているサービスがいくつかあるようです。 YouTube や Flickr をはじめ、いろいろなサービスが実装しています。 しかしどんなサービスでも大方対応しているというほど広く普及しているわけでもないようです。

[28] はてなブログ は、 URL を貼り付けると、 (デフォルトの挙動では) その貼り付け形式を選ぶダイアログを表示します。 そのうち「埋め込み」形式は、 その場で当該 URL を取得し、 <link rel=alternate> で discovery を試み、 html の値があればそれを採用するようです。

[30] はてなブログ では提供された html がそのまま文書に挿入され、編集可能なテキストの一部に溶け込みます。 WYSIWYG エディターによる HTML としての改変を受けます。 (例えば strong が b に置き換えられたりします。)

メモ

[2] はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け) - はてなブログ開発ブログ ( ( 版)) http://staff.hatenablog.com/entry/2014/09/03/153938

[3] はてなブログoEmbed API - Hatena Developer Center ( ( 版)) http://developer.hatena.ne.jp/ja/documents/blog/apis/oembed

[4] iamcal/oembed ( ( 版)) https://github.com/iamcal/oembed

[5] はてなブックマークoEmbed API - Hatena Developer Center ( ( 版)) http://developer.hatena.ne.jp/ja/documents/bookmark/apis/oembed

[6] OEmbed Documentation ( 版) http://www.slideshare.net/developers/oembed

[7] iamcal/oembed ( 版) https://github.com/iamcal/oembed

[8] 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ ( 版) http://staff.hatenablog.com/entry/2014/09/05/143600

[13] はてなブックマークoEmbed API - Hatena Developer Center ( 版) http://developer.hatena.ne.jp/ja/documents/bookmark/apis/oembed

[14] 税理士なら港区の税理士法人インテグリティ ( ()) http://www.integrity.or.jp/

<link rel="alternate" type="application/json+oembed" href="http://www.integrity.or.jp/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.integrity.or.jp%2F" />

<link rel="alternate" type="text/xml+oembed" href="http://www.integrity.or.jp/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.integrity.or.jp%2F&#038;format=xml" />

[15] Slack Robots | Slack ( (Slack著, )) https://api.slack.com/robots

Specifically, we are looking for oEmbed and Twitter Card / Open Graph tags.

[16] コメント一覧ページのデザインリニューアルおよびページ内の一部機能の廃止・整理を行います - はてなブックマーク開発ブログ () http://bookmark.hatenastaff.com/entry/2017/08/08/150000

下記の機能については、8月21日(月)のリニューアルに伴いいったん廃止いたしますが、今後の機能開発を経てあらためて実装する予定です。

YouTube、ニコニコ動画、SlideShare、Twitter、Facebook、Speaker Deckなどのサービスについて、コメント一覧ページ内で埋め込み機能(oEmbed)を使ってコンテンツを展開する機能

[17] Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed, http://debug.iframely.com/

[33] Announcing OEmbed - An Open Standard for Embedded Content - Leah Culver's Blog, https://blog.leahculver.com/2008/05/announcing-oembed-an-open-standard-for-embedded-content.html

[34] oEmbed - Instagramプラットフォーム, https://developers.facebook.com/docs/instagram/oembed

[35] Instagram は従来の誰でも利用できた標準的な oEmbed を非推奨化 (いずれは廃止するのだろう)。 新たに登録と Facebook 社の許諾によって取得したアクセストークンが必要なエンドポイントを設けて oEmbed と呼んでいる。 本来の oEmbed とはデータ構造が似ているだけで、 もはや標準の oEmbed ではない。

(標準の oEmbed は相手方サービスがどこであるか知らなくても利用できるというメリットがあったが、 この新しいエンドポイントは相手方が Facebook だと知らないことには使えない。 これを oEmbed と呼ぶのは悪質。 プロトコルの脱共有化と言っても差し支えない。)

[36] embed機能 開発ガイドライン – noteヘルプセンター, https://www.help-note.com/hc/ja/articles/900001827326/