プログラムでoEmbedを使用して共有コードを検出する

公開: 2022-03-10

簡単な要約↬多くのサイトでは、HTML埋め込みコードを使用して他の場所で共有できるメディアとコンテンツをホストしています。アイテムのURLを持っていて、人間の介入なしにメディアの埋め込み可能なバージョンを見つける必要がある場合はどうなりますか？そこでoEmbedが登場します。

Webには、ビデオ、画像、音楽、ポッドキャスト、地図、グラフなどの豊富なコンテンツをホストするサービスが満載で、さまざまな楽しみ方があります。コンテンツをサイトに追加すると、そのコンテンツを別の場所のWebページに埋め込む方法が提供される可能性があります。

YouTubeのようなサイトには、ブログの投稿や製品ページでさえ使用するのに人気のある独自の埋め込み可能なプレーヤーがあります。 Soundcloudには、バンドのWebサイトに音楽プレーヤーを埋め込むためのコードがあります。チャリティー募金活動者は、大きなレースのルートをStravaのようなサイトにアップロードし、それを募金サイトで共有してスポンサーに見せたいと思うかもしれません。

これはすべて、ホスティングサイトでその共有オプションを見つけて、通常はHTMLとJavaScriptを組み合わせたコードをコピーすることによって行われます。その後、そのコードは通常、宛先ページに貼り付けることができ、ホスティングサイトは、すべての友人、顧客、および連絡先が見ることができるように、コンテンツの豊富な表現を提示します。

これまでのところ、非常に優れており、これはコンテンツを手動で埋め込むためのオプションをかなりうまくカバーしています。ただし、結果は同じですが、それへのルートが大きく異なる、明確な2番目のユースケースがあります。

ジャンプした後もっと！以下を読み続けてください↓

プログラムによる共有

ユーザーからのコンテンツを受け入れるアプリまたはサイトを構築していると想像してみてください。これは、スタッフが同僚とニュースを共有するための基本的なイントラネットページのような単純なものでも、人々がサインアップして投稿を開始できるソーシャルネットワーク全体のような大規模なものでもかまいません。

どちらの場合も、ユーザーがそのコンテンツの一部としてURLを追加した場合の対処方法を検討する必要があります。あなたはシナリオを想像することができます：

 Check out this video! https://youtu.be/jw7bRnFbwAI

この時点で、パブリッシングシステムとして、何をすべきかを理解する必要があります。最初のオプションは、何もせず、URLをプレーンテキストのままにすることです。ユーザーは一般的にURLをクリックしたいと思うでしょうし、プレーンテキストは反対側のページにたどり着くのに役立たないので、それは素晴らしい考えではありません。

2番目のオプションは、それをリンクに変換することです。ユーザーはリンクをたどってコンテンツにアクセスできるので、これは確かな次のステップです。しかしそうすることで、彼らはあなたのサイトを去り、急いで戻ってこないかもしれません。

最高のユーザーエクスペリエンスは、そのコンテンツのプレーヤーを取得して、URLだけでなくそこに埋め込むことができることかもしれません。これにより、ユーザーは、たとえばFacebookの場合と同じように、サイト内でコンテンツを直接体験できるようになります。

これは問題を引き起こします。 URLが与えられた場合、それをページにリッチプレーヤーを表示するために必要なHTML / JavaScript埋め込みコードに変換するにはどうすればよいですか？

YouTubeのような既知のサイトの場合は、YouTube APIを使用して動画情報を取得し、その方法で埋め込みコードを取得または構築するコードを記述できます。 VimeoやVIVOのような他のビデオサービスでも同じことができます。 FlickrとInstagramのURLを認識し、それらのAPIを使用して写真の埋め込み可能なバージョンを取得するコードを記述できます。 Twitterやツイートも同じです。しかし、これは大変な作業のように聞こえます！

理想的なのは、コンテンツのURLから埋め込みコードのブロックに取得してそのコンテンツをページに表示する標準化された方法がある場合です。あなたが注意を払っているなら、あなたはそれに対する答えがoEmbedであることに気付くでしょう。

oEmbedの起源

これはまさに、リア・カルバーがPownce（TwitterのVHSのベータマックスであった真に革新的なソーシャルネットワーキングサイト）で作業しているときに抱えていた問題でした。 Pownceは、コンテンツの豊富な表現をユーザーの更新ストリームに埋め込みたいと考えていましたが、統合するコードを特別に記述したサービスのみにサポートを制限したくありませんでした。同僚のMikeMalone、Cal Henderson（当時、このようなコンテンツの主要プロバイダーの1つであるFlickrでエンジニアリングを主導した）およびRichard Crowleyとの夕食会で、彼らは一緒に、 URL。ヘンダーソンは立ち去り、議論に基づいて何かを起草し、oEmbedが誕生しました。

oEmbedの使用

仕組みは次のとおりです。

これは、コンテンツの単一アイテムを指すURLで始まります。それはYouTubeのビデオや画像などかもしれません。通常、これは、サイトまたはアプリのユーザーが公開したいコンテンツの一部として提供されます。最初のステップは、そのURLでページのコンテンツをフェッチすることです。これはHTMLページである必要があります。

コンテンツをホストしているサイトがoEmbedをサポートしている場合、そのページの<head>セクションには、 oembedコンテンツタイプのlink要素が必要です。

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

