oEmbed APIの使い方まとめ！URLから埋め込みHTMLタグを作ろう！

2015.11.20 (Fri)

URLから簡単に埋め込み用コードを取得できるoEmbedについて、初心者の人でもなるべく分かるように紹介します。「oEmbedって何？」って思ってる人は流し見してみて下さい。

oEmbed: oEmbedの公式ウェブサイト。対応しているウェブサイトや、仕様などが英語で解説されています。

oEmbedとは？

oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。

統一規格ってどういうこと？

統一規格があることで、web開発者はoEmbedの仕様だけを知っておけば、「個別に各サービスの仕様を調べる」といった学習コストをかけることなく、様々なサービスの埋め込み用コンテンツを利用することができるわけです。

2014年9月には日本で人気のブログサービスはてなブログが、このoEmbedの規格を採用して、ブログ記事の埋め込み用コードを取得するAPIを公開しました。採用するサービスが増えれば増えるほど、web開発者にとって好ましい環境が整っていくというわけですね。

oEmbedの便利さ

具体的な取得方法は後述します。oEmbedの魅力は「パーマリンクURLを指定することで、そのURLに応じた埋め込み用コードを取得できる」という、そのシンプルさにあります。例えば、Instagramで下記パーマリンクの写真があります。

https://instagram.com/p/3Qh4FDMlMV/ リンク

この写真を埋め込むためのコードは下記の通りです。

HTML

<iframe src="//instagram.com/p/3Qh4FDMlMV/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

oEmbedを知らない時は、パーマリンクURLの文字列をわざわざ分解して共通部分を取り出し、埋め込み用コードを組み立てるといった非常に回りくどいことをしていた私…。webサービスによっては、URL文字列の材料だけじゃ埋め込み用コードを組み立てられないものもあって「さぁどうしよう…」という状態だったんです。

が、oEmbedなら、単純にパーマリンクURLを指定してリクエストするだけで、完成した埋め込み用コードを取得することができます。「コンテンツのパーマリンクから埋め込み用コードを取得できる」。地味だけど、これって、とーーーっても便利なんです…。

基本的な使い方

この章では、具体的にoEmbedを利用して埋め込み用コードを取得する方法を紹介します。

リクエスト方法

oEmbedの使い方は極めて簡単で、各サービスが指定するエンドポイントURLに、パラメータのurlを付けてリクエストするだけ。urlの値には、埋め込みたいコンテンツのパーマリンクを指定します。

{エンドポイント}?url={埋め込み用コードの対象となるパーマリンク}

オプションパラメータ

指定できる基本的なオプションパラメータは下記の通りです。利用するのはurlとformatくらいでしょう。各サービスにより、パラメータの対応状況は異なるので、詳しくは各サービスの案内をご確認下さい。

url: 埋め込みたいコンテンツのパーマリンクURL。
maxwidth: 埋め込み用コンテンツの幅の最大値を指定。
maxheight: 埋め込み用コンテンツの高さの最大値を指定。
format: 返却データのフォーマットをjson、xmlなどで指定。

取得する流れ

それでは試しに、はてなブログの記事を埋め込んでみましょう。

エンドポイント

例えば、はてなブログが指定するoEmbedのエンドポイントは下記の通りです。

GET http://hatenablog.com/oembed

コンテンツのパーマリンク

埋め込むのは、私がかねてからのファンであるはてブマンのボクがはてブマンになった理由という記事としましょう。記事のパーマリンクは下記の通り。

http://hatebuman.hatenablog.com/entry/2013/11/30/161605

リクエストURL

つまり、取得するためのURLは次のように組み立てることができます。なお、urlパラメータに指定するパーマリンクはURLエンコードをする必要があります。ここでは見やすくするため、あえてエンコードしていません。

http://hatenablog.com/oembed?url=http://hatebuman.hatenablog.com/entry/2013/11/30/161605

サンプルコード

以上を踏まえて、早速、JSONを取得してみましょう。サンプルに使用する言語はPHPです。下記のサンプルでは、Instagramの投稿を、oEmbed APIを利用して取得しています。実は、はてなの場合、SSL通信に対応していないため、当サイト(HTTPS)では表示できないのです…。

