【GoogleAppsScript】初心者向け！『コピペでできる』オウム返しSlackBotの作り方

#はじめに
僕は、プログラミングを勉強し始めて4ヶ月ほどのプログラミング初学者です。

レベル感的にはこんな感じ↓
・**Unity C#** → **2ヶ月半くらい**
・**Google Apps Script** → **2週間くらい**
・**Vue.js** → **2週間くらい**
・**Ruby on rails** → **ちょっと**

こんなレベル感でURLを短縮するSlack Botの制作に当たったんですね。

すると、「Slack Botが返事しない！」とか、「無限にBotがリプライしてくる！」とか、つまづきだらけだったので、似た状況で、Google Apps Scriptを学んでみたいという方に参考にしていただけたら幸いです！

ちなみに、最終的なゴールは、下記動作をしてくれるようなbotです。

<img width="516" alt="スクリーンショット 2020-04-11 20.30.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/1f208f5f-f982-482c-5494-3932df61d276.png">

僕が、Slack Bot制作の時、主に参考にさせて頂いたサイトです。
「より詳しい内容を知りたい！」と思った際には、是非ご覧ください！

→[Google Apps Script で Slack Botを作ってみた。(お勉強編)](https://qiita.com/Quikky/items/9de56c049304885a4f4f)
→[SlackとGoogleAppsScript(GAS)を連携する手順・事例](https://tech.tabilabo.co.jp/598/)
→[初心者がGASでSlack Botをつくってみた](https://tech.camph.net/slack-bot-with-gas/#sub3)
#手順
実装までの作業手順は以下のような形です。

**1、Outgoing Webhookの追加**

**2、Outgoing Webhookの設定**

**3、Google Apps Scriptの用意**

**4、Slack Appの作成**

**5、Google Apps ScriptとOutgoing Webhookの結びつけ**

**6、Google Apps ScriptとSlack Appの結びつけ**

順を追って、説明していきます！

#1、Outgoing Webhookの追加
まずは[このページ](https://enjoyprogramminghq.slack.com/intl/ja-jp/apps)に遷移した後、画面右上のボタンから、任意のワークスペースを選択して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/f6a6288b-257c-ca9b-2eec-41513ba6161a.png)

その後、画面中央の検索欄から「Outgoing Webhook」と検索して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/3f15154f-bc8d-6fc8-a53c-cee97ce8bd60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/fdbd3a90-ce14-9b13-a59c-36329b303aa2.png)

そして、先の画面の「Slackに追加」「Outgoing Webhookインテグレーションの追加」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/05576e19-57b8-6455-0481-73de6b32219f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/ce2e0f37-8577-61e2-09e5-df3db00f2662.png)


ここまでで、Outgoing Webhookの追加が終了です！
#2、Outgoing Webhookの設定
続いて、Outgoing Webhookの設定をしていきます。
画面を少し下にスライドすると、画像のように「インテグレーションの設定」という部分に移ると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/db36b13e-d1f1-5163-c46a-1752119f4d1c.png)


色々と設定できる部分はありますが、今回いじるのは以下の2つのみです！
**・チャンネル**
**・URL**

URLはGoogle Apps Script準備後に設定するので、今は任意のチャンネルを選択して、画面一番下の「設定を保存する」ボタンをクリックして変更を保存しましょう。

Outgoing Webhookの設定は以上になりますが、**Google Apps ScriptとOutgoing Webhookの結びつけ**の章で再度この画面から「URL」部分をいじることになるので、タブは閉じないようにしましょう！
#3、Google Apps Scriptの用意
続いて、Google Apps Scriptの用意をします。
[Googleブラウザ](https://www.google.com/)の画面右上にある四角形のマークを選択し「Googleドライブ」を選択します。

(もしGoogleアカウントをお持ちでない場合は、アカウント登録からする必要がありますが、ここでは割愛させていただきます。　詳しくは→[Googleアカウントヘルプ](https://support.google.com/accounts/answer/27441?hl=ja))
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/49272e15-7ec5-92e3-52e5-6c4611c46200.png)

そして、Goodleドライブの画面左上にある「+新規」のボタンから、画像のように「その他」→「Google Apps Script」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/e8255aec-48ee-3061-1170-df490c19e45e.png)

そうすると、このような画面になると思うので、下のコードを丸々この画面にコピーして下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/964725e0-707d-5724-e0c5-144ba3f9da34.png)

~~~javascript
function doPost(e) {//eにslack側から送られてきた情報が色々入っている

  var message = e.parameter.text //slackから送られてきた情報のうち、text部分を取り出して格納

  if(e.parameter.user_name != "slackbot"){//ここで条件分岐をしないと、BotがBot自身の投稿した内容に反応して無限ループにハマるので注意！
      var options =
      {
        "method" : "post",
        "contentType" : "application/json",
        "payload" : JSON.stringify(
          {
            "text" :message//送られてきた内容をそのまま返す
          })
      };
    UrlFetchApp.fetch("後で貼る", options); //指定のURLにHTTPリクエストを送る(slackにメッセージを送る)
  }
}
~~~
コードの解説はコメントアウトに書いたので省略しますが、特に「UrlFetchApp.fetchってなんぞや？」と思った方は下記サイトをご覧下さい。
HTTP通信もあわせて説明されているので、非常に分かりやすいです！

→[【初心者向けGAS】Google Apps ScriptでWeb APIを活用するための基礎知識](https://tonari-it.com/gas-web-api-http-urlfetch/)

続いて、コードを貼った後はコードを保存するので、画像に従って画面左上のカメラのようなマークを押してみて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/40e20cb5-7a9d-4525-25df-bab287f1b1cb.png)

最後に、webアプリケーションを公開するので、画像に従って、「公開」→「ウェブアプリケーションとして導入」を選択して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/5a5983f6-b5e7-cdd7-da05-e43b5dd326d0.png)

