Flickr APIを使ったギャラリーサイトの作り方【jQuery】
この記事は最終更新から4年以上が経過しています。情報が古くなっている可能性があります。
こんにちは、しばです。
写真系SNSの二大巨頭と言われるInstagramとFlickr。「インスタ映え」で話題になったInstagramは一般的にも有名ですが、写真撮影に力を入れているなら撮影情報(Exifデータ)を残せるFlickrを使っている人も多いんじゃないかと思います。
Flickrには、写真の情報を取得したり、逆に送信したりできるAPIが用意されており、その中には写真を検索できる機能もあります。
今回はその検索ができるflickr.photos.searchというメソッドを使って、自動更新されるギャラリーサイトの作り方をご紹介します！
Contents
サンプル
サンプルはこちら。
1. 写真を一度で表示する
demo1
2. 写真を分割で表示する
demo2
3. 写真に付属する情報も一緒に表示する(画像hoverで情報表示)
demo3
今回は佐賀市公式アカウントさんの写真を使わせていただきました。
たまに拝見しては脳内旅行にいってたり (*´ω｀*)
それではこれらの作り方を説明していきます。
準備
APIキーの用意
Flickr APIを使うには、
- Flickrアカウントを登録
*米YAHOO!アカウントでログインできるので、実質的には米YAHOO!アカウントを登録 - アプリケーションを作成し、APIキーを取得
という手順が必要になります。
具体的にはこちらのサイトが参考になります。
APIキーは32桁程度の半角小英数字。
今回はこのキーがあればいいので、テキストエディタなどに控えておきましょう！
ライブラリ・プラグインの用意
今回使うのはjquery.akFlickr.jsというプラグインです。
ダウンロードして、jQueryライブラリと共にHTMLファイルに読み込ませておきましょう。
コーディング
写真を一度で表示する
特定の枚数の写真を一度で取得・表示します。
特定のユーザの写真を取得するには、searchOptionsの「user_id」に対象ユーザのIDを入力します。
$(function(){
var $items1 = $('#photosBlock');
$items1.akFlickr({
api_key : 'あなたのAPIキー',
count: 30, //デフォルト 20枚
size: 'large_square', //画像サイズ 150x150
searchOptions: {
user_id : '150901924@N02', //取得対象ユーザのID
sort: 'date-taken-desc' //撮影日時の新しい順
},
tag: 'li'
});
})ユーザIDはユーザのFlickrページのホームURLから確認ができます。
例）https://www.flickr.com/photos/●●●●●●●●●@N●●/
→この「●●●●●●●●●@N●●」部分がユーザIDになります。
一度に取得する枚数はcountの値で制御。
size(画像サイズ)、tag、sortなどの設定値については、プラグインのOptionsをご参照ください。
シンプルですが、これをlazyloadで遅延表示させたりするだけでも綺麗なギャラリーサイトになりそう(´∀｀)
写真を分割で表示する
ギャラリーサイトは画像の重さがどうしても気になってくるかと思います。
一度にたくさん画像を表示するのは重すぎる！というときは、最初に重くない程度の枚数を表示し、ボタンをクリックすると次の一定枚数を表示…という方法を使うとユーザにも優しいですね。
ここ使うのはsearchOptionsの「page」というキーです。
$(function(){
var $items1 = $('#photosBlock');
var count = 1;
flickr();
function flickr(index){
if(!index){
index = 1;
}
$items1.akFlickr({
api_key : 'あなたのAPIキー',
count: 20,
size: 'large_square',
searchOptions: {
user_id : '150901924@N02',
sort: 'date-taken-desc',
page: index //出力するページのページ番号
},
tag: 'li'
});
}
$('#moreBtn').click(function(){
count++;
flickr(count);
});
})このsearchOptionsに以下のキーを追記することで、APIへのリクエストに含めることができます。
このページのpageの項目は以下の通り。
page (Optional)
出力するページのページ番号。この引数が省略された場合、既定では1が設定されます。
画像はcountに指定された枚数ごとにページに分割して取得されるので、ここに2を入れれば指定した並び順の21〜40番目の写真が、3を入れればその次の20枚、というように取得できます。
これを利用することで分割取得することができます。
写真に付属する情報も一緒に表示する
このプラグインはそのまま使うと、以下のコードが出力されます。
<div>
<a href="画像ページURL" target="_blank"><img src="画像URL" alt="画像タイトル"></a>
</div>リンクの有無やタグ名、タグにつけるクラス名はオプションで設定できますが、出力コードを変えたり撮影情報やタグ、説明文などの他の情報を取得することはできません。
しかしjquery.akFlickr.jsファイルをカスタマイズすることで、
出力コードを変えたり、flickr.photo.searchドキュメントのextraにある項目を取得することができます。
demo3では、撮影日時とFlickrで写真に付与しているタグを取得し、画像hover時に表示するようにしました。
まずはトリガー側から。
$(function(){
var $items1 = $('#photosBlock');
$items1.akFlickr({
api_key : 'あなたのAPIキー',
count: 20,
size: 'small_320', //長辺が320px
searchOptions: {
user_id : '150901924@N02',
sort: 'date-taken-desc'
},
tag: 'li'
});
})次に、jquery.akFlickr.jsのファイルを修正します。
(中略)
function loadPhotos($dom, options, suffix) {
var d = $.Deferred();
var data = {
format: 'json',
method: 'flickr.photos.search',
api_key: options.api_key,
per_page: options.count,
extras: 'date_taken, tags' //add!
};
(中略)
var photos = data.photos;
var htmlTag = options.tag;
var id, owner, secret, server, farm, title, ispublic, isfriend, isfamily;
var date,tags; //add!
var link, imgPath, tmpHtmlSrc;
var htmlSrc = '';
(中略)
ispublic = item.ispublic;
isfriend = item.isfriend;
isfamily = item.isfamily;
//add!
date = item.datetaken;
date = date.substr(0, 10);
tags = item.tags;
(中略)
tmpHtmlSrc += '<img src="' + imgPath + '" alt="' + title + '">';
// add!!
tmpHtmlSrc += '<div class="detail"><h2>' + title +'</h2><p><strong>撮影日時</strong>：' + date + '<br><strong>タグ</strong>：' + tags + '</p></div>'
if (options.link && link) tmpHtmlSrc += '</a>';
tmpHtmlSrc += '</' + htmlTag + '>';
修正版のファイルはこちら→jquery.akFlickr.js
感想
今回は分割取得がしたかったのでjQueryのプラグインを使いましたが、Flickr APIはphpやphython、Ruby等多くの言語でキットが用意されています。
phpFlickrも試しましたところ非常に使いやすい印象。
ちなみにFlickrはAlbum機能があり、Album単位で取得したい場合はflickr.photosets.getPhotosというメソッドを使います。
この間これを使用して知人のギャラリーサイトを作成しました(´∀｀)
Flickr APIを使えばさくっとFlickrのギャラリーサイトを作れるので、ぜひ試してみてください。
以上、Flickr APIを使ったギャラリーサイトの作り方でした！