社内の Spotify を Slack コマンドと連携した話 :D

この記事は Wanoグループ Advent Calendar 2019 の 19日目です！📅

はじめに

こんにちは、EDOCODE株式会社で採用を担当している山田と申します！

普段は採用をメインに、組織にまつわることを色々とやっています。最近では Code Chrysalis というコーディングブートキャンプを提供している会社と一緒に、奨学金プログラムをスポンサーしたりしています😎

作ったもの

/epotify と Slack コマンドすると、今かかってる楽曲の情報が Slack でポストされる Slack アプリをつくりました。

これで、社内 BGM でかかっている楽曲がすぐにわかります 💪

Wano

Wano という会社（とグループ）は、音楽が好きな人が多いです。
会社のコーポレートサイトを見てもらえれば、どんな感じかだいたいわかると思います。

Wano Co.,Ltd.

ファーストビューの画像を貼ってみました。
なんの会社かわからないよという方は、ぜひミートアップへお越しください！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
音楽サービスエンジニアmeetup Vol.3 開催レポート
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
そもそもの会社のそういったとこもあって、オフィスではわりと自由に音楽が流せる環境です 🎸

こんな感じでスピーカーがいくつかぶら下がっていて、仕事中に流れている BGM は、結構気になるものが多いです。色んなジャンルの曲（人）がいい感じでミックスされているので、自分では聴かないような曲も聴けます👍

Shazam りたい

そうなると、Shazam りたくなるのが人の性でして、以前はがんばって Shazam に聴かせたりしてたんですが、そこはやはりオフィスですから・・。周りの雑音とかでなかなか認識してくれないのですよね・・。

そこで、今かかってる曲が簡単に調べられたら良いなぁ〜〜と思いました。あと音楽が普通より好きな社員が集まって #音部 という部活もできてきて、Slack チャンネルもあります。

こんな感じで、とても生暖かいやりとりがされたりしています。ちなみにこのキャプチャは @fukubaka0825 が FUJI ROCK でジャネール・モネイしたときの #音部 チャンネルです。

こんな感じで音楽好きがたくさんいるんですから、今流れている曲を Slack にポストできたら、きっと雑談が始まるやろなと、そう目論んだわけです🤔

Slack コマンド

まずはフックとなる Slack コマンドです。幸い、Slack には「コマンド」と言われるなんかがあるのは知ってました。

なので、とりあえず slack command あたりで Google すると、ドキュメントが出てきました。

Enabling interactivity with Slash Commands

このドキュメントを読んでいくと、Create your Slack app と言われます。なるほど、Slack にアプリをつくるようなイメージなんだなー。

（ここで Slack にアプリをつくる権限とかがない場合は、話のわかる偉い人に相談してください。アプリを作成するところとかは、気軽に Google してください。）

アプリにはもろもろの設定ができますが、正直ここが一番時間のとられるところです・・。僕もめっちゃ時間がかかりました。

たぶん名前はわりと早めに思いついたのですが、アイコンやらを Figma で制作してたら、1時間ぐらいは経ってた気がします😰

社内制度などを考えるときは、とにかく名前が肝心です。名前をつけるというのは、人類の偉大な発明のひとつだと言われていますが、たとえ人事として社内のちょっとしたサービスをつくるときでも、一つのプロダクトをつくるような気持ちで名前をつけるべきです・・！！😤

そして僕がつけたのは、Epotify です。
EDOCODE の E と Spotify の potify を合体させました。

次いきましょう😇

Google Apps Script (a.k.a. GAS)

こういうこじんまりしたものを IT企業の人事が作ろうとすると、意識高めに「ラムダラムダ！サーバーレス！」とか言ってしまいがちですよね。

素人は黙って Google Apps Script です。会社のグループウェアが G Suite だったら、あなたのアカウントでも簡単にスクリプトを書き始められますから。📐✂️🖋

それで、普通に考えたら Slack コマンドがフックされたら、何かしらの要求がサーバーに投げられるはずです。じゃあどこに投げたら良いのか。どうやって GAS 側は受けたら良いのか。

GAS には doPost という機能がありますので、それを使います。

Web Apps | Apps Script | Google Developers

これで、Slack コマンドされたらなんか処理することができるようになりました。処理の内容としては、Spotify API に「今かかっている楽曲の情報をとる」みたいなやつがきっとあるから、それをとってきて、いい感じのテキストにして返す、というイメージです。✌️

