【 FrickrAPI課題 】 22日目

こんにちはogaです。

今回はFrickrAPIについての記事となります。

基本の記述
Flickr画像の元ページのURLを返す処理とFlickr画像の
altテキストを返す処理は（cat・dog）共通なので変更しない。

ここから
// Flickr画像データのURLを返す
const getFlickrImageURL = (photo, size) => {
 let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
   photo.secret
 }`;
 if (size) {
   // サイズ指定ありの場合
   url += `_${size}`;
 }
 url += '.jpg';
 return url;
};

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = photo => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`;
// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
  text = `"${photo.title}" by ${photo.ownername}`;
ここまで

変数const parameters = $.param{} 

猫の変数はparameterCat
犬の変数はparameterDog

変数parameterCatで定義したあとに、
変数parameterDogを定義する場合

text: 'cat , dog'は記述できない。
text: ’ ’に文字列は一つのみ。

const parametersCat = $.param({
 method: 'flickr.photos.search',
 api_key: apiKey,
 text: 'cat', // 検索テキスト
 sort: 'interestingness-desc', // 興味深さ順
 per_page: 4, // 取得件数
 license: '4', // Creative Commons Attributionのみ
 extras: 'owner_name,license', // 追加で取得する情報
 format: 'json', // レスポンスをJSON形式に
 nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
});
const url = `https://api.flickr.com/services/rest/?${parameterscat}`;
console.log(url);

FlickrAPIから画像を取得方法は自身のapikeyを使用
※このときの注意点

// Flickr API key
const apiKey = '';
apikeyは2種類ありシークレットapikeyは使用しない

// Flickr画像データのURLを返す
const getFlickrImageURL = (photo, size) => {
 let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
   photo.secret
 }`;
 if (size) {
   // サイズ指定ありの場合
   url += `_${size}`;
 }
 url += '.jpg';
 return url;
};

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = photo => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`;

// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
  text = `"${photo.title}" by ${photo.ownername}`;
 if (photo.license === '4') {
   // Creative Commons Attribution（CC BY）ライセンス
   text += ' / CC BY';
 }
 return text;
};

猫を定義
// リクエストパラメータを作る

const parameterscat = $.param({
 method: 'flickr.photos.search',
 api_key: apiKey,
 text: 'cat', // 検索テキスト
 sort: 'interestingness-desc', // 興味深さ順
 per_page: 4, // 取得件数
 license: '4', // Creative Commons Attributionのみ
 extras: 'owner_name,license', // 追加で取得する情報
 format: 'json', // レスポンスをJSON形式に
 nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
});
const url = `https://api.flickr.com/services/rest/?${parameterscat}`;
console.log(url);

// 猫の画像を検索して表示

$.getJSON(url, (data) => {
 console.log(data);
 // データが取得できなかった場合
 if (data.stat !== 'ok') {
   console.error('データの取得に失敗しました。');
   return;
 }
 // 空の<div>を作る
 
 const $div = $('<div>');
 // ヒット件数
 $div.append(`<div>${data.photos.total} photos in total</div>`);
 for (let i = 0; i < data.photos.photo.length; i++) {
   const photo = data.photos.photo[i];
   const photoText = getFlickrText(photo);
   // $divに <a href="..." ...><img src="..." ...></a> を追加する
   $div.append(
     $('<a>', {
       href: getFlickrPageURL(photo),
       class: 'd-inline-block',
       target: '_blank', // リンクを新規タブで開く
       'data-toggle': 'tooltip',
       'data-placement': 'bottom',
       title: photoText,
     }).append(
       $('<img>', {
         src: getFlickrImageURL(photo, 'q'),
         width: 150,
         height: 150,
         alt: photoText,
       }),
     ),
     );
 }
 // $divを#mainに追加する
 $div.appendTo('#gallery');
 // BootstrapのTooltipを適用
 $('[data-toggle="tooltip"]').tooltip();
});

ここまで。

dogを定義

※catで定義しているため
const url = `https://api.flickr.com/services/rest/?${parametersCat}`;

dogの場合は下記の記述方法になる
const dogurl = `https://api.flickr.com/services/rest/?${parametersDog}`;
console.log(dogurl);

dogを定義
const parametersDog = $.param({
 method: 'flickr.photos.search',
 api_key: apiKey,
※text: ‘ ’は ‘dog’に変更
 text: 'dog', // 検索テキスト
 sort: 'interestingness-desc', // 興味深さ順
 per_page: 4, // 取得件数
 license: '4', // Creative Commons Attributionのみ
 extras: 'owner_name,license', // 追加で取得する情報
 format: 'json', // レスポンスをJSON形式に
 nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
});
dogの場合は下記の記述方法になる
const dogurl = `https://api.flickr.com/services/rest/?${parametersDog}`;
console.log(dogurl);

$.getJSON(dogurl, (data) => {
 console.log(data);
 if (data.stat !== 'ok') {
   console.error('データの取得に失敗しました。');
   return;
 }
 const $div = $('<div>');
 $div.append(`<div>${data.photos.total} photos in total</div>`);
 for (let i = 0; i < data.photos.photo.length; i++) {
   const photo = data.photos.photo[i];
   const photoText = getFlickrText(photo);
   $div.append(
     $('<a>', {
       href: getFlickrPageURL(photo),
       class: 'd-inline-block',
       target: '_blank',
       'data-toggle': 'tooltip',
       'data-placement': 'bottom',
       title: photoText,
     }).append(
       $('<img>', {
         src: getFlickrImageURL(photo, 'q'),
         width: 150,
         height: 150,
         alt: photoText,
       }),
     ),
     );
 }
 $div.appendTo('#gallery');
 $('[data-toggle="tooltip"]').tooltip();
});