PHP

<?php

	// コンテンツのパーマリンク
	$permalink = 'https://instagram.com/p/3Qh4FDMlMV/' ;

	// リクエストURLを組み立てる
	$request_url = 'https://api.instagram.com/oembed?url=' . rawurlencode($permalink) . '&format=json' ;

	// アイテムデータをJSON形式で取得する (cURLを使用)
	$curl = curl_init() ;

	// オプションのセット
	curl_setopt( $curl , CURLOPT_URL , $request_url ) ;
	curl_setopt( $curl , CURLOPT_HEADER, 1 ) ; 
	curl_setopt( $curl , CURLOPT_SSL_VERIFYPEER , false ) ;			// 証明書の検証を行わない
	curl_setopt( $curl , CURLOPT_RETURNTRANSFER , true ) ;			// curl_execの結果を文字列で返す
	curl_setopt( $curl , CURLOPT_TIMEOUT , 15 ) ;					// タイムアウトの秒数
	curl_setopt( $curl , CURLOPT_FOLLOWLOCATION , true ) ;			// リダイレクト先を追跡するか？
	curl_setopt( $curl , CURLOPT_MAXREDIRS , 5 ) ;					// 追跡する回数

	// 実行
	$res1 = curl_exec( $curl ) ;
	$res2 = curl_getinfo( $curl ) ;

	// 終了
	curl_close( $curl ) ;

	// 取得したデータ
	$json = substr( $res1, $res2['header_size'] ) ;					// 取得したデータ(JSONなど)
	$header = substr( $res1, 0, $res2['header_size'] ) ;			// レスポンスヘッダー (検証に利用したい場合にどうぞ)

	// HTML用
	$html = '' ;

	// JSONをオブジェクトに変換
	$obj = json_decode( $json ) ;

	// 実行結果
	$html .= '<h2>埋め込みコンテンツ</h2>' ;

	// エラー判定
	if( !isset( $obj->html ) ) {
		$html .= '<p>データを取得できませんでした。または、<code>html</code>プロパティが存在しません。リクエストURLを確認して下さい。</p>' ;

	} else {
		$html .= '<div style="max-width:95%; overflow:hidden; margin:1em auto; text-align:center;">' ;
		$html .= 	$obj->html ;
		$html .= '</div>' ;

	}

	// 取得したデータ
	$html .= '<h2>取得したデータ</h2>' ;
	$html .= '<p>下記のデータを取得できました。</p>' ;

	$html .= 	'<h3>HTMLタグ</h3>' ;
	$html .= 	'<p><textarea>' . $obj->html . '</textarea></p>' ;
	$html .= 	'<h3>JSON</h3>' ;
	$html .= 	'<p><textarea>' . $json . '</textarea></p>' ;
	$html .= 	'<h3>レスポンスヘッダー</h3>' ;
	$html .= 	'<p><textarea>' . $header . '</textarea></p>' ;

	// ブラウザに[$html]の内容を出力
	// 運用時はHTMLのヘッダーとフッターを付けましょう。
	echo $html ;

デモを見る (VIEW DEMO)

取得できるJSON

oEmbedで取得できるJSONデータは、基本的に下記の通りです。コンテンツ周りの重要な情報を取得できるので、必要に応じて活用することができますねー。この内、htmlに格納されているのが、そのまま利用できる埋め込みコードです。

サンプルのJSON

JSON

{
   "author_name": "hatebuman",
   "width": "100%",
   "author_url": "http://blog.hatena.ne.jp/hatebuman/",
   "provider_url": "http://hatenablog.com",
   "version": "1.0",
   "provider_name": "Hatena Blog",
   "height": "190",
   "html": "<iframe src=\"http://hatebuman.hatenablog.com/embed/2013/11/30/161605\" title=\"ボクがはてブマンになった理由 - はてブマンだブク\" scrolling=\"no\" frameborder=\"0\" style=\"width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"><a href=\"http://hatebuman.hatenablog.com/entry/2013/11/30/161605\">ボクがはてブマンになった理由 - はてブマンだブク</a></iframe>",
   "url": "http://hatebuman.hatenablog.com/entry/2013/11/30/161605",
   "title": "ボクがはてブマンになった理由",
   "type": "rich"
}

各プロパティの説明

各項目の説明は下記の通りです。

author_name: コンテンツ著作者の名前。
width: コンテンツの幅。
author_url: コンテンツ著作者のプロフィールページなど。
provider_url: コンテンツ提供元のURL。
version: oEmbedのバージョン(2015年1月現在は1.0のみ)。
provider_name: コンテンツ提供元の名前。
height: コンテンツの高さ。
html: コンテンツの埋め込み用HTMLコード。
url: コンテンツのパーマリンク。
title: コンテンツのタイトル。
type: 埋め込みコンテンツの種類。

対応したサービスまとめ

この章では、oEmbedを採用しているサービスの中から日本でも有名なものを紹介していきます。

Implementations: oEmbedに対応しているウェブサイトの一覧です。

IFTTT

oEmbedを利用してIFTTTの埋め込み用コードを取得する方法です。公式リファレンスがなかったため、oEmbedの公式サイトに載っていた情報を元にしています。

エンドポイント

http://www.ifttt.com/oembed/

コンテンツのパーマリンク

https://ifttt.com/recipes/190824-auto-photo-bookof-locationthumbnail-ver リンク

取得できるJSON

JSON

{
   "type": "rich",
   "version": "1.0",
   "html": "<a href=\"https://ifttt.com/view_embed_recipe/190824-auto-photo-bookof-locationthumbnail-ver\" target = \"_blank\" class=\"embed_recipe embed_recipe-l_39\" id= \"embed_recipe-190824\"><img src= 'https://ifttt.com/recipe_embed_img/190824' alt=\"IFTTT Recipe: Auto Photo Bookof LocationThumbnail ver connects instagram to evernote\" width=\"370px\" style=\"max-width:100%\"/></a><script async type=\"text/javascript\" src= \"//ifttt.com/assets/embed_recipe.js\"></script>",
   "width": 640,
   "height": 90,
   "title": "Auto Photo Bookof LocationThumbnail ver",
   "author_name": "syncer",
   "author_url": "https://ifttt.com/people/syncer",
   "provider_name": "IFTTT",
   "provider_url": "https://ifttt.com",
   "description": "Notes: 好きな場所を指定して下さい。\r\nそこで撮影された写真がEvernoteに保存されていきます。\r\n\r\nPlease specify the location.\r\nPhotos taken are saved in Evernote.\r\nYou can sea thumbnail image on note list.\r\n\r\n使い方 (How to use)\r\nhttp://syncer.jp/evernote-ifttt-auto-photobook"
}

埋め込みサンプル

IFTTT Recipe: Auto Photo Bookof LocationThumbnail ver connects instagram to evernote

Youtube

YoutubeもoEmbedに対応していて、動画の埋め込みコードの他、サムネイル画像も取得することができます。公式ブログのエントリーに、公式リファレンスが掲載されています。

エンドポイント

http://www.youtube.com/oembed

コンテンツのパーマリンク

https://www.youtube.com/watch?v=dJCmnrIubCQ リンク

取得できるJSON

JSON

{"type": "video", "thumbnail_url": "https:\/\/i.ytimg.com\/vi\/dJCmnrIubCQ\/hqdefault.jpg", "version": "1.0", "title": "\u98df\u3079\u65b9\u304c\u3044\u3061\u3044\u3061\u7652\u3055\u308c\u308b\u30e4\u30ae", "author_name": "Yuta Arai", "provider_url": "https:\/\/www.youtube.com\/", "provider_name": "YouTube", "thumbnail_height": 360, "height": 270, "author_url": "https:\/\/www.youtube.com\/user\/nanblomovie", "width": 480, "thumbnail_width": 480, "html": "\u003ciframe width=\"480\" height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/dJCmnrIubCQ?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e"}

埋め込みサンプル

Flickr

Flickrの埋め込みコードをoEmbedで取得する方法です。公式リファレンスはありませんでした。flickr、oEmbedとかで検索すると写真ページがヒットしてまう…。

エンドポイント

http://www.flickr.com/services/oembed/

コンテンツのパーマリンク

https://www.flickr.com/photos/yuta_arai_0206/8008087593/ リンク

取得できるJSON

JSON

{
    "type": "photo",
    "flickr_type": "photo",
    "title": "鳥取県旅行-20",
    "author_name": "Yuta Arai 0206",
    "author_url": "https://www.flickr.com/photos/yuta_arai_0206/",
    "width": "1024",
    "height": "768",
    "url": "https://farm9.staticflickr.com/8448/8008087593_cfe0a3a294_b.jpg",
    "web_page": "https://www.flickr.com/photos/yuta_arai_0206/8008087593/",
    "thumbnail_url": "https://farm9.staticflickr.com/8448/8008087593_cfe0a3a294_q.jpg",
    "thumbnail_width": 150,
    "thumbnail_height": 150,
    "web_page_short_url": "https://flic.kr/p/dcDxrK",
    "license": "All Rights Reserved",
    "license_id": 0,
    "html": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/yuta_arai_0206/8008087593/\" title=\"鳥取県旅行-20 by Yuta Arai 0206, on Flickr\"><img src=\"https://farm9.staticflickr.com/8448/8008087593_cfe0a3a294_b.jpg\" width=\"1024\" height=\"768\" alt=\"鳥取県旅行-20\"></a><script async src=\"https://embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>",
    "version": "1.0",
    "cache_age": 3600,
    "provider_name": "Flickr",
    "provider_url": "https://www.flickr.com/"
}

サンプル

画像の埋め込みを表示する例です。この埋め込みは、2015年11月頃から新しく付いた機能のようです。以前はありませんでした。

Vimeo

oEmbedを利用してVimeoの動画を埋め込む方法です。公式リファレンスは下記をご参考下さい。

oEmbed: Vimeo内のページ。oEmbedのリファレンスです。Vimeo独自のリクエスト方法もあるので、細かく調整したい場合は参考にしましょう。

エンドポイント

http://vimeo.com/api/oembed.json

コンテンツのパーマリンク

http://vimeo.com/87344826 リンク

指定できるパラメータ

url: コンテンツのパーマリンク。
width: ビデオの幅を指定。
maxwidth: ビデオの最大幅を指定。
height: ビデオの高さを指定。
maxheight: ビデオの最大高さを指定。
byline: ビデオの署名を表示する。デフォルトではtrue。
title: ビデオのタイトルを表示する。デフォルトではtrue。
portrait: 投稿者のプロフィールアイコンを表示する。デフォルトではtrue。
color: ビデオコントロールの色を指定する。
callback: JSONで値を取得する時、この関数でラップする。
autoplay: trueを指定すると、埋め込みコンテンツが自動再生する。デフォルトではfalse。
loop: trueを指定すると、埋め込みコンテンツがループ再生になる。デフォルトではfalse。
autopause: trueを指定すると、別の埋め込みコンテンツを再生時に自動で一時停止する。デフォルトではtrue。
xhtml: 埋め込みコードをXHTMLに対応する。デフォルトではfalse。
api: trueを指定するとJavascriptで利用することができる。デフォルトではfalse。
player_id: Javascriptで取得する際、プレーヤーのためにユニークなIDを返す。デフォルトではfalse。

取得できるJSON

JSON

{
   "type": "video",
   "version": "1.0",
   "provider_name": "Vimeo",
   "provider_url": "https://vimeo.com/",
   "title": "Japanese Sumo!",
   "author_name": "Yuta Arai",
   "author_url": "http://vimeo.com/arayutw",
   "is_plus": "0",
   "html": "<iframe src=\"//player.vimeo.com/video/87344826\" width=\"1280\" height=\"720\" frameborder=\"0\" title=\"Japanese Sumo!\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>",
   "width": 1280,
   "height": 720,
   "duration": 40,
   "description": "at Fuji Safari Park.",
   "thumbnail_url": "http://i.vimeocdn.com/video/465371059_1280.jpg",
   "thumbnail_width": 1280,
   "thumbnail_height": 720,
   "video_id": 87344826,
   "uri": "/videos/87344826"
}

