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

oEmbedとは？

Avatar for nikawa2161 nikawa2161
December 27, 2025
200
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
32
Sagaパターン入門（続編）
Avatar for nikawa2161 nikawa2161
0
46
Sagaパターン入門
Avatar for nikawa2161 nikawa2161
0
53
沖縄観光とPostgreSQL排他制約の話
Avatar for nikawa2161 nikawa2161
0
39
20251209_プログラミング原則の学び
Avatar for nikawa2161 nikawa2161
0
34
自分のコードを数年ぶりに読んだら
Avatar for nikawa2161 nikawa2161
0
22
ユーザーインタビュー分析に参加して得られたことと気づき
Avatar for nikawa2161 nikawa2161
0
37
はじめまして、にかわです
Avatar for nikawa2161 nikawa2161
0
28
課題を映す問題空間と、答えを描く解決空間
Avatar for nikawa2161 nikawa2161
0
23

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
550
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
260
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
260
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
200
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380

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