アプリ版:「スタンプのみでお礼する」機能のリリースについて

flickrのAPIを用いて、個人のページに、指定した写真を表示させたいと思っています。
こちらのページを、参考にして(そのままのソースで)、flickrにアップロードされた最新の写真の中から、「HDR」というタグが付いた写真は表示させられるようになりました。
http://itpro.nikkeibp.co.jp/article/COLUMN/20061 …

これを、写真を“撮影した時の時間”で表示させたいと思っています。
たとえば、2004年1月16日に撮った写真を表示、といった具合です。

flickrは、HPを見ると、taken on~ と写真を撮った時のデータも表示されており、撮影した時間もAPIから取ってこれると思うのですが、以下のソースをどのように変えたらよいでしょうか。

よろしくお願いいたします。

flickr-search.js --------------------------
// 画像検索を行う関数
function photo_search ( param ) {
// APIリクエストパラメタの設定
param.api_key = 'APIキー';
param.method = 'flickr.photos.search';
param.per_page = 9;
param.sort = 'date-posted-desc';
param.format = 'json';
param.jsoncallback = 'jsonFlickrApi';

// APIリクエストURLの生成(GETメソッド)
var url = 'http://www.flickr.com/services/rest/?'+
obj2query( param );
// script 要素の発行
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
};

// 現在の表示内容をクリアする
function remove_children ( id ) {
var div = document.getElementById( id );
while ( div.firstChild ) {
div.removeChild( div.lastChild );
}
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
var list = [];
for( var key in obj ) {
var k = encodeURIComponent(key);
var v = encodeURIComponent(obj[key]);
list[list.length] = k+'='+v;
}
var query = list.join( '&' );
return query;
}

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
var list2 = [];
for( var key in obj ) {
var k = encodeURIComponent(key);
var v = encodeURIComponent(obj[key]);
list2[list2.length] = k+'='+v;
}
var query = list2.join( '&' );
return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
// データが取得できているかチェック
if ( ! data ) return;
if ( ! data.photos ) return;
var list = data.photos.photo;
if ( ! list ) return;
if ( ! list.length ) return;

// 現在の表示内容(Loading...)をクリアする
remove_children( 'photos_here' );

// 各画像を表示する
var div = document.getElementById( 'photos_here' );

for( var i=0; i<list.length; i++ ) {
var photo = list[i];

// a 要素の生成
var atag = document.createElement( 'a' );
atag.href = 'http://www.flickr.com/photos/'+
photo.owner+'/'+photo.id+'/';

// img 要素の生成
var img = document.createElement( 'img' );
img.src = 'http://static.flickr.com/'+photo.server+
'/'+photo.id+'_'+photo.secret+'_s.jpg';
img.style.border = '0';

atag.appendChild( img );
div.appendChild( atag );
}

}

search-hdr.html ------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flickr APIによる画像検索 (text)</title>

<script type="text/javascript" src="flickr-search.js"></script>

<script type="text/javascript"><!--

window.onload = function () {
photo_search({ text: 'HDR' });
}
--></script>

</head>
<body>
<hr>
<div id="photos_here">Loading...</div>
<hr>
</body>
</html>

A 回答 (1件)

jsonFlickrApi ( data ) このdataの内容を、for-inで1つずつ調べながら、


指定された日付ならimg要素を生成して表示してください。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!