본문 바로가기
핫뉴스 리뷰

그들은 어떤 사진을 올렸을까? (using Flickr API)

by 디마드 2009. 9. 16.
Flickr란 전 세계 사람들이 올린 사진 공유사이트이다.

싸이월드나 기타 블로그에 업로드 하는 것과 뭐가 다르냐고 반문할 수 도 있지만, 기본적으로 웹 2.0의 철학인 공유라는 개념을 제대로 적용하고 있다.  수 많은 사람들과 사진들을 공유하고, 프로를 능가하는 아마추어 작품들, 누드화보, 상상력을 초월하는 특이한 사진들, 그들의 문화, 관광지 등을 감상할 수 있어 마치 세계 여행을 하는 것 같은 착각을 불러일으키기도 한다. 

플리커는 다양한 API들을 제공하고 있어서 언제 어디서든 필요한 사진들을 플리커가 아닌 다른 웹 페이지나 혹은 애플리케이션에서 보여지게 할 수 있으며 또 매쉬업을 이용한 새로운 형태로의 응용도 가능하다.

Flickr API를 이용하여 등록된 최신 사진들을 조회하는 페이지를 만들어 보았다. 최대한 간단한 걸로 API 이용법을 알아보려는 의도이다. 이것만 제대로 파악하면 나머지 API 사용에 많은 도움이 될 것이다.

[설명]
검색할 사진 개수를 입력하고 "최신사진"을 누르면 플리커에 등록된 사진이 나타난다.

아래는 사용된 플리커 API에 대한 내용이다. 플리커 사이트에서 API에 대한 간단한 단위 테스트가 가능하므로 편리하다.

플리커 API 사이트 
    http://www.flickr.com/services/api/

API 
   flickr.photos.getRecent

인수
  api_key (필수)  : 등록된 플리커 Key
Your API application key. See here for more details.
  extras (선택적)
A comma-delimited list of extra information to fetch for each returned record. Currently supported fields are: license, date_upload, date_taken, owner_name, icon_server, original_format, last_update, geo, tags, machine_tags, o_dims, views, media, path_alias, url_sq, url_t, url_s, url_m, url_o
  per_page (선택적)  : 페이지당 보여줄 사진 수
Number of photos to return per page. If this argument is omitted, it defaults to 100. The maximum allowed value is 500.
  page (선택적) : 페이지 선택
응답
 XML형태를 기본으로 리턴을 하지만, JSON 형태로도 가능하다. 플리커 API를 호출할 때 인자에 format=json으로 주게 되면 JSON으로 반환하게 된다.
