皆さんこんにちは。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の方を使う必要があるので注意です。

参照

• Spotify for Developers Authorization Guide: https://developer.spotify.com/documentation/general/guides/authorization-guide/
• spotify-web-api-ts: https://adamgrieger.github.io/spotify-web-api-ts/

おわりに

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

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