Node.js로 쉽게 oEmbed 사용하기

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 Auto

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 해주세요