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

UGOKのヨコチ🦖です。

前回は選択した類似アーティストCDの詳細の表示を行いました。制作しているウェブアプリケーションの概要はこちらです。

今回やること

前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像をランダムに表示させ、そこから選択したCDジャケット画像のアーティストの類似アーティストのCDジャケット・選択したCDの詳細を表示させました。

今回は、選択したCDの詳細を表示させようとしたときに起きた問題について書こうと思います。

・選択したCDジャケット画像と詳細の内容が異なる

上記のように選択したNissyのCDについてではなく、別のアーティストであるLittle Glee MonsterのCDの情報が表示されてしまうという問題がありました。しかし、CDジャケット画像と詳細が偶然に一致することもあり見逃していました。

この問題の原因を考えてみました。

①類似アーティストのidからCDジャケット画像を表示するところまでうまくいっているが、詳細だけ異なっている。

②抜き出した類似アーティストのidを用いたCDジャケット画像の表示を行う過程でなんらかの問題がある。

このどちらかなのではないかと思い、検証してみることにしました。

①類似アーティストのidからCDジャケット画像を表示するところまでうまくいっているが、詳細だけ異なっている。

これを検証するために、類似アーティストのidと詳細に表示されるアーティストidの照合・実際にSpotify web playerでアーティストidを用いてアーティストページを表示させることを行いました。

上記から、抜き出した類似アーティストのidと詳細の内容は一致しているといえます。

②抜き出した類似アーティストのidを用いたCDジャケット画像の表示を行う過程でなんらかの問題がある。

①ではなかったので、CDジャケット画像のほうに問題があるのだとわかりました。ですが、なにをどう変えてよいかわからず、先生に聞きました。（いつもありがとうございます・・・。）

原因としては、CDジャケット画像を取得するために行っていたfor文の処理が、fetchして呼び出すときに順番通り終わらないことでした。そのため、pushして配列に収納していた画像URL（self.nextimg.push(self.nextimgURL);）を変数に直接いれること（self.nextimg[i] = nextimgURL;）で解決しました。

今回のコード：https://gist.github.com/yochn/27979be7629acc029d7b4fd04cacae44

：今後について

前回も書いたとおり、繰り返して類似アーティストを表示させるようにします☺