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

ヨコチ🦖UGOK
2020/10/01 06:36

UGOKのヨコチ🦖です。

前回はCDジャケット画像を9個並べて表示させました。見た目は自分の作りたいものに近づいてきましたが、中身がまだまだできていません💧まだまだこれからですね💧がんばります。制作中のウェブアプリケーションについての概要は以下の記事をご覧ください。

今回やること

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

今回は、CDジャケット画像に含まれている曲を実際に試聴できるようにしたいと思います。

&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;div v-for="n in 9"&gt;
        &lt;div :id="img[n-1]" style="text-align: center"&gt;
          &lt;img v-bind:src="img[n-1]" width="350px"&gt;
          &lt;iframe height="50" width="350" :src="preview[n-1]" frameborder="0"&gt;&lt;/iframe&gt;
        &lt;/div&gt;
      &lt;/div&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: [],
          preview: []
        }
      },
      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);
            }
            for (let i = 0; i &lt; 9; i++) {
              self.preURL = data.items[i].track.preview_url;
              self.preview.push(self.preURL);
            }
          });
        }
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

曲の試聴リンクも同一のAPIから取得することができましたので、CDジャケット画像のURLを取得したときと同様の命令を書きました。

for (let i = 0; i < 9; i++) {
self.preURL = data.items[i].track.preview_url;
self.preview.push(self.preURL);
}

曲の試聴リンクを取得するところまではすんなりできたのですが、実際に取得したリンクに飛ぶことができない・・・飛び方がわからない・・・と、ここで躓きました・・・😥<a>タグを使ってどうにかできないものか・・・<img>タグと同様にできないものか・・・と思ったのですができず・・・😥諦めて<iframe>を使用しました😥

<div v-for="n in 9">
<div :id="img[n-1]" style="text-align: center">
<img v-bind:src="img[n-1]" width="350px">
<iframe height="50" width="350" :src="preview[n-1]" frameborder="0"></iframe>
</div>
</div>

曲の試聴リンク先が黒背景ということもあり、インラインフレームのフレームを無くし、背景色も黒に変更し再生ボタンが変に浮かないように装飾も変更してみました。

実行結果

Content image — CDジャケット画像の下にある再生ボタンを押すと試聴できるようになった❕

なんかそれらしくなった気がしますね！！！（？？？）

実は、CDジャケット画像をクリックするとCDの詳細や曲の試聴を全部一気に表示するようにしようと思っていたのですが、新しい音楽に出会う「きっかけづくり」というこの制作の目的を考え直すと、第一にCDジャケット画像の表示、次に試聴できることが必要なのではないかという考えに至りました（先生の助言）。なのでひとまずこの2つを最優先に表示し、試聴したうえで気になったものに対しCDの詳細を表示させるようにしようと思います。