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,
      }),
    ),
  );

これを大元となる親要素に追加すれば、ギャラリーの完成です。

まとまった時間がとれるのは、やはり土曜日。

一方日曜日は、土曜日の深堀内容を受けて更新も可能。

火・水・金曜：家での学習は時間を休息のため時間を無駄にし、開始時刻が大幅遅れるリスクあり。