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

ヨコチ🦖UGOK
2020/09/30 06:26

UGOKのヨコチ🦖です。

前回やっと画像を表示することができたのでかなり舞い上がってます～舞の海～♪引き続きウェブアプリケーションの制作を行っていきます。概要はこちらです。

今回やること

前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像のURLを使って、html上にCDジャケット画像を1つ表示させました。

今回は、概要に記載したイメージ図のようにCDジャケット画像を9個表示させ3×3の形に並べて表示させたいと思います。

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&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" id="appdata"&gt;
      &lt;a v-for="n in 9"&gt;
        &lt;div :id="img[n-1]"&gt;
          &lt;img v-bind:src="img[n-1]" width="350px"&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &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: '',
          item: '',
          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.item = data.items;
            for (let i = 0; i &lt; 9; i++) {
              self.addURL = data.items[i].track.album.images[0].url;
              self.img.push(self.addURL);
            }
          });
        }
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

CDジャケット画像をクリックすることで選択したCDに関する情報を表示させるようにしたいので<a>タグを使用しました。また、v-forを使って9個のCDジャケット画像を表示させました。

#appdata {
 	display: grid;
 	grid:
 	grid-template-rows: 350px 350px 350px;
 	grid-template-columns: 350px 350px 350px;
 	grid-row-gap: 10px;
 	grid-column-gap: 10px;
 	justify-content: center;
}