Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

G1sTagList

Posts List

전체 리스트 ()

2012년 3월 8일 목요일

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

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

HTML 태그
  1. <div id="daumForm">
  2. <input id="daumSearch" type="text" value="다음" onkeydown="javascript:if(event.keyCode == 13) daumSearch.search();"/>
  3. <input id="daumSubmit" onclick="javascript:daumSearch.search()"
  4. type="submit" value="검색" />
  5. </div>
  6. <div id="daumView">
  7. <h3>비디오 검색 결과</h3>
  8. <div id="daumVclip"></div>
  9. <h3>이미지 검색 결과</h3>
  10. <div id="daumImage"></div>
  11. <h3>게시판 검색 결과</h3>
  12. <div id="daumBoard"></div>
  13. <h3>블로그 검색 결과</h3>
  14. <div id="daumBlog"></div>
  15. <h3>웹 검색 결과</h3>
  16. <div id="daumWeb"></div>
  17. <h3>지식 검색 결과</h3>
  18. <div id="daumKnowledge"></div>
  19. <h3>책 검색 결과</h3>
  20. <div id="daumBook"></div>
  21. <h3>카페 검색 결과</h3>
  22. <div id="daumCafe"></div>
  23. </div>
  24. <div id="daumScript">
  25. <div id="daumVclipScript"></div>
  26. <div id="daumImageScript"></div>
  27. <div id="daumBoardScript"></div>
  28. <div id="daumBlogScript"></div>
  29. <div id="daumWebScript"></div>
  30. <div id="daumKnowledgeScript"></div>
  31. <div id="daumBookScript"></div>
  32. <div id="daumCafeScript"></div>
  33. </div>
각 객체들을 이용해 검색을 통제하는 base 객체.
  1. <script language="Javascript" type="text/javascript">
  2. var daumSearch = {
  3. /** 초기화. **/
  4. init : function(){
  5. this.apikey = "DAUM_SEARCH_DEMO_APIKEY";
  6. this.q = document.getElementById('daumSearch');
  7. //검색 객체들 초기화.
  8. daumVclip.init(6);
  9. daumImage.init(6);
  10. daumBoard.init(5);
  11. daumBlog.init(5);
  12. daumWeb.init(5);
  13. daumKnowledge.init(5);
  14. daumBook.init(5);
  15. daumCafe.init(5);
  16. },
  17. /** 검색 **/
  18. search : function(){
  19. this.query = '?apikey=' + this.apikey
  20. + '&output=json&q=' + encodeURI(this.q.value);
  21. //검색어에 맞게 각각 첫페이지를 띄움.
  22. daumVclip.pingSearch(1);
  23. daumImage.pingSearch(1);
  24. daumBoard.pingSearch(1);
  25. daumBlog.pingSearch(1);
  26. daumWeb.pingSearch(1);
  27. daumKnowledge.pingSearch(1);
  28. daumBook.pingSearch(1);
  29. daumCafe.pingSearch(1);
  30. },
  31. /** callback 함수 호출. **/
  32. pingSearch : function(ds, api, pgno, callback, result){
  33. ds.innerHTML = "";
  34. var s = document.createElement('script');
  35. s.type = 'text/javascript';
  36. s.charset = 'utf-8';
  37. s.src = api + this.query + '&pageno=' + pgno
  38. + '&callback=' + callback + '&result='+result ;
  39. ds.appendChild(s);
  40. },
  41. /** 결과를 뿌려줌. **/
  42. pongSearch : function(search, z){
  43. var ul = document.createElement('ul');
  44. for(var i=0; i<z.channel.item.length; i++){
  45. //title 정보를 얻음.
  46. var title = document.createElement('h4');
  47. var a = document.createElement('a');
  48. a.href = z.channel.item[i].link;
  49. a.target = '_blank';
  50. a.innerHTML = this.escapeHtml(z.channel.item[i].title)
  51. + '<br'+'>';
  52.  
  53. title.appendChild(a);
  54. //세부 내용을 얻음.
  55. var content = search.getContent(z.channel.item[i]);
  56. //리스트 화.
  57. ul.appendChild(search.getSearch(title,content));
  58. }
  59. return ul;
  60. },
  61. /** PageNumber를 그려줌. **/
  62. pongPgno : function(pgno,max,func){
  63. var maxpg = (pgno+6<max)?pgno+6:max;
  64. var div = document.createElement('div');
  65. div.align = 'center';
  66. div.style.clear = 'left';
  67. //좌측 화살표.
  68. var left = document.createElement('a');
  69. left.innerHTML = "<< ";
  70. if(pgno-5>1)
  71. this.onMouseDown(left,pgno-6,func);
  72. else{
  73. left.style.color = "gray";
  74. left.style.cursor = "default";
  75. }
  76. div.appendChild(left);
  77. //페이지 번호.
  78. for(var i=(pgno-5>1)?pgno-5:1; i<maxpg; i++){
  79. var a = document.createElement('a');
  80. a.innerHTML = " " + i + " ";
  81.  
  82. if(i==pgno){
  83. a.style.color = 'yellow';
  84. a.style.cursor = "default";
  85. }
  86. else
  87. this.onMouseDown(a,i,func);
  88. div.appendChild(a);
  89. }
  90. //우측 화살표.
  91. var right = document.createElement('a');
  92. right.innerHTML = ">> ";
  93. if(pgno+6<max)
  94. this.onMouseDown(right,pgno+7,func);
  95. else{
  96. right.style.color = "gray";
  97. right.style.cursor = "default";
  98. }
  99. div.appendChild(right);
  100. return div;
  101. },
  102. /** 마우스 이벤트. **/
  103. onMouseDown: function(a, i, func){
  104. a.style.cursor = 'pointer';
  105. a.onmousedown = function(){
  106. func(i);
  107. }
  108. },
  109. /** HTML태그 안 먹게 하는 함수 **/
  110. escapeHtml: function (str) {
  111. str = str.replace(/&amp;/g, "&");
  112. str = str.replace(/&lt;/g, "<");
  113. str = str.replace(/&gt;/g, ">");
  114. return str;
  115. }
  116. };
  117.  
  118. window.onload = function () {
  119. daumSearch.init();
  120. daumSearch.search();
  121. };
  122. </script>
