Upgrade to Pro — share decks privately, control downloads, hide ads and more …

oEmbedとは？

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for nikawa2161 nikawa2161
December 27, 2025
93
0

 oEmbedとは？

Avatar for nikawa2161

nikawa2161

December 27, 2025

More Decks by nikawa2161

See All by nikawa2161
Node.js Subpath imports
Avatar for nikawa2161 nikawa2161
0
21
Sagaパターン入門（続編）
Avatar for nikawa2161 nikawa2161
0
30
Sagaパターン入門
Avatar for nikawa2161 nikawa2161
0
40
沖縄観光とPostgreSQL排他制約の話
Avatar for nikawa2161 nikawa2161
0
35
20251209_プログラミング原則の学び
Avatar for nikawa2161 nikawa2161
0
25
自分のコードを数年ぶりに読んだら
Avatar for nikawa2161 nikawa2161
0
19
ユーザーインタビュー分析に参加して得られたことと気づき
Avatar for nikawa2161 nikawa2161
0
24
はじめまして、にかわです
Avatar for nikawa2161 nikawa2161
0
20
課題を映す問題空間と、答えを描く解決空間
Avatar for nikawa2161 nikawa2161
0
16

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
340
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
390
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
230
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k

Transcript

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

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

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

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

    4. ページに表示 oEmbed とは？外部コンテンツ埋め込みの仕組み 4

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

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

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

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

  8. 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

  9. 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

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

    iframeなどは rich タイプを使用 既存の埋め込み機能を活用してレスポンスを生成 oEmbed とは？外部コンテンツ埋め込みの仕組み 10

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

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

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

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

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

    14

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