Script / CSS

G1sUtil.js

G1sBlogger.js

CSS

G1sNavigationList.js

Posts List


2012년 3월 8일 목요일

[Daum Api] 다음 검색 API 소스 코드.

다음DNA에서 제공하는 검색 api를 이용해 만든 코드입니다. 이를 통한 예제는 [다음 api] 검색 api 예제. 에서 보실 수 있습니다.
css나 기타 상세한 것은 다루지 않은 기본적인 것들로만 이루어진 예제이고...
특별히 각각의 api를 분리해서 사용할 수 있도록 객체별로 나누어서 만들었습니다.
이 코드에서는 다음에서 제공하는 demo apikey로 작성했으나(이것만으로도 작동하는 것을 확인 하실 수 있습니다.) 실제 개발하신다면 간단한 과정을 거쳐 개인 api키를 발급 받아서 이용하실 수 있습니다. 검색 api 발급 받기

HTML 태그
<div id="daumForm">
    <input id="daumSearch" type="text" value="다음" onkeydown="javascript:if(event.keyCode == 13) daumSearch.search();"/>
    <input id="daumSubmit" onclick="javascript:daumSearch.search()" 
        type="submit" value="검색" />
</div>
<div id="daumView">
    <h3>비디오 검색 결과</h3>
        <div id="daumVclip"></div>
    <h3>이미지 검색 결과</h3>
        <div id="daumImage"></div>
    <h3>게시판 검색 결과</h3>
        <div id="daumBoard"></div>
    <h3>블로그 검색 결과</h3>
        <div id="daumBlog"></div>
    <h3>웹 검색 결과</h3>
        <div id="daumWeb"></div>
    <h3>지식 검색 결과</h3>
        <div id="daumKnowledge"></div>
    <h3>책 검색 결과</h3>
        <div id="daumBook"></div>
    <h3>카페 검색 결과</h3>
        <div id="daumCafe"></div>
</div>
<div id="daumScript">
    <div id="daumVclipScript"></div>
    <div id="daumImageScript"></div>
    <div id="daumBoardScript"></div>
    <div id="daumBlogScript"></div>
    <div id="daumWebScript"></div>
    <div id="daumKnowledgeScript"></div>
    <div id="daumBookScript"></div>
    <div id="daumCafeScript"></div>
