YQL을 이용해 웹사이트 스크랩 위젯 만들기
오늘은 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는 다음과 같은 구조입니다.
이제 남은 기능적인 부분들은 평이하고 쉬운 DOM scripting이므로
주석 문들을 참고하세요.
이제 여러분들은 약간의 스타일변경으로 “야후!코리아(어느 사이트든)”가 제공하는
실시간 뉴스 속보를 위젯으로 만들수 있게되었습니다. 야호!
모든 HTML구조 및 CSS등을 확인하려면 DEMO 페이지의 소스코드를 확인 하세요.
야후 개발자 네트워크 손경성
최근 댓글