APIを使って音楽を聴くきっかけを作ろう④

ヨコチ🦖UGOK
2020/08/06 04:06

UGOKのヨコチ🦖です。

今回も少しずつウェブアプリケーションを制作していきます。そして、前回書ききれなかった部分をまとめていこうと思います。

制作していくウェブアプリケーションの概要はこちらです。

今回やること

前回に引き続き、Spotify Web APIを使って、「日本トップ50」という名前のプレイリストに載っている曲についてのデータを取得し、html上に表示させる。また、制作するウェブアプリケーションではジャケット画像取得し並べなければいけないので、曲のCDジャケット画像についてのデータを抜き出してhtml上に表示させる。

今回も引き続きプレイリストからデータを取得しているので、JavaScriptのほうは前回と同じです。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
 &lt;!-- HTML --&gt;
 &lt;div id="app"&gt;

   &lt;button @click="getAPIdata()"&gt;APIデータの取得&lt;/button&gt;

   &lt;ul v-if="appdata"&gt;
	　{{img}}
   &lt;/ul&gt;

 &lt;/div&gt;

 &lt;!-- JavaScript --&gt;
 &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

 &lt;script&gt;
   let app = new Vue({
     el: '#app',
     data: function() {
       return {
         appdata: '',
         img:''
       }
     },
     methods: {
       //ボタンを押すとAPIでとったデータを表示する
       getAPIdata: function() {
         const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
         fetch('./list').then(function(res) { // /listというものに対する命令
           return res.json(); //responseをjson形式で返す
         }).then(function(data) {
           self.appdata = data; //appdataにとってきたデータを代入する
           self.img = data.items[0].track.album.images[0].url;
         });
       }
     }
   });

 &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

self.img = data.items[0].track.album.images[0].url;

imgという返り値を作り、そこでCDジャケット画像のURLを取得する命令を書きます。

上記の画像を見ると、itemsの中のtrackの中のalbumの中のimagesの中の配列の中にURL（水色の線の部分）があります。imagesの配列の中にあるCDジャケット画像のURLは、指定されているサイズが違うだけでURLはすべて同じなのでひとまず配列の一番目のURLを抜き出すように指定しています。