스크린샷 2014-05-12 오후 3.20.52

 

구글 트랜드는 심플하고 세련되게 검색어들을 나열하여 현재 네티즌들이 어떤 것에 관심이 있는지 알려준다.

화면 보호기로도 사용할 수 있어 활용도가 높다.

그런데, 국내에서는 구글 검색엔진을 많이 사용하지 않아서인지 가만히 보다보면 오래된 내용이 올라오기도 한다.

우선 구현에 앞서 구글 트랜드의 불편한 점들을 나열해 보았다.

 

1) 국내 유저가 적어 국내 트랜드를 읽어낼 수 없다. -> 네이버로 바꾸면 되겠군

2) 검색어만 보다가 보면 저 말이 왜 올라왔는지 무지무지 궁금하다. 상세내용을 보고 싶다.

3) 사진이 나와주면 더 좋겠다. 보통 검색할 때 사진을 많이들 참조하니..

4) 이왕이면 사진, 뉴스, 블로그 모두 요약해서 보여주면 좋겠다.

 

가능성 알아보기

네이버에서도 오픈API를 지원하니 어디까지 지원되는지 보자.

네이버 개발자 센터(http://developer.naver.com) 상단 메뉴에 오픈API 메뉴가 있다.

스크린샷 2014-05-12 오후 3.41.50

 

검색을 할 것이니 “검색 API”로 들어왔다. 여러가지 검색옵션들이 보이는데..

처리한도가 25,000건이란다. 아껴써야겠다.

블로그, 뉴스, 이미지 모두 검색할 수 있고, “실시간 급상승어” 항목도 있었는데 내가 못찾는건지 메뉴에는 안나와있다.

참고로 실시간 급상승어 URL은 아래와 같다.

http://openapi.naver.com/search?key=키&query=nexearch&target=rank

오픈API를 사용하려면 키를 발급받아 사용해야 한다. 키 발급은 우측 상단에 “키발급/관리”에서 할 수 있다.

 

구현 계획

우선 10개의 “실시간 급상승어” 목록을 가져온 다음 각 “검색어”를 가지고 이미지, 뉴스, 블로그의 내용(제목)을 가져와 출력한다.

내용이 많을 수 있으므로 화면에는 10개의 결과를 돌아가면서 출력할 것이다.

1번 쿼리하는데, 모든 쿼리를 합하면 25건 가량된다. 1분에 1번 쿼리한다면 하루 36,000건을 소진해야하므로 부족하다.

5분 정도로 하면 7200건이면 되지만, 나혼자 사용한다면 상관없지만 지인들이나 사이트 방문자들에게도 서비스하려면 하루 25,000개의 쿼리로는 부족하다.

결과를 공유하는 방법을 사용하기로 했다.

누군가 접속해서 쿼리를 소진하면 그 쿼리 결과를 웹서버에 저장해 뒀다가 5분 이상 경과했을 때만 저장된 것을 업데이트 하자.

그러면 여러명이 접속해도 “최대 7200건“이 된다.

 

구현

구현에는 php와 javascript를 이용하였다.

1. 실시간 급상승어 가져오기 (search_save.php)

<?php

$strRes = HttpRequest(“openapi.naver.com”, “/search?key=”.$strKey.”&query=nexearch&target=rank”);

if( $strRes == “” ){ return; }

$parser = new XMLParser($strRes);
$parser->Parse();
$arRank[0] = $parser->document->item[0]->r1[0]->k[0]->tagData;
$arRank[1] = $parser->document->item[0]->r2[0]->k[0]->tagData;

$arRank[9] = $parser->document->item[0]->r10[0]->k[0]->tagData;

?>

2. 실시간 급상승어로 상세 검색결과 얻기 (search_save.php)

// 오류 방지를 위해 공문자를 제거하자. (URL코드 변환 방법도 좋다.)

$strWord = str_replace(” “, “”, $arRank[$i]);

//////////////////////// Image ////////////////////////

$strUrl = “/search?key=”.$strKey.”&query=”.$strWord.”&target=image&start=1&display=5″;
$strNewRes = HttpRequest(“openapi.naver.com”, $strUrl);
$parser2 = new XMLParser($strNewRes);
$parser2->Parse();

$strNewsDetail .= ‘<div class=”image_detail”>’;
for($j=0 ; $j<5 ; $j++)
{
$strImageURL = $parser2->document->channel[0]->item[$j]->link[0]->tagData;
$strNewsDetail .= “<div style=\”background-image:url(‘”.$strImageURL.”‘);\” class=\”image_detail_src\”></div>”;
}
$strNewsDetail .= ‘</div>’;

//////////////////////// News ////////////////////////
$strUrl = “/search?key=”.$strKey.”&query=”.$strWord.”&target=blog&sort=sim&start=1&display=5″;
$strNewRes = HttpRequest(“openapi.naver.com”, $strUrl);
$parser2 = new XMLParser($strNewRes);
$parser2->Parse();

$strNewsDetail .= ‘<div class=”news_detail”>’;
$strNewsDetail .= ‘<div class=”news_detail_title”>NEWS</div>’;
for($j=0 ; $j<5 ; $j++)
{
$strTitle = $parser2->document->channel[0]->item[$j]->title[0]->tagData;
$strLink = $parser2->document->channel[0]->item[$j]->link[0]->tagData;
$strNewsDetail .= ‘<div class=”news_detail_item”><a href=”‘.$strLink.'” target=”_blank”>’.$strTitle.'</a></div>’;
}
$strNewsDetail .= ‘</div>’;

//////////////////////// Blog ////////////////////////
$strUrl = “/search?key=”.$strKey.”&query=”.$strWord.”&target=news&start=1&display=5″;
$strNewRes = HttpRequest(“openapi.naver.com”, $strUrl);
$parser2 = new XMLParser($strNewRes);
$parser2->Parse();

$strNewsDetail .= ‘<div class=”blog_detail”>’;
$strNewsDetail .= ‘<div class=”blog_detail_title”>BLOG</div>’;
for($j=0 ; $j<5 ; $j++)
{
$strTitle = $parser2->document->channel[0]->item[$j]->title[0]->tagData;
$strLink = $parser2->document->channel[0]->item[$j]->link[0]->tagData;
$strNewsDetail .= ‘<div class=”blog_detail_item”><a href=”‘.$strLink.'” target=”_blank”>’.$strTitle.'</a></div>’;
}

3. 검색 결과 파일로 저장하기 (search_save.php)

// 함수를 따로 만들어 주었다.

function SetSavedNews($strValue)
{
$fp = fopen(“news_save.txt”,”w”);
fwrite($fp, $strValue);
fclose($fp);
}

// 저장된 내용을 가져올 때에는

function GetSavedNews()
{
$fp = fopen(“news_save.txt”,”r”);
if( $fp == null ){ return “”; }

while(!feof($fp)){
$data .= fgets($fp);
}

fclose($fp);

return $data;
}

4. 5분 경과시에만 새로 쿼리하기 (search_save.php)

<?

// 현재시간 확인
$strNowTime = GetNowTime();

// 최종 업데이트 시간 확인
$strOldTime = GetUpdateTime();

if( GetTimeGap($strOldTime, $strNowTime) > 4 )
{
// 새 뉴스 가져오기
$strNews = GetNews();

// 파일로 덮어쓰기기
SetSavedNews( $strNews );

// 업데이트 시간 갱신
SetUpdateTime($strNowTime);
}
else{
// 저장 뉴스 가져오기
$strNews = GetSavedNews();
}

// 출력
echo $strNews;

?>

 

5. 브라우저에서 주기적으로 쿼리 확인하기 (index.php)

function UpdateNews()
{
clearTimeout(g_hDetailUpdateTimer);

$.ajax({//Make the Ajax Request
type: “GET”,
url: “http://domain.com/search_save.php”,
data: “”,
beforeSend: function() {
},
contentType: “application/x-www-form-urlencoded; charset=utf-8”,
success: function(html){
$(“#data_request”).html(html);
}
});

var d = new Date();
g_nUpdateTimeH = d.getHours();
g_nUpdateTimeM = d.getMinutes();

g_nItemPos = -1;

// 상세 결과 돌아가면서 보여주기
g_hDetailUpdateTimer = setInterval(“ShowNextDetail()”, 5000);

return false;
}

 

function ShowNextDetail()
{
nItemPos = g_nItemPos + 1;

// 10개 모두 돌아가면서 보여주었으면
if( nItemPos > 9 )
{
nItemPos = 0;
var d = new Date();

// 최종 쿼리 시간과 현재 시간의 차이를 구해서
var nTimeGapM = GetTimeGap(g_nUpdateTimeH, g_nUpdateTimeM, d.getHours(), d.getMinutes());

// 4분 초과(5분)이 되었으면
if( nTimeGapM > 4 )
{

// 서버에서 쿼리를 다시 가져올 것
UpdateNews();
return;
}
}

ShowDetail(nItemPos);

return false;
}

 

실행

http://trend.icansoft.com

스크린샷 2014-05-12 오후 4.50.42

화려한 애니메이션을 주려다가 간단히 fadein 만 넣었다.

화면 한켠에 띄워두고 웹써핑이나 해볼까~

 

 

 


3 Comments

kimsreal · 2014년 5월 12일 at 22:11

헉… 네이버에서 5월 10일자로 실시간 급상승어를 포함한 몇몇 API 서비스를 중단하는군요. 좀 써볼려고했는데.. TT 몇시간전에 블로깅 할 때만해도 작동했었는데.. 아쉽네요. 다음이나 구글로 갈아타야겠군요..

답글 남기기

Avatar placeholder