jQueryでFlickrのフォトギャラリー 作り方メモ
先日学校で「自分の写真を見せるフォトギャラリーサイトを作る」という課題が出ました。
その時ちょうどjQueryとAPIを使う練習をしたいと思っていたので、jQueryでFlickrのAPIを使って写真を表示するサイトを作りました。
初期表示では私が撮った写真が表示されますが、キーワードとタグで他の人の写真を検索して表示させることもできます。
以下、APIの使い方や参考にしたサイトなどのメモです。
FlickrのAPIを使う準備
まず、FlickrのサイトにログインしてAPI Keyを取得する必要があります。（そもそもFlickrのIDを持っていない場合は、アメリカのYahoo! IDを取得してFlickrのユーザー登録をし、ログインしてから）
API Key取得はここから＞ The App Garden
最初にAPIの用途がCommercialかNon-Commercialか選びます。Commercialでも小さいビジネスや個人事業、将来は商用にするつもりだけど今は違う、といったものもNon-Commercialに入る、と書いてあるので、迷わずNon-Commercialを選択。
その後、アプリケーションやWebサイトのタイトルと制作する内容（Photo galleryとか）を入力し、利用規約に同意すると、すぐに32文字の英数字からなるAPI Keyと、16文字のsecretというコードが取得できます。
このAPI Keyを、あとで出てくるAPIを利用するときに使います。
secretについては今回は使用しません。
Flickr APIのドキュメント
FlickrのAPIの仕様はこちらに一覧化されています。日本語版はないっぽい。
The App Garden API documentation
サイトを作っていくに当たり、このページの一覧の冒頭にある「Read these first」内の「URLｓ」と、右側の列の「API Methods」内の色々なリクエストの説明はよく参照しました。
写真のサイズと個々の画像のURL
「URLｓ」を見ると、Flickrから取ってくることのできる写真のサイズが分かります。これを見ながら画面のデザインを考えたりしました。
今回作ったサイトでは、サムネイルにsmall、クリックして表示するのにmediam 640のサイズを使ってます。
＜写真サイズ一覧＞
| s | small square 75x75 |
| t | thumbnail, 100 on longest side |
| m | small, 240 on longest side |
| - | medium, 500 on longest side |
| z | medium 640, 640 on longest side |
| b | large, 1024 on longest side* |
| o | original image, either a jpg, gif or png, depending on source format |
また、写真画像のURLのルールがこの「URLｓ」に書かれています。
たとえばこんな感じ。
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
最後の[mstzb]は、上に挙げたサイズのうち、m,s,t,z,bのどれかを指定できるという意味。
あとはfarm-id、server-id、id、secretのコードが判明すれば、目当ての写真の画像が呼び出せます。
例）http://farm5.static.flickr.com/4143/4801976338_deeae1b897_z.jpg
これらのコードを調べるために、APIの色々なメソッドを使います。
色々なメソッドのうちどれを使うか
より重要なのは「API Methods」の方で、これらを見ながら、自分がやりたいことがどのメソッドを使えばできるかを考えます。
今回のFlickrollの場合だと、以下のようにいくつかのメソッドを組み合わせて使ってます。
- 初期表示時（自分の写真を表示）および、キーワードまたはタグ検索時。
→flickr.photos.searchでAPI Keyと自分のFlickrのIDまたは検索キーワードと、1回のリクエスト数（今回は200枚）、返ってくるデータのフォーマット（今回はjson形式）を指定してリクエスト。
→これにより、検索した写真の情報が最大200枚分返ってきます。
この中に、写真のIDを始めとする必要な情報が入っているので、これを組み合わせて、今度は1枚1枚の写真のURLを作ります。
この他、マウスオーバー時に表示する写真のタイトルなどもこのメソッドで取得しています。 - サムネイルクリック時に、ポップアップで大きい画像を表示する。
→flickr.photos.getSizesで対象の写真のIDを指定してリクエストすると、存在する各サイズの写真の画像URLが返ってきます。
またflickr.photos.getinfoで写真のIDを指定してリクエストし、写真のユーザー名（作者名）を取得します。（上のflickr.photos.searchだとユーザーのID（Flickrが決めた英数文字列）は取得できるのですが、ユーザーが登録した名前が分からないのでこれが必要になります） - ポップアップ画像クリック時に、Flickrの該当ページを表示する。
→上のflickr.photos.searchで取得した情報を使って、以下のURLを指定します。
http://www.flickr.com/photos/{user-id}/{photo-id}
例）http://www.flickr.com/photos/50495144@N06/4801976338/
参考にしたサイト、jQueryプラグイン
上に書いたAPIの使い方だけでなく、JavaScript、jQueryについても超初心者だったので、色々サンプルを見ながら四苦八苦して作りました。
まず一番最初に以下のサイトを見て、FlickrのAPIの概要をぼやっとつかみました。
第2回 JavaScriptからFlickr APIで画像検索 - マッシュアップ・ラボ：ITpro
キーワード、タグ検索については、こちらを参考にさせてもらいました。
上記はjQueryではなく普通のJavaScriptなのですが、最終的には、以下で配布されている「Flickr Photobar Gallery」というjQueryプラグインを大幅に改造する形になりました。
Flickr Photobar Gallery | Codrops
最初はちょっとだけ手を入れるくらいですむかと思ったのですが、先に作りたいデザインを決めて、それに合わせようとしたために結構苦労しました。
変更点は、以下のようなところです。
- サムネイルを画面の下に横一列に表示→画面左に縦に表示
- 初期表示のサムネイルが"セット"単位→個別の写真のサムネイルを表示
- 写真をリクエストするときのキーが固定→検索窓に入力したキーワード、タグでもリクエスト可能
あと、jQueryの入門としては以下の連載がとても参考になりました。
今後の展望
実は課題が出たときに考えたのは、Flickrの写真をiPhoneで見やすいサイトを作る、ということでした。
でも、APIやjQueryを調べて普通にPCの画面で表示するサイトを作るのでいっぱいいっぱいで、iPhone向けの最適化まで辿りつけなかった…。
そのうち時間ができたら、参照している画面の大きさを判定してスマートフォンだったらそれ用のデザインで表示するようにしたいな、と思ってます。
コメント