Splash.image.jsを使う。(6) – with FlickrAPI

やっと完成しました。

HTML上にフルスクリーンスライドショーを表示するJavaScriptライブラリ
[splash.image.js]
http://xuxu.fr/ressources/javascript/splash.image/

を使用して、Flikcrの注目Photoを表示させるサンプルページ。

前回までで、FlickrAPIから目的のデータは取得できるようになっているので、
ここからは表示のための加工です。

◆イメージURLを作成する
取得したデータをもとにして、イメージ用URLを作成することができます。
ZorgAPIではイメージURLも一緒に取得できていたので、
URLを加工しなければならない部分は、ちょっとだけ大変です。

◇結果XMLのフォーマット
<rsp stat="[取得結果(ok/fail)]">
<photos page="[ページ番号]" pages="[全ページ数]" perpage="[1ページあたりの枚数]" total="[合計枚数]">
<photo id="[id]" owner="[オーナーID]" secret="[秘密鍵]" server="[サーバー番号]" farm="[画像取得時に必要]" title="[写真タイトル]" ispublic="[公開1/非公開0]" isfriend="[友人のみ公開(1or0)]" isfamily="[家族のみ公開(1or0)]" [指定したオプション情報]/>
[<photo/>の繰り返し]
</photos>
</rsp>

◇作成するURL
1:http://farm[farm-id].static.flickr.com/[server-id]/[id]_[secret].jpg
or
2:http://farm[farm-id].static.flickr.com/[server-id]/[id]_[secret]_[mstb].jpg

[farm-id]:photoタグの属性「farm」の値。
[server-id]:photoタグの属性「server」の値。
[id]:photoタグの属性「id」の値。
[secret]:photoタグの属性「secret」の値。
[mstb]:表示画像のサイズを決定します。

「m」:小さな画像
(一番大きなところが240 )
「s」:小さな正方形
(75*75)
「t」:サムネイル用
(一番大きなところが100)
「b」:大きな画像
(一番大きなところが1024 -ただしオリジナルサイズの大きい画像にのみ適用 )
指定なし(1のURL):デフォルト
(一番大きなところが500)

※詳しくはこのページにのっています。

◆イメージを表示させる
イメージURLができてしまえば、あとは、スライドショーを表示できるように
HTMLを出力するだけです。
splash.imageの基本コード
<a href="[スクリーン表示用画像URL]" title="画像TITLE" rel="splash.image">
<img src="[サムネイル表示用画像URL]" />
</a>

この形式でうまく表示されるよう、PHPのソースを書いていけば完成です。

今回は64の画像を取得し、8*8で画像を表示するようにしました。
Splashckr(Step4)
Splashckr

今回は単純に一つのスライドショーですが、

日付単位で別のスライドショーにしたり、見せ方は色々ありそうです。

◆作成時間
API呼び出し:1時間くらい
表示用HTMLの作成(主にimg作成):3時間くらい
APIの呼び出しはスムーズにいきました。
イメージURL作成に少し戸惑ったのと、
あとは全体のレイアウトをちょこちょこ変更していたら、
あっという間に時間が過ぎました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください