APIを使って音楽を聴くきっかけを作ろう⑪-2

UGOKのヨコチ🦖です。

前回はCDジャケット画像をランダムに表示させるように変更しました。その過程でいくつか問題が発生したのでまとめようと思います～。制作しているウェブアプリケーションの概要はこちらです。

今回やること

前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像をランダムに表示させ、選択したCDジャケット画像に関する情報（詳細：アーティスト名、曲名、アルバム／シングル名）を表示させました。

今回は冒頭にも書いたように、CDジャケット画像をランダムに表示する際にいくつか起こった問題をまとめようと思います。

①同じCDジャケット画像が表示される

このように同じCDジャケット画像が存在する場合があります。しかしこれは、日本トップ50のプレイリスト内に同一アルバム／シングルの楽曲が含まれているだけであり、楽曲が違うので、特に心配することはありませんでした。

より多くの選択肢の中からCDジャケット画像を選ぶことができたらなおよいのであまり被らない方がいいな～とは思いますがしょうがないですね🤔

②試聴ボタンが表示されない

以前試聴できるようにした際に書いたように、この試聴ボタンはiframeで試聴を行うためのリンク先を表示したものです。そのため、試聴ボタンが表示されないということは、リンクが存在しないのではないか？という考えに至りました。これを検証するために、実際にアルバムの詳細を表示させ、確認してみました。

preview_urlを収納している配列をみると、3つ目がnullとなっていることから、このアルバムには試聴リンクが存在しないということがわかりました。これより、試聴ボタンが表示されないという問題が起こっていました。これも仕方がないことなのでどうしようもないですが・・・全部試聴ボタンがでるようになってほしいですね・・・（悲）

：追記

先日、上記のように試聴ボタンがすべて出なくなったことがありました。その際もprevew_urlを調べてみるとすべてnullになっており、今まで表示されていたものもすべて存在しなくなりました。今はもう直っていますが、どういう不具合だったのかなぜ起こったのかわからずじまいです・・・。

：今後について

次回からは新しい機能として、類似アーティストのCDジャケット画像の表示を行っていきたいと思います☺

：参考