Slack→GoogleAppsScript→Slackでhello worldを表示させてみる

# やりたいこと

slackで特定の文字を入力したら、何か返却してくれる仕組みを試してみたかった
![Group (9).png](https://qiita-image-store.s3.amazonaws.com/0/224357/4b38fc2d-9703-c88a-ad63-9f4db1bf81e7.png)

# ここから手順

## slackでチャンネル作成

`#test_gas_hello_world`という名前で作成

## Incomming Webhooks作成
最終的な出力からやっていくのが結果も見えやすくて良い。
まずはここの部分の実現をする
![Group (7).png](https://qiita-image-store.s3.amazonaws.com/0/224357/350a6e6b-512c-eed8-3a7b-78e79b72758d.png)

### appsにアクセス

https://api.slack.com/apps

### アプリの作成
[Create an App]
![SnapCrab_NoName_2018-11-26_2-20-7_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/baef2e4a-60b9-5e83-6fb7-15750085bde4.png)

アプリ名を付けて、チームを選択
![SnapCrab_NoName_2018-11-26_2-22-15_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/6e8219b4-493b-8988-1d06-ad8c3f0f45be.png)

### Bot Userを設定
左ナビからBot Userを選択し、[Add a Bot User]
![SnapCrab_NoName_2018-11-26_2-23-25_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/60e28c78-777e-f802-d6e3-29636f6b91b7.png)

名前をつけて、Always Show My Bot as OnlineをONにしてセーブ
![SnapCrab_NoName_2018-11-26_2-24-54_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/58cbc052-0c84-92b9-ee26-2b45921ab738.png)

### Incomming Webhook設定（本題）
左ナビからIncomming Webhookを探してONにする
![SnapCrab_NoName_2018-11-26_2-25-17_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/8180b12c-5fa1-8678-0ca9-225521b63110.png)

投稿先を選ぶ
![SnapCrab_NoName_2018-11-26_2-26-16_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/11dd85e3-514e-aaaa-3005-174a8be3d8c0.png)
許可するとテスト用のcurlを教えてくれる
こんなん。
`curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/XXXXXXXXXX/XXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX`
### チャンネルに通知が出てくるので確認
`added an integration to this channel: gas_hello_world`と表示される
![SnapCrab_NoName_2018-11-26_2-27-9_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/9eb3b752-5dae-8059-3098-4b7396064d8a.png)
### curlでテスト実行
さっきのテスト用のcurlを叩いてみるとチャンネルに通知が来る。
![SnapCrab_NoName_2018-11-26_2-27-50_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/32178695-1993-7d8d-e0ee-49e40e77c821.png)

Incomming Webhooksの設定終わり！

## google apps scriptの設定

次はここ
![Group (8).png](https://qiita-image-store.s3.amazonaws.com/0/224357/6f8e37ab-4d33-1d43-28c0-b62afda1de1e.png)

### google apps script新規作成

スプレッドシート作ってツールからスクリプトエディタ開いて名前をつける
どっちも`gas hello world`にした。

### コード
```javascript:doPost
function doPost(e) {
  
  var text = "hello slack";
  postSlack(text);
 
  // slackにpostするメソッド
  function postSlack(text){

    //　Incoming WebHookのURL設定
    var url = "https://hooks.slack.com/services/XXXXXXXXXX/XXXXXXXXXX/XXXXXXXXXX";

    // APIを叩く
    var options = {
      "method" : "POST",
      "headers": {"Content-type": "application/json"},
      "payload" : '{"text":"' + text + '"}'
    };
    UrlFetchApp.fetch(url, options);
  }
}
```

### 公開する
上ナビの[公開]→[ウェブアプリケーションとして導入]から公開をする
アプリケーションにアクセスできるユーザーは全員（匿名ユーザーを含む）にしておく（slackから実行させるから）
アクセス許可とかめっちゃ求められるからOKOKしていく。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3232343335372f66303562326635362d616266342d643933372d356134362d3736333230663037323562332e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/224357/e7ee4fab-ae85-8df5-9e9c-803ecef49ba6.png)

※gasを更新したらもう一度同じ手順で更新すること。このとき「プロジェクトバージョン」を「新規作成」にして公開しないと変化しないから注意！

### テスト実行
上ナビの[実行]→[関数を実行]→[doPost]をすると実行される
実行されたらslackに通知が来ることを確認
![SnapCrab_NoName_2018-11-26_3-37-14_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/f88ab473-aa46-c35e-a55c-1a1bfc933189.png)

google apps scriptの設定終わり！

## Outgoing WebHookの設定

これで最後
![Group (6).png](https://qiita-image-store.s3.amazonaws.com/0/224357/d15d81df-8a18-26d9-d80a-c9412455ce24.png)

### アクセス
`https://[自分のslackチーム].slack.com/apps` にアクセスして、`Outgoing`で検索して探す。
![SnapCrab_NoName_2018-11-26_3-50-24_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/48153cea-3cda-b772-1f5d-1716c8b561d6.png)

最初`https://api.slack.com/apps`でOutgoing Webhookも作れると思ってたけど違った（ツイート）

### インテグレーションの設定

発信webフックを選択していっぱいOKして下にスクロールすると、チャンネルとか設定できるところに出る
![SnapCrab_NoName_2018-11-26_4-0-18_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/cb93156e-2394-f08b-b8a1-06e29c320346.png)

チャンネルはAnyにすると全チャンネルで適用される。今回はテストチャンネルに設定。
引き金となる言葉は`hello gas`に設定
URLはさっき作ったgasのURLを設定
そしたら一番下にある「設定を保存」で保存
![SnapCrab_NoName_2018-11-26_4-9-35_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/7b3911e6-6b1d-07cf-e3b7-50eae2b800f7.png)

### テスト実行
`hello gas`と入力すると`hello slack`と返してくれる！
![SnapCrab_NoName_2018-11-26_4-8-54_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/41015b1d-c9c1-1ac0-c1ae-586e8d892648.png)

これで全部終わり！

# ハマってはないけど一瞬焦ったポイント
引き金となる言葉に`hello`を設定してみたらpostが止まらなくなった
![SnapCrab_NoName_2018-11-26_4-33-41_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/689525c8-30dc-73fc-6dc1-4f9aeae3cac3.png)
![SnapCrab_NoName_2018-11-26_4-14-47_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/224357/71811998-b253-1d25-f85b-fb1d17be4c71.png)

gas_hello_worldが発した`hello slack`の`hello`に反応してしまって無限`hello slack`に...。
Outgoing WebHookのURLを空で更新して無理やり止めた。
まず陥りにくいケースだから考慮しなくていいと思うけど、これはどこで止めるのがいいんだろうなぁ。

# 所感

slackとgasを繋げられたから、slackからスプレッドシートに何かして業務効率化とかできそう！（できるとは言っていない）
値の受け渡しについてふれてないから難易度は知らんけど次の課題はそこ。