Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

oEmbedとは？

Avatar for nikawa2161 nikawa2161
December 27, 2025
0
0

 oEmbedとは？

Avatar for nikawa2161

nikawa2161

December 27, 2025
Tweet

More Decks by nikawa2161

See All by nikawa2161
沖縄観光とPostgreSQL排他制約の話
Avatar for nikawa2161 nikawa2161
0
0
自分のコードを数年ぶりに読んだら
Avatar for nikawa2161 nikawa2161
0
0
ユーザーインタビュー分析に参加して得られたことと気づき
Avatar for nikawa2161 nikawa2161
0
0
はじめまして、にかわです
Avatar for nikawa2161 nikawa2161
0
0
課題を映す問題空間と、答えを描く解決空間
Avatar for nikawa2161 nikawa2161
0
0
転生したら自己肯定感MAXになりたい
Avatar for nikawa2161 nikawa2161
0
0
沖縄リモート生活と、新しい発想の種
Avatar for nikawa2161 nikawa2161
0
0
バツイチマッチングアプリの進捗
Avatar for nikawa2161 nikawa2161
0
0
UNIX哲学
Avatar for nikawa2161 nikawa2161
0
2

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
32
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
120
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
45
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
120
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

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