他カテゴリ

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

ヨコチ🦖UGOK's icon'
  • ヨコチ🦖UGOK
  • 2020/09/23 06:57

 

UGOKのヨコチ🦖です。

進捗がかなり滞ってしまいましたが、引き続きウェブアプリケーションの制作を行っていこうと思います。概要はこちらです。

 

 

今回やること

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

今回は、抜き出したCDジャケット画像のURLを使って、html上に画像を表示させようと思います。

 

<!DOCTYPE html>
<html>
<body>

 <!-- HTML -->
 <div id="app">
   <button @click="getAPIdata()">APIデータの取得</button>

   <ul v-if="appdata">
     <img v-bind:src="img[0]">
   </ul>
 </div>

 <!-- JavaScript -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 <script>
   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<9;i++){
           self.addURL = data.items[i].track.album.images[0].url;
           self.img.push(self.addURL);
           }
         });
       }
     }
   });
</script>
</body>
</html>

前回との変更点としては、CDジャケット画像のURLのみをimgという配列に収納するため、self.img.push(self.addURL);としました。

また、html上に画像を表示するためにimgタグを使用し、<img v-bind:src="img[0]">と表記しました。v-bindを使うことで、「APIデータの取得」というボタンを押すことで画像を表示させることができます。（v-bindをつけ忘れ、全然画像が表示されなかった・・・💧）

 

 

実行結果

Content image
CDジャケット画像表示させてみた❕

できた～～～～～～❕❕❕（n回目）

URLを使って画像を表示する方法も何もかも全く覚えておらず、苦戦に苦戦を重ねていたのですが先生のお陰ですんなりと解決し、ああ・・・先生とは偉大なものだ・・・と改めて実感しました・・・・🥰🥰🥰

 

 

：今後について

html上にCDジャケット画像を実際に表示することができたので、次回はこれを3×3の形に並べ表示させようと思います。そうするにあたって、いまimg[0]というように表示させるCDジャケット画像のURLを直接指定しているところを変数を使って指定するように変更しようと思います。

 

 

 

：参考

 

 

 

 

UGOK UGOK-3rd spotify API ウェブアプリ
Article tip 0人がサポートしています
獲得ALIS: Article like 7.53 ALIS Article tip 0.00 ALIS
ヨコチ🦖UGOK's icon'
  • ヨコチ🦖UGOK
  • @yoch
twitter @ugok_2
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
トラベル

わら人形を釘で打ち呪う 丑の刻参りは今も存在するのか？　京都最恐の貴船神社奥宮を調べた

Like token Tip token
486.35 ALIS
Eye catch
他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

Like token Tip token
114.82 ALIS
Eye catch
クリプト

約２年間ブロックチェ－ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
ゲーム

【初心者向け】Splinterlandsの遊び方【BCG】

Like token Tip token
6.32 ALIS
Eye catch
トラベル

無料案内所という職業

Like token Tip token
84.20 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

Like token Tip token
114.82 ALIS
Eye catch
他カテゴリ

京都のきーひん、神戸のこーへん

Like token Tip token
12.10 ALIS
Eye catch
グルメ

バターをつくってみた

Like token Tip token
127.90 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
ビジネス

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす！

Like token Tip token
16.10 ALIS
Eye catch
他カテゴリ

SASUKEオーディションに出た時の話

Like token Tip token
35.87 ALIS