Slack+GASでＱ&Aボットを作ってみた


この記事は、[プロトアウトスタジオのアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/protoout)の5日目です！

##作ったもの

最近、勤務先の部署に試験的に Slack が導入されたので、ちょっとしたQ&Aボットを作ってみました。


[![Image from Gyazo](https://i.gyazo.com/c5713cac9669ddd14e3d52de2d45918a.png)](https://gyazo.com/c5713cac9669ddd14e3d52de2d45918a)


###参考サイト

参考というか、ほとんどこちらのブログに記載の通りにしました。
ありがとうございました。
[【雑学】SlackとGASで自由度の高いSlackのチャットBotを作る](https://tektektech.com/slack-auto-reply-bot-with-gas)


<br>
では、始めます。

##SLACKの設定

Slack アプリを作るため、以下のリンク先へ。
https://api.slack.com/apps

Incoming Webhooks を選ぶ。
[![Image from Gyazo](https://i.gyazo.com/42bed9ce5ea50d931dd94870552c7423.png)](https://gyazo.com/42bed9ce5ea50d931dd94870552c7423)

On にする。
[![Image from Gyazo](https://i.gyazo.com/8147d5c43c991e02d56dfe36bc045cc9.png)](https://gyazo.com/8147d5c43c991e02d56dfe36bc045cc9)

下のようなものが現れる。
「Add New Webhook to Workspace」をクリック

[![Image from Gyazo](https://i.gyazo.com/63e9fe02337c0956da22bc1cd4d024f4.png)](https://gyazo.com/63e9fe02337c0956da22bc1cd4d024f4)

チャネルを選ぶ。
[![Image from Gyazo](https://i.gyazo.com/4128afcebf083721e100b6b8231898fd.png)](https://gyazo.com/4128afcebf083721e100b6b8231898fd)

ＷEBHOOK の　URL　ができる
[![Image from Gyazo](https://i.gyazo.com/76003859b22eeb332e5725a196d2edc8.png)](https://gyazo.com/76003859b22eeb332e5725a196d2edc8)



##Q＆Aの辞書データを作成
Google Spreead Sheet　で以下のように作成する。

[![Image from Gyazo](https://i.gyazo.com/d401dadbdfab53d7a72a0175f706e1b9.png)](https://gyazo.com/d401dadbdfab53d7a72a0175f706e1b9)


##GASの設定
GoogleSpreadSheet の拡張機能　＞　Google Apps Script

[![Image from Gyazo](https://i.gyazo.com/a7f80f4a84268146bc6d5646deb3fe72.png)](https://gyazo.com/a7f80f4a84268146bc6d5646deb3fe72)


### コード


``` js
function doPost(e){
  
  // 疎通確認
  const params = JSON.parse(e.postData.getDataAsString());
  if('challenge' in params){
    return ContentService.createTextOutput(params.challenge);
  }

  // Botの投稿に反応しない
  if('subtype' in params.event) {
    return
  }
      
  let contents="";
  if('text' in params.event) {
    const sheet = SpreadsheetApp.getActiveSheet();
    //エクセルのvlookup関数のようなものを実装
    const answer = vlookup(params.event.text,sheet,2);
    const userName = params.event.user;
    contents = `<@${userName}>` + answer; 
  }

  // 投稿内容
  const options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : contents,
        link_names: 1
      }
    )
  };
  // 投稿
  UrlFetchApp.fetch("SlackのWEBHOOKのURL", options);
}

//エクセルのvlookup関数のようなもの
function vlookup(value,sheet,column) {
  let returnValue = "分かりません";
  for (let i = 2; i <= sheet.getLastRow(); i++) {
    if(value == sheet.getRange(i,1).getValue()){
      returnValue = sheet.getRange(i,column).getValue();
      break;
    }
  }    
  return returnValue;
}
```


<br>
コードを書いたらデプロイする。
[![Image from Gyazo](https://i.gyazo.com/bbf555deb56a281d1e2ebc361154848e.png)](https://gyazo.com/bbf555deb56a281d1e2ebc361154848e)

歯車　＞　ウェブアプリ
[![Image from Gyazo](https://i.gyazo.com/8c573754a8fe0e0c2c60d9f4bec244f5.png)](https://gyazo.com/8c573754a8fe0e0c2c60d9f4bec244f5)

デプロイ
[![Image from Gyazo](https://i.gyazo.com/c537a1891a634b086fa51c7db4b3c986.png)](https://gyazo.com/c537a1891a634b086fa51c7db4b3c986)

ウェブアプリのURLは控えておく
[![Image from Gyazo](https://i.gyazo.com/a0ed1cb110aa80a8e9105f897db244d7.png)](https://gyazo.com/a0ed1cb110aa80a8e9105f897db244d7)




## 再びSLACK

さっきのSlackのAPI設定画面の左側の
Event Subscriptons をクリックし、
Enable Events を　Onにする

Request URL : 先ほど控えたGASのウェブアプリのURLを入力。
※デプロイするたびにウェブアプリのURLが変わるので、都度入力の必要がある

Subscribe to bot events　に message.channels　を選ぶ。



[![Image from Gyazo](https://i.gyazo.com/039d7da4467a11441a48ceae44241d48.png)](https://gyazo.com/039d7da4467a11441a48ceae44241d48)


この上の画面が現れない場合は以下のように直接 APP Manifest を編集し、Save Change
[![Image from Gyazo](https://i.gyazo.com/33850c6b15196c4460287f50162918c7.png)](https://gyazo.com/33850c6b15196c4460287f50162918c7)

このような黄色の網掛けのメッセージが現れたら
[![Image from Gyazo](https://i.gyazo.com/7f83e36db2ba6d6df5a2c90ae9739639.png)](https://gyazo.com/7f83e36db2ba6d6df5a2c90ae9739639)

メッセージの中の　reinstall your apps をクリック
[![Image from Gyazo](https://i.gyazo.com/e63a20823e0168ea2de1321ea2c200a3.png)](https://gyazo.com/e63a20823e0168ea2de1321ea2c200a3)

<br>
うまくいくと
SLACKに ボットが追加されたことが投稿される。
ハイパーリンクをクリック
[![Image from Gyazo](https://i.gyazo.com/a8f8048367b0d05e962d0ca7774b10b6.png)](https://gyazo.com/a8f8048367b0d05e962d0ca7774b10b6)

このチャンネルにアプリを連携させる
[![Image from Gyazo](https://i.gyazo.com/1c1d56af0e4fd1357d9e59216c4411ac.png)](https://gyazo.com/1c1d56af0e4fd1357d9e59216c4411ac)


これで、完成！！





<br><br><br>
## PS
3年前に広島で開催されたセミナーでソラコムの[MAX](https://qiita.com/ma2shita)さんが、ソラコムの働き方の話をされていたなかで、「会社の住所とか社長の本名とかちょっとしたことだけど、いざ調べるのは面倒なことはSlackでボットに答えさせてる」という話をされていて、いつか作ってみたいと思っていて、やっと実現できました。

このスライドのP62
<iframe src="//www.slideshare.net/slideshow/embed_code/key/vhCI3XsyNG9KYd" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/SORACOM/2018-88892543" title="オープンセミナー2018@広島 | 疎結合で非同期なソラコムの開発スタイル" target="_blank">オープンセミナー2018@広島 | 疎結合で非同期なソラコムの開発スタイル</a> </strong> from <strong><a href="https://www.slideshare.net/SORACOM" target="_blank">SORACOM,INC</a></strong> </div>