(예 : flickr.photos.getRecent&api_key=발급받은 플리커 Key를 입력&per_page="+count+"&page=1&format=json"; )
<photos page="2" pages="89" perpage="10" total="881">
	<photo id="2636" owner="47058503995@N01" 
		secret="a123456" server="2" title="test_04"
		ispublic="1" isfriend="0" isfamily="0" />
	<photo id="2635" owner="47058503995@N01"
		secret="b123456" server="2" title="test_03"
		ispublic="0" isfriend="1" isfamily="1" />
	<photo id="2633" owner="47058503995@N01"
		secret="c123456" server="2" title="test_01"
		ispublic="1" isfriend="0" isfamily="0" />
	<photo id="2610" owner="12037949754@N01"
		secret="d123456" server="2" title="00_tall"
		ispublic="1" isfriend="0" isfamily="0" />
</photos>

[소스]

Ajax를 이용하여 지정된 Callback함수를 호출하는 방식으로 처리된다. Ajax 관련 함수는 그냥 가져다 붙이면 되고 Callback함수는 플리커에서 리턴된 값을 화면에 뿌려주는 역할을 하게 된다.

즉, 요청은 플리커 API를 호출하고 결과는 Callback함수로 XML혹은 JSON 형태로 리턴된 데이터들을 화면에 보여주면 되는 것이다. 다른 API에도 이런 형태와 유사하게 응용할 수 있을 것으로 보이다. 

단, API를 호출할 때는 각자가 발급받은 API키를 인자값으로 넘겨주어야 한다. API키 등록은 플리커 사이트에서 직접하면 된다. 상업용과 일반용이 있는데, 일반용으로 발급받으면 문제가 없다. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 <title>Flickr 최신 사진전</title>
  <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
  
  <link type="text/css" rel="stylesheet" href="http://l.yimg.com/g/css/c_fold_main.css.v78135.64777.75812.14"> 
  <link href="http://l.yimg.com/g/css/c_sets.css.v74709.14" rel="stylesheet" type="text/css" />
    
  <style type="text/css">
  .trans_png {
   behavior: url('/javascript/pngbehavior2.htc');
   border:0;
  }
  </style>
 
  <script type="text/javascript">
 
  var count= 0;//몇 개를 가져올지 텍스트 박스에 있는 값으로 설정
  var httpRequest = null;
  //XMLHttpRequest 객체 생성 메소드
  function getXMLHttpRequest() {
      if (window.ActiveXObject) {
          try {
              return new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
              try {
                  return new ActiveXObject("MicrosoftxXMLHTTP");
              } catch (e1) {
                  return null;
              }
          }
      } else if (window.XMLHttpRequest) {
          return new XMLHttpRequest();
      } else {
          return null;
      }
  }
 
  //요청 보내는 메소드(url=주소 , params=전달할 파라미터 목록, callback=콜백함수(요청한 URL에서 응답이 오면 콜백함수가 실행된다.),
  //method=get 방식인지  post 방식인지 선택)
  function sendRequest(url, params, callback, method) {
      httpRequest = getXMLHttpRequest();
      var httpMethod = method ? method : 'GET';
      if (httpMethod != 'GET' && httpMethod != 'POST') {
          httpMethod = 'GET';
      }
      var httpParams = (params == null || params == '') ? null : params;
      var httpUrl = url;
      if (httpMethod == 'GET' && httpParams != null) {
          httpUrl = httpUrl + "?" + httpParams;
      }
      httpRequest.open(httpMethod, httpUrl,true);
      httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      httpRequest.onreadystatechange = callback;
      httpRequest.send(httpMethod == 'POST' ? httpParams : null);
  }
 
  //최근의 사진을 가져옴
  function getRecent(){
      count=document.getElementById("count").value;
      var params="method=flickr.photos.getRecent&api_key=발급받은 플리커 Key를 입력&per_page="+count+"&page=1&format=json";
      sendRequest("http://api.flickr.com/services/rest/",params,callBackGetRecent,"GET");
  }
 
  function callBackGetRecent(){
    if(httpRequest.readyState==4){
        if(httpRequest.status==200){
            var list=httpRequest.responseText;
            list = list.substring(13,list.length);//가져온 텍스트 중에서 "jsonFlickrApi".라는 문자열을 지운뒤
            var jsonValue = eval(list);// 텍스를 객체로 만든다.
            tagList = jsonValue.photos.photo;//만들어진 객체에서 태그들을 뽑아와 배열에 저장한다.
           
            var url = "";
            //좌측 이미지
            var htmlTag = "<div class='vsDetails'><p class='vsThumbnail'><span class='photo_container pc_m'><img id='primary_photo_img' src='http://farm"+tagList[0].farm+".static.flickr.com/"+tagList[0].server+"/"+tagList[0].id+"_"+tagList[0].secret+".jpg' width='240' height='160' class='pc_img' /></span></p></div>"           
            htmlTag += "<div class='vsThumbs'><div id='setThumbs' class='clearfix'>";
            //이미지 개수대로 보여주기
            for(var i = 0; i< count ; i++){
                url = "http://farm"+tagList[i].farm+".static.flickr.com/"+tagList[i].server+"/"+tagList[i].id+"_"+tagList[i].secret+".jpg";
                htmlTag += "<div class='setThumbs-indv' id='setThumbs-indv164677083_div'><span class='photo_container pc_s' id='photo_thumb164677083'><img src="+url+"  width='75' height='75' class='pc_img' ></span></div>";
            }
            htmlTag += "</div></div>";
            var d = document.getElementById("ViewSet");
            d.innerHTML=htmlTag;
        }
    }
  }
  </script>  
</head>
<body>
<br/>
<br/>
<p><font size=4 color=blue>
[플리커 최신 사진 보기]</font>
</p>
<form name="f">
개수 : <input type="text" value="30" id="count" size="5"/>
<input type="button"  value="최신사진"  onclick="getRecent();"/>
</form>
<p>
<div id="ViewSet">
</div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'핫뉴스 리뷰' 카테고리의 다른 글

SQL Server 2000 서비스팩 4 설치하기.  (2) 2009.09.21
온라인에서 작업하자.  (0) 2009.09.10
Windows XP로 업그레이드 하다.  (1) 2009.09.10

관련글

댓글

티스토리툴바