SlackでWebhookサービスを使った出勤システム Excel(Googleスプレッドシート)出力,bot #Slack

システムについて

slackのチャット上で"出勤 ~~~"や"退勤 ~~~"とコメントすれば、Excel(Googleスプレッドシートでその情報を管理するシステム
(目的) 最近友達と勉強会をやっているため勉強してる時間帯や頻度が分かればモチベーションになると思ったから。

準備

Googleアカウント
- GAS(Google Apps Script)を利用するため
slack
- 出勤確認用のチャンネルがあるのが望ましい

1 投稿した内容をExcelに反映させる

1-1 Googleスプレッドシートの用意

あらかじめ、Googleアカウントでログイン
Googleドライブを起動する
任意の場所にGoogleスプレッドシートを作成

1-2 SlackにOutgoing Webhookをインストール

Slackを起動
App --> Webhookと検索 --> Outgoing Webhookを選択

1-3 Outgoing Webhookの設定

チャンネル: 事前に用意していた出勤確認用チャンネルを使用
引き金となる言葉: 先頭に特定の文字がきた時のみアクションを起こすための言葉を設定
URL: GAS(Google Apps Script)で取得するURLを貼り付ける
トークン: 1-4で使用 GASの接続の際に使用

1-4 GASの設定

作成したスプレッドシートを開く
メニューバーの"ツール" --> "スクリプトエディタ"
以下のように記述
トークンの書き換え忘れないように！

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var token = 'ここにはOutgoing Webhookのトークンを記述する'

  // Googleスプレッドシートにデータを追加する処理
  if (token == e.parameter.token){
    var datetime     = new Date();
    var date         = (datetime.getFullYear() + '/' + ('0' + (datetime.getMonth() + 1)).slice(-2) + '/' + ('0' + datetime.getDate()).slice(-2))
    var time         = (('0' + datetime.getHours()).slice(-2) + ':' + ('0' + datetime.getMinutes()).slice(-2));
    var user_name    = e.parameter.user_name;
    var trigger_word = e.parameter.trigger_word;
    var text         = e.parameter.text;
    array = [date,time,user_name,trigger_word,text];
    sheet.appendRow(array);
  }

  return
}

記述後、メニューバーの"公開" --> "ウェブアプリケーションとして導入"

設定項目

Project version: "New"
Execute the app as: "Me"
Who has access to the app: "Anyone, even anonymous"

Deployボタンをクリック
Authorization required は Allow(許可)を選択
細かなエラーはこのページを参照してください。
アプリ実装後、URLを取得

1-5 Outgoing WebhookにGASの導入

1-4で取得したURLを1-3で設定したOutgoing Webhoookの設定画面ないのURLの項目にペースト

2 対話型Botの作成

投稿後反応がないと、スプレッドシートに勤務状況が記述されたか不安になるためBotからの反応を設定する

2-1 Incoming Webhookのインストール

1-2のOutgoing Webhookインストールと同様にインストール

2-2 Incoming Webhookの設定

チャンネルへの投稿: 事前に用意していた出勤確認用チャンネルを使用
Webhook URL: 2-3のGAS作成で使用

2-3 Bot投稿用のGASの作成

2-3-1 GASの記述

Googleドライブ内で "新規" --> "その他" --> "Google Apps Script"
以下のように記述する

function doPost(e) {

  var message = "Excelシートに記録しました！";

  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : message
      }
    )
  };

  UrlFetchApp.fetch("2-2で取得したURLを記述する", options);
}

2-3-2 リソース設定

メニューバーの"リソース" --> "ライブラリ"を選択
Key: M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO で追加
バージョン: 22に設定
下の写真の状態で"保存"をクリック

※ 設定後、再生ボタンをクリックするとSlackに変数messageの内容が投稿される。

2-4 GASのWebアプリケーションURLの取得

メニューバーの"公開" --> "ウェブアプリケーションとして導入"

設定項目

Project version: "New"
Execute the app as: "Me"
Who has access to the app: "Anyone, even anonymous"
Deployボタンをクリック
Authorization required は Allow(許可)を選択
細かなエラーはこのページを参照してください。
アプリ実装後、URLを取得

2-5 Outgoing WebhookからGASを呼び出す

2-4で取得したURLを1-3で設定したOutgoing Webhoookの設定画面ないのURLの項目にペースト

3 テスト

Slack内の勤務管理チャットで先頭に設定したキーワードを加えて投稿する
Googleスプレッドシートが反映される
Botが反応を勤務管理チャット内に返す

参考文献

1章: https://qiita.com/tawasi12/items/1c6a2b66a84401e52c01
2章: https://tech.camph.net/slack-bot-with-gas/

追記

2020/08/12 アップロード