![닫기 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Web 2.0의 역사는 사용자가 생성한 컨텐츠의 역사이다. Flickr, Facebook, MySpace 및 YouTube와 같은 사이트를 통해 사용자들은 자신들의 원본 사진 또는 비디오 장면을 클라우드로 업로드하고 간단한 온라인 도구를 사용하여 더 확대된 커뮤니티와 공유할 수 있다. 개발자들이 사용자가 생성한 컨텐츠로 프로그래밍 방식으로 액세스할 수 있는 웹 서비스와 연결되는 클라우드 기반 컨텐츠 작성 및 공유 도구의 간편한 가용성은 새로운 컨텐츠 구동형 애플리케이션(매시업)을 사용하기 위해 다른 소스로부터 컨텐츠를 결합할 수 있다.
하지만 한 가지 사소한 문제가 있다. 독자가 Flickr에 사진이 있고, YouTube에 비디오가 있으며, TV는 Hulu로 나온다면 이 모두를 어떻게 Blogger에서 블로그 게시물로 가져오는가? 물론, 적절한 컨텐츠로 하이퍼링크로 연결하여 이를 수행할 수 있지만, 적절한 위치에서 독자의 게시물로 이를 임베드할 수 있다면 더 멋지지 않겠는가?
oEmbed를 입력한다. 이름이 암시하는 대로, oEmbed는 사용자가 Flickr 및 YouTube와 같은 외부 사이트의 사진과 비디오와 같은 서식있는 컨텐츠로의 URL을 이러한 컨텐츠의 임베드된 표현으로 변환하도록 허용하여 이러한 문제점에 솔루션을 제공한다. 이 기사에서 필자는 oEmbed를 소개하고 PHP로 이를 사용하여 웹 페이지에서 써드파티 컨텐츠를 임베드하는 방법을 보여준다.
먼저 oEmbed에 대해 간략히 소개한다. 공식적인 웹 사이트(http://www.oembed.com)에 따르면, oEmbed는 다음과 같다.
...써드파티 사이트에서 URL의 임베드된 표현을 허용하기 위한 형식이며... 사용자가 자원을 직접 구문 분석하지 않고 해당 자원으로 링크를 게시할 때 웹 사이트가 임베드된 컨텐츠(사진 또는 비디오 등)를 표시하도록 허용한다."
oEmbed 트랜잭션으로 두 가지 당사자인 제공자와 소비자가 있다. 소비자는 제공자의 API 엔드포인트로 요청을 작성하여 특정 컨텐츠 항목을 요청한다. 제공자는 요청된 컨텐츠 항목의 XML- 또는 JSON-인코드된 표현을 리턴하여 이러한 요청을 서비스한다.
이러한 접근방식이 실제로 어떻게 작동할까? 블로그 게시물을 쓰고 YouTube에서부터 업로드한 비디오 중 하나를 표시하려고 한다고 가정해보자. 다음 두 세 가지 방식으로 이를 수행할 수 있다.
- 하이퍼링크할 수 있다. 즉, 사용자가 링크를 클릭할 때 비디오를 확인하도록 YouTube로 경로 지정된다.
- YouTube의 임베드된 미디어 플레이어를 사용하여 비디오를 블로그 게시물로 직접 임베드할 수 있다.
첫 번째 접근방식은 간단하지만, 사용자들이 엄청나게 산만하게 독자의 사이트에서부터 YouTube로 전송되는 결과가 나타난다. 두 번째 접근방식은 방문자를 사이트에 머무르게 하지만, YouTube의 임베드된 플레이어가 어떻게 작업하는지에 대해 배우기 위해 어느 정도 조사를 해야 한다.
oEmbed는 세 번째의 더 간단한 솔루션을 제공한다. YouTube가 oEmbed 제공자이므로, 요청을 논의가 되는 비디오의 oEmbed API 엔드포인트로 전송할 수 있다. 이러한 요청에 응답은 임베드된 비디오 플레이어의 HTML 코드가 들어있는 XML 또는 JSON 문서이고, 이러한 코드는 어떠한 추가적인 수동 개입 없이 블로그 게시물에 직접 사용되어 비디오를 표시할 수 있다.
목록 1은 YouTube 비디오에 대한 oEmbed 요청과 응답의 모습을 보여준다.
목록 1. oEmbed 요청
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU &format=xml <?xml version="1.0" encoding="utf-8"?> <oembed> <provider_url>http://www.youtube.com/</provider_url> <title>NORAD Tracks Santa - US Region</title> <html><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/hI-BDR2UcmU?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/hI-BDR2UcmU?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object></html> <author_name>NORADTracksSanta</author_name> <height>344</height> <thumbnail_width>480</thumbnail_width> <width>425</width> <version>1.0</version> <author_url>http://www.youtube.com/user/NORADTracksSanta</author_url> <provider_name>YouTube</provider_name> <thumbnail_url>http://i1.ytimg.com/vi/hI-BDR2UcmU/hqdefault.jpg</thumbnail_url> <type>video</type> <thumbnail_height>360</thumbnail_height> </oembed> |
요청이 http://www.youtube.com/oembed로 전송되었으며, 이는 oEmbed 요청의 YouTube API 엔드포인트임을 주목하자. API는 "url" 요청 매개변수에서 요청되는 비디오의 URL이 전달된다. 요청에 응답은 비디오의 작성자 및 제목과 적절한 HTML 임베드 코드와 같은 일부 비디오 메타데이터가 들어있다.
oEmbed 제공자는 XML 또는 JSON으로 응답을 리턴할 수 있다. 모든 응답은 UTF-8로 인코딩된다. 응답 형식은 추가 "형식" 매개변수로 요청에서 지정될 수 있다. 목록 2는 예제를 보여준다.
목록 2. YouTube oEmbed API 사용하기
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU
&format=json
{
"provider_url": "http:\/\/www.youtube.com\/",
"title": "NORAD Tracks Santa - US Region",
"html": "<object width=\"425\" height=\"344\"><param name=\"movie\"
value=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"><\/param>
<param name=\"allowFullScreen\" value=\"true\"><\/param>
<param name=\"allowscriptaccess\" value=\"always\"><\/param>
<embed src=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"
type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\"
allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object>",
"author_name": "NORADTracksSanta",
"height": 344,
"thumbnail_width": 480,
"width": 425,
"version": "1.0",
"author_url": "http:\/\/www.youtube.com\/user\/NORADTracksSanta",
"provider_name": "YouTube",
"thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/hI-BDR2UcmU\/hqdefault.jpg",
"type": "video",
"thumbnail_height": 360
}
|
이제 oEmbed가 작업하는 방식을 이해했으니 코드를 약간 살펴보자. 필자는 이 기사를 통틀어 독자가 HTML, SQL 및 XML에 익숙하고, 작업 중인 Apache 또는 PHP 개발 환경이 있다고 가정한다. 또한 이 기사에서 사용된 PHP 컴포넌트가 OOP 원칙을 준수하여 쓰여졌으므로 독자가 PHP에서 클래스 및 오브젝트로 작업하기의 기초적인 사항을 알고 있다고 가정한다.
PHP 애플리케이션으로 oEmbed를 사용하기 위해 선택한 두 개의 라이브러리인 PEAR Services_oEmbed 또는 php-oembed가 있다. 이 기사에서 대부분의 예제는 PEAR Services_oEmbed(비록 필자는 참조로 php-oembed를 사용하는 일부 예제도 포함했지만)를 사용하고 있으므로 이를 설치하자. 수동으로 다운로드하여 PEAR 웹 사이트에서부터 설치하거나(링크는 참고자료 참조) 여기에 나온 것처럼 PEAR 설치 프로그램을 사용하여 자동으로 설치되도록 할 수 있다.
shell> pear install Services_oEmbed-0.2.0 |
이를 설치한 후에 다음 목록 3과 같이 간단한 예제를 시도해보자.
목록 3. YouTube oEmbed API 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
</body>
</html>
|
목록 3은 Services_oEmbed 클래스를 로드한 다음에 해당 URL을 임베드된 컨텐츠로 정의하여 시작한다 — 이 경우에는 YouTube 비디오이다. 그 다음으로 두 개의 인수가 전달되는 클래스 생성자로 Services_oEmbed 클래스의 인스턴스가 초기화된다. 이는 YouTube URL 및 옵션의 배열이다.
옵션 배열의 핵심 요소는 사용하는 oEmbed API 엔드포인트이다. 즉, 이 경우에 이는 YouTube의 oEmbed
엔드포인트이며, 이는 http://www.youtube.com/oembed이다. 마지막으로 서비스 오브젝트의
getObject() 메소드로의 호출은 oEmbed 요청의 수행 및
지정된 비디오의 오브젝트 표현 리턴을 처리한다.
이 오브젝트 표현은 요청된 비디오의 세부사항, 예를 들어, URL, 작성자, 제공자 및 제목이 들어있다. 이는 썸네일 및 비디오 오브젝트의 크기 정보도 포함할 수 있다. 그림 1은 오브젝트의 모습을 실례로 보여준다.
그림 1. PEAR Services_oEmbed로 리턴된 oEmbed 오브젝트
그리고 그림 2는 목록 3의 결과물을 시연한다. 이 인스턴스에서 해당 비디오는 미국 지역에서 산타 클로스를 추적하는 NORAD에 대한 것이다.
그림 2. 임베드된 YouTube 비디오
목록 4와 같이 임베드된 미디어에 대한 일부 메타데이터를 추가할 수 있다.
목록 4. oEmbed 메타데이터 사용하기
<?ph4
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
<div>
Type: <?php echo $video->type;?> <br/>
Title: <?php echo $video->title;?> <br/>
Author: <a href="<?php echo $video->author_url;?>">
<?php echo $video->author_name;?></a> <br/>
Provider: <a href="<?php echo $video->provider_url;?>">
<?php echo $video->provider_name;?></a> <br/>
</div>
</body>
</html>
|
그림 3은 type(video), title(NORAD Tracks Santa - US Region), author(NORADTracksSanta) 및 provider(YouTube)와 같은 추가 세부사항 및 비디오가 있는 목록 4의 결과물을 표시한다.
그림 3: 추가 메타데이터가 있는 임베드된 YouTube 비디오
oEmbed 스펙이 미디어의 네 가지 유형인 사진, 비디오, 링크 및 서식있는 유형을 정의하는 것을 주목하자. 각 유형에 대해 리턴된
메타데이터는 다를 수 있다. 예를 들어, 비디오는 비디오 플레이어에 대한 임베드 코드가 있는
html 매개변수가 있는 반면, 사진은 사진으로 URL을 지정하는
url 매개변수가 있다. 요청과 응답 매개변수의 전체 목록은 스펙을
살펴보자(링크는 참고자료 참조).
또한 getObject()로의 호출에서 추가 매개변수를 포함할 수 있음을 주목하자. 즉,
maxheight 및 maxwidth 매개변수를 포함하는 배열이며, 이는
리턴된 표현의 높이와 너비를 지정한다.
oEmbed의 훌륭한 점은 무수한 서로 다른 대중적인 웹 서비스로 지원된다는 점이다. 즉, 이는 Flickr, Facebook, YouTube, Vimeo, Viddler, Revision3 및 기타 등등이다. Revision3으로부터 비디오를 임베드하는 프로세스를 시연하는 목록 5를 살펴보자.
목록 5. Revision3 oEmbed API 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://revision3.com/foundation/jackdorsey';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://revision3.com/api/oembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
그림 4는 type(video), title(Jack Dorsey), author(Foundation) 및 provider(Revision3)와 같은 추가 세부사항 및 비디오가 있는 결과물을 표시한다.
그림 4. 임베드된 Revision3 비디오
목록 6은 또 다른 예제가 있으며, 이는 deviantART 웹 사이트로부터 프랙탈을 임베드한다.
목록 6. deviantART oEmbed API 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://backend.deviantart.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
그림 5는 type(photo), title(Spool), author(Undead_Academy) 및 provider(DeviantART)와 같은 추가 세부사항 및 사진이 있는 결과물을 표시한다.
그림 5. 임베드된 deviantART 이미지
비록 많은 웹 애플리케이션들이 이미 자체적인 oEmbed API 엔드포인트를 제공하지만, 일부는 제공하지 않는다. 하지만, 이러한 애플리케이션들은 여전히 oohEmbed 서비스를 통해
액세스할 수 있으며, 이는 "다양한 웹 사이트에 대한 HTML 임베드 코드의 oEmbed 호환 가능한 제공자"로서 스스로를 홍보한다. oohEmbed를 통해 액세스할 수 있는 추가 애플리케이션과 서비스는
amazon.com 제품 이미지, Twitter 상태 업데이트, Google Video, Metacafe, Slideshare, TwitPic, Wikipedia, Wordpress 및 기타 등등이 있다. 하지만 주의할 것은 oohEmbed가 JSON 출력만 지원하며 보통
maxwidth 및 maxheight 매개변수를 무시하는 것이다.
목록 7은 oohEmbed를 사용하여 웹 페이지로 임베드한 Wikipedia 컨텐츠의 예제가 나와있다.
목록 7. oohEmbed 및 Wikipedia 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://en.wikipedia.org/wiki/Drupal';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object->html; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
목록 7에서 주목할 것은 지정된 API 엔드포인트는 oohEmbed에 속하지만 Wikipedia에 속하지는 않는다는 것이다. oohEmbed는 프록시와 같이 작업하여, oEmbed 요청을 수신하고 해당 링크를 검색하며, 필수 데이터가 들어있는 oEmbed 호환 응답을 호출자에게 리턴한다.
다음 그림 6은 type(link), title(Drupal), author(이 항목은 특정 작성자의 이름 없이 공백임) 및 provider(Wikipedia)와 같은 추가 세부사항 및 비디오가 있는 목록 7의 결과물을 실례로 보여준다.
그림 6. 임베드된 Wikipedia 페이지
목록 8은 oohEmbed를 사용하여 Slideshare 프리젠테이션을 웹 페이지(서식있는 미디어 유형)로 임베드하는 예제이다.
목록 8. oohEmbed 및 Slideshare 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url =
'http://www.slideshare.net/weierophinney/best-practices-of-php-development-presentation';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
그림 7은 type(rich), title(Best Practices of PHP Development), author(weierophinney, 작동하는 링크) 및 provider(SlideShare, 작동하는 링크의 대상)와 같은 추가 세부사항 및 프리젠테이션이 있는 목록 8의 결과물을 실례로 보여준다.
그림 7. 임베드된 Slideshare 프리젠테이션
목록 9는 oohEmbed를 사용하여 제품 URL로부터 amazon.com 제품 이미지를 검색하고 임베드한다.
목록 9. oohEmbed 및 amazon.com 사용하기
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.amazon.com/Framework-Beginners-Guide-Vikram-Vaswani/dp/007163939X';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
그림 8은 type(photo), title(Zend Framework, A Beginner's Guide), author(Vikram Vaswani, 작동하는 링크) 및 provider(Amazon Product Image, 작동하는 링크)와 같은 추가 세부사항 및 책 표지의 사진이 있는 목록 9의 결과물을 실례로 보여준다.
그림 8. 임베드된 Amazon 제품 이미지
PEAR Services_oEmbed 라이브러리의 대안은 php-oembed 라이브러리이며, 이는 컨텐츠를 웹 페이지로 임베드하는 데 사용될 수도 있다. 라이브러리를 설치하는 것은 간단하다. 즉, 이를 다운로드하고(링크는 참고자료 참조) 경로를 포함한 PHP의 위치로 복사한다. 하지만 구성은 Services_oEmbed에 대한 것보다 조금 더 복잡하다.
php-oembed 라이브러리는 설치 디렉토리에서 providers.xml이라는 XML 파일에서 oEmbed 제공자 및 API 엔드포인트의 자체적인 목록을 유지보수한다. 따라서, 특정 oEmbed 제공자의 사용을 시작하기 전에 먼저 이 파일에 이를 추가해야 한다. 실례로 보여주기 위해, deviantART oEmbed API를 사용하려 하는 경우, 목록 10과 같이 먼저 providers.xml 파일을 편집하고 항목을 추가해야 한다.
목록 10. providers.xml 파일을 편집하고 항목에 추가하기
<?xml version="1.0"?>
<providers>
<provider>
<url>http://*.flickr.com/*</url>
<endpoint>http://www.flickr.com/services/oembed/</endpoint>
</provider>
<provider>
<url>http://*.pownce.com/*</url>
<endpoint>http://api.pownce.com/2.1/oembed.{format}</endpoint>
</provider>
<provider>
<url>http://*.deviantart.com/*</url>
<endpoint>http://backend.deviantart.com/oembed</endpoint>
</provider>
<provider>
<url>http://*.youtube.*/*</url>
<endpoint>http://www.youtube.com/oembed</endpoint>
</provider>
</providers>
|
제공자가 추가된 후에 목록 11과 같이 PHP 스크립트에서 php-oembed를 사용하도록 진행할 수 있다.
목록 11. php-oembed 라이브러리로 oohEmbed 및 deviantART 사용하기
<?php
// define provider configuration
define('PROVIDER_XML', 'providers.xml');
// include classes
include 'ProviderManager.class.php';
include 'EmbedProvider.class.php';
include 'OEmbedProvider.class.php';
include 'LazyTemplateEngine.class.php';
include 'OEmbed.class.php';
include 'PhotoEmbed.class.php';
// create provider manager
$manager = ProviderManager::getInstance();
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// get oEmbed representation
$object = $manager->provide($url, 'object');
?>
<html>
<head></head>
<body>
<div>
<img src="<?php echo $object->url; ?>" />
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
목록 11은 providers.xml 파일의 위치를 정의하고 php-oembed가 필요한 관련 클래스를 모두 포함하여 시작한다. 그러면 이는 ProviderManager 서비스 오브젝트를 생성하고 오브젝트의
provide() 메소드를 사용하여 컨텐츠 URL의 oEmbed 표현을 검색한다. 이 표현은 XML, JSON, PHP 오브젝트, PHP 배열 또는 일련화된 문자열 등의 다양한 형식으로 리턴될 수 있다.
그림 9는 리턴된 오브젝트의 모습을 실례로 보여준다. (그림 9의 텍스트 전용 버전 보기)
그림 9. php-oembed로 리턴되는 oEmbed 오브젝트
이제 그림 10과 같이 이 오브젝트의 특성을 사용하여 type(photo), title(Spool), author(Undead_Academy) 및 provider(DeviantART)와 같은 추가 세부사항과 사진이 있는 웹 페이지 내에 임베드된 표현을 포함하는 것은 매우 간편하다.
그림 10. 임베드된 deviantART 이미지
이제 oEmbed를 통한 PHP 사용하기의 기초를 이해했으니, 샘플 애플리케이션의 컨텍스트에서 이 모두가 어떻게 작동하는지 알아보자. oEmbed의 모든 내용이 컨텐츠를 웹 페이지로 임베드하는 것에 관한 것이기 때문에, 예제 애플리케이션은 사용자에게 컨텐츠(예: 블로그 게시물)를 입력하여 해당 컨텐츠 내에서 하이퍼링크를 oEmbed를 사용하여 임베드된 표현으로 자동으로 변환하는 양식을 제공한다.
목록 12에 완료된 코드가 있다.
목록 12. 인라인 컨텐츠 임베딩을 위한 예제 애플리케이션
<html>
<head></head>
<body>
<?php if (isset($_POST['submit'])): ?>
<?php
// include class
include 'Services/oEmbed.php';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get post body
// extract all URLs into array
$oBody = $_POST['body'];
$title = $_POST['title'];
preg_match_all('!https?://[\S]+!', $oBody, $matches);
$urls = $matches[0];
$embeds = array();
// for each URL
// get embed code from oohembed if available
// else convert to simple hyperlink
foreach ($urls as $url) {
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
try {
$object = $oEmbed->getObject(array('maxheight' => '100', 'maxwidth' => '100'));
$embeds[] = (string)$object;
} catch (Exception $e) {
$embeds[] = "<a href=\"" . $url . "\">" . $url . "</a>";
}
}
// replace URLs in body with code
// print revised output
$nBody = str_replace($urls, $embeds, $oBody);
?>
<h1>Preview New Post</h1>
<h2><?php echo $title; ?></h2>
<p>
<?php echo nl2br($nBody); ?>
</p>
<?php else: ?>
<h1>Add New Post</h1>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<p>
Title: <br/>
<input type="text" name="title" size="40" />
</p>
<p>
Body: <br/>
<textarea name="body" rows="10" cols="50"></textarea>
</p>
<input type="submit" name="submit" />
</form>
<?php endif; ?>
</body>
</html>
|
목록 12는 두 가지 섹션으로 나누어져 있으며, if-else() 조건적 테스트로 구분된다. 테스트는 양식 제출을 확인한다. 즉, 이를 찾지 못하면
사용자가 페이지 제목과 본문 컨텐츠를 입력하도록 요청하는 간단한 웹 양식을 표시한다. 사용자는 필요한 대로 하이퍼링크를 포함한 이러한 필드 둘 다에 텍스트를 입력할 수 있다. 그림 11은
약간의 샘플 입력이 있는 목록 12로 생성된 웹 양식을 실례로 보여준다. (그림 11의 텍스트 전용 버전 보기)
그림 11. 인라인 컨텐츠 임베딩을 지원하는 웹 양식
양식이 제출된 이후에 스크립트는 새로운 Services_oEmbed 오브젝트를 초기화하여, oohEmbed 엔드포인트로 이를 전달한다. 그러면 이는 사용자가 제출한 컨텐츠를 구문 분석하여, 간단한 정규식을 써서
본문 내에 있는 모든 URL을 추출한다. (참조: 이 정규식은 XSS 공격에 안전하지 않으므로 프로덕션 환경에 사용되지 말아야 한다.) 이 방식으로 식별된 URL은 $urls라는
이름의 PHP 배열에 저장된다.
그 다음으로 foreach() 루프와 try-catch{} 블록은 URL 배열에 반복하는 데 사용되며, Services_oEmbed 오브젝트의
getObject() 메소드로 각각 전달한다. 이 단계로 인해 해당하는 원격 컨텐츠에 대한 oohEmbed API로 요청이 나타난다. 컨텐츠가 지원된 서비스에 있으면,
getObject() 메소드는 해당하는 HTML 임베드 코드를 리턴하며, 이는 $embeds라는 이름의 별도의 배열로 저장된다. 해당 컨텐츠가 지원되지 않으면 코드는 예외가
발생하며, 이는 try-catch{} 블록이 발견한다. 이러한 예외는 URL의 임베드된 표현이 사용 가능하지 않았음을 암시하므로, 해당 URL은 HTML 앵커 태그로 간단하게 변환되고
$embeds 배열로 저장된다.
마지막 단계는 사용자가 제출한 원본 본문 컨텐츠에서 검색 및 바꾸기(search-and-replace) 조작을 수행하여, 해당하는 HTML 임베드 코드 또는 HTML 하이퍼링크로 각 URL을 바꾸는 것이다. 그러면 개정된 본문이 웹 페이지로 인쇄된다.
그림 12는 인라인이 표시된 임베드된 컨텐츠가 있는 결과 출력을 실례로 보여준다.
그림 12. 인라인 임베드된 컨텐츠가 있는 웹 페이지
이 기사는 oEmbed 스펙을 사용하여 써드파티 웹 서비스에 저장된 사진, 비디오 및 슬라이드와 같은 서식있는 컨텐츠를 웹 페이지로 임베드하는 방법에 대한 집중 강좌를 제공했다. 이 스펙은 여러 대중적인 애플리케이션 및 웹 사이트에서부터 웹 페이지로 데이터를 임베드하는 효율적이고 직관적인 방법을 제공한다. 이 기사에서 예제는 oEmbed에 두 개의 PHP 클라이언트 라이브러리를 사용했고, Flickr, YouTube, SlideShare, Wikipedia 및 amazon.com을 포함한 대중적인 무수한 웹 사이트로 oEmbed를 사용하는 것에 대해 논의했다.
이러한 예제가 시연하는 것처럼 oEmbed는 오직 한 가지—컨텐츠 임베딩—를 위해 설계된 간단한 특별히 제작된 API이며, 이 태스크를 엄청나게 원활히 수행한다. 이는 컨텐츠 수집 및 검색과 관련된 창조적인 새 애플리케이션을 빌드하기 위해 노력하는 개발자를 위해 유연한 도구를 제공한다. 때때로 이를 통해 여러 가지 시도를 해보면서 생각하는 바를 직접 실현해보는 것도 멋진 일일 것이다.
교육
- oEmbed 스펙: 써드파티 사이트에서 URL의 임베드된 표현을 허용하는 형식인 oEmbed에 대해 자세히 알아보자.
- PEAR Services_oEmbed 컴포넌트: 오브젝트 유형, 제목, 작성자 정보 또는 썸네일 세부사항과 같은 구조
메타데이터를 비롯한 URI에 대한 정보를 찾기 위한 이러한 오픈 스펙에 대해 자세히 읽어보자.
- oohEmbed 서비스: 다양한 웹 사이트에 대해 HTML 임베드 코드의 이러한 oEmbed 호환 가능 제공자에 대해 자세히 읽어보자.
- 필자의 더 많은 기사(Vikram Vaswani, developerWorks, 2007년 8월 - 현재): XML, 추가 Google API 및 기타 기술에 대한 기사를 읽어보자.
- developerWorks의 XML 영역: XML 분야의 기술을 향상시키는 데 도움이 되는 참고자료를 얻을 수 있다.
- My developerWorks: developerWorks와 관련된 경험을 개인화할 수 있다.
- IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
- XML 기술 자료: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다. 또한 더 많은 XML 팁을 읽어본다.
- developerWorks 기술 행사 및 웹 캐스트: 이러한 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
- Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.
- developerWorks
podcasts: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
- developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.
제품 및 기술 얻기
- PEAR Services_oEmbed 컴포넌트: URI에 대한 정보를 찾기 위한 오픈 스펙을 다운로드하자.
- php-oembed 라이브러리: 소모하는 JavaScript 및 PHP 클라이언트에 대해 OEmbed 호환 가능 인터페이스를
제공하는 이러한 PHP 라이브러리를 다운로드하자. 이는 프록시로 작동하여 OEmbed 제공자를 처리하고 자체적인 임베드 제공자를 추가할 수 있는 플러그인 시스템을 보유한다.
- IBM 제품 평가판: IBM SQA Sandbox의 온라인 시험판을 다운로드하거나 살펴보고
DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere® 애플리케이션 개발 도구 및 미들웨어 제품을 사용해 볼 수 있다.
토론
- XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.
- developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
Vikram Vaswani는 오픈 소스 도구 및 기술 분야를 전문으로 하는 컨설팅 서비스 회사인 Melonfire의 설립자이자 CEO이다. 그는 Zend Framework: A Beginners Guide와 PHP: A Beginners Guide의 저자이기도 하다.
목차
태그
태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.
인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.
내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.
인기 기사 태그 |
내 기사 태그태그 목록으로 건너뛰기
인기 기사 태그 |
내 기사 태그