feature image

2021年3月18日 | ブログ記事

Spotify API を使ってみた

皆さんこんにちは。20BのRozelinです。この記事は新歓ブログリレー2021 10日目の記事です。

traPでは様々な部内サービスを利用することができますが、その中でも最も多くの部員に使われているのは部内SNSツール「traQ」だと思います。そこで、プログラミングの勉強と自分の娯楽を兼ねて、traQ用のBOTとSpotify APIを組み合わせて、traQ内でSpotifyの楽曲検索とアーティスト検索をできるようにしてみました。

最初

Spotify APIを使うにあたって、使おうと思っている全てのリクエストのコードを全て1から書くのはコスパが悪すぎると思ったので、パッケージを使うことにしました。BOTのコードはTypeScriptで書いていたので、TypeScriptで使えるSpotify APIのパッケージを探したところ、spotify-web-api-tsというものを見つけました。これを使えばnew SpotifyWebApi({ accessToken: ACCESS_TOKEN })するだけでSpotify APIが簡単に使い放題!超便利!!!と思ったのですが、ここで問題が発生しました。

それは、Spotify APIのアクセストークンは1時間で失効してしまうということです。当初はアクセストークンを環境変数としてBOTを動かしているサーバーにおいていましたが、これではせっかくtraQ上でSpotifyの検索機能を完結させようとしても、1時間おきにSpotifyのサイトで更新したアクセストークンを取得して、BOTの環境変数を書き換えて、BOTをデプロイし直すという作業が必要になり、非常にめんどくさいです。こんなことするくらいならSpotifyのサイトで直接検索した方が早いです。

何か解決策はないかと調べていたところ、アクセストークンとは別にリフレッシュトークンを入手することで、リフレッシュトークンを利用して新しいアクセストークンを発行できることが分かりました。リフレッシュトークンには特に有効期限はついていないので、リフレッシュトークンの入手と保持ができれば先ほどの問題は解決されます。

いざ

下準備

リフレッシュトークンの取得にはクライアントIDとクライアントシークレットが必要なので、Spotify for Developersのダッシュボードで適当な名前でアプリを作り、これらを入手します。また、アプリの設定からリダイレクトURLも設定します。このURLは、リフレッシュトークンを入手するために必要なコードを${REDIRECT_URL}/?code=${CODE}の形で受け取るために必要なものなので、Webアプリでないならば適当にlocalhostとかでいいと思います。

いよいよ

https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=code&redirect_uri=${REDIRECT_URL}にアクセスします。すると、アクセスした端末でSpotifyにログインしていなければログインを要求された後、認証画面が出てくるので「同意する」をクリックします。その後${REDIRECT_URL}/?code=${CODE}にリダイレクトされるので${CODE}の部分をコピーします。このコードをリダイレクトURLやBase64でエンコードしたクライアントIDとクライアントシークレットとともにhttps://accounts.spotify.com/api/tokenにPOSTし、成功するとアクセストークンとリフレッシュトークンが入手できます。ここで入手したリフレッシュトークンをhttps://accounts.spotify.com/api/tokenにPOSTすれば新しいアクセストークンが入手できます。
これで、アクセストークンが失効しても、簡単に新しいアクセストークンが取得できるようになりました。

使ってみた

Spotify APIには様々なものがありますが、私が使ったのは Search API, Artists API, Playlists API です。
Search API と Artists API を組み合わせて、BOTがコマンド付きのメッセージを受け取ったらコマンドの後に続く文字列で検索をかけて、上位にでてきた楽曲や、最上位に出てきたアーティストの Top Tracks を返信するようにしたり、Playlists API を利用して、特定のプレイリストに含まれる楽曲の中からランダムに一曲選んで返信したりするという機能を実装してみました。

使ってみて

Spotify API めっちゃ便利~ってなりました。ただ一つだけ不満点を挙げるなら、あるアーティストがリリースした楽曲をアルバム毎ではなく、楽曲単位で全取得できるAPIがなかったことです。多分現在のSpotify APIの仕組みの中で、あるアーティストの全楽曲を取得するには、まずそのアーティストの全アルバム(シングル含む)を取得してから、その後、各アルバムについて収録楽曲を取得する必要があるのでめんどくさいです。それ以前に、レスポンスまでに時間がかかります(試したわけではないのであくまで予想ですが……)。
あともう1つ、落とし穴というほどでもないですがひっかけだなと思ったのは、楽曲情報やアーティスト情報をレスポンスとして受け取った場合、hrefという項目があるので、そこに格納されているURLにアクセスすればいわゆる普通のSpotifyのページが表示されると思ったのですが、ここで言うhrefにはSpotify API内のURLが書いてあるので、アクセスしても

{
  "error": {
    "status": 401,
    "message": "No token provided"
  }
}

と出てくるだけです。悲しい。アクセスすれば普通に楽曲の再生とかができるURLは、hrefではなく、external_urlsという項目にspotifyというキーで格納されています。BOTに楽曲情報としてタイトルと視聴URLをメッセージ送信させる場合は、external_urlsの方を使う必要があるので注意です。

参照

おわりに

春休みに入ってから作り始めたBOTなのでまだまだ機能は少ないですが、Spotify APIを利用した機能をもっと増やせればいいなと思っています。私が作成したBOT以外にも、traQには部員たちが作成した個性豊かなBOTがたくさんいるので、traPに入部したらぜひそれらのBOTとコミュニケーション?をとってみてください。皆さんの入部をお待ちしています!

明日の担当は tsu_ji_ken です。お楽しみに~

Rozelin icon
この記事を書いた人
Rozelin

SysAd班、グラ班、音ゲーマー(進捗を生め)

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2021年4月2日
DXライブラリで重力パズルゲームを作る
Macky1_2 icon Macky1_2
2021年4月17日
競プロと CTFの 体験会(CPCTF) を開催します!
Hmcmch icon Hmcmch
2021年3月24日
traQのメンション・チャンネルリンク機能について【新歓ブログリレー16日目】
reyu icon reyu
2021年3月15日
Qアノンを知ろう!
Azon icon Azon
2021年4月29日
UnityでEvalを実装して、そしてゲームも作っちゃおう
Renard icon Renard
記事一覧 タグ一覧 Google アナリティクスについて