프로그래밍 방식으로 oEmbed로 공유 코드 검색

게시 됨: 2022-03-10

빠른 요약 ↬ 많은 사이트에서 일부 HTML 포함 코드를 사용하여 다른 곳에서 공유할 수 있는 미디어와 콘텐츠를 호스팅하고 있습니다. 항목의 URL만 있고 사람의 개입 없이 미디어의 포함 가능한 버전을 찾아야 하는 경우 어떻게 됩니까? oEmbed가 등장하는 곳입니다.

웹은 비디오, 이미지, 음악 및 팟캐스트, 지도 및 그래프, 그리고 모든 방식의 다양한 즐거움과 같은 풍부한 콘텐츠를 호스팅하는 서비스로 가득합니다. 사이트에 콘텐츠를 추가하면 해당 콘텐츠를 다른 웹 페이지에 포함할 수 있는 방법이 제공될 가능성이 있습니다.

YouTube와 같은 사이트에는 블로그 게시물과 제품 페이지에서도 널리 사용되는 자체 내장형 플레이어가 있습니다. Soundcloud에는 밴드 웹사이트에 음악 플레이어를 삽입하기 위한 코드가 있습니다. 자선 기금 모금 활동가는 대규모 경주 경로를 Strava와 같은 사이트에 업로드하고 이를 기금 모금 사이트에서 공유하여 후원자에게 보여줄 수 있습니다.

이 모든 작업은 호스팅 사이트에서 해당 공유 옵션을 찾고 일반적으로 HTML과 JavaScript가 혼합된 일부 코드를 복사하여 수행됩니다. 그런 다음 해당 코드를 일반적으로 대상 페이지에 붙여넣을 수 있으며 호스팅 사이트는 모든 친구, 고객 및 연락처가 볼 수 있는 풍부한 콘텐츠 표현을 제공합니다.

지금까지는 너무 좋았고 콘텐츠를 수동으로 포함하는 옵션을 꽤 잘 다룹니다. 그러나 결과는 같지만 경로가 매우 다른 별개의 두 번째 사용 사례가 있습니다.

점프 후 더! 아래에서 계속 읽기 ↓

프로그래밍 방식으로 공유

사용자의 콘텐츠를 수락하는 앱이나 사이트를 구축한다고 가정해 보겠습니다. 이는 직원이 동료와 뉴스를 공유할 수 있는 기본 인트라넷 페이지처럼 단순한 것일 수도 있고 사람들이 가입하고 게시를 시작할 수 있는 전체 소셜 네트워크와 같은 거대한 것일 수도 있습니다.

두 경우 모두 사용자가 해당 콘텐츠의 일부로 URL을 추가하는 경우 수행할 작업을 해결해야 합니다. 다음과 같은 시나리오를 상상할 수 있습니다.

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

이 시점에서 퍼블리싱 시스템으로서 무엇을 해야 할지 파악해야 합니다. 첫 번째 옵션은 아무 작업도 하지 않고 URL을 일반 텍스트로 남겨두는 것입니다. 사용자는 일반적으로 URL을 클릭하기를 원할 것이고 일반 텍스트는 다른 쪽 끝에 있는 페이지로 이동하는 데 도움이 되지 않기 때문에 이는 훌륭한 아이디어가 아닙니다.

두 번째 옵션은 링크로 바꾸는 것입니다. 사용자가 링크를 따라 콘텐츠에 접근할 수 있기 때문에 이는 좋은 견고한 다음 단계입니다. 그러나 그렇게하면 사이트를 떠나 서두르지 않을 수 있습니다.

최고의 사용자 경험은 해당 콘텐츠의 플레이어를 가져와 URL 대신에 바로 삽입할 수 있다는 것입니다. 이를 통해 사용자는 예를 들어 Facebook에서와 마찬가지로 사이트 내에서 바로 콘텐츠를 경험할 수 있습니다.

이것은 문제를 제기합니다. URL이 주어지면 페이지에 리치 플레이어를 표시하는 데 필요한 HTML/JavaScript 포함 코드로 어떻게 변환할 수 있습니까?

YouTube와 같은 알려진 사이트인 경우 YouTube API를 사용하여 비디오 정보를 가져오고 그런 방식으로 임베드 코드를 얻거나 빌드하는 코드를 작성할 수 있습니다. Vimeo 및 VIVO와 같은 다른 비디오 서비스에서도 동일한 작업을 수행할 수 있습니다. Flickr 및 Instagram URL을 인식하는 코드를 작성하고 해당 API를 사용하여 멋진 삽입 가능한 사진 버전을 가져올 수 있습니다. 트위터와 트윗도 마찬가지입니다. 하지만 이것은 많은 작업처럼 들립니다!

콘텐츠의 URL에서 포함 코드 블록으로 가져오는 표준화된 방법이 있는 경우 페이지에 해당 콘텐츠를 표시하는 것이 이상적입니다. 주의를 기울이고 있다면 그에 대한 답이 oEmbed라는 것을 알게 될 것입니다.

oEmbed의 기원

