SlackのStatusにSpotifyの再生曲･アーティスト情報をリンクする。
レコメンドがハイスペックすぎるSpotify。APIも開放されてていろいろできる。SlackStatusとGoogleCalendarをリンクする方法があって、これを応用してSpotifyとリンクしてみました。
というか、これやってる人が仲良しなのでHOBOやってもらいました。ありがとう。詳しくは下記見てください! ↓こっちのほうが実用的です。
完成形
さて、実際どんな感じになるのかというと、下記のように表示されます。1分に1度Requestをかけてるので更新は1分毎です。Spotifyを聞いてる限り常に表示されるので、恥ずかしい曲聞けないとかのデメリットもあるみたい。(私は自分の聞いてる曲に自信あるので平気です。むしろ見て。)
毎日15時間位聞いてるので、常にActiveです。
METHOD
GASで事前設定
まず、本件は全てGAS上で実施します。その上でOAuth認証が必要になるので下記を参照。
記事に従って、ライブラリにOAuth認証を登録します。versionは最新で。
1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF
続いてGASのメニュー→プロパティからscriptIDをコピーしておきます。Spotify側からのcallbackに必要になります。
Spotify APIの取得と設定
Spotify for developerにアクセスします。※Spotify会員にはなっててくださいね。笑😅 ここからの方法イマイチ覚えてないですが、難しくなかったはず。
ダッシュボードにアクセスしてログインします。この時Spotifyの会員であることが条件です。※有料会員でなくても大丈夫だったはず。
ログイン後、ダッシュボードでAPPを作成します。ちょっとした使用条件を記載する項目がありますので記入しましょう。
こんな感じでAPPの完成です。
EDIT SETTINGSを開いてwebsiteとRedirectURIを入力します。websiteURLは適当で大丈夫です。RedirectURIは下記です。<scriptID>の部分にGASの項目で取得したIDを入力してください。
https://script.google.com/macros/d/<scriptID>/usercallback
保存をして、SpotifyAPIの設定は完了です。最後にKeyを2つコピーして再びGASの設定にもどります。※このKeyはGAS上で必要になります。
GASの設定
いよいよGASを書きます。といってもコピペしてください。太字のところに必要情報を入力します。Slackトークンはここから発行してください。
※ぐっさんに感謝。リンクとかあったら貼ります。ください。
// spotifyの情報入力
var SPOTIFY_CLIENT_ID = 'XXXXXXXXXXXXXX';
var SPOTIFY_CLIENT_SECRET = 'XXXXXXXXXXXXXXXXXX;// OAuth2認証
// getSpotifyServiceの作成
function getSpotifyService() {
return OAuth2.createService('spotify')
// 認証用URL
.setAuthorizationBaseUrl('https://accounts.spotify.com/authorize')
// Token取得用URL
.setTokenUrl('https://accounts.spotify.com/api/token')
// SPOTIFY_CLIENT_ID
.setClientId(SPOTIFY_CLIENT_ID)
// SPOTIFY_CLIENT_SECRET
.setClientSecret(SPOTIFY_CLIENT_SECRET)
// 認証完了時用コールバック関数名
.setCallbackFunction('spotifyAuthCallback')
// 認証情報格納先
// アクセストークンやリフレッシュトークンや、有効期限などが格納
.setPropertyStore(PropertiesService.getUserProperties())
// 現在試聴中のデータがとりたいので必要なscopeを定義
// 複数必要な場合は半角スペース区切りで設定
.setScope('user-read-currently-playing');
};// 認証完了時用コールバック関数
// アクセストークンなどの情報をユーザー毎のキャッシュに格納
function spotifyAuthCallback(request) {
var spotifyService = getSpotifyService();
// handleCallback でアクセストークンなどを propertyStore に格納する
var isAuthorized = spotifyService.handleCallback(request);
if (isAuthorized) {
return HtmlService.createHtmlOutput('認証に成功しました。');
} else {
return HtmlService.createHtmlOutput('認証に失敗しました。');
}
};// 認証情報リセット用関数
// 主にデバッグ目的等に利用
function resetSpotifyService() {
var spotifyService = getSpotifyService();
spotifyService.reset();
};/*
Main
*/
// WEB アプリケーションとしての認証用コールバック関数
function doGet() {
var spotifyService = getSpotifyService();
var outputHtml = '<h1>Spotify API Test</h1>';
if (!spotifyService.hasAccess()) { // 未認証時
// ログイン用URL取得
var authorizationUrl = spotifyService.getAuthorizationUrl();
// HTML組み立て、表示
outputHtml += '<p>Spotifyにログインしていません。ログインしてください。</p><p><a href="' + authorizationUrl + '" target="_blank">Spotify Login</a></p>';
} else { // 認証時
// アクセストークンの有効期限が1時間となっているのでアクセストークンを都度リフレッシュ
spotifyService.refresh();
var accessToken = spotifyService.getAccessToken();
// (例)自身の情報を取得
outputHtml += (function () {
var fetchResult = UrlFetchApp.fetch('https://api.spotify.com/v1/me', {
headers: {
Authorization: 'Bearer ' + accessToken
}
});
var statusCode = fetchResult.getResponseCode();
var content = JSON.parse(fetchResult.getContentText());
return '<h2>ユーザー情報</h2><pre>' + JSON.stringify(content, null, 4) + '</pre>';
})();
outputHtml += (function () {
var fetchResult = UrlFetchApp.fetch('https://api.spotify.com/v1/me/player/currently-playing?market=JP', {
headers: {
Authorization: 'Bearer ' + accessToken,
// 下記を定義しておかないとトラックやアーティスト情報が英語になる。
'Accept-Language': 'ja,en'
}
});
var statusCode = fetchResult.getResponseCode();
var content = JSON.parse(fetchResult.getContentText() || '{}');
var track, artist, displayStr;
if (statusCode === 200) {
track = content.item.name;
artist = content.item.artists[0].name;
displayStr = track + ' / ' + artist;
} else {
displayStr = '再生中の曲はありません';
}
return '<h2>Now Playing</h2><ul><li>' + displayStr + '</li></ul>';
})();
}
return HtmlService.createHtmlOutput(outputHtml);
};// 定期実行用サンプル
function timeTriggerSampleFunction() {
var spotifyService = getSpotifyService();
// アクセストークンの有効期限が1時間となっているのでアクセストークンを都度リフレッシュ
spotifyService.refresh();
var accessToken = spotifyService.getAccessToken();
var fetchResult = UrlFetchApp.fetch('https://api.spotify.com/v1/me/player/currently-playing?market=JP', {
headers: {
Authorization: 'Bearer ' + accessToken,
// 下記を定義しておかないとトラックやアーティスト情報が英語になってしまう
'Accept-Language': 'ja,en'
}
});
var statusCode = fetchResult.getResponseCode();
var content = JSON.parse(fetchResult.getContentText() || '{}');
var track, artist, displayStr;
if (statusCode === 200) {
track = content.item.name;
artist = content.item.artists[0].name;
displayStr = 'NowPlaying：' + track + ' / ' + artist;
} else {
displayStr = '再生中の曲はありません';
}
return displayStr;
};// Slackの設定
function changeSlackStatus(){
var token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; //Slackのトークンを入力
var data = timeTriggerSampleFunction();
console.log(data)// 再生中の場合は、こっちを表示させる。
var profile = {
'status_text': data,
'status_emoji': ":spotify1:", //Spotifyの絵文字を予め作成
};
// 停止中の場合は、こっちを表示させる。
var profile_noplaying = {
'status_text': data,
'status_emoji': ":nospotify:", //Spotifyの絵文字を予め作成
};
// 表示情報の切り替え。
var slacktoprofile;
if (data == '再生中の曲はありません') {
slacktoprofile = profile_noplaying;
} else {
slacktoprofile = profile;
}
UrlFetchApp.fetch("https://slack.com/api/users.profile.set?token=" + token + "&profile=" + encodeURIComponent(JSON.stringify(slacktoprofile)));
}
入力が終わったらWEBアプリケーションとして公開します。導入後URLが発行されるのでアクセスすると、Login画面が出てきますのでSpotifyのパスワードを入力しましょう。承認後もう一度アクセスします。
すると、表示されてるーーーー!
あとは、トリガのタイミングを1分とかで設定してください。以上です。
紹介タイム
ついでなので、好きなアーティスト紹介しておきます。
haruka nakamura
10年くらいファンやってる青森のアーティストさん。心地よくていろんな気持ちが収まります。
Hot Chip
エレクトロ・ポップは作業中によく聞きます。LCDサウンドシステムというアーティストつながりで知りました。
Cut Copy
これも作業中が多いです。ランニング中とかもちょうど自分ペースに合っていて好きです。薄い紹介ですけど、もう書くのが面倒になってしまったのですみません笑。ぜひ。
技術ってすごいなー。