サンプル

SlideShare

oEmbedを利用してSlideShareのスライドを埋め込む方法です。公式リファレンスは下記をご参考下さい。

oEmbed Documentation: SlideShare内のページ。oEmbedのリファレンスです。

エンドポイント

http://www.slideshare.net/api/oembed/2

コンテンツのパーマリンク

http://www.slideshare.net/naotokoshikawa/yapcasia2014pplog リンク

取得できるJSON

JSON

{"thumbnail_width":170,"title":"YAPC::Asia Tokyo 2014 \u524d\u591c\u796d pplog by @ppworks","html":"\u003Ciframe src=\"https://www.slideshare.net/slideshow/embed_code/key/8OYzZPIdsfeWqL\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen\u003E \u003C/iframe\u003E \u003Cdiv style=\"margin-bottom:5px\"\u003E \u003Cstrong\u003E \u003Ca href=\"https://www.slideshare.net/naotokoshikawa/yapcasia2014pplog\" title=\"YAPC::Asia Tokyo 2014 \u524d\u591c\u796d pplog by @ppworks\" target=\"_blank\"\u003EYAPC::Asia Tokyo 2014 \u524d\u591c\u796d pplog by @ppworks\u003C/a\u003E \u003C/strong\u003E from \u003Cstrong\u003E\u003Ca href=\"http://www.slideshare.net/naotokoshikawa\" target=\"_blank\"\u003ENaoto Koshikawa\u003C/a\u003E\u003C/strong\u003E \u003C/div\u003E\n\n","slide_image_baseurl_suffix":"-1024.jpg","provider_name":"SlideShare","version_no":"1409203372","version":"1.0","total_slides":27,"author_url":"http://www.slideshare.net/naotokoshikawa","width":425,"height":355,"slide_image_baseurl":"//image.slidesharecdn.com/yapcasia2014pplog-140828052148-phpapp01/95/slide-","author_name":"Naoto Koshikawa","type":"rich","thumbnail":"//cdn.slidesharecdn.com/ss_thumbnails/yapcasia2014pplog-140828052148-phpapp01-thumbnail.jpg?cb=1409203372","provider_url":"http://www.slideshare.net","slideshow_id":38446121,"thumbnail_height":128,"conversion_version":2}

サンプル

SlideShareの埋め込みコードは、正直使いにくいです…。勝手に内部で色々と調整されているようで、div要素で囲まないと画面上部に固定表示されたりしてしまいました。このブログでは、スマホだと上手く表示できていません。strongのタグが使われるというのも、SEO的にちょっと気になっちゃいますね…。また、iframeタグ内のURL指定がhttpなので、SSL通信のページで利用するにはhttpsに修正する必要があります。

App.net

oEmbedを利用してApp.netのコメントや写真を埋め込む方法です。公式リファレンスは下記をご参考下さい。なお、App.netは、出力形式がXMLに対応していないので、formatは必ずJSONを指定する必要があります。

oEmbed: App.net内のページ。oEmbedについて解説されています。

エンドポイント

https://api.app.net/oembed

コンテンツのパーマリンク

https://alpha.app.net/arayu/post/22918724 リンク

取得できるJSON

JSON

