Inspired World

Node.js로 쉽게 oEmbed 사용하기 본문

Node.js

Node.js로 쉽게 oEmbed 사용하기

InspiredJW 2014. 4. 23. 15:27

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

Build Status

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


Comments