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

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アカウントを取得します。
makeaccount.jpg
※↑クリックするとアカウント画面のキャプチャを表示します

[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:

コメントを残す

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

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