{
   "provider_url": "https://app.net",
   "version": "1.0",
   "author_url": "https://alpha.app.net/arayu",
   "title": "愛犬の写真です。 https://photos.app.net/22918724/1",
   "url": "https://alpha.app.net/arayu/post/22918724",
   "provider_name": "App.net",
   "type": "link",
   "html": "<div><div data-post-body=\"\"><span itemscope=\"https://join.app.net/schemas/Post\">#24859;犬の写真です。 <a href=\"https://photos.app.net/22918724/1\" target=\"_blank\" rel=\"nofollow\">https://photos.app.net/22918724/1</a></span></div><div data-post-annotations=\"\"><div data-oembed-type=\"photo\" data-annotation=\"net.app.core.oembed\"><p>image.jpg</p><p><a href=\"https://files.app.net/1/764248/aH5BfcGr4OBKej6BON4fU4vypRqh6SFkWqR2ReQxYcBn9A4x65cXnR8pOx0vkt9qWK-Ub9DbdDfjVIzgJP-ZrTKLrsu_IbuqyLZhO_hoxBLxblBmLNSuWB0xBQzK37E-QV4fNiHq77RX6v4Hldp8HbW6V5x5PQ927VcYqdrMWkC-1wiPFgFbSGkKjom0AEVMo\"><img width=\"200\" src=\"https://files.app.net/1/764248/aH5BfcGr4OBKej6BON4fU4vypRqh6SFkWqR2ReQxYcBn9A4x65cXnR8pOx0vkt9qWK-Ub9DbdDfjVIzgJP-ZrTKLrsu_IbuqyLZhO_hoxBLxblBmLNSuWB0xBQzK37E-QV4fNiHq77RX6v4Hldp8HbW6V5x5PQ927VcYqdrMWkC-1wiPFgFbSGkKjom0AEVMo/image_thumb_200s\" height=\"200\"></a></p><p>by <a href=\"https://alpha.app.net/arayu\">@arayu</a> via <a href=\"https://app.net\">App.net</a></p></div></div></div>",
   "author_name": "arayu"
}

サンプル

App.netの埋め込みコードは、整形用のJavaScriptがなく、下記の通り、webサイトごとのスタイルシートの影響を受けてしまいます。独自に整形する必要がありますね…。整形用のJavaScriptが存在するんじゃないかと探したのですが、見当たりませんでした。

#24859;犬の写真です。 https://photos.app.net/22918724/1

image.jpg

by @arayu via App.net

Instagram

oEmbedを利用してInstagramの写真、動画を埋め込む方法です。公式リファレンスは下記をご参考下さい。App.netと同様、InstagramもXMLの出力形式に対応していません。

Embedding Endpoints: Instagram内のページ。oEmbedについて解説されています。

エンドポイント

http://api.instagram.com/oembed

コンテンツのパーマリンク

http://instagram.com/p/r913cLMtUu/ リンク

取得できるJSON

JSON

{
    "provider_url": "http://instagram.com/",
    "media_id": "792026015776036142_295878252",
    "title": "竹の塚霊園にある、おきあがり観音です。",
    "thumbnail_height": 640,
    "html": "<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"4\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://instagram.com/p/r913cLMtUu/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_top\">竹の塚霊園にある、おきあがり観音です。</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">@arayutwが投稿した写真 - <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2014-08-21T16:01:20+00:00\"> 8月 21, 2014 at 9:01午前 PDT</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>",
    "author_name": "arayutw",
    "height": null,
    "thumbnail_width": 640,
    "width": 658,
    "version": "1.0",
    "author_url": "http://instagram.com/arayutw",
    "author_id": 295878252,
    "thumbnail_url": "http://photos-f.ak.instagram.com/hphotos-ak-xaf1/t51.2885-15/10597292_910228762338853_1220151813_n.jpg",
    "type": "rich",
    "provider_name": "Instagram"
}

サンプル

埋め込みのサンプルです。スタイルシートにて、iframe要素にheightの値を設定しているとデザインが崩れてしまうみたいなのでご注意下さい。

アルペンルートで見たライチョウ！

A photo posted by Syncer (@syncerjp) on May 29, 2015 at 12:57am PDT

SoundCloud

oEmbedを利用してSoundCloudの音楽を埋め込む方法です。公式リファレンスは下記をご参考下さい。

oEmbed: SoundCloud内のページ。oEmbedの仕様について解説されています。

エンドポイント

http://soundcloud.com/oembed

コンテンツのパーマリンク

https://soundcloud.com/forss/flickermood リンク

取得できるJSON

JSON

