야후! 코리아 개발자 네트워크 » YQL을 이용해 웹사이트 스크랩 위젯 만들기

Home > 강좌, 개발 도구 > YQL을 이용해 웹사이트 스크랩 위젯 만들기

YQL을 이용해 웹사이트 스크랩 위젯 만들기

November 19th, 2009 Leave a comment Go to comments

오늘은 YQL을 이용해 간단한 웹사이트 스크랩 위젯을 만들어 보겠습니다.

지금부터 하려고 하는 것은 몇줄 정도의 Javascript만 사용해서
Web site의 일부분을 위젯(또는 내 사이트)에 넣는 것입니다.

여러분이 컨텐츠 목록을 포함한 Web site를 가지고 있고,
다른 Web site에 집어 넣을 수 있도록 위젯으로 만들려고 한다고 가정해 보겠습니다.

예를 들면, 아래의 화면은 “야후!코리아”에서 제공하는 실시간 뉴스 속보 화면입니다.
여러분들이 하고자 하는 것을 하기 위한 첫 번째 일은
직접 소스코드를 검토하거나 파이어폭스의 Firebug를 이용해서
HTML데이터가 속한 부분의 구조를 파악하는 것이죠.

아래에서와 같이 Firebug상에서 마우스 우측버튼을 클릭하면
가지고 오고자 하는 부분의 XPATH 경로를 얻을 수 있습니다.
나중에 필요하겠지만 이 경우 xpath는
/html/body/div/div[2]/div/div/div[2]/div[2]/dl
또는 //*[@id="na2"]/dl 입니다.

다음 단계는 YQL console로 가서
다음과 같이 Query를 작성 하는 것입니다.

Select * From html Where url=’http://kr.news.yahoo.com/service/news/shelllist.htm?linkid=4&newssetid=1352′ and xpath=’//*[@id="na2"]/dl’

위 Query는 다음과 같은 문법을 따릅니다.

Select * from html where url=’{url}’ and xpath=’{xpath}’

이렇게 하면 YQL은 해당 URL의 content를 가져와
XML과 같은 형식으로 전달해 줍니다.

다음 단계는 출력 형식을 JSON으로 정의 하고,
proc_news라는 이름으로 callback함수를 정의 한 뒤,
TEST버튼을 누르고 결과를 확인 하고
REST Query를 복사하는 것입니다.

YQL에서 여러분들이 해야 할 일은 사실 여기까지 입니다.

이제부터 여러분들은 Javascript-readable object로서
HTML을 이용할 수 있게 된 것이므로, JSON에서 호출될
callback 함수(proc_news)를 정의하고
YQL로부터 얻은 REST URL을 새로운 SCRIPT 노드의 SRC로 지정하는 것이죠.

<script>
function proc_news(o){
}
</script>
<script src=”http://query.yahooapis.com/v1/public/yql?q=Select%20*%20from%20html%20where%20url%3D’http%3A%2F%2Fkr.news.yahoo.com%2Fservice%2Fnews%2Fshelllist.htm%3Flinkid%3D4%26newssetid%3D1352′%20and%20xpath%3D’%2Fhtml%2Fbody%2Fdiv%2Fdiv%5B2%5D%2Fdiv%2Fdiv%2Fdiv%5B2%5D%2Fdiv%5B2%5D%2Fdl’&format=json&callback=proc_news “>
</script>

위 function은 console에서 보았던 것과 동일한 데이터를 파라미터 “o”를 통해 사용할 수 있게 합니다.
따라서 필요한 데이터에 접근하는 것은 o.query.results.dl과 같이 정말 쉽게 할 수 있습니다.
이번 예제에서의 결과 object는 다음과 같은 구조입니다.