oEmbed 란?
oEmbed 공식 사이트에 따르면,
oEmbed는 다른 사이트의 URL을 가지고 내장할 수 있게 하는 한 형식입니다. 한 유저가 어떤 리소스((사진이나 비디오 등)의 링크를 게시했을 때, 그 리소스를 직접 읽지 않고도 웹사이트에 내장할 수 있도록 해주는 심플한 API입니다.
YouTube, Vimeo, Flickr 와 같은 콘텐츠 제공자들이 oEmbed의 공통적인 스펙에 맞는 URL을 주고 그 URL을 통해 아래와 같은 response을 받을 수 있습니다.
{
thumbnail_width: 480,
height: 270,
author_url: 'http://www.youtube.com/user/officialpsy',
title: 'PSY - GANGNAM STYLE (강남스타일) M/V',
author_name: 'officialpsy',
html: '<iframe width="480" height="270" src="http://www.youtube.com/embed/9bZkp7q19f0?feature=oembed" frameborder="0" allowfullscreen></iframe>',
provider_name: 'YouTube',
version: '1.0',
thumbnail_height: 360,
type: 'video',
width: 480,
thumbnail_url: 'http://i1.ytimg.com/vi/9bZkp7q19f0/hqdefault.jpg',
provider_url: 'http://www.youtube.com/'
}
위와 같은 콘텐츠의 메타 정보를 받아서 iframe을 직접 운영하고 있는 서비스에 내장해서 외부 사이트의 콘텐츠를 사용할 수 있습니다.
너무 다양한 규칙과 URL
제가 이 oEmbed를 막상 실제로 사용하려다보니 너무 많은 oEmbed 요청 URL이 있었고, 하물며 한 사이트에서도 여러 형태의 URL이 있다는 것을 알았습니다.
보시는 바와 같이 YouTube 도 같은 콘텐츠에 관해서 여러 형태로 주소가 나올 수가 있습니다.
http://www.youtube.com/watch?v=9bZkp7q19f0
http://youtu.be/9bZkp7q19f0
YouTube만 이런것이 아니라 다른 콘텐츠 제공자들도 마찬가지입니다.
oEmbed가 멋진 규약으로써 공룡 콘텐츠 제공자들의 콘텐츠를 활용할 수 있는 건 사실이지만, 이렇게 복잡해서야 사용하기 쉽지 않습니다.
그래서 저는 oEmbed Auto
라는 Node.js 모듈을 만들어서 쉽게 사용하도록 했습니다.
제 목표는 간단하게 원래 콘텐츠의 URL만 request에 보내면 알아서 알맞는 oEmbed response가 오도록 하는 것입니다.
oEmbed 요청을 콘텐츠 url만으로 보내세요
간단한 콘텐츠 주소 하나만으로 알맞는 oEmbed response를 받을 수 있습니다.
설치
$ npm install oembed-auto
사용 방법
var oembed = require("oembed-auto");
oembed("http://www.youtube.com/watch?v=9bZkp7q19f0", function (err, data) {
console.log(data);
});
사용 방법 (CoffeeScript)
oembed = require "oembed-auto"
oembed "http://www.youtube.com/watch?v=9bZkp7q19f0", (err, data) ->
console.log data
결과
{
thumbnail_width: 480,
height: 270,
author_url: 'http://www.youtube.com/user/officialpsy',
title: 'PSY - GANGNAM STYLE (강남스타일) M/V',
author_name: 'officialpsy',
html: '<iframe width="480" height="270" src="http://www.youtube.com/embed/9bZkp7q19f0?feature=oembed" frameborder="0" allowfullscreen></iframe>',
provider_name: 'YouTube',
version: '1.0',
thumbnail_height: 360,
type: 'video',
width: 480,
thumbnail_url: 'http://i1.ytimg.com/vi/9bZkp7q19f0/hqdefault.jpg',
provider_url: 'http://www.youtube.com/'
}
테스트
이 모듈이 잘 작동하는지 여부를 작성한 테스트입니다.
npm install -d
로 테스트 관련 모듈을 설치 후 테스트를 돌려볼 수 있습니다.
$ make test
오픈소스 참여 방법
더 많은 oEmbed 규칙이 내장 될수록 더 유용해집니다! ^-^
git clone
을 통해 이 모듈을 가져오고 나서 npm install -d
를 해서 테스트를 돌릴 준비를 합니다
src/oembedList.json
에 규칙을 추가합니다
make compile
을 실행하고, 참여를 통해 업데이트 된 코드를 pull-request
해주세요