SlackでSpotifyを操作してオフィスのBGMを変更できるようにしたら便利だった話

Last updated at 2019-12-11Posted at 2019-12-11

この記事はこの記事はSmartHR Advent Calendar 2019の11日目の記事です。

私自身はサポートチームに所属しており、サポートで利用しているIntercomのステータスをSlackから操作する実用的なSlash Commandsを作ったりもしているのですが、今回は業務とは直接関係のない、SlackとSpotifyの連携の話になります。

本題の前に

今回の記事のメインはSlackからSpotifyを操作する部分なのですが、その前に「今オフィスで流れている曲の情報をSlackに流すやつ」を作っていたので、簡単に紹介します。

Slackの特定のチャンネルにSpotifyで再生中の曲を流す

弊社オフィスでは、執務室のスピーカーに繋がっているiPad上のSpotifyアプリでBGMを流しています。

「これ結構いいなー」と思う曲がときどきあるのですが、かといってiPadまで行って曲を確認するのは面倒くさい。

ということで、iPadのSpotifyで再生中の曲をSlackに流すようにしました。

Spotifyで再生中の曲をGASの定期実行で取得する

SpotifyのAPIを利用する際の認証やトークンのリフレッシュ方法などは下記の記事を参考にしてください。

GASを使って、Spotifyで再生中の曲をSlackのステータスに反映する

認証ができれば、あとは再生中の曲を取得する関数をGASのトリガーで毎分実行すればOKです。

取得した結果を別途用意したスプレッドシートの最終行と比較して、同じだったら、そこで処理終わり。

最終行と違う曲だったら、曲の情報を追記して、以下のSlackに投稿する処理を走らせます。

再生中の曲をSlackに投稿する

再生中の曲は、Spotifyの以下のAPIを利用して取得します。

Get Information About The User's Current Playback

返ってきたJSONをパースしてtrackDataとして保持。

trackデータにSpotifyのデータを入れる

trackData.id = content.item.id;//曲のid
trackData.track = content.item.name;//曲名
trackData.artist = content.item.artists[0].name;//アーティスト名
trackData.album = content.item.album.name;//アルバム名
trackData.albumimg = content.item.album.images[0].url;//アルバムの画像
trackData.trackurl = content.item.external_urls.spotify;//曲のURL
trackData.albumurl = content.item.album.external_urls.spotify;//アルバムのURL
trackData.artisturl = content.item.artists[0].external_urls.spotify;//アーティストのURL

Spotifyのtrackオブジェクトについての詳細は以下のドキュメントを参照してください。

track obuject(full)

あとはtrackのデータを、SlackのBlock Kitの型にはめて送るだけ

Block Kitというのは、Slackが用意しているメッセージUIフレームワークで、JSONでメッセージのUIを記述できます。

Block Kit

Block Kit Builderを使うと、見た目を確認しながらBlockを作成できるので便利です

Block_Kit部分の記述

slackBlocks = [
  {
    "type": "section",
    "text": {
        "type": "mrkdwn",
      "text": ":musical_note: *<" + trackData.trackurl + "|" + trackData.track + ">*"
    }
},
{
    "type": "section",
    "fields": [
        {
            "type": "mrkdwn",
            "text": "*Artist*\n<" + trackData.artisturl + "|" + trackData.artist + ">"
        },
        {
            "type": "mrkdwn",
            "text": "*Album*\n<" + trackData.albumurl + "|" + trackData.album + ">"
        }
    ],
    "accessory": {
        "type": "image",
        "image_url": trackData.albumimg,
        "alt_text": trackData.album
    }
},
{
    "type": "divider"
}
]