FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘密・コツ)

FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘密・コツ)

Flickrシリーズの続きです!

Part. 1 : プロジェクトの背景とゴール
Part. 2 : FlickrのAPIの秘密とコール方法
Part. 3 : PHPのコーディング
Part. 4 : HTMLのコーディング
Part. 5 : CSSのコーディング

http://www.premflux.com/cc0/free-photo-japan-hadano-33492929492.html(個人プロジェクト)で使ったAPIを触ってみましょう。

Flickrに登録

当たり前ですが、まずはFlickrに登録しないといけないです。
登録すると、1テラの写真を無料でクラウドに保存できます。
ただ、対応されている言語は・・・

ご覧の通り、日本語対応は提供されていません。

勇気を持って登録しましょう!(笑):
https://login.yahoo.com/account/create?specId=usernameReg&src=flickr&.src=flickrsignup&.scrumb=0&new=1&.pd=c%3DJvVF95K62e6PzdPu7MBv2V8-&.intl=jp&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fvalidate%3F.src%3Dflickrsignin%26.pc%3D8190%26.scrumb%3D0%26.pd%3Dc%253DJvVF95K62e6PzdPu7MBv2V8-%26.intl%3Djp%26.done%3Dhttps%3A%2F%2Fwww.flickr.com%2Fsignin%2Fyahoo%2F%3Fredir%3D%252F

あ、すぐ分かりましたよね。
そう、FlickrはYahooのサービスですので、YahooIDを作ります。

写真アップロード

APIをテストするため、自分の写真をアップロードしておかないといけないですね:
https://www.flickr.com/photos/upload/

このチュートリアルのため、2つのアルバムを作りましょう。

ただ、大切なのは、「Visible to everyone」をこのままにすること。
APIが共有されてない写真はアクセス出来ないので。

APIのキー取得

では、そこからキーを作りましょう:
https://www.flickr.com/services/apps/create/apply

左側の「APPLY FOR A NON-COMMERCIAL KEY」をクリックします。

それが出来たら2つの番号を受け取ります:
1. APIのキー(Key)
2. APIのシークレット(Secret)
ずっと管理画面に記載されていますので、簡単に無くせないものですよ!

API Explorer

Flickrの便利な所ですが、APIエクスプローラというコンテンツがあります。
そこでAPIの全てのコールを全てテスト出来ます。
1つの残念なことですが、複数のコールに基づいた仕組があります。
1つのコールだけで中々出来ないことが多いです。

このプロジェクトには3つのコールを使わないと行けないです:

1. flickr.photosets.getList

https://www.flickr.com/services/api/explore/flickr.photosets.getList
アルバム(Photoset)の情報を取るため

2. Flickr.photos.search

https://www.flickr.com/services/api/explore/flickr.photos.search
各アルバムの写真の基本情報を取るため

3. flickr.photos.getInfo

https://www.flickr.com/services/api/explore/flickr.photos.getInfo
各写真の詳細情報(サイズなど)を取るため

コールのコール方法

アルバムの情報を取って見ましょう!

https://www.flickr.com/services/api/explore/flickr.photosets.getList
にアクセスして、右側の「Useful Values」に「Your user ID」をコピーします。
で、左の「user_id」のフィールドに貼り付けます。

次、「Output」のセレクトメニューに「JSON」を選択。
「Do not sign call」のラジオボタンを選択。
「Call Method」をクリック。

この画面が表示されます:

一番下にあるURLは一番大事です。
なぜかと言うと、このURLを使ってPHP側でJSONファイルをダウンロードするから。

同じやり方で、Flickr.photos.searchとflickr.photos.getInfoのURLを貰いましょう。
出来たら、続きのためどこかのテキストファイルに保存しましょう。

あ、でもPHPのことはPart.3で語りますので、少し我慢してくださーい!w

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント