GoogleスプレッドシートでSlackに投稿するボタンを作成してみた

はじめに

データアナリティクス事業本部　BIチームのkariyaです。
現在私が所属している組織では、勤務や休憩の開始終了時にSlackの特定のチャンネルにメッセージ投稿をしています。

手動でメッセージ投稿するのが手間に感じたため、1クリックでメッセージ投稿できるボタンをGoogleスプレッドシートで作成してみました。今回はお昼休みの開始終了時に使う想定で作成しています。

やりたいこと

• ボタンの1クリックで実行する
• Slackの複数のチャンネルに同じメッセージを投稿する
• Slackのプロフィール(メッセージ、絵文字)を変更する
• メッセージや絵文字を簡単に変更できる

ではやってみましょう。

準備：Slackでの作業

はじめにSlack側での準備をします。

Slack APIのトークンを取得

Slack Appを作成し、Scopeに以下の権限を追加します。

• chat:write(メッセージを投稿する権限)
• users.profile:write(プロフィールを更新する権限)

設定後はこのように表示されます。

アプリをインストールし、User Tokenをコピーしておきます。

後でGoogleスプレッドシートに貼り付けます。この情報は、自分のユーザーとしてAPIを実行するための情報ですので、他人に見られないようにご注意下さい。

Slackの自分のメンバーIDを取得する

Slackのプロフィール画面に移動します。

3点リーダーから、「メンバーIDのコピー」でコピーできます。

以上でSlack上の作業は完了です。 ここからはGoogleスプレッドシートでの作業です。

Googleスプレッドシートの作業

パラメータ設定シートの作成

Googleスプレッドシートにて、以下のようなシートを作成します。 着色セルはこのあとGoogle Apps Script(GAS)で読み取る部分です。

シートの設定内容

• APIキー：Slack APIから取得したUser Token
• SlackユーザーID：プロフィールから取得したメンバーID
• 昼休み開始(終了)メッセージ：チャンネルに投稿するメッセージ
• 昼休み開始(終了)ステータス絵文字：自分のステータスに表示する絵文字
• 昼休み開始(終了)ステータスメッセージ：自分のステータスに表示するメッセージ

Apps Scriptの作成

拡張機能のApps Scriptへ移動します。

以下のコードを貼り付けます。
postSlackMessageは必要なチャンネルの分だけ設定します。 メッセージ設定やB7など、シート名やセルを指定している部分はスプレッドシートと同じものを設定します。

// 定数設定
const slackPostMessageUrl = 'https://slack.com/api/chat.postMessage'
const slackSetStatusUrl = 'https://slack.com/api/users.profile.set'

let mySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('メッセージ設定');
let token = mySheet.getRange('B7').getDisplayValue();
let slackUserId = mySheet.getRange('B8').getDisplayValue();

// お昼休み開始宣言
function postMessage_lunch_start() {
  
  // セルからメッセージ内容取得
  let message_input = mySheet.getRange('B10').getDisplayValue();
  let emoji_input = mySheet.getRange('B11').getDisplayValue();
  let status_input = mySheet.getRange('B12').getDisplayValue();
  
  // Slackに投稿
  // チャンネル名を変えてpostSlackMessegeを複数行で実行すれば、同時に複数チャンネルに投稿できる
  postSlackMessage('project-xxxx', message_input);
  postSlackMessage('team-xxxx', message_input);
  postSlackMessage('times-xxxxx', message_input);

  // Slackステータス変更
  changeSlackStatus(emoji_input, status_input);
}

//お昼休み終了宣言
function postMessage_lunch_end() {
  
  // セルからメッセージ内容取得
  let message_input = mySheet.getRange('B14').getDisplayValue();
  let emoji_input = mySheet.getRange('B15').getDisplayValue();
  let status_input = mySheet.getRange('B16').getDisplayValue();

  // Slackに投稿
  // チャンネル名を変えてpostSlackMessegeを複数行で実行すれば、同時に複数チャンネルに投稿できる
  postSlackMessage('project-xxxx', message_input);
  postSlackMessage('team-xxxx', message_input);
  postSlackMessage('times-xxxxx', message_input);

  // Slackステータス変更
  changeSlackStatus(emoji_input, status_input);
}

// メッセージ投稿
function postSlackMessage(channel, message){
  const payload = {
    'token' : token,
    'channel' : channel,
    'text' : message,
    'as_user' : true
  };
  const params = {
    'method' : 'post',
    'payload' : payload
  };
  UrlFetchApp.fetch(slackPostMessageUrl, params);
}

// ステータス変更
function changeSlackStatus(emoji, message) {
  const headers = {
    'Authorization': 'Bearer ' + token,
    'X-Slack-User': slackUserId,
    'Content-Type': 'application/json; charset=utf-8'
  };
  const payload = {
    'profile': {
      'status_emoji': emoji,
      'status_text': message
    }
  };
  const options = {
    'method': 'post',
    'headers': headers,
    'payload': JSON.stringify(payload)
  };
  UrlFetchApp.fetch(slackSetStatusUrl, options);
}

ボタン割り当て

ボタンを作成し、ボタンを押すとコードが実行されるようにします。
まず、挿入から図形描画を選択し、好きな形で図形を作成します。

作成した図形の3点リーダーから「スクリプトを割り当て」を選択し、割り当てる関数を設定します。

今回は昼休み開始ボタンを押すとpostMessage_lunch_startが実行されるように設定します。

同様に昼休み終了ボタンを作成し、postMessage_lunch_endを設定します。

実行してみる

お昼休み開始ボタンを押してみると、メッセージ投稿ができました！プロフィールも更新できています。

おわりに

最後までお読みいただきありがとうございました。 普段のちょっとした手間を削減するヒントになれば嬉しいです。