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

UGOKのヨコチ🦖です。

前回はSpotify Web APIを実際に使用して自分のユーザー情報を取得し、html上に表示させてみました。今回も少しずつウェブアプリケーションを制作していこうと思います。

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

今回やること

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

プレイリストの曲についてのデータを取得するために、こちらを参考にさせていただきました。

基本的には前回と同じで、urlの部分をSpotifyのサイトに書いてある通りに変更し、入力しました。

//アクセストークンを使ってAPIを使いデータを取ってくる
     var token = body.access_token;
     var options = {
       url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',
       headers: {
         'Authorization': 'Bearer ' + token
       },
       json: true

基本形として、https://api.spotify.com/v1/playlists/{playlist_id}/tracksという形をとります。{playlist_id}という部分は、取得したいプレイリストをSpotifyのウェブプレイヤーで開いたときのurlの最後の部分です。

今回は、'37i9dQZEVXbKXQ4mDTEBXq'を{playlist_id}に入力しました。その他特に変更はありません。htmlも変更なしです。

実行結果

このようにたくさんのデータを取得することができました。（具体的にどんな情報を得ることができたかはSpotifyの開発者サイト（https://developer.spotify.com/documentation/web-api/reference/playlists/get-playlists-tracks/）参照）その中でも今回必要なCDジャケット画像はitemsの部分にURLの形で含まれていました。

：今後について

次回は、今回書ききれなかったCDジャケット画像のURLを抜き出してhtml上に表示するところまで書きたいと思います。今の時点ではプレイリストの1番目に注目し、1番目の曲のCDジャケット画像のURLを抜き出すところまでできたのですが、プレイリストには50曲含まれているので、残り49個のURLも同時に抜き出せるようにしたいです😥その後、URLを表示していたのを画像として表示できるようにしたいと思います。