【spotify API】Spotify for Developersアプリ登録＆APIを叩いて情報取得してみる

今回は、音楽サブスクリプションサービスのspotifyで、各種情報を得られるAPIがあるというので、実際に使ってみたいと思います。管理人はspotify無料プランのアカウントを持っていましたが、それでもある程度使える様子です。早速、アプリ登録やurlエンドポイント・得られる情報などを確認していってみましょう。

spotify API利用準備～Spotify for Developersにアクセスし、アプリ登録

とりあえず、今持っている無料アカウントでspotifyにログインした状態で、Spotify for Developersのページに行ってみます。 持ってない方はアカウントを登録してから行います。右上のダッシュボードに。

（おそらく初回だと）『規約への同意』的なページがでてきますので、規約を読んでI accept the Spotify Developer Terms of Serviceにチェック入れます。

Spotify for Developersのダッシュボードに。 まだアプリは登録されていません。『Create app』でアプリを登録していきます。流れがだいたい一緒なので、googleとかtwitterでAPIキーを取ったことのある方はスムーズにいくと思います。

テスト用のアプリを登録していきます。 項目は『アプリ名・概要・サイト名・Redirect URIs・使う予定のアプリ』という内容です。テスト的にとってくるだけなので適当につけてますけど、認証をかませる場合などはRedirect URIsの設定を間違えると動かなくなるので気を付けます（管理人は以前、twitterログイン機能を作っているときに、コールバックとかRedirectのURIを打ち間違えて、動かなくなったことがあります）。

アプリ登録後は、『Client ID』も発行されます。他のサイトでいう『APIキー』みたいなやつだと思います。また、他のサイトでいう秘密鍵？みたいな名称の『Client secret』についてはこの画面では表示されていませんが、『View Client secret』の部分を押すと表示します。

Spotify for Developers
https://developer.spotify.com/

track ID入れてボタンを押すと、spotify APIから情報取得するコード例

htmlとjavascriptで構築してみました。操作は、『spotifyのトラックidを入れてボタンを押すと、楽曲の情報が表示される』というもの。アクセストークン取得はなんか仕様上、直接GETメソッドで叩けないらしいので、method: POSTでheaderやbodyを設定して送信します。レスポンスの内容をinnerHTMLで要素にセットします。

画像urlはdata.album.images[1].urlとなっています。[0]や[2]などサイズ違いも用意されています

また、テスト環境なのでClient IDやClient secretをスクリプトに書いていますが、本番時はセキュリティ上の理由からこの部分をサーバーサイド処理にするのが推奨です。右クリックでソース見たら丸見えになるので。phpやpython、jsならnode.jsとかで処理してフロント表示みたいな感じですね。

track ID入れてボタンを押すと、spotify APIから情報取得するコード・動作例

ではさっそく動作確認してみましょう。『https://open.spotify.com/intl-ja/track/〇〇〇』の『〇〇〇』がIDになっているので、この部分をつかって情報とります。

適当に管理人が最近spotifyで聴いていた、Silversteinの曲を取ってみました。ジャケット画像・リリース日・収録アルバムなどはとれましたが、30秒のプレビュー用urlが取れないようです。

コンソールでレスポンス内容をチェックします。プレビュー用urlはnullでした。調査したところ曲の配信者が、そもそもプレビュー用urlを設定していないケースが多い模様です。データのほかの項目としては『popularity』とかも使えそうな気がします

そのほかのトラックも取ってみましょうか。最近気に入ってたSING女团の山海图 。一人だけピンク髪アニメ調なのは、なんか意味があるのでしょうか（笑）

あとはanthraxのお気に入り曲とかも。結局ジャケット眺めて遊んだだけでしたが。

あとがき・まとめ

まとめると、こんなところでしょうか。すでにこのAPIでいろいろアプリ開発している方もいるみたいです。課題となっているClient IDやClient secret部分のサーバー処理とかも、こんどやってみます。