見出し画像

Slack✖Googleフォームで問い合わせフォームを作ってカテゴリ別にメンション先を変更出来るようにしてみた


Slackでワークフローを利用している会社は多いと思います。
ワークフローの作り方は沢山あって一番簡単なのはSlack標準のワークフローですが、今回は問い合わせ内容(種別)に応じて担当者(メンション先)を分けたかったのでGoogleフォーム(GAS)で以下仕様の問い合わせフォームを作ってみました。

- Googleフォームに投稿したらSlackに自動投稿させる
- 回答内容はスプレットシートに保存させる
- 問い合わせのカテゴリ(種別)に応じてメンション先を変更させる
- 投稿者のメールアドレスからSlackIDを取得してメンションさせる

何故この仕様にしたかというと以下理由です。

- 投稿者の名前記入が不要になる
- APIでSlackIDを取得すればユーザ追加毎に一覧のエクスポートが不要
- メンションをさせることでSlack上のやり取りをスムーズにする
- 問い合わせ内容に応じて担当者を振り分けたい(って要望があった)

参考にしたサイト

こちらのサイトを参考に作成しました。
非常に勉強になるのでぜひ合わせて確認下さい!

事前準備

1.Slack
2Googleアカウント

両方とも無料版でも出来ます!

コード(GAS)

今回はこちらを使用します。
★マークの場所は各自の環境に合わせて変更して下さい(別途説明します)

function sendToSlack(fallback, fields, slack_id, irai_id, email, channel) {
 const url = "https://hooks.slack.com/xxxx" //★webhookURL

 const data = {
   "username" : "問合せBOT",  //★bot 名
   "attachments" : [{
     "fallback" : fallback,
       "text" :  "担当者" + "\n" + 
                 '<' + slack_id + '>' + '\n' +
                 "依頼者"+ "\n" + 
                 '<' + irai_id + '>' + '\n' + 
                 "ーーーーーーーーーー",
     "fields": fields,
     "color": "good",  // 3: 左線の色
   }],
 };
 const payload = JSON.stringify(data);
 const options = {
   "method" : "POST",
   "contentType" : "application/json",
   "payload" : payload,
   "muteHttpExceptions": true,
 };
 const response = UrlFetchApp.fetch(url, options);
 Logger.log(response)
}


function responseToText(itemResponse) {
 switch (itemResponse.getItem().getType()) {
   case FormApp.ItemType.CHECKBOX:
     return itemResponse.getResponse().join("\n");
     break;
   case FormApp.ItemType.GRID:
     const gridResponses = itemResponse.getResponse();
     return itemResponse.getItem().asGridItem().getRows().map(function(rowName, index) {
       Logger.log(rowName);
       return rowName + ": " + gridResponses[index];
     }).join("\n");
     break;
   case FormApp.ItemType.CHECKBOX_GRID:
     const checkboxGridResponses = itemResponse.getResponse()
     return itemResponse.getItem().asCheckboxGridItem().getRows().map(function(rowName, index) {
       Logger.log(rowName);
       return rowName + ": " + checkboxGridResponses[index];
     }).join("\n");
     break;
   default:
     return itemResponse.getResponse();
 }
}


function onFormSubmit(e){
 const itemResponses = e.response.getItemResponses();      //フォームの全内容取得
 const email = e.response.getRespondentEmail();            //回答者メールアドレス取得  
 const category = itemResponses[1].getResponse();          //★カテゴリの回答結果取得 
 const fallback = itemResponses.map(function(itemResponse) {
   return itemResponse.getItem().getTitle() + ": " + itemResponse.getResponse();
 }).join("\n");

 const fields = itemResponses.map(function(itemResponse) {
   const value = responseToText(itemResponse);
   return {
     "title": itemResponse.getItem().getTitle(),
     "value": value,
     "short": false,  // 4: 左右2列で表示
   }
 });

//メールアドレスからSlackID取得
 const url="https://slack.com/api/users.lookupByEmail" //APIのURL
 const payload = {
   "token" : "xoxb-xxxx", //★botトークン
   "email" : email //Googleアンケート投稿者
 }
 const options = {
   "method" : "GET",
   "payload" : payload,
   "headers": {
     "contentType": "x-www-form-urlencoded",
   }
 }
 var json_data = UrlFetchApp.fetch(url, options); //APIリクエスト実行と結果の格納
 json_data = JSON.parse(json_data) //結果はJSONデータで返されるのでデコード

 if (json_data["ok"]){ //boolean型でtrue or falseが格納されています
   let user_id = String(json_data["user"]["id"]) //trueの場合返答されたデータからユーザーIDを抽出
   var irai_id = '@' + user_id
   Logger.log(email)
   } else {
     var irai_id = email //falseの場合null(文字列)を格納
     Logger.log(email)
     }

//受付担当判定
 if (category == 'カテゴリA'){ //★種別
   var slack_id = '@xxxx' //★担当者SlackID
 } else if (category == 'カテゴリB') { //★種別
   var slack_id = '@xxxx' //★担当者SlackID
 } else if (category == 'カテゴリC') { //★種別
   var slack_id = '@xxxx' //★担当者SlackID
 } else {
   var slack_id = '@xxxx' //★担当者SlackID
 }

     Logger.log(slack_id)
 sendToSlack(fallback, fields, slack_id, irai_id, email, "投稿先チャンネル");  //★投稿先
}