なんか行けそうな気がしてきました！👍

Spotify API

spotify api で検索します。

Web API | Spotify for Developers

なんか作りたいな〜〜と思ったときに、本家のデベロッパーサイトがしっかりしていたときって、めっちゃほっとしますよね

しかしドキュメントを読んでも、なんかあんまりピンと来ない・・。

僕がやりたかったのは、「4F の執務フロアにある PC の Spotify アプリで再生中の楽曲をとりたい」だけなんやけど。

実はこのとき、僕の頭ん中ではデスクトップで起動されている Spotify の「アプリ」にアクセスするようなイメージを持っていました。「あの」PC の「あの」アプリに接続して、その「アプリが再生」している楽曲の情報を取得するイメージです。

なので、例えば Slack コマンドでそのデスクトップアプリケーションに GUI で表示されている「次へ」を押せる（操作できる）ようなイメージを持っていました。リモコンを作ってるイメージですね。

（これ、実際に思い込んでみないと、ハマり感が伝わらないですね・・。）

いまこうやって書いてると当たり前すぎてアレなんですが、Spotify はストリーミングサービスなので、往年の iTunes のように「楽曲ファイル」を再生しているわけではありません。僕は完全にこのパラダイムで考えてしまっていました。でも実際は PC に音楽データがあるわけではなく、サーバーにデータがあるわけです。

で、ようやくそういった仕組みの違いに気づいて、ドキュメントに書いてることが頭に入ってくるようになりました。あとはまあ取った情報をうまいことアレして Slack 側にポストするだけですね。

Get the User's Currently Playing Track BETA
↑とかを参照して、リクエストします。

SpotifyにAPIリクエストするやつ.js

function requestSpotifyApi(apiName, query) {
  var method, endpoint, url = '';
  var domain = 'https://api.spotify.com/v1';
  
  switch(apiName) {
    case 'currently-playing':
      method = 'GET';
      endpoint = domain + '/me/player/' + apiName;
      break;
      
    case 'playlists':
      method = 'GET';
      endpoint = domain + '/' + apiName + '/' + query;
      break;
      
    default:
      method = 'GET';
  }
  
  var accessToken = getSpotifyAccessToken();
  
  var contentType = 'application/x-www-form-urlencoded';
  var params = {
    'method': method,
    'contentType': contentType,
    'headers': {
      'Authorization': 'Bearer ' + accessToken
    }
  };
  
  return UrlFetchApp.fetch(endpoint, params);
}

API ドキュメントにあるような JSON が返ってくるので、あとは必要な情報にアクセスして Slack への返却テキストを作って、渡すだけです。

使われ方

/epotify はどのチャンネルでも呼び出せるようになっています。（別に意図してそうしてないのですが、まあいいかと思ってそのままにしています。）

だいたいは、#音部で使われています。

Slack は標準で Spotify との連携ができるようになってるみたいで、open.spotify.com の URL がポストされると、いい感じに GUI 付きのコンテンツを表示してくれます！Yay!⛱

当初はランダムに #音部チャンネルにいる社員に「リクエストしなよ！」とかってボットからポストされて、それにレスして好きな曲をかけられる、みたいなのもおもしろいな〜とか思ってたのですが、全然できてないですね。。。いつかやりたいです！
（ちなみに EDOCODE 社内ではシャッフルランチが Slack で毎日ランダムに投げられています😎）

最後に

Slack と GAS を連携してあれこれするというものはよく見かけますが、今回は Spotify との連携を紹介しました。

上述したように、Spotify はストリーミングサービスなので、すべて Web で完結するのが素晴らしいなと思いました。もしこれが CD プレイヤーなどのデバイスを操作しないといけない場合、もっと IoT チックなインテグレーションが必要になったのではないかなと思います。

Web API のマッシュアップだけで、リアル世界との結びつきが得られているのは、なかなか無いような気がします。よく知りませんが。

💪採用してます！！😊

最後になりますが、

EDOCODE は 絶賛エンジニアを募集中 です！！

EDOCODE には Google Maps APIで50万以上使っていたことで有名な @ktat がいたりしますよ！ご興味あるかたは、ぜひお話しさせてください😃

人に優しくをモットーに 😊 これからのサーバーサイドエンジニアを募集中！ | Wantedly

2020年もよろしくお願いいたします！🙌