비디오 검색.
  1. <script language="Javascript" type="text/javascript">
  2. /** 비디오 검색. **/
  3. var daumVclip = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumVclip.api = 'http://apis.daum.net/search/vclip';
  7. daumVclip.pgno = 1;
  8. daumVclip.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumVclip.pgno = pgno;
  13. var ds = document.getElementById('daumVclipScript');
  14. var callback = 'daumVclip.pongSearch';
  15. daumSearch.pingSearch(ds, daumVclip.api, daumVclip.pgno,
  16. callback, daumVclip.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumVclip');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumVclip.pgno,
  24. z.channel.totalCount/daumVclip.result,daumVclip.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.style.height = "230px";
  30. li.style.width='150px';
  31. li.style.float='left';
  32. content.appendChild(document.createElement('br'));
  33. li.appendChild(content);
  34. li.appendChild(title);
  35. return li;
  36. },
  37. /** 설명 return **/
  38. getContent : function(z){
  39. var a = document.createElement('a');
  40. var img = document.createElement('img');
  41. a.target = '_blank';
  42. a.href = z.player_url;
  43. img.height = 100;
  44. img.width = 100;
  45. img.src = z.thumbnail;
  46. a.appendChild(img);
  47. return a;
  48. }
  49. };
  50. </script>
이미지 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 이미지 검색. **/
  3. var daumImage = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumImage.api = 'http://apis.daum.net/search/image';
  7. daumImage.pgno = 1;
  8. daumImage.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumImage.pgno = pgno;
  13. var ds = document.getElementById('daumImageScript');
  14. var callback = 'daumImage.pongSearch';
  15. daumSearch.pingSearch(ds,daumImage.api,
  16. daumImage.pgno, callback, daumImage.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumImage');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumImage.pgno,
  24. z.channel.totalCount/daumImage.result,daumImage.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.style.height = "170px";
  30. li.style.width='150px';
  31. li.style.float='left';
  32. content.appendChild(document.createElement('br'));
  33. li.appendChild(content);
  34. li.appendChild(title);
  35. return li;
  36. },
  37. /** 설명 return **/
  38. getContent : function(z){
  39. var a = document.createElement('a');
  40. var img = document.createElement('img');
  41. a.target = '_blank';
  42. a.href = z.image;
  43. img.height = 100;
  44. img.width = 100;
  45. img.src = z.thumbnail;
  46. a.appendChild(img);
  47. return a;
  48. }
  49. };
  50. </script>
