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
0
19

 oEmbedとは？

Avatar for nikawa2161

nikawa2161

December 27, 2025
Tweet

More Decks by nikawa2161

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

Featured

See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
59
50k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
760
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
140

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