XMLに関する注意： oEmbedは、XML形式とJSON形式の両方の応答をサポートします。 この記事では、野蛮人ではないため、JSONのみを検討しています。 XMLを使用する必要があるという不幸な立場にある場合は、XMLがoEmbed仕様でサポートされている形式であることに注意してください。ただし、一部のプロバイダーはJSON応答のみを提供している場合があります。

このリンクタグは、 rel属性がalternateに設定され、 typeがapplication/json+oembedまたはtext/xml+oembedに設定されています。 hrefで指定されたURLが実際にはコンテンツの詳細を取得するためのoEmbedAPIエンドポイントであるという事実に私たちを導くのはこの属性です。

そのURLには通常、 urlとformatの2つのパラメーターがあります。

パラメータ	価値
`url` （必須）	コンテンツアイテムのURLエンコードされたWebアドレス
`format`	応答を希望する形式`json`または`xml`のいずれか

最初のコンシューマーリクエストの一般的なURLパラメーター

完全な仕様については、ここでさらに詳しく説明します（独自の実装を作成する場合は、これを参照する必要があります）が、これらは、最もよく見られる2つのパラメーターです。

したがって、URLを取得し、ページをフェッチして、APIエンドポイントの別のURLを持つoEmbedリンクタグを見つけました。次に、その新しいURLを要求します。これにより、サービスがそのコンテンツに関して提供する必要のあるすべての情報が返されます。

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

今話している！応答は私達に内容についての多くの情報を与えます。近い将来のversionは1.0である必要があります。これは、oEmbed仕様の現在のバージョンです。返されるその他の情報は、 typeの値に大きく依存します。

応答タイプ

応答のtypeキーの値は、埋め込むメディアの種類を示します。

`type`の値	何を期待します
`photo`	基本的な`img`タグに使用できる`url` 、 `width` 、 `height`を提供する静止写真
`video`	`width`と`height`はあるものの、ページにプレーヤーを埋め込むために必要なコードを指定する`html`を備えたビデオプレーヤー
`link`	このコンテンツを処理する最良の方法は、結局のところリンクを提供することです。応答には、タイトルなどの他の有用な情報が含まれている場合がありますが、リンクする必要があります。
`rich`	ビデオタイプと同じように、 `html` 、 `width` 、 `height`を返す、ある種のリッチコンテンツプレーヤー

専用のビデオコンテンツは別として、野生で見られる可能性が高いより一般的なタイプはrichです。 Flickr自体でさえ、 photoの応答を送信しながら、画像の豊富な埋め込み可能な「プレーヤー」用のhtmlも提供します。

ほとんどの場合、サイトにコンテンツを埋め込むのは、 html値として提供されているコードを使用する場合にすぎません。

セキュリティに関する注記

当然のことながら注意が必要なのは、HTML応答を取得し、それをプログラムでホストするページに埋め込むことです。貼り付けているコードを再確認する人間の手順がなければ、そのコードが悪意のあるものになる可能性が常にあります。そのため、リスクを軽減するために適切な手順を実行する必要があります。

これには、スキームとドメインが期待されるものと一致することを確認するためのURLのフィルタリング、および別のCookieのないドメイン上のiframeへのコードのサンドボックス化が含まれる場合があります。コードを使用している状況にアクセスし、自分自身を過度のリスクにさらしていないことを確認する必要があります。

入門

oEmbedを使用する際のプロセスを理解することは重要ですが、現実には、ほとんどの一般的な言語には、プロセスを抽象化して比較的単純にするライブラリが利用可能です。

たとえば、npmパッケージのoembedは、コンテンツURLに基づいてリクエストを行い、oEmbedレスポンスを返すための非常にシンプルなインターフェイスを提供します。

まず、パッケージをプロジェクトにインストールします。

 npm i oembed

次に、URLをリクエストします。ここでは、oEmbedについて提供したNotistに関するプレゼンテーションのURLを使用しています。なんてメタなんだ。

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

そして応答：

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

PHPでも同じことをしたい場合は、Composerを介してembed / embedという便利なパッケージをインストールできます。

 composer require embed/embed

そして、PHPプロジェクトでは：

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

ご覧のとおり、ライブラリを使用すると、プロセスが非常に簡単になり、URLから埋め込みコードにすばやく移動して、ユーザーのコンテンツの豊富な表現を表示する準備が整います。

結論

oEmbedは、非常に具体的な問題に対する非常に洗練されたソリューションです。大規模なソーシャルネットワークで作業しているエンジニアの数人だけがこれから恩恵を受けると考えることは許されますが、実際には、ユーザーがURLを入力する可能性のある公開システムは驚くほど一般的です。ある時点で、ある種のCMSを構築する必要がなかったバックエンドエンジニアを1人見つけてください。同じ言葉で考えることはできないかもしれませんが、ユーザー入力を受け入れる場合は、その入力にURLが含まれている場合の対処方法を検討する必要があります。

oEmbed（申し訳ありません）について知ったので、将来のプロジェクトでURLをどのように処理するかを真剣に検討しない理由はありません。

o埋め込み仕様
NodeJS用にoembed
PHP用の埋め込み/埋め込み
「OEmbedの発表：組み込みコンテンツのオープンスタンダード」Leah Culver