すると、次のような画面になると思うので、画像のように「Who has access to the app:」のみ「Anyone,even anonymous」変えて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/200f4f84-0c52-ba4b-7099-9b82101b49f7.png)
そして、「Deploy」を押して、「許可を確認」を押します。

次に出てくるアカウントの選択を終えると、下の画面が出て不安になるかと思います!
画像通りに「詳細」→「~~~安全では無いページに移動」を押すと許可画面に遷移するので、許可を押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/70d851c0-9775-b836-b58d-37391c199e3e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/0317bcb5-2fcf-9d66-657e-b528c9eda8c6.png)
許可を押すと、画像のように「web app URL」が発行され、これは後で使うものなので、保存して置きましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/8423ef28-856d-0dc9-723d-ca6faa682842.png)

以上でGoogle Apps Scriptの準備は終わりです。
#4、Slack Appの作成
続いて、Slack Appの作成に移ります。

[このページ](https://api.slack.com/apps)に遷移して、ページ右上の「Create New App」を選択すると画像のような画面になるので、「App Name」と「Development Slack Workspace」を記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/2de61a84-29ad-5655-eea5-8902ab834c7b.png)
「Create App」を押すと、下の画面になると思うので、画面左の「Incoming Webhooks」を選択して、画面右上のオフになっているボタンをオンにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/75219f23-86e9-5bde-c0e5-dfeb90c85f52.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/52b0a2bb-d71c-85bf-40b9-fc2be1f4e1c1.png)
次に、画面左から「OAuth&Permissions」を選択して「Install App to Workspace」をクリックした後、画像のようにチャンネルを選択して「許可」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/9a9505a9-c2a6-8fd7-e886-7e5530f7943a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/719d1325-d6ae-a5ed-42ed-7afc8b634297.png)
最後に、もう一度画面左から「Incoming Webhooks」を選択して少し下に行くと、次のような画面が現れているので、「Webhook URL」をコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/c12417b9-7d46-4acf-edc8-a1472a35b6d3.png)

以上で、Slack Appの作成は終了です！
#5、Google Apps ScriptとOutgoing Webhookの結びつけ
さて、ここからは結びつけに入るんですが、非常にシンプルです。