게시판 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 게시판 검색. **/
  3. var daumBoard = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumBoard.api = 'http://apis.daum.net/search/board';
  7. daumBoard.pgno = 1;
  8. daumBoard.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumBoard.pgno = pgno;
  13. var ds = document.getElementById('daumBoardScript');
  14. var callback = 'daumBoard.pongSearch';
  15. daumSearch.pingSearch(ds,daumBoard.api, daumBoard.pgno,
  16. callback, daumBoard.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumBoard');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumBoard.pgno,
  24. z.channel.totalCount/daumBoard.result,daumBoard.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var a = document.createElement('a');
  36. a.target = '_blank';
  37. a.href = z.link;
  38. a.innerHTML = daumSearch.escapeHtml(z.description)
  39. return a;
  40. }
  41. };
  42. </script>
블로그 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 블로그 검색. **/
  3. var daumBlog = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumBlog.api = 'http://apis.daum.net/search/blog';
  7. daumBlog.pgno = 1;
  8. daumBlog.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumBlog.pgno = pgno;
  13. var ds = document.getElementById('daumBlogScript');
  14. var callback = 'daumBlog.pongSearch';
  15. daumSearch.pingSearch(ds,daumBlog.api, daumBlog.pgno,
  16. callback, daumBlog.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumBlog');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumBlog.pgno,
  24. z.channel.totalCount/daumBlog.result,daumBlog.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var a = document.createElement('a');
  36. a.target = '_blank';
  37. a.href = z.link;
  38. a.innerHTML = daumSearch.escapeHtml(z.description);
  39. return a;
  40. }
  41. };
  42. </script>
웹 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 웹 검색. **/
  3. var daumWeb = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumWeb.api = 'http://apis.daum.net/search/web';
  7. daumWeb.pgno = 1;
  8. daumWeb.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumWeb.pgno = pgno;
  13. var ds = document.getElementById('daumWebScript');
  14. var callback = 'daumWeb.pongSearch';
  15. daumSearch.pingSearch(ds,daumWeb.api, daumWeb.pgno,
  16. callback, daumWeb.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumWeb');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumWeb.pgno,
  24. z.channel.totalCount/daumWeb.result,daumWeb.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var a = document.createElement('a');
  36. a.target = '_blank';
  37. a.href = z.link;
  38. a.innerHTML = daumSearch.escapeHtml(z.description);
  39. return a;
  40. }
  41. };
  42. </script>
지식 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 지식 검색. **/
  3. var daumKnowledge = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumKnowledge.api = 'http://apis.daum.net/search/knowledge';
  7. daumKnowledge.pgno = 1;
  8. daumKnowledge.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumKnowledge.pgno = pgno;
  13. var ds = document.getElementById('daumKnowledgeScript');
  14. var callback = 'daumKnowledge.pongSearch';
  15. daumSearch.pingSearch(ds,daumKnowledge.api, daumKnowledge.pgno,
  16. callback, daumKnowledge.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumKnowledge');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumKnowledge.pgno,
  24. z.channel.totalCount/daumKnowledge.result,daumKnowledge.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var div = document.createElement('div');
  36. var a = document.createElement('a');
  37. var b = document.createElement('b');
  38. var ba = document.createElement('a');
  39. a.target = '_blank';
  40. a.href = z.link;
  41. a.innerHTML = daumSearch.escapeHtml(z.description) + '<br'+'>';
  42. ba.target = '_blank';
  43. ba.href = z.categoryurl;
  44. ba.innerHTML = daumSearch.escapeHtml(z.category);
  45. b.appendChild(ba);
  46. div.appendChild(a);
  47. div.appendChild(b);
  48. return div;
  49. }
  50. };
  51. </script>
