この記事はモチベーションクラウドシリーズアドベントカレンダー2020の4日目の記事です。

どうも初めまして、リンクアンドモチベーションでエンジニアをしている伊藤と申します。
完全に別件の宣伝ですが、2020/12/18に弊社がスポンサーにもなっている【オンライン開催】銀座Rails#28 で「モチベーションクラウドを支える非同期処理の変遷」というテーマで発表します。
今回のゲストスピーカーはあのまつもとゆきひろ(@yukihiro_matz)さんなので興味があればぜひ!!

はじめに

業務効率化のために slack apiと google app scriptを使ったslack appを作りました。

なぜ作ったかから作成の手順を3つのステップに分けて解説します。

こんなことありませんか？

〜オンライン会議にて〜

上司　「おい、若手！全員いるか確認しろ！」
自分　「はい！」
...
自分　「(顔だけじゃわかんないし、人数的には足りないけど誰いないかわかんないよ...)」
上司　「誰いない？いない人声かけて！」
自分　「...(いないフリ)」
上司　「ん？？？」

自分　🥺

新しい生活様式になり、ガラリと変わった会議の形 = オンライン会議での若手のあるある・イライラの一つである、

「オンライン会議、誰がいないか全然わからない問題」

を解決するために！

出欠を報告してもらう
slack用アプリ (スラッシュコマンド)

を作成しました！

若手でも作れます！！

何を作ったか

使い方は簡単!!

(「出欠確認して」と言われる前にやっておくこと！)　← こういうのが若手のうちはとっても大事

全員がいるslackチャンネルで /attendance と入力する
参加者がボタンをおす
名前が残っている人を読み上げて、参加しているか確認する

ほら、いない人が一目瞭然！！！

もうこれで

「誰がいないか画面とにらめっこ」

なんてしなくていいですね！！

今回はslack apiを活用しながら、Google Apps Script (以降 gas) で実装していきます。

いいね！と思った人はぜひLGTMお願いします！！

作り方

解説はいくつか飛ばしますがgasは活用記事が多かったり、本家のReferenceも整備されているのでそちらも合わせて参照ください。

全体像

/attendanceを実行してから、欠席者の名前が出るまでのフローは以下のようになっています

なので

slack appの設定
スラッシュコマンドの作成
参加ボタン用apiの作成

の3つに分けて説明していきます！

1. slack appの設定

まずはslack appを登録していきます

Slack APIへアクセスし下記の「Start Building」をおします

すると次のようなポップアップが出てくるので

App Nameはお好みで (出欠確認bot とか)
Development Slack Workspace は導入する予定のslackのworkspaceを選択

早速アプリが作成できました！

さらに、Settings > Basic Information > Display Information より、作ったアプリの見た目をいい感じにいじることができます

次にbotとして発信もさせたいので、botの登録をします

Features > App Home > Your App's Presence in Slackより Editをおします

ポップアップが出てくるのでいい感じに名前を付けます

これで完了です！

アプリのインストールとtokenの確認

Features > OAuth & Permissions > OAuth Tokens & Redirect URLs　で「Install to Workspace」を押して、許可するを押しましょう

するとFeatures > OAuth & Permissions > OAuth Tokens & Redirect URLsに
OAuth Access Token
が表示されるので、メモしておいてください (あとで使用します)

(このtokenはセキュリティ的に重要なので、扱いには気をつけてください)

また、Settings > App Credentialsより
Verification Token
もメモしてください (こちらもあとで使用します)

これで一旦slack appの設定は完了です
このあとちょくちょくslack側での設定を行うので、このslack appのページは閉じないで下さい

2. スラッシュコマンドの作成

次はslackのスラッシュコマンドをgasで作成します

スラッシュコマンドって？

slack上で使える簡単なコマンドです

/remindとかは使ったことのあるひとも多いのではないでしょうか?

/remind ごみを捨てる tommorowと送信すると...

ってできるやつです！
参考

ここでは /attendanceって入力するとメンバーの一覧が投稿される機能を作っていきます！

今回の作り方

流れはこのような形になっています

なので、手順としては、

google スプレッドシートにメンバーリストを用意する
スプレッドシートにメンバーリストを送信するスクリプトを用意する
slackからメンバーリストを使ってボタン付き出欠確認メッセージを送信できるようにする

の流れで作っていきます

google スプレッドシートにメンバーリストを用意する

gasを始める前に会議に参加する人の一覧を作っておきましょう

新しいスプレッドシートは http://spreadsheet.new/ で作れます
今回は「ユーザー一覧 (users)」と「所属一覧 (groups)」の2つのシートを作ります
ユーザー一覧には、slack id, 名前, 所属 (グループ名とか)の3列を用意します
所属一覧には、所属一覧の1列を用意します
slack idの調べ方はこちらなどを参考にcsvなどでどかっととってきましょう

シートのイメージ

この時以下の2点に注意してください

ユーザー一覧シートは
- 一行目に、slack id, 名前, 所属をいれる
- シートの名前をusersにする
所属一覧シートは
- 一行目に、所属一覧をいれる
- シートの名前をgroupsにする

スプレッドシートにメンバーリストを送信するスクリプトを用意する

まずはgasを開きましょう
先ほどのシートの ツール > スクリプトエディタ を選択します

するとこんなコードエディターが開きます

ここに以下をコピペして保存します (コードの詳しい解説はskipします！！)

**コード.gs(ここをクリックして展開)**

コード.gs

const slackToken = PropertiesService.getScriptProperties().getProperty("slack_token")
const verificationToken = PropertiesService.getScriptProperties().getProperty("verification_token")
const NotVerificateMessage = "許可されていません"
const usersSheetName = "users" // ユーザー一覧シート名
const groupsSheetName = "groups" //所属一覧シート名
const buttonValue = "attend"

// 以下の変数は適宜変更してください
const buttonText = "参加"
const notAttendComment = "まだ参加していない方↓"
const defaultMessage = "参加していますか？"
const responseData = "出欠確認をしました"
const textMessage = "出欠をとっています"

function doPost(e) {
  const params = e.parameter
  const token = params.token
  if (token != verificationToken) {
    return ContentService.createTextOutput(NotVerificateMessage).setMimeType(ContentService.MimeType.JSON);
  }
  const userName = params.user_name
  const channelId = params.channel_id
  let message = params.text
  if (!message) {
    message = defaultMessage
  }
  postAttendaceMessage(channelId, message, userName)
  return ContentService.createTextOutput(responseData).setMimeType(ContentService.MimeType.JSON);
}

function postAttendaceMessage(channelId, message) {
  // userのリストをとってきて
  const usersHash = usersHashByGroupname()
  // blockを作成して
  const blocks = makeBlockFromUsersHash(usersHash, message)
  // 決められたchannelに投稿する
  return postSlackByChannelwithBlocks(channelId, blocks)
}

// return {group_name: [user_id, user_id], group_name: [user_id,...], ..}
function usersHashByGroupname() {
  const rawSheetValues = getSpreadSheetByName(usersSheetName)
  let groupedHash = {}
  const rowGroupSheetValues = getSpreadSheetByName(groupsSheetName)
  rowGroupSheetValues.forEach(function (value) {
    if (value[0]) {
      groupedHash[value[0]] = []
    }
  })
  rawSheetValues.forEach(function (value) {
    if (value[0] && value[1] && value[2]) {
      groupedHash[value[2]].push("<@" + value[0] + ">")
    }
  })
  return groupedHash
}

function getSpreadSheetByName(sheetName) {
  //spreadsheetの値を返す
  const ss = SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得
  const sheet = ss.getSheetByName(sheetName); //シート名でシートを取得
  const lastRow = sheet.getLastRow(); //最終行取得
  const lastCol = sheet.getLastColumn(); //最終行取得
  const firstRow = 2
  const firstCol = 1
  const range = sheet.getRange(firstRow, firstCol, lastRow, lastCol)
  const values = range.getValues()
  return values
}

function postSlackByChannelwithBlocks(channelId, blocks) {
  const postMessageurl = "https://slack.com/api/chat.postMessage"
  const payload = {
    "token": slackToken,
    "channel": channelId,
    "text": textMessage,
    "blocks": blocks
  }
  const params = {
    methods: 'post',
    payload: payload
  }
  return UrlFetchApp.fetch(postMessageurl, params)
}

