Laravel9 ✖️ Spotify API 複数のプレイリストから選択したジャンルの楽曲だけを抽出したプレイリストを作成してみた

1年近くまったり個人開発していたものが概ね形になったので発信します。
今回のプロダクトはLaravel9 ✖️ Spotify APIを用いて、現在のユーザーのプレイリストから1以上選択し、選択したジャンルの楽曲だけを抽出したプレイリストを作成するといったものになっています。
理解度を高めるのと振り返りも兼ねてその過程をまとめたいと思います。
最後にリポジトリのURLを貼っておきますので、気になる方はぜひcloneして触ってみてください！

背景

そもそもなぜこのプロダクトを作ろうかと思ったのかというと、私自身が今はJ-POPが聴きたいという時もあれば洋楽が聴きたいなど、その時の気分でまちまちでした（笑）
しかし、自分のプレイリストはジャンル分けされておらず1つのプレイリストに詰め込まれてしまっている状態でした。。
手動で数千曲を追加したりするのは流石にめんどくさいので、ジャンル分けしたプレイリストが自動で作れるようになったら便利だなと思い作成しました！

技術スタック

言語・フレームワーク	バージョン
PHP	8.1.26
Laravel	9.40.1
Vue.js	3.3.4
TypeScript	4.7.4
Tailwind CSS	3.3.6

ローカル環境はLaravel Sailを使用しています。

主な処理

• Spotify API アクセストークン発行
• 現在のユーザーのプレイリスト表示
• プレイリスト作成までの流れ

Spotify API アクセストークン発行

まず、Spotify APIを使用するためのアクセストークンを発行するまでの流れ
詳細はAuthorization Code Flowに記載してありますがこんなイメージです。

ユーザー認可URL(https://accounts.spotify.com/authorize)　に必要なパラメータを付与しアクセス。
そうするとアカウントのリソースにアクセスするための認可が表示されるため、問題なければ同意します。

同意するとリダイレクトされ、リダイレクト先のURLにcodeという名前のパラメータがURLに付与されます。
これがauthorization codeになります。

次にアクセストークン発行URL（https://accounts.spotify.com/api/token）　に、先程のauthorization codeなどの必要なパラメータを付与し、リクエストを送るとアクセストークンが発行されレスポンスに返却される仕組みになっています。
これでSpotify APIを使用する準備が整いました！

現在のユーザーのプレイリスト表示

次にトップページで表示しているユーザーのプレイリスト表示です。
（スタイル汚くてすみません。。）

こちらのプレイリスト表示画面は以下の仕組みで動いています。

トップページにアクセスすると、現在のユーザーのプレイリストを取得する（Get Current User's Playlists）APIを叩きに行く処理が非同期で行われて、プレイリスト名と画像を取得して表示しています
チェックボックスにチェックを入れるとそのプレイリストのIDがフォームに追加され、そのIDを元にそのプレイリストに入っている楽曲を取得する流れです。

プレイリスト作成までの流れ

こちらがメイン処理になります。
先程のトップページで対象のプレイリストにチェック・作成するプレイリストの名前・抽出したいジャンルを選択したのち作成ボタンを押下。
そうすると以下のような流れで処理が行われます。

まず対象のプレイリストのIDを使用して、そのプレイリストのデータを取得するリクエストを送ります（Get Playlist）
そうするとプレイリストに入っている楽曲のデータなどがレスポンスとして返却されます（※一度のリクエストで取得できる楽曲は最大100曲）
それぞれの楽曲にはartistのデータが紐づいており、ここにジャンル（genres）のデータが存在する
このgenreは例えば日本国内の楽曲はj-popで一括りにされている訳ではなく、classic j-popやjapanese emo、アニソンだとshibuya-keiなどもあり多くのジャンルが存在します。
そのため、それぞれのgenreがJ-POP、洋楽、アニソン、K-POPのどれに属するのかを判定する処理を噛ませています。
これらの処理をループさせたのち、今回の対象となるジャンルの楽曲だけを抽出します。

補足
楽曲からアーティストデータを取得するAPI（Get Artist）を叩いているが正直いらないかも。。
この記事を書いている時に気付いたのだが、Get Playlistのレスポンスで返却される楽曲データの中にアーティストのジャンルも含まれていそうなため。。

抽出したのち、空のプレイリストを作成（Create Playlist）するリクエストを送る。
そうすると、作成したプレイリストのデータが返却されます。
この中のプレイリストIDを使用し、対象となる楽曲を作成したプレイリストに追加していく（Add Items to Playlist）リクエストを送る。
※こちらも一度のリクエストで送れる楽曲は最大100曲まで

この処理をループさせたら終了になります。
実際にSpotifyを開くと対象のジャンルだけが抽出されたプレイリストが作成されているかと思います！

最後に

いかがでしたでしょうか！
記事を書いている時に気づきも得られてよかったなと思いました。
こちらのリポジトリは以下になります。
Automatic-Create-Spotify-Playlist

気になられた方はぜひcloneして触っていただけると嬉しいです。
フィードバックもお待ちしております！
ただ現状いくつか問題点がございます。。

• 数千曲入っているプレイリストを対象にするとデバッグしながらでないと途中で落ちてしまう
  • 補足に記述した内容を改善したら落ちなくなるかも・・？
• リフレッシュトークンをうまく活用できていないため、アクセストークンが1時間で有効期限が切れてしまう

今後やりたいこと

• アニソン判定の向上（明らかアニソンではない楽曲も含まれてしまっている）
• 対応するジャンルの拡大（EDM, クラシック, ボカロ, VTuber etc..）

こちらも改善でき次第、記事をアップデートします。
ここまで読んでいただきありがとうございました！