Google Apps Script で Slack Botを作ってみた。(お勉強編)

# まず、この記事の経緯とやる事
Qiitaは良くお世話になってるが、見る専で書く機会は有る様で今まで何もしていなかったが、「社内で自ら何かを発表をする」というイベント処理があったので、Qiitaに軽く記事を書いてみた。
(Markdown難しい...)

### やること！
* GASからSlackにメッセージを送る物を作る(SlackApiを主に使う)
* /command で 何処でも返事ができる物を作る(postのApi使うだけ)

GASを使う理由！→3分足らずでAPIとか作れる神環境だから
/command を説明する理由！→参考サイトが少なすぎて困ってたから実際に使ってみた

# GASからSlackにメッセージを送る
まず、これを作る上で使うものは、大まかに
「Google Apps Script(通称GAS)」「Slack Apps」
「<a href="https://github.com/soundTricker/SlackApp">Google Apps Script library SlackApp</a>」

## Google Apps Script の準備
### Google Apps Script を開く
![2018-08-03_00-10-57.gif](https://qiita-image-store.s3.amazonaws.com/0/278017/8d1febb0-20a2-d8eb-c7eb-e31f13b76e04.gif)

Google Driveにアクセスし、左上の「＋新規」から「Google Apps Script」があれば選択、なければ「アプリを追加」から「Google Apps Script」を検索し、「＋接続」、接続後はもう一度「＋新規」から「Google Apps Script」を選択する。

![aa.jpg](https://qiita-image-store.s3.amazonaws.com/0/278017/84de39e2-dee9-b7a7-efd5-b605085a367c.jpeg)

開いたら、まず左上のファイルから「保存」する、今回は「Slack_app1」という名前で保存する(なんでもいい)。

### Google Apps Script に ライブラリを追加する
![Inkedchrome_2018-08-03_00-57-08_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/278017/2570724a-0f21-a08f-f55b-4b00dbf52456.jpeg)
上記で上げた、「SlackApp」を追加する。
ライブラリキーは以下でバージョンは最新で(いいはず…)。

```
M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO
```

![2a251b66-e74f-4844-987a-b4ed0c76d8a6.png](https://qiita-image-store.s3.amazonaws.com/0/278017/ec099f25-a066-4d1b-14ab-991b90e677e7.png)

Google Apps Script の準備は終わり、コードは後程。

## Slack App の準備①

### Slack App の作成
* <a href="https://api.slack.com/apps">https://api.slack.com/apps</a> にアクセス(Create New App から情報を入力して作成)

### Slack App のBotを追加する
(発言するBotを作成する)
先ほど作成したアプリをクリックしたら、設定画面に飛べます。
左のサイドバーから「Bot User」を選択、適当な名前を付け、「Always Show My Bot」をOnに切り替え「Add Bot User」を選択。
![bf154292-ebc5-42a7-b21f-64e682573e3c.png](https://qiita-image-store.s3.amazonaws.com/0/278017/faaeb30b-61ea-2e5a-fae5-795d3080d8db.png)

### Access Tokenを取得する
先ほどと同じく左のサイドバーから「OAuth & Permissions 」を選択
「OAuth Tokens & Redirect URLs」の「OAuth Access Token」を今回は使うので、メモって置いてください。
また、「Scopes」の設定を以下のようにします。（まだちゃんと分かってないので、要らないものもあるかもしれないので、公式のDocumentを参照してください。)
![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/278017/85e33fb9-aa5c-010c-d7e0-36f45a3967e7.png)

Access Tokenの確認とScopeの設定を行ったので、GASでメッセージを送信してみます。

## GASでSlackにメッセージを送信する


```
var slack_token = 'アプリのOAuth Access Token';
function test() {
  var slackApp = SlackApp.create(slack_token);
  // 対象チャンネル
  var channelId = "#to-do";
  // 投稿するメッセージ
  var message = "TestMessage";
　//
  var options = {
  }
  slackApp.postMessage(channelId, message, options);
}
```
![aaa2.png](https://qiita-image-store.s3.amazonaws.com/0/278017/86cdc4d9-7854-ebc6-c04c-cde30f180b37.png)
これで作成した `test`を指定して実行ボタン(画面上の再生ボタン)を押せばSlackに送信されます。


*初回実行時はGASを動かす為にGoogleアカウントの承諾が必要ですと出る場合がありますが、画面に従っていけば戸惑うことはないと思います。
![aaa5.png](https://qiita-image-store.s3.amazonaws.com/0/278017/5849853f-dff3-7ff2-efa6-b0775a19bd63.png)

メッセージ送信確認
![aaa4.png](https://qiita-image-store.s3.amazonaws.com/0/278017/4959d86b-b50f-8eef-1786-43a8fe8ab0ee.png)

options部分に関しては<a href="https://api.slack.com/methods/chat.postMessage">公式ドキュメント</a>を参考にしてください。
(options内にusernameが設定できる項目があったりして、アプリ名以外でメッセージの送信もできたりします。)

次はSlack内の/commandをBotを使ってPOSTデータを受け取ります。

# Slash Command でデータを返す
## GAS でPOSTの受け取り
GASにはdoPost関数というPOSTデータを受け取る関数があるので、それで投げられている内容を見てみる。

```
function doPost(e){ // e にPOSTされたデータが入っている
    return ContentService.createTextOutput(JSON.stringify(e));
}
```

このままじゃどこからもPOSTできないのでPOSTのURLを公開をします
「公開」→「ウェブアプリケーションとして導入...」
![Inkedchrome_2018-08-03_02-58-25_LI.jpg](https://qiita-image-store.s3.amazonaws.com/0/278017/8b90fa7a-357a-fb73-6f94-b65be7e2a7d6.jpeg)

「アプリケーションにアクセスできるユーザー」だけ「全員（匿名ユーザーを含む）」に変更して「導入」
![77e11d54-8384-4077-9fcc-97eb77e443d5.png](https://qiita-image-store.s3.amazonaws.com/0/278017/4508a16b-0e17-2d7b-97c4-cf685be43258.png)

URLができますので、メモって置いてください。

![917e512d-83e2-4356-a119-8cf697a55e8d.png](https://qiita-image-store.s3.amazonaws.com/0/278017/41898f8c-083d-7743-201c-26df3ac7bd8e.png)






## Slack App の準備②
### Slash Command の設定
先ほどのアプリの設定画面にて
左サイドバーの「Slash Commands」を選択、「Create New Command」を選択
「Request URL」に先ほどのURLを張り付けて、他は適当に入力して「Save」
![89298bfa-ca4f-4d97-87b5-64cee05af36e.png](https://qiita-image-store.s3.amazonaws.com/0/278017/dd156155-6565-dc23-1a9b-ddfeab2b92ef.png)

コマンドが増えたことにより、WorkspaceにSlack Appの再インストールが必要になりますので、下記のような帯が出ている場合は「click here」から、出ていない場合は、左サイドバーの「Install App」→「Reinstall App」から再インストールが行えます。
![4507b69a-eb6d-4ef9-9e73-289cfcbf337e.png](https://qiita-image-store.s3.amazonaws.com/0/278017/428b3b2f-a2a5-afd3-e4c1-632ca49ceb1e.png)

Slack側で、今導入したコマンドを入力してみましょう（増えていない場合は再インストールが必要）

コマンド入力
![aaaa5.png](https://qiita-image-store.s3.amazonaws.com/0/278017/eb12fdba-fd3a-b8dd-b15e-cf785c203a3a.png)

レスポンス(アクセスキーだらけだったので一部のみ)
![a7291e26-409f-4bc5-abde-29d868db8365.png](https://qiita-image-store.s3.amazonaws.com/0/278017/a6f99007-f906-5d32-0031-e1a449be5504.png)

大幅にValueを消して整形済みのデータを張っておきます(`/myw 東京` の場合のレスポンス)
textとuser_idを見れば、誰からのリクエストってのがわかると思います。


```
"parameter": {
    "channel_name": "",
    "user_id": "",
    "user_name": "",
    "trigger_id": "",
    "team_domain": "",
    "team_id": "",
    "text": "東京",
    "channel_id": "",
    "command": "/myw",
    "token": "",
    "response_url":
      ""
  },
```


# 最後に
めっちゃ中途半端です、元々天気取得したかったのですが、いざ触ってみると深くて、今回はここまで、天気APIの使用やBotの定期発言等は続編という形で出したいと思ってます。
まとめる事により、あいまいな部分だらけだったSlackのBotとGASについて理解が深まったのは幸せ感じる。

## 次回以降やりたい事
/commandを使った理由はDM(slackbotからの発言)を使いたかったので下記のような事をしたいと考えています
/command 東京 → 天気情報
/command 配信開始 東京 → ダイレクトメッセージで毎朝、天気を配信
/command 配信停止 東京 → ダイレクトメッセージで毎朝、天気を配信するのを停止
/command 配信中　→ 朝配信中の物をリストアップ


### 以下を参考に作ってみました。
<a href="https://qiita.com/soundTricker/items/43267609a870fc9c7453">Slack BotをGASでいい感じで書くためのライブラリを作った</a>
<a href="https://tech.camph.net/slack-bot-with-gas/">初心者がGASでSlack Botをつくってみた</a>