function makeBlockFromUsersHash(usersHash, message) {
  const head = {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": message
    },
    "accessory": {
      "type": "button",
      "text": {
        "type": "plain_text",
        "emoji": true,
        "text": buttonText
      },
      "value": buttonValue
    }
  }
  const divider = {
    "type": "divider"
  }
  const notAttendMessage = {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": notAttendComment
    }
  }
  const mainBlocks = makeMainBlocksbyUserHash(usersHash)

  let blocks = []
  blocks.push(head)
  blocks.push(divider)
  blocks.push(notAttendMessage)
  blocks = blocks.concat(mainBlocks)
  blocks.push(divider)
  return JSON.stringify(blocks)
}

function makeMainBlocksbyUserHash(usersHash) {
  let mainBlocks = []
  Object.keys(usersHash).forEach(function (groupName) {
    if (usersHash[groupName].length > 0) {
      const context = {
        "type": "context",
        "elements": [{
          "type": "mrkdwn",
          "text": groupName
        }]
      }
      const usersSection = {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": usersHash[groupName].join(" ")
        }
      }
      mainBlocks.push(context)
      mainBlocks.push(usersSection)
    }
  })
  return mainBlocks
}

保存したら ファイル > プロジェクトのプロパティ を開きます

さらに スクリプトのプロパティのタブに二つの値を設定します

プロパティ	値
slack_token	`xoxp-`から始まる先ほどメモした OAuth Access Token
verification_token	先ほどメモした Verification Token

設定したら保存を押します

最後にapiとして公開します

公開 > ウェブアプリケーションとして導入を選択します

Deploy as web appというポップアップが出てくるので、以下のように設定します

Project version	New (ここをNewにしないと最新の更新が反映されないので注意！！)
Execute the app as	Me
Who has access to the app	Anyone, even anonymous

そしてDeployを押すと初回は権限を確認されるので許可を確認を押します

アカウント選択画面が出るので、自分のアカウントを選択します

すると警告メッセージが出ますが、詳細 (1) を押すと script名 (安全ではないページに移動) (2) が出てくるのでクリックします

script名が Google アカウントへのアクセスをリクエストしていますと表示されるので 許可を押します

すると公開が完了します

完了後、Deploy as web appというポップアップと共に今回作成したapiのurlが表示されるのでこれをメモします

これでapiの作成が完了しました！！

slackからメンバーリストを使ってボタン付き出欠確認メッセージを送信できるようにする

次にslackにスラッシュコマンドを用意します

slack apiのFeatures > Slash Commandsより、Create New Commandsを押します

そしたらそれぞれこんな感じで埋めていき、保存します

Command : /attendance
Request URL : さっき公開したURL
Short Description, Usage Hint : いい感じに！！

これでスラッシュコマンドの登録が完了です！

↓この段階でこんな感じのスラッシュコマンドが使えるようになっているはずです

3.`参加`ボタン用apiの作成

さて残るはボタンを押した時のアクションのみです

参加ボタンを押すとslackのメッセージが変わるアクションを作っていきます

ボタンを押してからメッセージが更新される流れはこんな感じです

apiの作成

ボタンアクション用のapiもgasで作っていきます
先ほどとは別の新しいscriptを用意しましょう => http://script.new/

ここに以下をコピペして保存します (コードの詳しい解説はskipします！！)

**コード.gs(ここをクリックして展開)**

コード.gs

const slackToken = PropertiesService.getScriptProperties().getProperty("slack_token")
const verificationToken = PropertiesService.getScriptProperties().getProperty("verification_token")

const replaceEmoji = ":white_check_mark:" // 好きな絵文字に置き換える！
const attendButtonValue = "attend"
function doPost(e) {
  const payload = JSON.parse(e["parameter"]["payload"])
  const token = payload.token
  if (token != verificationToken) {
    return
  }
  const action = payload.actions[0]["value"]
  if (action === attendButtonValue) {
    return clickedAttendButton(payload)
  }
}