</div>
각 객체들을 이용해 검색을 통제하는 base 객체.
<script language="Javascript" type="text/javascript">
    var daumSearch = {
        /** 초기화. **/
        init : function(){
            this.apikey = "DAUM_SEARCH_DEMO_APIKEY";
            this.q = document.getElementById('daumSearch');
            
            //검색 객체들 초기화.
            daumVclip.init(6);
            daumImage.init(6);
            daumBoard.init(5);
            daumBlog.init(5);
            daumWeb.init(5);
            daumKnowledge.init(5);
            daumBook.init(5);
            daumCafe.init(5);
        },
        /** 검색 **/
        search : function(){
            this.query = '?apikey=' + this.apikey 
                + '&output=json&q=' + encodeURI(this.q.value);
            
            //검색어에 맞게 각각 첫페이지를 띄움.
            daumVclip.pingSearch(1);
            daumImage.pingSearch(1);
            daumBoard.pingSearch(1);
            daumBlog.pingSearch(1);
            daumWeb.pingSearch(1);
            daumKnowledge.pingSearch(1);
            daumBook.pingSearch(1);
            daumCafe.pingSearch(1);
        },
        /** callback 함수 호출. **/
        pingSearch : function(ds, api, pgno, callback, result){
            ds.innerHTML = "";
            
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.charset = 'utf-8';
            s.src = api + this.query + '&pageno=' + pgno 
                + '&callback=' + callback + '&result='+result ; 
            
            ds.appendChild(s);
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(search, z){
            var ul = document.createElement('ul');
            
            for(var i=0; i<z.channel.item.length; i++){
                //title 정보를 얻음.
                var title = document.createElement('h4');
                var a = document.createElement('a');
                a.href = z.channel.item[i].link;
                a.target = '_blank';
                a.innerHTML = this.escapeHtml(z.channel.item[i].title) 
                    + '<br'+'>';

                title.appendChild(a);
                
                //세부 내용을 얻음.
                var content = search.getContent(z.channel.item[i]);
                
                //리스트 화.
                ul.appendChild(search.getSearch(title,content));
            }
            return ul;
        },
        /** PageNumber를 그려줌. **/
        pongPgno : function(pgno,max,func){
            var maxpg = (pgno+6<max)?pgno+6:max;
            
            var div = document.createElement('div');
            div.align = 'center';
            div.style.clear = 'left'; 
            
            //좌측 화살표.
            var left = document.createElement('a');
            left.innerHTML = "<< ";
            if(pgno-5>1)
                this.onMouseDown(left,pgno-6,func);
            else{
                left.style.color = "gray";
                left.style.cursor = "default";
            }
            div.appendChild(left);
            
            //페이지 번호.
            for(var i=(pgno-5>1)?pgno-5:1; i<maxpg; i++){
                var a = document.createElement('a');
                a.innerHTML = " " + i + " ";

                if(i==pgno){
                    a.style.color = 'yellow';
                    a.style.cursor = "default";
                }
                else
                    this.onMouseDown(a,i,func);
                
                div.appendChild(a);
            }
            
            //우측 화살표.
            var right = document.createElement('a');
            right.innerHTML = ">> ";
            if(pgno+6<max)
                this.onMouseDown(right,pgno+7,func);
            else{
                right.style.color = "gray";
                right.style.cursor = "default";
            }
            div.appendChild(right);
            
            return div;
        },
        /** 마우스 이벤트. **/
        onMouseDown: function(a, i, func){
            a.style.cursor = 'pointer';
            a.onmousedown = function(){
                func(i);
            }
        },
        /** HTML태그 안 먹게 하는 함수 **/
        escapeHtml: function (str) {
            str = str.replace(/&amp;/g, "&");
            str = str.replace(/&lt;/g, "<");
            str = str.replace(/&gt;/g, ">");
            return str;
        }
    };

    window.onload = function () {
        daumSearch.init();
        daumSearch.search();
    };
</script>
비디오 검색.
<script language="Javascript" type="text/javascript">
    /** 비디오 검색. **/
    var daumVclip = {
        /** 초기화. **/
        init : function(r){
            daumVclip.api = 'http://apis.daum.net/search/vclip';
            daumVclip.pgno = 1;
            daumVclip.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumVclip.pgno = pgno;
            
            var ds = document.getElementById('daumVclipScript');
            var callback = 'daumVclip.pongSearch';
            
            daumSearch.pingSearch(ds, daumVclip.api, daumVclip.pgno, 
                callback, daumVclip.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumVclip');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumVclip.pgno, 
                z.channel.totalCount/daumVclip.result,daumVclip.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            li.style.height = "230px";
            li.style.width='150px';
            li.style.float='left';
            
            content.appendChild(document.createElement('br'));
            li.appendChild(content);
            li.appendChild(title);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var a = document.createElement('a');
           var img = document.createElement('img');
           
           a.target = '_blank';
           a.href = z.player_url;
           
           img.height = 100;
           img.width = 100;
           img.src = z.thumbnail;
           
           a.appendChild(img);
           
           return a;
       }
    };
</script>
이미지 검색
<script language="Javascript" type="text/javascript">
    /** 이미지 검색. **/
    var daumImage = {
        /** 초기화. **/
        init : function(r){
            daumImage.api = 'http://apis.daum.net/search/image';
            daumImage.pgno = 1;
            daumImage.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumImage.pgno = pgno;
            
            var ds = document.getElementById('daumImageScript');
            var callback = 'daumImage.pongSearch';
            
            daumSearch.pingSearch(ds,daumImage.api, 
                daumImage.pgno, callback, daumImage.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumImage');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumImage.pgno, 
                z.channel.totalCount/daumImage.result,daumImage.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            li.style.height = "170px";
            li.style.width='150px';
            li.style.float='left';
            
            content.appendChild(document.createElement('br'));
            li.appendChild(content);
            li.appendChild(title);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var a = document.createElement('a');
           var img = document.createElement('img');
           
           a.target = '_blank';
           a.href = z.image;
           
           img.height = 100;
           img.width = 100;
           img.src = z.thumbnail;
           
           a.appendChild(img);
           
           return a;
       }
    };
</script>
게시판 검색
<script language="Javascript" type="text/javascript">
    /** 게시판 검색. **/
    var daumBoard = {
        /** 초기화. **/
        init : function(r){
            daumBoard.api = 'http://apis.daum.net/search/board';
            daumBoard.pgno = 1;
            daumBoard.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumBoard.pgno = pgno;
            
            var ds = document.getElementById('daumBoardScript');
            var callback = 'daumBoard.pongSearch';
            
            daumSearch.pingSearch(ds,daumBoard.api, daumBoard.pgno, 
                callback, daumBoard.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumBoard');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumBoard.pgno, 
                z.channel.totalCount/daumBoard.result,daumBoard.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var a = document.createElement('a');
           
           a.target = '_blank';
           a.href = z.link;
           a.innerHTML = daumSearch.escapeHtml(z.description)
           
           return a;
       }
    };
</script>
블로그 검색
<script language="Javascript" type="text/javascript">
    /** 블로그 검색. **/
    var daumBlog = {
        /** 초기화. **/
        init : function(r){
            daumBlog.api = 'http://apis.daum.net/search/blog';
            daumBlog.pgno = 1;
            daumBlog.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumBlog.pgno = pgno;
            
            var ds = document.getElementById('daumBlogScript');
            var callback = 'daumBlog.pongSearch';
            
            daumSearch.pingSearch(ds,daumBlog.api, daumBlog.pgno, 
                callback, daumBlog.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumBlog');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumBlog.pgno, 
                z.channel.totalCount/daumBlog.result,daumBlog.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var a = document.createElement('a');
           
           a.target = '_blank';
           a.href = z.link;
           a.innerHTML = daumSearch.escapeHtml(z.description);
           
           return a;
       }
    };
</script>
웹 검색
<script language="Javascript" type="text/javascript">
    /** 웹 검색. **/
    var daumWeb = {
        /** 초기화. **/
        init : function(r){
            daumWeb.api = 'http://apis.daum.net/search/web';
            daumWeb.pgno = 1;
            daumWeb.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumWeb.pgno = pgno;
            
            var ds = document.getElementById('daumWebScript');
            var callback = 'daumWeb.pongSearch';
            
            daumSearch.pingSearch(ds,daumWeb.api, daumWeb.pgno, 
                callback, daumWeb.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumWeb');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumWeb.pgno, 
                z.channel.totalCount/daumWeb.result,daumWeb.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var a = document.createElement('a');
           
           a.target = '_blank';
           a.href = z.link;
           a.innerHTML = daumSearch.escapeHtml(z.description);
           
           return a;
       }
    };
</script>
지식 검색
<script language="Javascript" type="text/javascript">  
    /** 지식 검색. **/  
    var daumKnowledge = {  
        /** 초기화. **/  
        init : function(r){  
            daumKnowledge.api = 'http://apis.daum.net/search/knowledge';  
            daumKnowledge.pgno = 1;  
            daumKnowledge.result = r;  
        },  
        /** callback 함수 호출. **/  
        pingSearch : function(pgno){  
            daumKnowledge.pgno = pgno;  
              
            var ds = document.getElementById('daumKnowledgeScript');  
            var callback = 'daumKnowledge.pongSearch';  
              
            daumSearch.pingSearch(ds,daumKnowledge.api, daumKnowledge.pgno,   
                callback, daumKnowledge.result);    
        },  
        /** 결과를 뿌려줌. **/  
        pongSearch : function(z){  
            var dv = document.getElementById('daumKnowledge');  
            dv.innerHTML ="";  
            dv.appendChild(daumSearch.pongSearch(this, z));  
            dv.appendChild(daumSearch.pongPgno(daumKnowledge.pgno,   
            z.channel.totalCount/daumKnowledge.result,daumKnowledge.pingSearch));  
        },  
        /** li setting **/  
        getSearch : function(title,content){  
            var li = document.createElement('li');  
              
            li.appendChild(title);  
            li.appendChild(content);  
              
            return li;  
        },  
        /** 설명 return **/  
       getContent : function(z){  
           var div = document.createElement('div');  
           var a = document.createElement('a');  
           var b = document.createElement('b');  
           var ba = document.createElement('a');  
             
           a.target = '_blank';  
           a.href = z.link;  
           a.innerHTML = daumSearch.escapeHtml(z.description) + '<br'+'>';  
             
           ba.target = '_blank';  
           ba.href = z.categoryurl;  
           ba.innerHTML = daumSearch.escapeHtml(z.category);  
             
           b.appendChild(ba);  
             
           div.appendChild(a);  
           div.appendChild(b);  
             
           return div;  
       }  
    };  
</script>
책 검색
<script language="Javascript" type="text/javascript">
    /** 책 검색. **/
    var daumBook = {
        /** 초기화. **/
        init : function(r){
            daumBook.api = 'http://apis.daum.net/search/book';
            daumBook.pgno = 1;
            daumBook.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumBook.pgno = pgno;
            
            var ds = document.getElementById('daumBookScript');
            var callback = 'daumBook.pongSearch';
            
            daumSearch.pingSearch(ds,daumBook.api, daumBook.pgno, 
                callback, daumBook.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumBook');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumBook.pgno, 
                z.channel.totalCount/daumBook.result,daumBook.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var div = document.createElement('div');
           var a = document.createElement('a');
           var b = document.createElement('b');
           var ba1 = document.createElement('a');
           var ba2 = document.createElement('a');
           var ba3 = document.createElement('a');
           var ba4 = document.createElement('a');
           var img = document.createElement('img');
           var aimg = document.createElement('a');
           
           img.src = z.cover_s_url;
           
           aimg.target = '_blank';
           aimg.imghref = z.cover_s_url;
           aimg.style.float = 'left';
                      
           aimg.appendChild(img);
           
           a.target = '_blank';
           a.href = z.link;
           a.style.clear = 'left';
           a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
           
           ba1.innerHTML = '저자 : ' 
                + daumSearch.escapeHtml(z.author) + '<'+'br/>';
           ba2.innerHTML = '출판사 : ' 
                + daumSearch.escapeHtml(z.pub_nm) + '<'+'br/>';
           ba3.innerHTML = '카테고리 : ' 
                + daumSearch.escapeHtml(z.category) + '<'+'br/>';
           ba4.innerHTML = '가격 : ' 
                + daumSearch.escapeHtml(z.sale_price) + '<'+'br/>';
           
           b.appendChild(ba1);
           b.appendChild(ba2);
           b.appendChild(ba3);
           b.appendChild(ba4);
           
           div.appendChild(aimg);
           div.appendChild(b);
           div.appendChild(a);
                      
           return div;
       }
    };
</script>
카페 검색
<script language="Javascript" type="text/javascript">
    /** 카페 검색. **/
    var daumCafe = {
        /** 초기화. **/
        init : function(r){
            daumCafe.api = 'http://apis.daum.net/search/cafe';
            daumCafe.pgno = 1;
            daumCafe.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumCafe.pgno = pgno;
            
            var ds = document.getElementById('daumCafeScript');
            var callback = 'daumCafe.pongSearch';
            
            daumSearch.pingSearch(ds,daumCafe.api, daumCafe.pgno, 
                callback, daumCafe.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumCafe');
            dv.innerHTML ="";
            dv.appendChild(daumSearch.pongSearch(this, z));
            dv.appendChild(daumSearch.pongPgno(daumCafe.pgno,
                z.channel.totalCount/daumCafe.result,daumCafe.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var div = document.createElement('div');
           var a = document.createElement('a');
           var b = document.createElement('b');
           var ba = document.createElement('a');
           
           a.target = '_blank';
           a.href = z.link;
           a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
           
           ba.target = '_blank';
           ba.href = z.cafeurl;
           ba.innerHTML = daumSearch.escapeHtml(z.cafeName);
           
           b.appendChild(ba);
           
           div.appendChild(a);
           div.appendChild(b);
           
           return div;
       }
    };
</script>

댓글 5개:

  1. 저기 엄청 급해서 그런데요 저희가 블로그님꺼 소스를 따왔는데 저희는 이미지에 대한 제목에 ♬ 간단하고 맛있는 두부요리 2가지 이런식으로 이런게 떠요 이거 지우는 방법을 알수 있으까요?

    답글삭제
    답글
    1. 죄송합니다. 급하시다고 했는데 확인이 늦었네요.
      해당 내용은 이미지가 들어간 블로그나 사이트의 제목이 나오는 걸 겁니다. 텍스트를 없애고 이미지만 나오게 하실려면 getSearch 에 있는 li.appendChild(title); 를 지우시면 됩니다. 제대로 할려면 관련 되어있는 다른 것들도 정리를 해줘야 하긴 하지만요....

      삭제
  2. 지금 제가 글쓰고 있는 한 줄 게시판 API 를 사용하고 싶은데 방법을 알수 있을까요?

    답글삭제
    답글
    1. 댓글 란을 말씀하시는 건가요? 댓글은 Blogger에서 제공하는 기본 기능입니다. 따로 API로 제공되지는 않을것 같네요..

      삭제
  3. 어떻게 응용을 해야할까요 ?
    html 태그는 . html 확장자로 하고
    나머지들은 뭐 어떻게 해야하나요 ?

    답글삭제