책 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 책 검색. **/
  3. var daumBook = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumBook.api = 'http://apis.daum.net/search/book';
  7. daumBook.pgno = 1;
  8. daumBook.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumBook.pgno = pgno;
  13. var ds = document.getElementById('daumBookScript');
  14. var callback = 'daumBook.pongSearch';
  15. daumSearch.pingSearch(ds,daumBook.api, daumBook.pgno,
  16. callback, daumBook.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumBook');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumBook.pgno,
  24. z.channel.totalCount/daumBook.result,daumBook.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var div = document.createElement('div');
  36. var a = document.createElement('a');
  37. var b = document.createElement('b');
  38. var ba1 = document.createElement('a');
  39. var ba2 = document.createElement('a');
  40. var ba3 = document.createElement('a');
  41. var ba4 = document.createElement('a');
  42. var img = document.createElement('img');
  43. var aimg = document.createElement('a');
  44. img.src = z.cover_s_url;
  45. aimg.target = '_blank';
  46. aimg.imghref = z.cover_s_url;
  47. aimg.style.float = 'left';
  48. aimg.appendChild(img);
  49. a.target = '_blank';
  50. a.href = z.link;
  51. a.style.clear = 'left';
  52. a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
  53. ba1.innerHTML = '저자 : '
  54. + daumSearch.escapeHtml(z.author) + '<'+'br/>';
  55. ba2.innerHTML = '출판사 : '
  56. + daumSearch.escapeHtml(z.pub_nm) + '<'+'br/>';
  57. ba3.innerHTML = '카테고리 : '
  58. + daumSearch.escapeHtml(z.category) + '<'+'br/>';
  59. ba4.innerHTML = '가격 : '
  60. + daumSearch.escapeHtml(z.sale_price) + '<'+'br/>';
  61. b.appendChild(ba1);
  62. b.appendChild(ba2);
  63. b.appendChild(ba3);
  64. b.appendChild(ba4);
  65. div.appendChild(aimg);
  66. div.appendChild(b);
  67. div.appendChild(a);
  68. return div;
  69. }
  70. };
  71. </script>
카페 검색
  1. <script language="Javascript" type="text/javascript">
  2. /** 카페 검색. **/
  3. var daumCafe = {
  4. /** 초기화. **/
  5. init : function(r){
  6. daumCafe.api = 'http://apis.daum.net/search/cafe';
  7. daumCafe.pgno = 1;
  8. daumCafe.result = r;
  9. },
  10. /** callback 함수 호출. **/
  11. pingSearch : function(pgno){
  12. daumCafe.pgno = pgno;
  13. var ds = document.getElementById('daumCafeScript');
  14. var callback = 'daumCafe.pongSearch';
  15. daumSearch.pingSearch(ds,daumCafe.api, daumCafe.pgno,
  16. callback, daumCafe.result);
  17. },
  18. /** 결과를 뿌려줌. **/
  19. pongSearch : function(z){
  20. var dv = document.getElementById('daumCafe');
  21. dv.innerHTML ="";
  22. dv.appendChild(daumSearch.pongSearch(this, z));
  23. dv.appendChild(daumSearch.pongPgno(daumCafe.pgno,
  24. z.channel.totalCount/daumCafe.result,daumCafe.pingSearch));
  25. },
  26. /** li setting **/
  27. getSearch : function(title,content){
  28. var li = document.createElement('li');
  29. li.appendChild(title);
  30. li.appendChild(content);
  31. return li;
  32. },
  33. /** 설명 return **/
  34. getContent : function(z){
  35. var div = document.createElement('div');
  36. var a = document.createElement('a');
  37. var b = document.createElement('b');
  38. var ba = document.createElement('a');
  39. a.target = '_blank';
  40. a.href = z.link;
  41. a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
  42. ba.target = '_blank';
  43. ba.href = z.cafeurl;
  44. ba.innerHTML = daumSearch.escapeHtml(z.cafeName);
  45. b.appendChild(ba);
  46. div.appendChild(a);
  47. div.appendChild(b);
  48. return div;
  49. }
  50. };
  51. </script>

댓글 5개:

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

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

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

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

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

    답글삭제