oEmbedとは？

oEmbedとは？外部コンテンツ埋め込みの仕組み oEmbed とは？外部コンテンツ埋め込みの仕組み 1

背景 Wantedlyでは、スライドを埋め込みするためにoEmbedに対応しないと表示できない問題があった他サービスでも同様にoEmbedの仕様に準拠している場合、ピッチ資料が埋め込めない可能性がある oEmbed とは？外部コンテンツ埋め込みの仕組み 2

oEmbedとは？外部コンテンツを簡単に埋め込むことができる標準化された仕組み URL一行でリッチコンテンツを表示可能各サービスが統一された規格で埋め込み機能を提供 oEmbed とは？外部コンテンツ埋め込みの仕組み 3

仕組みのフロー 1. URL を貼り付け 2. oEmbed API にリクエスト送信 3. 埋め込み用HTMLコンテンツを取得
4. ページに表示 oEmbed とは？外部コンテンツ埋め込みの仕組み 4

oEmbed API 例：Flickrの場合 oEmbed とは？外部コンテンツ埋め込みの仕組み 5

実際の表示例 CodePenの埋め込み例：ブログなどに表示した場合参考: CodePen oEmbed Documentation oEmbed とは？外部コンテンツ埋め込みの仕組み 6

oEmbedのメリット簡単な実装: HTMLを貼るだけで表示可能標準化: 統一された規格により、各サービスごとに個別仕様を調べる必要なしセキュリティ: 提供側が適切な埋め込みコードを返すため安全注意点 oEmbedに対応しているサービスに限定 HTMLを返すだけなので、レイアウトはサービス側に依存
oEmbed とは？外部コンテンツ埋め込みの仕組み 7

APIリクエスト仕様エンドポイント一般的なパス: /oembed または /api/oembed 例: https://example.com/api/oembed パラメータ必須:
url - 埋め込み対象のURL オプション: maxwidth , maxheight , format など GET /api/oembed?url=https://example.com/slides/1234567890&maxwidth=500 oEmbed とは？外部コンテンツ埋め込みの仕組み 8

APIレスポンス仕様レスポンス形式（JSON） { "version": "1.0", "type": "rich", "provider_url": "https://www.flickr.com/", "html":
"<iframe src='https://www.flickr.com/photos/1234567890/1234567890/'></iframe>", "width": 500, "height": 300 } oEmbed とは？外部コンテンツ埋め込みの仕組み 9

コンテンツタイプ photo: 画像コンテンツ video: 動画コンテンツ rich: iframe等のリッチコンテンツ link: シンプルなリンク実装方針
iframeなどは rich タイプを使用既存の埋め込み機能を活用してレスポンスを生成 oEmbed とは？外部コンテンツ埋め込みの仕組み 10

oEmbed Discovery oEmbedエンドポイントを自動検出可能にするための実装 HTMLヘッダーへの実装詳細ページの <head> にoEmbedエンドポイントのリンクを挿入 oEmbed とは？外部コンテンツ埋め込みの仕組み 11

Discovery 実装例 <link rel="alternate" type="application/json+oembed" href="https://example.com/api/oembed?url=https://example.com/slides/123" title=" スライドタイトル" /> oEmbed
とは？外部コンテンツ埋め込みの仕組み 12

プロバイダー登録 oEmbedの公式プロバイダーリストに登録申請 oEmbed公式サイトのプロバイダーリストに申請多くのサービスが参照する標準的なリスト oEmbed とは？外部コンテンツ埋め込みの仕組み 13

まとめ oEmbedは外部コンテンツ埋め込みの標準規格メリット URL一つで簡単にリッチコンテンツを表示可能標準化により開発・運用コストを削減セキュリティ面でも安全な仕組み Discovery機能により自動検出も可能多くのサービスで採用されている実績ある技術 oEmbed とは？外部コンテンツ埋め込みの仕組み
14

Thank you! oEmbed とは？外部コンテンツ埋め込みの仕組み 15

oEmbedとは？

oEmbedとは？

nikawa2161

More Decks by nikawa2161

Featured

Transcript

oEmbedとは？外部コンテンツ埋め込みの仕組み oEmbed とは？外部コンテンツ埋め込みの仕組み 1

oEmbedとは？外部コンテンツを簡単に埋め込むことができる標準化された仕組み URL一行でリッチコンテンツを表示可能各サービスが統一された規格で埋め込み機能を提供 oEmbed とは？外部コンテンツ埋め込みの仕組み 3

仕組みのフロー 1. URL を貼り付け 2. oEmbed API にリクエスト送信 3. 埋め込み用HTMLコンテンツを取得

oEmbed API 例：Flickrの場合 oEmbed とは？外部コンテンツ埋め込みの仕組み 5

実際の表示例 CodePenの埋め込み例：ブログなどに表示した場合参考: CodePen oEmbed Documentation oEmbed とは？外部コンテンツ埋め込みの仕組み 6

APIリクエスト仕様エンドポイント一般的なパス: /oembed または /api/oembed 例: https://example.com/api/oembed パラメータ必須:

APIレスポンス仕様レスポンス形式（JSON） { "version": "1.0", "type": "rich", "provider_url": "https://www.flickr.com/", "html":

コンテンツタイプ photo: 画像コンテンツ video: 動画コンテンツ rich: iframe等のリッチコンテンツ link: シンプルなリンク実装方針

oEmbed Discovery oEmbedエンドポイントを自動検出可能にするための実装 HTMLヘッダーへの実装詳細ページの <head> にoEmbedエンドポイントのリンクを挿入 oEmbed とは？外部コンテンツ埋め込みの仕組み 11

Discovery 実装例 <link rel="alternate" type="application/json+oembed" href="https://example.com/api/oembed?url=https://example.com/slides/123" title=" スライドタイトル" /> oEmbed

プロバイダー登録 oEmbedの公式プロバイダーリストに登録申請 oEmbed公式サイトのプロバイダーリストに申請多くのサービスが参照する標準的なリスト oEmbed とは？外部コンテンツ埋め込みの仕組み 13

Thank you! oEmbed とは？外部コンテンツ埋め込みの仕組み 15