【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です。

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

→Google Apps Script で Slack Botを作ってみた。(お勉強編)
→SlackとGoogleAppsScript(GAS)を連携する手順・事例
→初心者がGASでSlack Botをつくってみた
#手順
実装までの作業手順は以下のような形です。

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の追加
まずはこのページに遷移した後、画面右上のボタンから、任意のワークスペースを選択して下さい。

その後、画面中央の検索欄から「Outgoing Webhook」と検索して下さい。

そして、先の画面の「Slackに追加」「Outgoing Webhookインテグレーションの追加」を選択します。

ここまでで、Outgoing Webhookの追加が終了です！
#2、Outgoing Webhookの設定
続いて、Outgoing Webhookの設定をしていきます。
画面を少し下にスライドすると、画像のように「インテグレーションの設定」という部分に移ると思います。

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

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

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

(もしGoogleアカウントをお持ちでない場合は、アカウント登録からする必要がありますが、ここでは割愛させていただきます。　詳しくは→Googleアカウントヘルプ)

そして、Goodleドライブの画面左上にある「+新規」のボタンから、画像のように「その他」→「Google Apps Script」を選択します。

そうすると、このような画面になると思うので、下のコードを丸々この画面にコピーして下さい。

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を活用するための基礎知識

続いて、コードを貼った後はコードを保存するので、画像に従って画面左上のカメラのようなマークを押してみて下さい。

最後に、webアプリケーションを公開するので、画像に従って、「公開」→「ウェブアプリケーションとして導入」を選択して下さい。

すると、次のような画面になると思うので、画像のように「Who has access to the app:」のみ「Anyone,even anonymous」変えて下さい。

そして、「Deploy」を押して、「許可を確認」を押します。

次に出てくるアカウントの選択を終えると、下の画面が出て不安になるかと思います!
画像通りに「詳細」→「~~~安全では無いページに移動」を押すと許可画面に遷移するので、許可を押しましょう。


許可を押すと、画像のように「web app URL」が発行され、これは後で使うものなので、保存して置きましょう！

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

このページに遷移して、ページ右上の「Create New App」を選択すると画像のような画面になるので、「App Name」と「Development Slack Workspace」を記述します。

「Create App」を押すと、下の画面になると思うので、画面左の「Incoming Webhooks」を選択して、画面右上のオフになっているボタンをオンにしましょう。


次に、画面左から「OAuth&Permissions」を選択して「Install App to Workspace」をクリックした後、画像のようにチャンネルを選択して「許可」を押します。


最後に、もう一度画面左から「Incoming Webhooks」を選択して少し下に行くと、次のような画面が現れているので、「Webhook URL」をコピーします。

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

3章でGoogle Appa Scriptを公開した時に、こんな画面になったと思います。

このURLを今使うのですが、1章で設定した「Outgoing Webhook」に「URL」の欄があったと思います。
このページからOutgoing Webhookを検索できます。

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

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

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

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

UrlFetchApp.fetch("後で貼る", options); //指定のURLにHTTPリクエストを送る(slackにメッセージを送る)

この、「後で貼る」の部分を4章で下の画像の時に取得したURLに変えます。
→このページから取得しに行けます。

ちなみに、貼るURLは"の間に書くようにしましょう。

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

最後に、Google Apps Scriptを更新した時は3章の時もやった、コードを保存した後、公開の手順を踏み、画像のようにコードを更新する必要があるので注意して下さい！
(更新した後に表示されるURLはOutgoing Webhookに使われるURLと同じなので、他の作業は必要ありません)

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

この時点で、自分が指定したチャンネルでメッセージを送れば、Botが反応してくれるはずなので、動かないという方は大変だと思いますが、もう一度この記事を見返してみて下さい。
#さいごに
とりあえずBotは作ったけど、仕組みはどーなってんの？という方がいらっしゃると思うので、参考までに下記のようなイメージです。

引用元サイト→SlackとGoogleAppsScript(GAS)を連携する手順・事例

今回の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を作ってみた。(お勉強編)
→SlackとGoogleAppsScript(GAS)を連携する手順・事例
→初心者がGASでSlack Botをつくってみた
→【初心者向けGAS】Google Apps ScriptでWeb APIを活用するための基礎知識