이것이 바로 Leah Culver가 Pownce(Twitter VHS의 Betamax였던 진정으로 혁신적인 소셜 네트워킹 사이트)에서 작업하는 동안 겪었던 문제였습니다. Pownce는 풍부한 콘텐츠 표현을 사용자의 업데이트 스트림에 포함하고 싶었지만 통합을 위해 특별히 코드를 작성한 서비스로만 지원을 제한하고 싶지 않았습니다. 동료 Mike Malone과 Cal Henderson(당시 이러한 콘텐츠의 주요 제공업체 중 하나) 및 Richard Crowley와 함께 저녁 식사에서 함께 내장 코드를 가져오기 위한 공개 표준에 대한 아이디어를 내놓았습니다. URL. Henderson은 나가서 토론을 기반으로 초안을 작성했고 oEmbed가 탄생했습니다.

oEmbed 사용

작동 방식은 다음과 같습니다.

단일 콘텐츠 항목을 가리키는 URL로 시작합니다. 그것은 YouTube 비디오, 이미지 또는 무엇이든 될 수 있습니다. 일반적으로 이는 사이트 또는 앱 사용자가 게시하려는 일부 콘텐츠의 일부로 제공합니다. 첫 번째 단계는 HTML 페이지여야 하는 해당 URL에서 페이지의 콘텐츠를 가져오는 것입니다.

콘텐츠를 호스팅하는 사이트가 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로 작업해야 하는 불행한 위치에 있는 경우 일부 공급자가 JSON 응답만 제공한다는 것을 알 수 있지만 XML이 oEmbed 사양에서 지원되는 형식이라는 점에 유의하십시오.

이 링크 태그는 rel 속성이 alternate 설정되고 type 이 application/json+oembed 또는 text/xml+oembed 됩니다. href 에 제공된 URL이 실제로 콘텐츠의 세부 정보를 검색하기 위한 oEmbed API 끝점이라는 사실을 알려주는 것은 이 속성입니다.

해당 URL에는 일반적으로 url 및 format 의 두 가지 매개변수가 있습니다.

매개변수	값
`url` (필수)	콘텐츠 항목의 URL 인코딩된 웹 주소
`format`	응답을 원하는 형식. `json` 또는 `xml` 중 하나

초기 소비자 요청에 대한 공통 URL 매개변수

전체 사양은 여기에서 훨씬 더 자세히 설명되지만(자신의 구현을 만드는 경우 이를 참조해야 함) 가장 많이 보게 될 두 가지 매개변수입니다.

따라서 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 은 oEmbed 사양의 현재 버전인 1.0 이어야 합니다. 반환되는 다른 정보는 주로 type 값에 따라 다릅니다.

응답 유형

응답의 type 키 값은 포함할 미디어 종류를 알려줍니다.

`type` 의 값	뭘 기대 할까
`photo`	기본 `img` 태그에 사용할 수 있는 `url` , `width` 및 `height` 를 제공하는 정적 사진
`video`	`width` 와 `height` 가 있지만 페이지에 플레이어를 삽입하는 데 필요한 코드를 지정하는 `html` 이 있는 비디오 플레이어
`link`	이 콘텐츠를 처리하는 가장 좋은 방법은 결국 링크를 제공하는 것입니다. 응답에는 제목과 같은 다른 유용한 정보가 있을 수 있지만 연결만 하면 됩니다.
`rich`	비디오 유형과 마찬가지로 `html` , `width` 및 `height` 를 반환하는 일종의 리치 콘텐츠 플레이어

전용 비디오 콘텐츠 외에도 야생에서 볼 가능성이 더 일반적인 유형은 rich 합니다. Flickr 자체도 여전히 photo 응답을 보내는 동안 이미지에 대한 풍부한 내장형 '플레이어'를 위한 html 도 제공합니다.

대부분의 경우 사이트에 콘텐츠를 삽입하는 것은 html 값으로 제공된 코드를 사용하는 경우일 뿐입니다.

보안에 대한 참고 사항

주의해야 할 한 가지는 HTML 응답을 가져와 프로그래밍 방식으로 호스팅하는 페이지에 포함하는 것입니다. 붙여넣는 코드를 다시 확인하는 사람의 단계 없이는 해당 코드가 악성일 가능성이 항상 있습니다. 따라서 위험을 완화하기 위해 적절한 조치를 취해야 합니다.

여기에는 스키마와 도메인이 예상과 일치하는지 확인하기 위해 URL을 필터링하고 쿠키가 없는 다른 도메인의 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에서 동일한 작업을 수행하고 싶다면 Embed/embed라는 편리한 패키지를 Composer를 통해 설치할 수 있습니다.

 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를 구축할 필요가 없었던 백엔드 엔지니어 한 명을 찾아주세요. 같은 용어로 생각하지 않을 수도 있지만 사용자 입력을 수락하는 경우 해당 입력에 URL이 포함된 경우 수행할 작업에 대해 생각해야 합니다.

이제 oEmbed에 대해 알았으므로(죄송합니다) 향후 프로젝트에서 URL을 처리하는 방법에 대해 진지하게 고려하지 않을 변명의 여지가 없습니다.

o임베딩 사양
NodeJS용 oembed
PHP용 임베드/임베딩
"Oembed 발표: 임베디드 콘텐츠를 위한 개방형 표준" Leah Culver