3章でGoogle Appa Scriptを公開した時に、こんな画面になったと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/6b817f12-c66d-3755-5ced-c4341f53b051.png)
このURLを今使うのですが、1章で設定した「Outgoing Webhook」に「URL」の欄があったと思います。
[このページ](https://enjoyprogramminghq.slack.com/intl/ja-jp/apps)からOutgoing Webhookを検索できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/61e630f6-e058-cb73-fe80-556fec12522b.png)

上の画像のURLを下の画像のURL欄に貼るだけで、Slackで入力された情報が、Google Apps Scriptに送信されるようになります！

これで**Google Apps ScriptとOutgoing Webhookの結びつけ**は終了です！

#6、Google Apps ScriptとSlack Appの結びつけ
本章も結びつけですが、前章から分かる通り、非常にシンプルです！

3章でGoogle Apps Scriptのコードを用意した際、以下の部分があったはずです。

~~~javascript
UrlFetchApp.fetch("後で貼る", options); //指定のURLにHTTPリクエストを送る(slackにメッセージを送る)
~~~
この、「後で貼る」の部分を4章で下の画像の時に取得したURLに変えます。
→[このページ](https://api.slack.com/apps)から取得しに行けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/35a1e675-d0a4-6938-04eb-3e4c119061d6.png)
ちなみに、貼るURLは"の間に書くようにしましょう。

~~~javascript
UrlFetchApp.fetch("https://~~~~~", options); //こんな感じになるように！
~~~

最後に、Google Apps Scriptを更新した時は3章の時もやった、コードを保存した後、公開の手順を踏み、画像のようにコードを更新する必要があるので注意して下さい！
(更新した後に表示されるURLはOutgoing Webhookに使われるURLと同じなので、他の作業は必要ありません)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/acb9a2f3-9bfa-494a-50c0-97a1ecffa40a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/edf88a4b-7c6c-3c73-2105-586815fac4c9.png)

お疲れ様でした！
以上で、全工程が終了です！

この時点で、自分が指定したチャンネルでメッセージを送れば、Botが反応してくれるはずなので、動かないという方は大変だと思いますが、もう一度この記事を見返してみて下さい。
#さいごに
とりあえずBotは作ったけど、仕組みはどーなってんの？という方がいらっしゃると思うので、参考までに下記のようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563620/9ca3842d-1fb2-b6c2-a4c8-91fc0b3b7e46.png)
引用元サイト→[SlackとGoogleAppsScript(GAS)を連携する手順・事例](https://tech.tabilabo.co.jp/598/)   

今回のBotの場合だと、ライブラリの使用をしていないので、

1、　**チャンネルに投稿**

2、　**Outgoing WebhookがGoogle Apps Scriptに投稿情報を渡す**

3、　**Google Apps Scriptがその情報をdoPost関数で受け取り(情報自体は引数のeに格納)**

4、　**処理ののち、Google Apps ScriptがSlack Appに情報を渡す**

5、　**Slack Appからチャンネルに投稿**

のような認識であっていると思います。(間違っていたらコメントから指摘をお願いします。即直します！)

まだまだこのBotは基本的な要素を押さえただけの簡単なBotです。

例えば「メンション付きで反応するには？」とか「URLを正規表現使って認識させるには？」とか「投稿内容をスプレッドシートに保存するには？」など、様々応用する方法はありますので、是非色々試してみて下さい！

長い間お読みいただきありがとうございました！

参考にさせて頂いたサイト(再喝)
→[Google Apps Script で Slack Botを作ってみた。(お勉強編)](https://qiita.com/Quikky/items/9de56c049304885a4f4f)
→[SlackとGoogleAppsScript(GAS)を連携する手順・事例](https://tech.tabilabo.co.jp/598/)
→[初心者がGASでSlack Botをつくってみた](https://tech.camph.net/slack-bot-with-gas/#sub3)
→[【初心者向けGAS】Google Apps ScriptでWeb APIを活用するための基礎知識](https://tonari-it.com/gas-web-api-http-urlfetch/)