手順1 Slackアプリ作成

1)Slackメニューにて「設定と管理」>「アプリを管理する」クリック
2)ページ右上の「ビルド」クリック

画像5

3)Your Appsにて「Create New App」>「From scratch」クリック

画像8


4)”Name app & ~”画面にて以下設定後「CreateApp」クリック

- App Name > お好みの名前(問い合わせBOTとか)
- Pick a workspace to develop your app in: 対象ワークスペースを選択

5)左メニュー「Incoming Webhooks」をクリックして”Activate Incoming Webhooks”を「On」

画像9

6)左メニュー「OAuth & Permissions」をクリックしてBot Token Scopesの「Add an OAuth Scope」から以下追加

channels:manage ※初期設定で追加済
chat:write
users:read
users:read.email
channels:manage

画像10

7)左メニュー「App Home」をクリックして”Your App’s Presence in Slack”にて「Edit」クリック
8)Add App Display Name画面にて以下入力して「Add 」クリック

Display Name (Bot Name):お好みで
Default username:お好みで

9)左メニュー「Basic Information」をクリックして”Display Information”のApp icon & Previewにてアイコンを設定(任意)
10)"Install your app"にて「Install to Workspace」クリック
11)投稿したいチャンネルを選択して「許可する」クリック

手順2 必要情報取得

アプリを作成したら以下2つの情報をひかえて下さい

「Incoming Webhooks」>Webhook URL
「OAuth & Permissions」>BotUserOAuthToken

手順3 Googleフォーム作成

1) Googleフォームを作成します(以下例)

スクリーンショット 2021-11-06 120658

※1つ目の設問は「ラジオボタン」で解答必須にします。タイトルや内容はお好みで(例:社内ITについて、経理について~等)


2)「設定」→「回答」にて”メールアドレスを収集する”をオンにする

画像2

手順4 GAS作成

1)画面右上「︙」→「スクリプトエディタ」クリック
2)プロジェクト名をお好みで変更していったん保存
3)上記にあるコードをコピーして貼り付け
4)コメント欄に★マークのある以下個所を修正

★webhookURL : Slackアプリ作成時にコピーしたURL
★bot 名:お好み
★カテゴリの回答結果取得:アンケートの順番が1番上なら0に変更 ※1
★botトークン: Slackアプリ作成時にコピーしたトークン
★種別:自分で記入した内容と同じにする
★担当者SlackID:@+メンションさせたいSlackID ※2
★投稿先:投稿先チャンネル名を入力

※1ここは無料版と有料版で位置が変わってしまうため適宜数字を変更して下さい(1つ目の回答なら0 , 2つ目の回答なら1)
※2グループ宛にメンションも可能です。その場合は
「var slack_id = '!subteam^SlackID|hogehoge'」と修正してください


5)左メニューから「⏰トリガー」>「トリガーを追加」クリック

画像4


6)トリガー編集画面にて以下の通り設定して「保存」クリック
 - [実行する関数を選択] > onFormSubmit
 - [イベントの種類を選択] > フォーム送信時

画像3

動作確認

Googleフォームからアンケートを飛ばして無事投稿されたら成功です。
お疲れ様でした。

画像9

補足

1)スプレットシートへの保存はGoogleフォーム標準機能を利用下さい
2)SlackIDの取得方法はこちらをご参考下さい。

不備があればツイッターのDM等でご連絡いただけると助かります。
うまく動かない場合も適宜ご相談下さい。

それでは楽しいSlack&Googleライフを~

この記事が気に入ったらサポートをしてみませんか?