Infinity Dimensions Flickr Photo Stream
知り合いのカメラマン門山さんから「flickrの写真をWebサイトに表示して、表示時間を制御できるガジェットってないですか？」とご相談があったので速攻作ってみました！！
今さらFlashでもナイかと思いjQueryライブラリのスクリプトで構築。こういうエフェクト絡んだのをサラッと作れてしまうjQueryステキ過ぎです♪
flickrが吐き出すRSSフィード(厳密にはJSON)を読み取って解析し、情報に従って写真をループ表示します。
とにかく簡単に実装や制御ができて、尚且つ汎用性の高いものを目指しました。
逆に細かくあれこれするようなタイプのスクリプトではナイので、写真の読み込が完了してから表示するとか気の利いたコトをしてないので初回表示遅いです...改造ベースにするなど割りきって使っていただければと思います。
]]>
Infinity Dimensions Flickr Photo Stream
などというテキトーに命名。
まずは「idfps.js(UTF-8)」を右クリックして「名前をつけてリンク先を保存」するか、以下のJavascriptをコピペする等して本体jsファイルを保存してください。
//Infinity Dimensions Flickr Photo Stream
//http://www.infinity-dimensions.com/
//
//
$(function(){
//初期設定//
//↓ここから
//flickrフィードURL
var idfps_feed="http://api.flickr.com/services/feeds/photoset.gne?&jsoncallback=?&format=json&set=[写真セットID]&nsid=[ユーザーID]";
//flickr画像拡張子指定(_m.jpg等)
var idfps_file=".jpg";
//フェードインアウト時間(1000=1秒)
var idfps_fadespeed=2000;
//画像切替静止時間(1000=1秒)
var idfps_timeout=500;
//表示ブロックID
var idfps_block="#idfps-images";
//↑ここまで
//
var idfps_cnt=0;
var idfps_data=new Array();
var idfps_width=$(idfps_block).width();
var idfps_height=$(idfps_block).height();
//
//メインルーチン//
//表示ブロック初期化
$(idfps_block).empty();
$("<div/>").addClass("idfps-imgblock")
.attr("style","width:"+idfps_width+"px;height:"+idfps_height+"px;")
.appendTo(idfps_block);
$("<div/>").addClass("idfps-decblock")
.attr("style","display:none;color:#FFF;text-align:center;width:"+
(idfps_width-40)+"px;height:"+(idfps_height-40)+
"px;padding:20px;background-color:#000;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);position:relative;top:-"+idfps_height+"px;")
.appendTo(idfps_block);
//フィード読込
$.getJSON(idfps_feed,function(flickrdata){
//JSONパーサ
$.each(flickrdata.items,function(i,items){
var idfps_url=items.media.m.split("_m.");
idfps_data[i]={"title":items.title,"desc":items.description,"url":idfps_url[0]+idfps_file};
});
//画像リンク表示
$(idfps_block).hover(
function(){
$(".idfps-decblock").html(idfps_data[idfps_cnt]['desc']+
'<span style="font-size:80%"><a href="http://www.infinity-dimensions.com/">Infinity Dimensions Flickr Photo Stream</a></span>');
$(".idfps-decblock p").attr("style","margin:0px;");
$(".idfps-decblock a").attr("style","color:#FFF;");
$(".idfps-decblock").fadeIn(500);
},function(){
$(".idfps-decblock").fadeOut(500,
function(){
$(".idfps-decblock").empty();
});
});
//
idfpsImgset();
//
//サブルーチン//
//画像フェードイン
function idfpsImgset(){
$("<div/>").addClass("idfps-inerblock")
.attr("style","display:none;width:100%;height:100%;background-image:url("+
idfps_data[idfps_cnt]['url']+");background-repeat:no-repeat;background-position:center center;")
.appendTo(".idfps-imgblock");
$(".idfps-inerblock").fadeIn(idfps_fadespeed,idfpsImgtime);
}
//画像切替静止タイマー
function idfpsImgtime(){
setTimeout(idfpsImgout,idfps_timeout);
}
//画像フェードアウト
function idfpsImgout(){
clearTimeout(idfpsImgout);
$(".idfps-inerblock").fadeOut(idfps_fadespeed,function(){
$(".idfps-imgblock").empty();
idfps_cnt++;
if(idfps_data.length<=idfps_cnt){idfps_cnt=0;};
idfpsImgset();
});
}
});
});
次にこの「idfps.js」をテキストエディタで開いて、先頭部分にある「↓ここから～↑ここまで」と書いてある初期設定を任意に設定します。
flickrフィードURL
呼び出すflickrのフィードのURLを設定します。
細々設定値を作るより各自でURLのパラメーターを制御してくれという投げやりな仕様w
その代わり工夫次第でflickr以外の写真サイトのフィードとかにも対応できるかと思います。
flickrのフィードは投げるURLによって返ってくる情報をいろいろ変更可能です。
ユーザーIDは「00000000@N00」で表現される形式のIDになります。他の形式はエラーになるので注意してください。
ユーザーIDや写真セットIDの確認方法は、各ページの下部にある「Feed」を開いてそのURLから読み取るしかないようです。
またこのスクリプトにおいては「jsoncallback=?」と「format=json」のパラメーターを必ず入れてください。
軽量化するためにJSON形式のフィードを読み取る仕様になっています。パラメーターが「format=rss_200」などの場合はRSS2.0形式になるので対応不可です。ご注意ください。
例として以下のようなflickrフィードURLが設定可能です。
- flickr全体の最新の写真のflickrフィードURL例
http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&format=json
- 任意のユーザーの最新の写真のflickrフィードURL例
http://api.flickr.com/services/feeds/photos_public.gne?&jsoncallback=?&format=json&id=[ユーザーID]
- 任意のユーザーの写真セットの最新の写真のflickrフィードURL例
http://api.flickr.com/services/feeds/photoset.gne?&jsoncallback=?&format=json&set=[写真セットID]&nsid=[ユーザーID]
表示される写真枚数は返ってくるフィードの情報量次第です。
他にもいろいろありますので細かな仕様については「flickr - The App Garden - Feeds」を参考にしてください。
flickr画像拡張子指定
ここの設定を変更すると、以下のように写真サイズを指定する事ができます。
変えてもあまり意味が無いので、基本的に「.jpg」のままでOKだと思います。
- _s.jpg
75×75ピクセルのスクエアサイズの写真
- _t.jpg
最大100ピクセルのサムネイルサイズの写真
- _m.jpg
最大240ピクセルのスモールサイズの写真
- .jpg
最大500ピクセルのミディアムサイズの写真
- _o.jpg
オリジナルサイズの写真...ですが使用不可。flickr API専用？
細かな仕様については「flickr - The App Garden - flickr.photos.getSizes」を参考にしてください。
フェードインアウト時間
ミリ秒単位(1000=1秒)でフェードイン・フェードアウトする間の時間を指定する事ができます。
画像切替静止時間
ミリ秒単位(1000=1秒)でフェードイン終了～フェードアウト開始までの画像切替静止時間を指定する事ができます。
表示ブロックID
flickrの画像を表示するdivブロックのIDを指定する事ができます。
使用するページのHTMLの指定に合わせて変更してください。
HTMLソース例
HTMLソースの組み方の例はこのようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Infinity Dimensions Flickr Photo Stream</title>
<style type="text/css">
<!--
#idfps-images {
background-color: #999;
height: 500px;
width: 500px;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="idfps.js"></script>
</head>
<body>
<h1>Infinity Dimensions Flickr Photo Stream</h1>
<div id="idfps-images">Infinity Dimensions Flickr Photo Stream</div>
</body>
</html>
基本的に必要なのは以下の3つの部分のみです。
- jQueryライブラリの取り込み
- idfps.js本体の取り込み
- 表示ブロックIDを<div>～</div>で設置
jQueryライブラリの取り込み
この1行がjQueryライブラリの取り込みを指定している部分です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
jQueryライブラリ必須なのでこの例のようにGoogleの提供するAjaxライブラリから直リンするか、Google AJAX Libraries APIを使うか、または自分のWebサイトに設置するなど、jQueryライブラリを必ず取り込んでください。
よく分からない場合は、例の通りに外部Javascriptの取り込みリンクをHTMLページの<head>～</head>の中に記述してください。それで取り込めます。
idfps.js本体の取り込み
「Infinity Dimensions Flickr Photo Stream」の本体jsファイルの取り込みを指定している部分です。
<script type="text/javascript" src="idfps.js"></script>
例では本体jsファイル「idfps.js」をHTMLページと同じディレクトリ階層に設置して外部Javascriptとして取り込んでいます。ページ内に直接書き込んでも可動するはずなので任意に工夫していただければと思います。
よく分からない場合は、例の通りに「idfps.js」ページ直下に設置して外部Javascriptの取り込みリンクをHTMLページの<head>～</head>の中に記述してください。それで取り込めます。
うまく動かない場合や文字化けが発生する場合は、HTMLページと本体jsファイルの文字コードが合っていないと思われます。
多機能テキストエディターの「サクラエディタ」などを使うと保存時の文字コードを変更できますので試してみてください。
表示ブロックIDを<div>～</div>で設置
flickrの画像を表示するブロックを<div>～</div>で設置します。
<div id="idfps-images">Infinity Dimensions Flickr Photo Stream</div>
初期設定の「表示ブロックID」で指定したidの部分を丸々書き換える仕様ですので「id="表示ブロックID"」の指定を入れてください。
例では<div>～</div>間にテキストが記入されていますが、実際は何があっても全部ぶっ飛ばす仕様になっておりますので、何もなくてもOKですし自由に書き込んでいただいても結構です。
よく分からない場合は、例の通りに<div>～</div>をHTMLページの<body>～</body>の中に記述してください。それで設置になります。
また表示<div>ブロック自体にCSSを適応することが可能です。取り込むflickrの画像サイズと同じ500ピクセルに固定するのが良いと思いますが、背景色を変えたり背景画像にしたり枠線をつけたり等、Webサイトのデザインに応じて自由にCSSを設定していただければと思います。
ブログ記事中などに設置したい場合
ちなみにJavascriptはページ内のどこに記入してもたいがい動くハズなので、前述の必要な3行をこんな風にまとめてしまって、このページの先頭にあるようにブログの記事中に強引に埋め込んでしまうような書き方も可能です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.infinity-dimensions.com/labs/idfps.js"></script>
<div id="idfps-images" style="background-color:#999;height:500px;width:500px;margin-right:auto;margin-left:auto;">Infinity Dimensions Flickr Photo Stream</div>
使用に関して
スクリプトについての解説は不要ですかね？「jQuery日本語リファレンス」さんのjQuery.getJSONの解説ページが参考になっております。
使用については自由です。改変したり再配布していただいても全然かまいません。
リンク貼ってくれるとうれしいですかねw
]]>
