APIを用いた画像ギャラリー-プログラミング学習-日曜(火~土)
APIとは、Googlemapのようなwebやスマフォから個人個人が自由にアクセスできる地図、経路などのデータを想像するようなものです。
それだけのデータにアクセスするには、時間も要するものかと思いますが、瞬時にアクセス可能としてくれるのが、Ajaxという通信システムです。
Ajaxという通信でやりとりするデータは、JSON形式を用いることが一般です。
JSONは、JavaScriot Object Notationと言うくらいでJavaScriptのオブジェクトと似た形式です。
Flickrから画像を取得し、サイトに表示させます。
const parameters=$.param({
method:'flicker.photos.search',
});
const url=`https://api.flickr.com/services/rest/?${parameters}`;
consle.log(url);
表示させたい内容や検索条件を$.param( )で指定するだけで、検索用のurlとして内容を反映してくれます。
次にurlをJSONオブジェクトという写真データなどを格納する形に変換します。
$.getJSON(url,(data)=>{
console.log(data);
先ほど作成した検索用urlを用いて、取得したデータをdataの中にオブジェクト形式で保管しています。
実際にコンソールを確認すると分かりますが、data.photos.photoの中にオブジェクト形式で写真データが格納されたことになります。
このオブジェクト形式のデータを画像としてWebに表示可能な形式に導きます。
const getFlickrImageURL=(photo,size)=>{
let url=`https://farm${photo.farm}.staticflicr.com/${photo.server}/${photo.id}_${photo.secret}`;
略
const getFlickrPageURL=photo=>`https://www.flickr.com/photos/${photo.owner}/${photo.id}`;
(上)オブジェクト形式のデータをテンプレート文字列を使いながら画像表示用のurlに変換しています。
上のコードでは、staticflicrのコードが間違えています。
正しくは、kの追記が必要でstaticflickrです。
書き直し
const getFlickrImageURL=(photo,size)=>{
let url=`https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}`;
略
const getFlickrPageURL=photo=>`https://www.flickr.com/photos/${photo.owner}/${photo.id}`;
こちらのurlを間違えると、後のコードでgetFlickrImageURL関数を呼び出しても、画像ギャラリーに正しく画像が表示されなくなります。
また、getFlickrPageURL関数の中身を間違えると、後に画像ギャラリーをクリックしてもリンクページに到達しなくなります。
最後に表示させたい画像を設定していきます。
まず前提として、画像ギャラリーを格納する空のdivを作成しておきます。
その後、appendメソッドを用いて、作成したdivの中に、flickrへの画像ギャラリーを追加します。
$div.append(
$('<a>',{
href:getFlickrPageURL(photo),
class:'d-inline-block',
target:'_blank',
}).append(
$('<img>',{
src:getFlickrImageURL(photo,'q'),
width:150,
height:150,
alt:photoText,
}),
),
);
これを大元となる親要素に追加すれば、ギャラリーの完成です。
まとまった時間がとれるのは、やはり土曜日。
一方日曜日は、土曜日の深堀内容を受けて更新も可能。
火・水・金曜:家での学習は時間を休息のため時間を無駄にし、開始時刻が大幅遅れるリスクあり。
この記事が気に入ったらサポートをしてみませんか?