{"version":1.0,"type":"rich","provider_name":"SoundCloud","provider_url":"http://soundcloud.com","height":400,"width":"100%","title":"Flickermood by Forss","description":"From the Soulhack album,\u0026nbsp;recently featured in this ad \u003Ca href=\"https://www.dswshoes.com/tv_commercial.jsp?m=october2007\"\u003Ehttps://www.dswshoes.com/tv_commercial.jsp?m=october2007\u003C/a\u003E ","thumbnail_url":"http://i1.sndcdn.com/artworks-000067273316-smsiqx-t500x500.jpg","html":"\u003Ciframe width=\"100%\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?visual=true\u0026url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F293\u0026show_artwork=true\"\u003E\u003C/iframe\u003E","author_name":"Forss","author_url":"http://soundcloud.com/forss"}

サンプル

Twitter

oEmbedを利用してTwitterのつぶやきを埋め込む方法です。個人的に、Twitterが提供するAPIの中で認証が必要ないものとして印象的。公式リファレンスは下記をご参考下さい。

GET statuses/oembed: Twitter Developer Center内のリファレンス。仕様など。

エンドポイント

https://api.twitter.com/1/statuses/oembed.json

コンテンツのパーマリンク

https://twitter.com/arayutw/status/507100153845530624 リンク

指定できるパラメータ

id: 投稿のIDを指定。
url: 投稿のパーマリンクを指定。
maxwidth: コンテンツの最大幅を指定。250〜550の間で指定可。
hide_media: 添付画像を非表示にするか。デフォルトはfalse。
hide_thread: リプライの場合、返信先のツイートを表示するか。デフォルトはfalse。
omit_script: 埋め込み用コードにscriptのタグを含めるか。デフォルトではtrue。
align: コンテンツの配置をleft、right、centerから指定。デフォルトではnone。
lang: 言語を指定する。

取得できるJSON

JSON

{"cache_age":"3153600000","url":"https:\/\/twitter.com\/arayutw\/statuses\/507100153845530624","height":null,"provider_url":"https:\/\/twitter.com","provider_name":"Twitter","author_name":"\u3042\u3089\u3086","version":"1.0","author_url":"https:\/\/twitter.com\/arayutw","type":"rich","html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003E\u6842\u6D5C\u6C34\u65CF\u9928\u3067\u55A7\u5629\u304C\u3042\u3063\u305F\u6A21\u69D8\u3002\u8208\u596E\u3057\u305F\u4E21\u8005\u306F\u53D6\u3063\u7D44\u307F\u5408\u3044\u306B\u306A\u308A\u3001\u4E00\u65B9\u304C\u6C34\u4E2D\u306B\u7A81\u304D\u843D\u3068\u3055\u308C\u307E\u3057\u305F\u3002 \u003Ca href=\"http:\/\/t.co\/kDma6ANXMk\"\u003Epic.twitter.com\/kDma6ANXMk\u003C\/a\u003E\u003C\/p\u003E— \u3042\u3089\u3086 (@arayutw) \u003Ca href=\"https:\/\/twitter.com\/arayutw\/status\/507100153845530624\"\u003ESeptember 3, 2014\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E","width":550}

サンプル

桂浜水族館で喧嘩があった模様。興奮した両者は取っ組み合いになり、一方が水中に突き落とされました。 pic.twitter.com/kDma6ANXMk
— あらゆ (@arayutw) September 3, 2014

vine

Twitter社が運営する6秒動画投稿サービスのvine。こちらもoEmbedに対応していたようなので、説明を追加しました。

Vine oEmbed API: Twitter Developer Center内のリファレンス。vineの埋め込みコンテンツについて説明されています。

エンドポイント

https://vine.co/oembed.json

コンテンツのパーマリンク

https://vine.co/v/OXlxnwtJv6W リンク

指定できるパラメータ

id: 投稿のIDを指定。
url: 投稿のパーマリンクを指定。
maxwidth: 埋め込みコンテンツの最大幅を指定。
maxheight: 埋め込みコンテンツの最大高さを指定。
omit_script: 埋め込み用コードにscriptのタグを含めるか。デフォルトではtrue。

取得できるJSON

JSON

