GASとSlack Events APIを利用してご飯のメニューを決めるbot作成① Slackとシートの設定

#概要
こんにちは。永野と申します。
GAS(Google Apps Script)とslackを連携させたメニュー決めのbotを作ったので、その記録です。
そんなに複雑なことはしていないので、ノンプログラマもしくは初心者向けです。コードなど玄人の方からしたらお見苦しいところがあると思います。

##どんなbot？

上記にも書いた、「ご飯のメニューを決める」botです。

使いたい食材を一品選ぶ
↓
それを使ったメニュー一覧が表示される
↓
作りたいメニューが記録される+作り方も見れる

といった流れになっています。
と、書きましたが、見ていただいたほうが早いと思います。画面一番下でbot操作してます。
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/e8157bd7-f820-d6d7-14b6-bbd04e5af8ee.gif)
(ベルリンの写真が目立ってすみません)
豆腐で登録してたのが一品だけだったので説得力がなかったかもしれませんが、例えば人参を選ぶとこんな感じで一覧で出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/fac3f7cd-8186-c82f-e8dc-3c2799c99462.png)


##なぜ作ろうと思ったか

- サーバーレスでslackのボットを作れると聞いて
- 利用するならその特性(googleアプリと連携)を利用したい

そんなわけでスプレッドシートを簡単なデータベースにしたslackbotを作りました。


#ボットの作成
・開発環境
Google apps scriptのscript画面

ローカルでGASの開発もできるようですが、導入がちょっと手間かかりそうなのと、外でもコードをいじりたかったのもあって、結局やりにくいscript画面の中で開発してました。
GASのslackライブラリも古いのだったり、最近(2020年2月ごろ？)slackapiの仕様が変わったりして使えるかどうかわからなかったので、一切使わずにいきました。
めちゃくちゃ非効率だったと思うので今度からやめようと思います…

・基本的な仕組み
材料などよく変更する設定はスプレッドシートに書いていきます。
それ以外のボットの挙動はscriptで設定します。

・Slackのbotの種類
Slackで作成できるbotにはいくつか種類があり、RTM(Real Time Messaging) APIを利用するClassic BotとEvents APIを利用するBotがあります。
このボットで利用しているのはEvents APIを利用するBotです。

2つの違いはざっくりですが

* Events API
　- Web Socketを利用しない
　- 権限を細かく決めたい

* RTM API
　- Web Socketを利用する
　- 2020年以前のライブラリなど利用してボットを作成する

また、規模が大きいとEvents APIのほうは反応が遅くなるようです。
Events APIは2020年に入って登場したものなので、2020年8月現在、<b>Slack Botの作り方で出てくるのものの多くはRTM APIを利用したClassic Bot</b>になります。
ただClassicとついているだけにいつ廃止になるかもわからない上、SlackとしてもEvents APIのBotを推奨しているようなので、そちらを作成しました。

SlackのbotやAPIの細かい違いについてはこちらが詳しいです。

・[SlackのtokenとAPI、botの種類をまとめた]
(https://qiita.com/tkit/items/2536ea6971754f9a75d1)
・[Slack上で動くChatbotを実現するためのアーキテクチャを考える](https://qiita.com/tkit/items/6471d2436dd610f97a8d)


##シートの設定
まずシートの設定です。Googleスプレッドシートを新規作成し、

・メッセージ設定するためのシート
・材料一覧シート
・メニューシート
・作り方シート

4つを作成します。

中身はこんな感じ。(あまり整理されてませんが…)

<b>●メッセージ設定シート</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/8d039502-c746-74d9-04a1-cd09bcb0e088.png)
・材料メニュー表示と最後に表示されるメッセージの設定です

<b>●材料一覧シート</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/4c7b2a9e-a684-5076-dd8e-abca85d84758.png)
・一列目:材料の種類
・二列目以降：材料


<b>●メニューシート</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/7c940680-25fc-17d4-51e3-98f6abbae406.png)
・一列目:メニュー名
・二列目以降：使用する材料(材料シートに登録されたもの以外は入力不可)

<b>●作りかたシート</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/a29271c6-fe40-c516-028d-5ed132728df6.png)
・一列目:メニュー名(メニューシートからコピー)
・二列目：画像
・三列目以降：作り方

##slackの設定
次にslackの設定をしていきます。[slackapiのページ](https://api.slack.com/)のYour Appsのページに行き、「Create New App」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/fca71a86-3c3a-4e34-18c9-6f9ce80555d7.png)
すると以下の画面が出てきますので、作成するアプリの名前を入れてワークスペースを選択し、Create Appでアプリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/30208b49-07f8-5933-991f-d4ab8de3f052.png)

アプリができると一覧に表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/6aabb2d4-84c1-6e38-a885-e1a46571e7df.png)


アプリが作成されたらアプリの名前のところをクリックして、以下の設定を行います。

#####1.左メニュー「Features」の下に出ている「Interactivity & Shortcuts」のページでこちらの機能をonに。<b>

#####2.「OAuth & Permissions」(OAuth & 権限)を選択、「Scopes」というところにアクセス権限を追加。</b>
(Basic Information→Add features and functionality→Parmission からでも可能)

追加する権限は以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/0b956665-186a-e9ea-e12c-9756d3b0e749.png)


それぞれのscopeの説明はslackに詳細な説明がありますが、軽く解説。

- `Channels:hisatry` 　チャンネル内の履歴を見る
- `Channels:read`　チャンネルの情報を読み取る
- `Chat:write`  チャットに書き込む
- `Incoming-webhock`  外部アプリから特定チャンネルに書き込む権利(Incoming Webhooksをonで自動追加 後程解説)

チャンネル内で応答するだけのbotを作りたいなら上記の権限だけで良いです。

個別メッセージ内で使いたかったり、botで絵文字を使ったりする際は別の権限が必要になります。
詳しい情報はslackの[Documentation](https://api.slack.com/#read_the_docs)をご覧ください。(英語のみ。一部日本語もあり)


パーミッションの変更を行うと「アプリのインストール」ボタンが有効になりますので、こちらを押してアプリをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/4125a8ea-eb36-0329-96ad-1b94cf4285f5.png)

以下の画面でbotを利用するチャンネルを選択し、許可するボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/fd09ad42-7daf-8f99-d332-c50b5559c7ac.png)

アプリがインストールされるとトークンが発行され、「OAuth Acess Token」に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/595e28d6-9806-f67a-47b3-03b57cd05d89.png)


#####3.左メニューにある「Incoming Webhooks」のページで機能をonにし、ページの下のほうにある「Add New Webhook to Woekspace」ボタンでwebhockのurlを発行。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/3073ed8e-0014-8cb4-b318-fc847d315081.png)

こちらを押すと先ほどのトークン発行時のようなチャンネル選択の画面が出るので、同じようにBotを使うチャンネルを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434191/5b45c87a-43d2-041d-cabf-0157c2a62c50.png)

Webhockurlが発行されるとこちらに表示されます。

WebhockurlとOAuth Access Tokenをメモして、いよいよスクリプトを書いていきます。最初の食材選択のメッセージと返信用のメッセージの2つのコードに分けます。


#スクリプト

上記が準備できたらスクリプトを書いていきます。(②へ続きます。)
-[GASでEvents APIを利用したSlack bot作成②～スクリプト(初回メッセージ)～](https://qiita.com/o-tea6221/items/3fa3ab5d6708b4c8268e)