HTML画面上にフルスクリーンでスライドショーを表示するスクリプト。
[splash.image.js]
http://xuxu.fr/ressources/javascript/splash.image/
このスライドショー効果を、
Flickrから自動的に取得してくる写真に使ってみようと思います。
[Flickr Services]
http://www.flickr.com/services/api/
◆APIを利用する環境を整える
FlickrAPIを利用するためには、Flickrのアカウントを取得している必要があります。
【Flickrアカウントの取得】
Flickrアカウントサインアップ
http://flickr.com/signup/
Flickrアカウントを取得するためには、yahoo.comのアカウントが必要となります。
(上記ページから自動的にyahoo.comのsign inページにジャンプします。)
yahoo.comのアカウントを持っていない場合は、
Sign Upのリンクからアカウント登録を行います。
(※yahoo.co.jpのアカウントを持っていてもダメです。yahoo.comが必要。)
yahoo.comのアカウント取得後、Flickrのアカウントを取得します。
Welcome back! というタイトルのページに戻ってきますので、
流れに沿ってFlickrアカウントを取得します。
※↑クリックするとアカウント画面のキャプチャを表示します
[CREATE A NEW ACCOUNT]ボタンでアカウントを作成します。
[MERGE AN EXISTING ACCOUNT]では既にFlickrアカウントを持っている場合に
yahoo.comアカウントとの紐付けが行われます。
【API Keyの取得】
FlickrのAPIを利用するためには、開発者用のAPI Keyを申請する必要があります。
[API Key 申請ページ]
http://www.flickr.com/services/api/keys/
[Apply for your key online now]というリンクから、API Keyを申請します。
申請するには次の項目を入力します。
◇Apply for your API Key
名前やEmailアドレスを入力します。
[This key is for]の選択項目は
Non-commercial use:非商用利用
Commercial use:商用利用
となります。
◇About the application
APIを利用して開発するアプリケーションについて、簡単な説明を書きます。
(API Keyは1つのFlickrアカウントに対して複数設定することができ、
開発するアプリケーションごとに、個別のAPI Keyを設定する必要があるそうです。)
[APPLY]ボタンでAPI Keyの申請が完了です。
ページにAPI Keyが表示されます。
◆現在の注目Photoを取得
共通リクエストURLに利用したい機能名をパラメーターとして渡して、
目的のデータを取得します。http://api.flickr.com/services/rest/?method=[メソッド名]
戻りデータのフォーマットはデフォルトでXML形式です。
リクエストパラメーターに[format]を指定することで、
JSONやシリアライズ化されたPHPデータとして受け取ることも可能です。
今回は、注目のPhotoを取得するAPIを使用します。
[flickr.interestingness.getList]
http://www.flickr.com/services/api/flickr.interestingness.getList.html
◇必要となるパラメーター
[api_key (必須)]
取得したAPI Key
[date (オプション)]
いつの注目Photoを取得するか[YYYY-MM-DD]形式で指定できます。
[extras (オプション)]
オプションとして取得する情報をカンマ区切りで設定します。
設定できるフィールド値は
[license]:ライセンス
[date_upload]:アップロード日
[date_taken]:撮影日
[owner_name]:オーナー名
[icon_server]:アイコンサーバー番号
[original_format]:オリジナルファイル形式
[last_update]:最終更新日のUNIX時間
[geo]:緯度・経度情報
[tags]:写真に付加されているタグ
[machine_tags]:写真に付加されているマシンタグ
の10種類。
[per_page (Optional)]
1ページ分として取得する写真の枚数を指定できます。
デフォルト100、最大値は500です。
[page (Optional)]
何ページ目の結果を取得するか指定できます。デフォルトは1です。
こんな感じで呼び出してみました。http://api.flickr.com/services/rest/?method=flickr.interestingness.getList
&api_key=xxxx&extras=date_upload,owner_name&per_page=30
結果のXMLはうまく取得できているようです。
◇結果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>
FlickrAPIでは、写真のアップロードやタグ付けなど、
Flickrで行えるほとんどがAPIとして公開されています。
また、FlickrAPIを利用するためのライブラリもたくさん公開されています。
まだまだおもしろそうなところがたくさんあるなぁ。
写真のIDが取得できるようになったので、次回
IDを元に画像URLを取得して、スライドショーを作っていきます。
One comment: