'네이버'에 해당되는 글 5건
- 2009/12/15 다음 로드뷰 네이버 실시간 검색어에 핫(?)한 이유로 오르다
- 2008/08/12 오즈폰(터치웹폰)용 포탈 실시간 검색어 순위 사이트 (1)
- 2008/06/16 네이버,다음,야후,엠파스 실시간 검색어를 한 눈에!! (2)
- 2007/06/26 검색 어디서하세요? 듀얼검색 gooum.com 아시나요? (4)
- 2007/06/26 네이버,다음 실시간 검색어 내 블로그에 붙이기 (8)
오즈폰용 버전으로 만들었습니다. (터치웹폰 및 캔유 오즈폰에서 모두 볼 수 있습니다.)
오즈폰용 사이트: http://xiles.net/ozrank
PC용 사이트: http://xiles.net/ranko
아이팟/아이폰용 사이트: http://xiles.net/ranko/m
아래는 터치웹폰(아르고폰)에서 보이는 화면입니다.
야후는 제대로 보이지가 않아 빼고 3개만 한 화면에 넣었습니다.
최근 포탈 사이트들에서 실시간 검색어는 꽤 큰 영향력을 가지고 있습니다. 조작설을 비롯해서 말들도 많고, 무언가 갑자기 순위들이 팍팍 바뀌기도 합니다.
네이버,다음,야후,엠파스의 실시간 검색어를 한 페이지에서 볼 수 있도록 했는데, 포탈별로 실시간 검색어가 상당히 상이 할 때도 많고, 정말 큰 사건인 경우 4개 포탈이 다 동일한 1위를 보여줄 때도 있고 재밌습니다.
http://xiles.net/ranko 에서 한 페이지 내에 아래 이미지와 같이 4개 포탈의 실시간 검색어를 볼 수 있습니다.
* 예전에 http://gooum.com 에 만들어 놓았던 것인데, Gooum 을 닫게되면서 옮겨왔습니다.
최근 와이드 모니터를 많이 사용하는데, 와이드 모니터를 제대로 사용해보세요~
http://gooum.com 에서는 두 개의 검색엔진에서 한번에 검색해서 양쪽에 나누어 볼 수 있습니다.
구글+다음, 구글+네이버, 다음+네이버, 구글+판도라, 구글+플리커 중 선택해서 한 번에 검색으로 두 결과를 바로 한 화면에서 볼 수 있습니다.
검색어를 한번만 치고 바로 양쪽에서 검색이 되어 쉽게 검색결과를 비교해볼수도 있고 다양한 검색 결과를 볼 수 있습니다. 이미지 같은 것을 검색해 보면서 비교해보는 것도 재밌습니다. (현재는 구글+다음, 구글+네이버, 다음+네이버 조합으로 볼 수 있습니다.)
globe로 이미지 검색해 본 결과 (구글 + 다음)
GahooYoogle.com에서 영감을 얻어 우리나라에서 많이 쓰는 다음과 네이버도 이렇게 하면 좋을 것 같아서 한 번 만들어봤습니다. 네이버는 iframe이나 내부 프레임에 못넣도록 되어 있어 우선은 좀 엉성하지만, Naver OpenAPI를 이용해서 구현해놓았습니다.
지금은 창만 나뉘어서 검색해주는 형태이지만, 네이버의 경우 OpenAPI를 사용한 것인만큼 좀 더 나은 검색 결과 레이아웃이나.. 검색하는데 도움이 되는 다른 아이디어들을 적용해볼 생각입니다. 그리고 기타 검색엔진 자체 외에 검색을 효율적으로 할 수 있는 다양한 UI들에 대해 생각해보고 토론할 수 있는 곳으로 만들어보고자 합니다.
gooum.com은 각 검색엔진의 검색결과에 대한 어떤 왜곡도 하지 않고, 단지 한 번 검색에 나누어 한번에 볼 수 있는 프레임을 보여줍니다. 상업적목적으로 이용하는 것이 아니며, 각 검색엔진의 이용에 어떤 영향을 미치고자 하는 것도 아닌 오직 효율적인 검색, 편한 검색을 위해 만들어졌습니다. (어떠한 ActiveX 등도 설치하지 않습니다.)
이제 와이드 모니터 제대로 써먹어보세요~!!
Gooum.com 첫페이지에서는 다음과 네이버의 실시간 검색어를 한 눈에 비교해 볼 수 있습니다. (네이버는 OpenAPI사용해서 구현, 아직 FireFox에서는 제대로 안돌아갑니다.)
댓글을 달아 주세요
우선 이 글에서는 PHP 와 AJAX 초보이신 분들을 대상으로 Naver 실시간 검색어를 구현하는 것에 대해 간단히 설명을 하고자 함을 알려드립니다. 다음 실시간 검색어는 등록만 하고 제공되는 코드만 입력하면 되므로 아주 간단!
(바로 올려서 사용가능한 풀 소스 및 페이지를 제공하진 않습니다.)
우선 구현한 모습은 http://gooum.com 에서 볼 수 있습니다.
다음 실시간 검색어 붙이기
다음은 http://apis.daum.net/register/ajaxapi.daum?t=3 요 페이지에서 등록을 하면 스크립트 코드를 하나 알려주는데 그것을 자신의 페이지에 넣고 싶은 곳에 붙여넣기만 하면 됩니다.
근데 중요한 것은 등록할 때 사용할 자신의 블로그/홈페이지 주소를 적으라고 하는데, 그 때 적은 그 주소에 있는 페이지에서만 사용이 됩니다.
예로.. gooum.com 을 입력하고, 받은 코드를 사용했더니 www.gooum.com 으로 들어오는 경우에는 사용이 안됐습니다. 물론 전혀다른 도메인에서도 사용할 수 없습니다.
그래서 저는 여러번 등록해서 신청해도 되길래 www.gooum.com 용으로 또 등록해서 두 개를 사용해서 처리했습니다.
Naver 실시간 검색어 만들기
우선 네이버의 경우 Naver Open API를 사용해야 하고, 이를 위해서는 http://openapi.naver.com 에서 openapi를 사용하겠다는 등록을 하고 키를 받은 후 이 키를 사용해야 합니다. 이 키는 아래 설명 중 naver_queryrank.php 에서 사용됩니다.
등록을 했다면, 아래와 같이 페이지를 만들면 됩니다.
우선 실시간 검색어를 붙일 페이지에 아래와 같은 자바스크립트 함수를 만듭니다.
몇 초마다 반복해서 순위를 갱신할 수 있도록 해줍니다. 그리고 이 함수를 body의 onload이벤트에 연결합니다. (예: <body onload="updateList()">)
위에서 updateNaverRank() 함수에서는 AJAX를 이용해서 검색어 순위 정보를 얻어와서 페이지에 뿌려주는 역할을 합니다. 실제 정보를 받아온 후 처리는 request.onreadystatechange에 연결된 HandleStateChange 함수에서 처리합니다. 그리고 네이버쪽에 연결해서 정보를 가져오는 것은 naver_queryrank.php 에서 처리하게 됩니다.
HandleStateChange 부분을 보면, 네이버와 연결해 받아온 xml 정보를 request.responseXML을 통해서 얻어옵니다. 그리고 xml에서 item 태그를 찾은 후 그 노드를 updateNaverRankList()에 넘겨줍니다. 이 함수에서 페이지의 내용을 업데이트 시켜줍니다.
실제로 가장 중요한 부분이라고 할 수 있는 네이버에 연결해서 정보를 받아오는 부분입니다.
위에서 설명한 것 처럼 , naver_queryrank.php 에서 이일을 하고 방식은 아래와 같습니다.
(request 는 XMLHttpRequest 객체)
request ----> naver_queryrank.php ----> Naver Open API
HandleStateChange() <---- <----
naver_queryrank.php의 소스는 아래와 같습니다.
처음에 OpenAPI 등록하면서 받은 키는 아래 소스에서 5번째 줄,
GET /search?key=요부분에다가 넣어주면 됩니다&query=nex...
마지막으로 실제로 페이지를 업데이트하는 updateNaverRankList() 함수에서는
아래와 같이 필요한 노드의 텍스트를 얻어와서 원하는 부분의 내용을 Javascript를 사용해서 바꾸어주면 됩니다. (K는 키워드, S는 순위증감, V는 순위증감 정도를 나타냅니다.)
i는 0~9까지 돌아가면서 처리하면 됩니다. (1위부터 10위까지)
K, S, V를 가지고,
미리 만들어놓은 페이지에 내용을 업데이트 해주면 됩니다.
예) getElementById("rank1").innerHTML = K ;
네이버 Open API 문서를 참고하면, 각 주제별 실시간 검색어를 얻어 오 수도 있습니다.
아래는 네이버 OpenAPI 문서에서 실시간 검색어 부분 내용을 캡쳐해온 것입니다.
더 자세한 내용은 http://openapi.naver.com 에서 보세요~
댓글을 달아 주세요
-
-
-
rocksea 2007/07/23 16:58 댓글주소 수정/삭제 댓글쓰기
저도 지금 님께서 올려주신 자료를토대로 한번해보았는데 문제가 두번째 파일의
request = GetRequestObject(); 객채가 필요합니다 라고나오네요...
그리고 제가 완전 생초짜라 마지막부분도 보면 실시간검색어가 출력 되는부분에 뭘 어떤식으로해야될지도
모르겠네요 ㅠㅠ 설명좀 부탁드려도될까요??
shimsonms1004@hotmail.com 혹시몰라 이메일주소도 남깁니다.
구경잘하고갑니다.^^-
xiles 2007/07/23 22:06 댓글주소 수정/삭제
GetRequestObject함수는 기본적으로 있는 것이 아니라 만들어서 사용하는건데 위에 본문에는 포함하지 않았었던 것입니다.
본문 처음에 언급했듯이 기본적으로 AJAX에 대해서 강좌를 우선 좀 보신 후에 해보셔야 좀 이해가 가실겁니다~
GetRequestObject함수는 아래와 같습니다.
function GetRequestObject()
{
var req = null;
if (typeof XMLHttpRequest != "undefined")
req = new XMLHttpRequest();
if (!req && typeof ActiveXObject != "undefined")
{
try
{
req=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
try {
req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
}
catch (e3)
{
req=null;
}
}
}
}
if(!req && window.createRequest)
req = window.createRequest();
if (!req)
alert("Request Object instantiation failed!");//this.DebugMessage("Request Object Instantiation failed.");
return req;
}
그리고 마지막에 출력되는 부분도 AJAX 기본 강좌를 조금 보시면 어떻게 처리해야 할 지 알 수 있으실 겁니다..
생초짜시라면 바로 이걸 보시기보다는 AJAX 기본 강좌를 한 번 본 후에..다시 이걸 만들어보세요..
성공하시길 빕니다~~^^;
-

댓글을 달아 주세요