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

14929 ワード
Slack slackbot gas GoogleAppsScript 初心者 GoogleAppsScript テキストリンク

はじめに

僕は、プログラミングを勉強し始めて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を活用するための基礎知識