function clickedAttendButton(payload) {
  const originalBlocks = JSON.stringify(payload.message.blocks)
  const messageTs = payload.container.message_ts
  const channelId = payload.container.channel_id
  const userId = payload.user.id
  const user = "<@" + userId + ">"
  const replacedBlocks = originalBlocks.replace(user, replaceEmoji)
  const chatUpdateUrl = "https://slack.com/api/chat.update"
  const updatePayload = {
    "token": slackToken,
    "channel": channelId,
    "ts": messageTs,
    "blocks": replacedBlocks
  }
  const updateParams = {
    methods: 'post',
    payload: updatePayload
  }
  UrlFetchApp.fetch(chatUpdateUrl, updateParams)
  const params = {
    "replace_original": false,
    "text": ""
  }
  return ContentService.createTextOutput(JSON.stringify(params)).setMimeType(ContentService.MimeType.JSON);
}

保存したら先ほどと同様にtokenの設定を行います
ファイル > プロジェクトのプロパティ を開きます

さらに スクリプトのプロパティのタブに二つの値を設定します

プロパティ	値
slack_token	`xoxp-`から始まる先ほどメモした OAuth Access Token
verification_token	先ほどメモした Verification Token

完了したらスラッシュコマンド作成時と同様にapiとして公開してください
(この記事の 2. スプレッドシートにメンバーリストを送信するスクリプトを用意する を参考にしてください)

slack apiへの登録

早速作成したapiをslackに登録していきます

Features > Interactivity & Shortcutsのページにいきます

このInteractivityを Off → On にするといろいろなメニューが展開されます

そしてInteractivityのRequest URLに先ほど作成したapiのurlを貼り付けます

そして、右下の Save Changesを押せば完了です！！

これで参加ボタンを押すと自分の名前が ✅ に変更されるようになりました！！

完成！！

長かったですね...
お疲れ様です！！

応用編

毎週月曜日の朝9時に出欠をとりたい！

この記事が参考になるかと思います

今回作成した、/attendance用コードを応用しましょう

例えば、下記のような関数を作成し、上記の記事のようにtriggerを設定してあげれば定例オンライン会議の度に/attendanceをしなくてもよくなります！! (さらなる無駄の解消)

コード.gs

function postAttendaceMessageEveryMonday() {
  const channelId = "channel id"
  const message = "月曜日の定例へ参加お願いします！ https://meet.google.com/xxx-xxxx-xxx"
  postAttendaceMessage(channelId, message)
}

出欠確認メッセージをもっとモチベーションがあがる形にしたい！

slackが用意している Block Kit Builderを使えばアウトプットをイメージしながら作ることができます！

ボタンを押したらもっと可愛い絵文字になるようにしたい！

自分のワークスペースでカスタム絵文字を設定して見ましょう

参加ボタン用api のソース内部の replaceEmojiという変数を追加したカスタム絵文字にすることでより愛着が湧きます

参考:

↓弊社ではなぜか参加ボタンを押すと自分が坊主になります...???

終わりに

書き終わって見ると、この記事が想像の3倍の量になって驚いています...
slack appだったり、google app scriptはリファレンスを読んでいると、「あれ、面倒だったこれもアプリにやらせるんじゃないか？？」がいろいろ湧いてきて楽しいですね。
面倒なルーティーンはアプリに任せて、自分は新しいことを勉強する時間に使っていきたいですね！！

はじめに

こんなことありませんか？

「オンライン会議、誰がいないか全然わからない問題」

若手でも作れます！！

何を作ったか

作り方

全体像

1. slack appの設定

まずはslack appを登録していきます

次にbotとして発信もさせたいので、botの登録をします

アプリのインストールとtokenの確認

2. スラッシュコマンドの作成

スラッシュコマンドって？

今回の作り方

google スプレッドシートにメンバーリストを用意する

スプレッドシートにメンバーリストを送信するスクリプトを用意する

slackからメンバーリストを使ってボタン付き出欠確認メッセージを送信できるようにする

3.参加ボタン用apiの作成

apiの作成

slack apiへの登録

完成！！

応用編

毎週月曜日の朝9時に出欠をとりたい！

出欠確認メッセージをもっとモチベーションがあがる形にしたい！

ボタンを押したらもっと可愛い絵文字になるようにしたい！

終わりに

参考

3.`参加`ボタン用apiの作成