はじめに

Google Apps Scripts (GAS) を使ってSlackのbotを作成する過程を超丁寧に解説する記事です。（画像がめっちゃ多くて分かりやすいはず...？）
「知識0だけど、作ってみたい！」という入門者への記事となっています。

なお、私も入門者の1人ですので、間違いがあれば御指摘ください。

事前準備

GASというサービスを使って実装していきます。
GASはGoogleサーバー上で動いているので、GASでスクリプトを書いておけば指定のURLを使ってそのスクリプトを実行することが出来ます。
（説明が下手でごめんなさい）

詳細は他の方々が記事を書かれているので丸投げします！
自分がちょっとでも理解したら自分なりの記事を書きますね。

▼Webhookって？

qiita.com

▼GASって？

tonari-it.com

作り方

まずはGASの用意をします。

googleアカウントにログインして、googleドライブのページを開きましょう。
開いたら、新規 > その他 > Google Apps Scriptを選択してください。（初めての方はアプリを追加からGoogle Apps Scriptを探して追加しましょう）

f:id:PafuOfDuck:20190315235239p:plain

選択すると最小限のプロジェクトが生成されます。

f:id:PafuOfDuck:20190315234508p:plain

何も変更せずに公開していきます。
（つまり、何もしないスクリプトを公開します）

公開 > ウェブアプリケーションとして導入...を選択してください。

f:id:PafuOfDuck:20190315235448p:plain

すると、プロジェクトの名前を聞かれるので好きな名前（例：ぱふのこんにちはSlackBot）をつけてください。

名前をつけると下画像のような設定画面が出てきます。
変更内容の説明を入力してください...という項目はバージョンを管理するための自分自身へのメモですので書かなくても大丈夫です。
次のユーザとしてアプリケーションを実行:という項目はそのままで大丈夫です。
アプリケーションにアクセスできるユーザー:という項目はこのスクリプトにアクセス出来る人を設定する項目です。今回の場合は、Botを呼び出せる人を設定する項目になるので自分にあった項目を選びましょう。（他の人もBotを呼び出せるようにしたい場合は全員（匿名ユーザを含む）を選択するようです。）

f:id:PafuOfDuck:20190316000315p:plain

設定終了後、”導入”と書かれたボタンを押します。
するとURLが表示されます。

f:id:PafuOfDuck:20190316020705p:plain

これは後々使うのでコピーしておきましょう。忘れた場合、公開 > ウェブアプリケーションとして導入をもう一度選択することで再確認出来るので安心してください。

次にSlack側の設定を行います。

https://ワークスペース名.slack.com/appsというURLにアクセスして下さい。なお、ワークスペース名が分からない方は下画像の緑で塗りつぶした部分が該当するので、チェックして下さい。

f:id:PafuOfDuck:20190316013812p:plain

https://ワークスペース名.slack.com/appsというURLにアクセスすると、下画像に示した検索機能があるのでhookを検索して下さい。

f:id:PafuOfDuck:20190316004201p:plain

f:id:PafuOfDuck:20190315232642p:plain

すると、Incoming WebhookとOutgoing Webhookという2つの機能(?)が引っかかると思うので、どちらも設定していきます。
この2つの違いですが、語弊を恐れずにザックリ説明すると
Incoming WebhookはSlackに入ってくる（入力を受け取る）機能
Outgoing WebhookはSlackから出て行く（検知して送信）機能
という違いです。

まずはOutgoing Webhookの設定から説明します。

検索に出てきたOutgoing Webhookをクリックすると下画像のようなページが表示されると思います。設定を追加ボタンを押しましょう。

f:id:PafuOfDuck:20190315232654p:plain

押すと、下画像のようなページに遷移するのでOutgoing Webhook インテグレーションの追加ボタンを押しましょう。

f:id:PafuOfDuck:20190315232706p:plain

すると、設定ページへと遷移します。

f:id:PafuOfDuck:20190316005250p:plain

最低限必須な設定として

チャンネル
引き金となる言葉
URL

があります。
チャンネルはどのチャンネルでBotの呼び出しを有効にしたいかを設定します。
引き金となる言葉は何でも構いません。画像の:は、偶然による呼び出しを避ける目的で足しています。
URLは先ほどGASで後々使いますといったURLをコピペしておきます。
最後に、ページ下部にある設定を保存するというボタンを押しましょう。（忘れやすいので注意して下さい！）

これで引き金となる言葉を検知して、URLにあるスクリプトを実行するといった仕組みが出来ました。

という訳で、次はIncoming Webhookの設定です。
Outgoing hookと同様に設定を追加ボタンを押す→Incoming Webhook インテグレーションの追加ボタンを押すという操作を行い、導入しましょう。
すると、下画像のような設定画面に遷移します。

f:id:PafuOfDuck:20190316011907p:plain

最低限必須な設定としては

チャンネル

があります。
Botがどこにメッセージを投稿するのかはココの項目で決まるので自分の好きなチャンネルを設定しましょう。

-Tips-　Botの見た目を変更する

名前をカスタマイズ
アイコンをカスタマイズする

という項目を変更することでBotの名前やアイコンを変更出来るので、好きにカスタマイズしましょう。

下画像（再掲）の赤枠で囲ったWebhook URLはSlackに書き込む機能を使用するために必要なURLです。後で修正するGASのスクリプトで必要になりますのでコピーしておきましょう。

f:id:PafuOfDuck:20190316011907p:plain

これで設定は終わりですので、設定を変更するというボタンを押すのを忘れずに！

これでURLに何かが送られてきたら書き込むといった仕組みも出来ました。
最後に、GASの中身を実装して「こんにちは」というメッセージをIncoming hookに渡すという処理を行わせましょう。

という訳で、コードを貼っておきます。（中身の解説は長くなりそうなので省略します。気になる方は調べてみて下さい）

function doPost() {
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : "こんにちは！"
      }
    )
  };
 
  UrlFetchApp.fetch("https://hooks.slack.com/services/XXXXXXX/YYYYYY", options);
}

注意
上のコードを貼り付けた後にUrlFetchApp.fetch("ほげほげ", options)のほげほげには赤枠で囲ったWebhook URLをコピーして貼り付けて下さい。

下画像のようになりましたら、GASを最初に作成した時と同じく公開 > ウェブアプリケーションとして導入...を選択してください。この操作を忘れると更新が反映されませんので注意。

f:id:PafuOfDuck:20190316013517p:plain