
UGOKのヨコチ🦖です。
前回は類似アーティストのCDジャケット・詳細の表示を行いました。制作しているウェブアプリケーションの概要はこちらです。
今回やること
前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像をランダムに表示させ、そこから選択したCDジャケット画像のアーティストの類似アーティストのCDジャケット・詳細を表示させました。
今回は、類似アーティストのCDジャケット・詳細の表示を繰り返して行えるようにします。
https://gist.github.com/yochn/00af8b679ac68d83aaaa797b4b37475d
前回と大きな変更はなく、類似アーティストの詳細を表示する画面に「次へ」というボタンを追加し、ボタンを押すことで類似アーティストのidの取得画面に戻り、CDジャケット画像の表示→詳細の表示を繰り返すようにしました。
実行結果
以上のように繰り返して類似アーティストを表示することができました☺やっと最低限の機能をつけることができましたやったーーーーーーー!!!!!
まったくできないと思っていたものが実際目に見える形になったらほんとうにうれしいですね・・・
見た目やレイアウトなどまだまだ改善点は山積みなので引き続き改善していこうと思います~~~~☺
デザインは読み込むだけのCSSでいきましょう
https://note.com/ojk/n/ne6fee99a9b4e
ひとまずWater.cssでいいんじゃないかと
https://watercss.kognise.dev/
この1行を<head>の中に書くだけです
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">