{
  "version": 1.0,
  "type": "video",
  "cache_age": 3153600000,
  "provider_name": "Vine",
  "provider_url": "https://vine.co/",
  "author_name": "Syncer",
  "author_url": "https://vine.co/u/1131917957837312000",
  "title": "\u304a\u3063\u3055\u3093\u7f8a",
  "thumbnail_url": "https://v.cdn.vine.co/r/videos/A1A733A9921159423279908483072_3cb448f62cd.1.4.13369323302764295578.mp4.jpg?versionId=h3SztnClywbYxxG.AQE7KGKaDuyw2eno",
  "thumbnail_width": 480,
  "thumbnail_height": 480,
  "html": "<iframe class=\"vine-embed\" src=\"https://vine.co/v/OXlxnwtJv6W/embed/simple\" width=\"600\" height=\"600\" frameborder=\"0\"><\/iframe><script async src=\"//platform.vine.co/static/scripts/embed.js\"><\/script>",
  "width": 600,
  "height": 600
}

サンプル

はてなブログ

最後にはてなブログを紹介。こうして見ると、oEmbedへの対応は日本発のwebサービスの中ではかなり先進的ですねー。他のサイトも続いてほしいものです。公式リファレンスは下記ページです。ただ、惜しむらくはSSL通信非対応…。

はてなブログoEmbed API: 公式ドキュメント。oEmbedの使い方について解説されています。

エンドポイント

http://hatenablog.com/oembed

コンテンツのパーマリンク

http://arayutw.hatenablog.com/entry/2013/12/18/200240 リンク

取得できるJSON

JSON

{
   "author_name": "arayutw",
   "width": "100%",
   "author_url": "http://blog.hatena.ne.jp/arayutw/",
   "provider_url": "http://hatenablog.com",
   "version": "1.0",
   "provider_name": "Hatena Blog",
   "height": "190",
   "html": "<iframe src=\"http://arayutw.hatenablog.com/embed/2013/12/18/200240\" title=\"はてなスター数全件取得 - arayutwのブログ\" scrolling=\"no\" frameborder=\"0\" style=\"width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"><a href=\"http://arayutw.hatenablog.com/entry/2013/12/18/200240\">はてなスター数全件取得 - arayutwのブログ</a></iframe>",
   "url": "http://arayutw.hatenablog.com/entry/2013/12/18/200240",
   "title": "はてなスター数全件取得",
   "type": "rich"
}

ご利用の際は、付属のREADMEファイル(readme.txt)をご確認下さい。

Download Zip

oEmbedとは？

統一規格ってどういうこと？

oEmbedの便利さ

基本的な使い方

リクエスト方法

オプションパラメータ

取得する流れ

エンドポイント

コンテンツのパーマリンク

リクエストURL

サンプルコード

取得できるJSON

サンプルのJSON

各プロパティの説明

対応したサービスまとめ

IFTTT

エンドポイント

コンテンツのパーマリンク

取得できるJSON

埋め込みサンプル

Youtube

エンドポイント

コンテンツのパーマリンク

取得できるJSON

埋め込みサンプル

Flickr

エンドポイント

コンテンツのパーマリンク

取得できるJSON

サンプル

Vimeo

エンドポイント

コンテンツのパーマリンク

指定できるパラメータ

取得できるJSON

サンプル

SlideShare

エンドポイント

コンテンツのパーマリンク

取得できるJSON

サンプル

App.net

エンドポイント

コンテンツのパーマリンク

取得できるJSON

サンプル

Instagram

エンドポイント

コンテンツのパーマリンク

取得できるJSON

サンプル

SoundCloud

エンドポイント

コンテンツのパーマリンク

取得できるJSON

サンプル

Twitter

エンドポイント

コンテンツのパーマリンク

指定できるパラメータ

取得できるJSON

サンプル

vine

エンドポイント

コンテンツのパーマリンク

指定できるパラメータ

取得できるJSON

サンプル

はてなブログ

エンドポイント

コンテンツのパーマリンク

取得できるJSON

関連リンク集

最新情報

言語別のライブラリ

ダウンロード

このブログについて