"VW100NOW"は、世界規模の写真共有サイトである"Flickr"から、
VW(フォルクスワーゲン)ビートルに関する写真を収集し100枚表示します。
このページにアクセスするたびに、最新の100枚を抽出するので、いつも新しい発見があります。
ユニークな写真を並べてみると、世界中のVWファンの存在を実感できます。
技術的には、"Flickr"のデータベースにアクセスする"FlickrAPI"を使用しています。 JavaScriptで"FlickrAPI"を用い、“VW、BUG”というキーワードで抽出しています。
もし、あなたが"Flickr"のアカウントをお持ちの場合、 VWビートルの写真を“BUG、VW”というキーワードをTAGや、説明に含めてアップロードすると、 このページに参加すること（表示させること）が可能です。
"VW100NOW"は以下のファイルから出来ています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>VW100NOW-QRM</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" >
<meta http-equiv="Content-Style-Type" content="text/css" >
<link rel="stylesheet" href="http://homepage.mac.com/qramo_to/ss/SiteGlobal.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="vw100now.css" type="text/css" media="screen,tv" />
<script type="text/javascript" src="flickr-search100.js"></script>
<script type="text/javascript"><!--
window.onload = function () {
photo_search({ text: 'VW BUG' });
}
--></script>
</head>
<body>
<div id="QRM"><h3><a href="http://homepage.mac.com/qramo_to/" title="QRM topへ">QRM</a></h3></div>
<div class="pagebox">
<div id="centerbox">
<h1 id ="title">VW100NOW</h1>
<div id="photos_here" title="VW100NOW">Loading...</div>
</div>
</div>
<div id="bottom">
<!---
<ul>
<li>About</li>
<li>Source</li>
</ul>
--->
<p id="copyright">©2007 Qramo Using flickrAPI</p>
</div>
</body>
</html>
// 画像検索を行う関数
function photo_search ( param ) {
// APIリクエストパラメタの設定
param.api_key = '*INPUT Your APIKEY*';
param.method = 'flickr.photos.search';
param.per_page = 100;
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;
}
// 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 );
}
}
調整中です。
ご意見、ご感想、アドバイスなど頂けるとさいわいです。 このページを紹介した私のBlog“ArtyLife”よりコメント、トラックバック等受け付けています。
また、以下のページにも、SNSなど連絡先があります。
ありがとうございました。よろしくお願い致します。
©2007 Qramo