jQuery Flickr Gallery.
프로그래밍/웹 쪽2009. 11. 20. 15:53
이번에는 오픈 API은 Flickr를 활용하여 이미지 갤러리를 만들어 보도록 하겠습니다.
오픈 API 란? 영문 , 한글
우리들이 가장 많이 접했던 오픈 API는 지도(네이버, 구글, 야후, 다음 등), 이미지(플리커, ) 등 일 것입니다.
Flickr에 대한 소개
마이크로 블로그로 유명한 미투데이에서는 이미지를 플리커에 업로드하고 사용했었는데, 이를 최근(11월 초) 플리커에서 다 지워 버렸다고 합니다. 아마도 대부분의 사람들이 생각하기를 미투데이가 네이버에 인수되면서 사용량이 폭팔적으로 증가하자(플리커에 미투데이 계정을 가지고 사진을 업로드) 플리커에서 미투데이 계정과 관련된 사진을 다 삭제해 버렸다고 합니다. 아마 플리커에다가 이미지를 저장하면서 네이버에 인수 되니 야후(플리커소유)에서 뿔났나 보죠. ^^
사용으로 사용할 것이 아니면 무료로 사용가능 하고, 작은 규모의 기업에서는 그냥 사용해도 된다고 라이센스 규정에서 본 것 같습니다. 플리커를 이용해 수익을 발생시킬려면 라이센스 관련해서 읽어 보는것은 필수 겠네요!!! (API든 뭐든 일단 라이센스읽는게 필수)
이 플러그인은 플리커를 통해 이미지를 검색 하고, 이를 갤러리 형식으로 보여주는 것입니다.
파프리카에서는 사이트 Thumbnail 및 사용자 이미지를 위하여 이것을 사용 했습니다.
플리커 API : http://www.flickr.com/services/api/
Flickr API를 사용하여 검색하기 위해서는 api_key가 필요 합니다.
api_key를 얻기 위해서는 회원가입을 하여야 합니다. 이외 API를 통해 업로드를 진행 하기 위해선 비밀 키 값도 회원가입을 통해서 얻어야 합니다.
플리커 검색 요청 형식에는 (REST, XML-RPC, SOAP) 방식이 있습니다.
이중에서 가장 사용법이 간단하고 쉬운 REST방식을 사용하도록 하겠습니다.
응답 형식 역시 가장 사용하기 쉬운 JSON 방식을 사용하도록 하겠습니다.
기본적으로 요청을 받기 위한 URL입력하고,
이 결과(JSON)을 가지고 결과 화면을 구성 하면 됩니다.
이것을 생각하면서 보면 이해가 확실히 쉬어 집니다!!!
Flickr API에서는 다양한 API Method 를 지원합니다.
Activity, Blogs, Auth, Collection, Favorite, Search, People, Geo
여기서는 search API를 가지고 이미지 검색을 하도록 하겠습니다.
flickr.photo.search
search api를 살펴보면 다향한 종류의 parameter들이 존재하는 것을 확인 할 수 있습니다.
이 중에서 필요한 것은 method(flickr.photo.search), format(json), api_key, text(검색어), per_page(페이지당 가져올 결과 수)입니다.
검색 URL
위의 URL로 검색을 하게 되면, 검색 결과가 담긴 JSON Object를 반환하여 줍니다.
그러면 우리는 이 Object를 가지고 결과 image를 구성하면 됩니다.
그러면 반환 JSON의 형식을 알아 보도록 하겠습니다.
JSON 응답 샘플보기
성공적으로 응답에 성공 했을 경우 아래의 결과를 보내줍니다.
사용자에게 검색 결과로 보여주는 이미지들의 photo요소의 값에서 추출하여 url을 구성 할 수 있습니다.
URL 설명서
샘플
플리커 검색 방법을 요약 하여 보면
파프리카에서 사용한 Flickr 갤러리도 이러한 방법으로 개발 되었습니다.
사용 방법
이렇게 검색 결과를 보여줄 영역(searchResult)에 favoriteFlicker()를 사용하면 flickr검색을 수행 할 수 있습니다. 검색을 수행 하기 위해서 검색 값(textSearch)의 값을 포함해야 합니다.
이렇게 하여 수행 하게 되면
이렇게 표시 됩니다.
모든 소스를 확인해 볼 수는 없고, 검색 URL을 호출 하여 응답 JSON을 가지고 결과를 구성하는 방법을 확인해 보도록 하겠습니다.
위 소스 코드를 살펴보면 jQuery에서 해당 URL을 AJax형식으로 요청을 하고, 이 결과를 'jsonp'형식으로 사용하는 것을 볼 수 있습니다. 결과 data형식에 'json'이 있는데 왜 'jsonp'형식으로 사용하였느냐 하면
내부 url로 요청을 할 떄는 'json'형식이 가능 하지만 외부 url로 요청을 할때는 'jsonp' 형식을 사용해야 합니다. 이렇게 해야 외부 응답 json을 가져 올 수 있습니다.
응답 결과(json)을 가지고 success에서 이 결과를 조작하여 img url을 생성하면 검색 결과를 화면에 보여줄 수 있습니다. 여기서는 $.each를 사용하여 검색 결과를 보여주고 있습니다.
makeNavigation()함수는 페이지 네비게이션을 만드는 함수 입니다.
자세한 소스 코드는 샘플 파일을 확인하세요.
오픈 API 란? 영문 , 한글
공개 API(Open Application Programmer Interface, Open API, 오픈 API)는 누구나 사용할 수 있도록 공개된 API를 말한다.웹 2.0에 대한 관심이 넓어 지면서 점차 기업들이 API를 공개하고 이를 한대 묶어서 매쉬업 하는 웹 애플리케이션들에 대한 관심이 점진적으로 늘어 나고 있습니다. 개발자들도 매쉬업에 관련해서 많은 관심을 가지고 있습니다. ( 거의 최초의 매쉬업이라고 할 수 있는 구글 맵을 활용한 부동산 매쉬업 APP는 처음에 구글맵 API가 공개되어 있지 않았을 때 이를 한 개발자가 분석해서, APP를 만들었는데.. 이를 본 구글에서 이 사람을 고소 하지 않고 오히려 자사에 채용하고, 구글 맵 API를 공개했다고 합니다. - open api를 활용한 매쉬업 가이드)
우리들이 가장 많이 접했던 오픈 API는 지도(네이버, 구글, 야후, 다음 등), 이미지(플리커, ) 등 일 것입니다.
Flickr에 대한 소개
마이크로 블로그로 유명한 미투데이에서는 이미지를 플리커에 업로드하고 사용했었는데, 이를 최근(11월 초) 플리커에서 다 지워 버렸다고 합니다. 아마도 대부분의 사람들이 생각하기를 미투데이가 네이버에 인수되면서 사용량이 폭팔적으로 증가하자(플리커에 미투데이 계정을 가지고 사진을 업로드) 플리커에서 미투데이 계정과 관련된 사진을 다 삭제해 버렸다고 합니다. 아마 플리커에다가 이미지를 저장하면서 네이버에 인수 되니 야후(플리커소유)에서 뿔났나 보죠. ^^
사용으로 사용할 것이 아니면 무료로 사용가능 하고, 작은 규모의 기업에서는 그냥 사용해도 된다고 라이센스 규정에서 본 것 같습니다. 플리커를 이용해 수익을 발생시킬려면 라이센스 관련해서 읽어 보는것은 필수 겠네요!!! (API든 뭐든 일단 라이센스읽는게 필수)
이 플러그인은 플리커를 통해 이미지를 검색 하고, 이를 갤러리 형식으로 보여주는 것입니다.
파프리카에서는 사이트 Thumbnail 및 사용자 이미지를 위하여 이것을 사용 했습니다.
플리커 API : http://www.flickr.com/services/api/
Flickr API를 사용하여 조치를 수행하려면, 호출 규약을 선택하고, 끝점에 메소드 및 몇몇 인수를 지정하는 요청을 보내야 하며 그러면 포맷된 응답을 받게 됩니다.
API 색인 페이지에 나열된 모든 요청 형식은 명명된 매개 변수 목록을 사용합니다.
REQUIRED 매개 변수
method이(가) 호출 메소드를 지정하는 데 사용됩니다.REQUIRED 매개 변수
api_key이(가) API 키를 지정하는 데 사용됩니다.선택적 매개 변수
format이(가) 응답 형식을 지정하는 데 사용됩니다
Flickr API를 사용하여 검색하기 위해서는 api_key가 필요 합니다.
api_key를 얻기 위해서는 회원가입을 하여야 합니다. 이외 API를 통해 업로드를 진행 하기 위해선 비밀 키 값도 회원가입을 통해서 얻어야 합니다.
플리커 검색 요청 형식에는 (REST, XML-RPC, SOAP) 방식이 있습니다.
이중에서 가장 사용법이 간단하고 쉬운 REST방식을 사용하도록 하겠습니다.
REST 요청 형식
REST는 사용하기에 가장 단순한 요청 형식입니다. 이는 단순한 HTTP GET 또는 POST 조치입니다.
REST 끝점 URL은 http://api.flickr.com/services/rest/입니다.
flickr.test.echo 서비스를 요청하려면 다음과 같이 호출하십시오.
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value
기본적으로 REST 요청은 REST 응답을 보냅니다.
JSON 응답을 받기 위한 URL
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&format=json
응답 형식 역시 가장 사용하기 쉬운 JSON 방식을 사용하도록 하겠습니다.
기본적으로 요청을 받기 위한 URL입력하고,
이 결과(JSON)을 가지고 결과 화면을 구성 하면 됩니다.
이것을 생각하면서 보면 이해가 확실히 쉬어 집니다!!!
Flickr API에서는 다양한 API Method 를 지원합니다.
Activity, Blogs, Auth, Collection, Favorite, Search, People, Geo
여기서는 search API를 가지고 이미지 검색을 하도록 하겠습니다.
flickr.photo.search
search api를 살펴보면 다향한 종류의 parameter들이 존재하는 것을 확인 할 수 있습니다.
이 중에서 필요한 것은 method(flickr.photo.search), format(json), api_key, text(검색어), per_page(페이지당 가져올 결과 수)입니다.
검색 URL
"http://api.flickr.com/services/rest/?method=" +
options.method+"&format=" + options.format + "&api_key=" + options.api_key + "&text=" + options.text +"&per_page=" + options.perpage
options.method+"&format=" + options.format + "&api_key=" + options.api_key + "&text=" + options.text +"&per_page=" + options.perpage
위의 URL로 검색을 하게 되면, 검색 결과가 담긴 JSON Object를 반환하여 줍니다.
그러면 우리는 이 Object를 가지고 결과 image를 구성하면 됩니다.
그러면 반환 JSON의 형식을 알아 보도록 하겠습니다.
JSON 응답 샘플보기
성공적으로 응답에 성공 했을 경우 아래의 결과를 보내줍니다.
{"photos":{"page":1, "pages":7, "perpage":12, "total":"78", , "photo":[{}]}, "stat":"ok"})
각각의 요소에 대해서 알아 보면.- page : 현재 페이지
- pages : 총 페이지
- perpage : 페이지당 가져오는 건 갯수
- total : 전체 건의 갯수
- photo : 가져온 image의 정보
- stat : 실패인지 성공인지 확인
사용자에게 검색 결과로 보여주는 이미지들의 photo요소의 값에서 추출하여 url을 구성 할 수 있습니다.
"photo":[{"id":"3782755242", "owner":"14698775@N08", "secret":"72162a6c9e", "server":"2474", "farm":3, "title":"Vancuber", "ispublic":1, "isfriend":0, "isfamily":0}
이 값들을 가지고 url을 구성하게 됩니다.URL 설명서
샘플
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
플리커 검색 방법을 요약 하여 보면
- URL을 구성하여 검색을 요청 한다.
- 응답 결과를 확인 한 후, 응답결과를 가지고 이미지 URL을 구성한다.
- 구성항 URL을 조작 하여 사용자에게 보여준다.
파프리카에서 사용한 Flickr 갤러리도 이러한 방법으로 개발 되었습니다.
사용 방법
$( '#searchResult').favoriteFlicker( {
method : 'flickr.photos.search',
api_key : 'api-key',
format : 'json',
text : $( '#textSearch').val()
});
method : 'flickr.photos.search',
api_key : 'api-key',
format : 'json',
text : $( '#textSearch').val()
});
이렇게 검색 결과를 보여줄 영역(searchResult)에 favoriteFlicker()를 사용하면 flickr검색을 수행 할 수 있습니다. 검색을 수행 하기 위해서 검색 값(textSearch)의 값을 포함해야 합니다.
이렇게 하여 수행 하게 되면
Flickr Plug-in 검색 결과
이렇게 표시 됩니다.
모든 소스를 확인해 볼 수는 없고, 검색 URL을 호출 하여 응답 JSON을 가지고 결과를 구성하는 방법을 확인해 보도록 하겠습니다.
function getList( page) {
refresh();
$( '.flickrThumbnail').addClass( 'flickrIndicator');
$.ajax({
url : url+"&page="+page,
type : 'get',
dataType : 'jsonp',
jsonp : 'jsoncallback',
success : function(data) {
$.each(data.photos.photo, function( index, val){
var imgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, null),
nextImgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, 'default');
target.find( '.flickrResultImgs').append( "<a rel='group' title='"+nextImgUrl+"' href='#'>"+
"<img src='"+imgUrl+"' class='flickrImg' width='100' height='65'></a>");
});
makeNavigation( data.photos);
$( 'a').click( function(){
$( this).find( 'img').addClass( 'flickrImgSelected');
$( '.flickrDetail').empty();
imgurl = $( this).attr( 'title');
img = new Image();
img.src = imgurl;
$( '.flickrDetail').append( img);
}).mousedown( function(){
$( '.flickrImgSelected').removeClass( 'flickrImgSelected');
});
},
complete : function() {
$( '.flickrThumbnail').removeClass( 'flickrIndicator');
}
});
};
refresh();
$( '.flickrThumbnail').addClass( 'flickrIndicator');
$.ajax({
url : url+"&page="+page,
type : 'get',
dataType : 'jsonp',
jsonp : 'jsoncallback',
success : function(data) {
$.each(data.photos.photo, function( index, val){
var imgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, null),
nextImgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, 'default');
target.find( '.flickrResultImgs').append( "<a rel='group' title='"+nextImgUrl+"' href='#'>"+
"<img src='"+imgUrl+"' class='flickrImg' width='100' height='65'></a>");
});
makeNavigation( data.photos);
$( 'a').click( function(){
$( this).find( 'img').addClass( 'flickrImgSelected');
$( '.flickrDetail').empty();
imgurl = $( this).attr( 'title');
img = new Image();
img.src = imgurl;
$( '.flickrDetail').append( img);
}).mousedown( function(){
$( '.flickrImgSelected').removeClass( 'flickrImgSelected');
});
},
complete : function() {
$( '.flickrThumbnail').removeClass( 'flickrIndicator');
}
});
};
위 소스 코드를 살펴보면 jQuery에서 해당 URL을 AJax형식으로 요청을 하고, 이 결과를 'jsonp'형식으로 사용하는 것을 볼 수 있습니다. 결과 data형식에 'json'이 있는데 왜 'jsonp'형식으로 사용하였느냐 하면
내부 url로 요청을 할 떄는 'json'형식이 가능 하지만 외부 url로 요청을 할때는 'jsonp' 형식을 사용해야 합니다. 이렇게 해야 외부 응답 json을 가져 올 수 있습니다.
응답 결과(json)을 가지고 success에서 이 결과를 조작하여 img url을 생성하면 검색 결과를 화면에 보여줄 수 있습니다. 여기서는 $.each를 사용하여 검색 결과를 보여주고 있습니다.
makeNavigation()함수는 페이지 네비게이션을 만드는 함수 입니다.
자세한 소스 코드는 샘플 파일을 확인하세요.
flicker.zip