【Slack】Slack BotをSlack apiとGASを用いて作ってみよう！【GAS】

# はじめに

Slack APIを使って特定の単語に反応してスレッドで返信を行うBotを作成したので、手順を解説していきます。
難しい説明は極力省き、丁寧に解説していくので、完全な初心者の方でも特に問題なく進められると思います。

## やりたいこと

- ユーザーが特定の単語をメッセージで送信
- そのメッセージに対してスレッドで返信
- 返信の内容は「@送信者　設定したメッセージ」

このような動作をするBotを作成していきます。

## 使うもの

- **Slack**
- **Slack API**
- **GAS (Google Apps Script)**

それぞれ軽く解説していきます。

### Slack

便利なチャットツールです。これに関しては説明は割愛します。

### Slack API

Slackと他のサービスなどを繋げて便利に使える仕組みのことです。
これを使えばSlackを普通に使うよりもっと色々なことができるんだな、くらいの理解で大丈夫です。

### GAS (Google Apps Script)

Googleの各種サービスと連携して業務の自動化などが行える開発ツールです。
すでに利用したことがある方も多いのではないでしょうか？
プログラミングにあまり詳しくない方でも比較的低い学習コストで業務の効率化を実現できます。今回はこのツールを開発に用います。

## 事前準備

Googleアカウントを用意しておきましょう。
GASのプロジェクトの作成に必要となりますので、まだアカウントを持っていない方は作成しておいてください。

あとはSlackにテスト用のチャンネルを作成しておいてください。
今回、テスト用に「**qiitaテスト用**」というワークスペースを作成し「**#test**」チャンネルを用意しました。

![1_slackチャンネル作成画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/338edc0a-c795-aba8-40ec-33420143124f.png)

## 手順

### 1. Slack API にアクセスする

まず、[Slack API](https://api.slack.com/apps)にアクセスします。

![2_slackapiアクセス画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/9988ca47-de6a-b01a-3b51-001cd3d33c40.png)

### 2. アプリを作成する

ページ右上の「**Create New App**」をクリックします。

![3_createnewapp画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/287779cc-9e2b-2e04-5421-81ae93dde1fe.png)

「**From scratch**」を選択します。
アプリの名前と導入したいワークスペースを選択します。
今回、名前は「**自動返信 Bot**」、テスト用に作成した「**qiita テスト用**」に導入します。

![4_fromscratch選択createapp画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/590bde48-c6da-9dad-71f1-71fdb0ad66af.png)

入力したら「**Create App**」をクリックします。

これでアプリができました！ここから機能の設定をしていきます。

![5_アプリ作成完了画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/afae3fd2-4662-23ad-e7ed-dbb38ed25957.png)

### 3. 権限の設定

アプリができたところで、権限の設定をしていきます。
Slackではユーザーがチャンネルにメッセージを送ったり、他者が送信したメッセージを見たり、そこにリアクションしたり、、、、たくさんのことができますね。
しかし、そのままの状態ではこれらの動作を行えません。
メッセージの送信がしたかったら「メッセージの送信」の動作を許可してあげる必要があります。
では、設定していきましょう。

画面左側のメニューバーから「**OAuth & Permissions**」を選択します。

![6_OAuth選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/d0feff30-ba69-cff5-2a3e-59e5501b69ad.png)

画面を下にスクロールしていくと、「**Scopes**」というセクションがあります。

![7_Scopesスクロール画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/4ef4a162-1237-6c00-c276-aee2e30d8011.png)

ここではアプリの権限の設定ができます。
スコープには「**Bot Token Scopes**」と「**User Token Scopes**」の二種類があります。
これらの違いは、ざっくり言えばBotの権限なのか、それともユーザー側の動作の権限なのかの違いです。

:::note info
この辺を詳細に解説してくださっている素敵な記事がありましたので、興味のある方は一読してみてください！
[[Slack API] user scopeとbot scope - 大ちゃんの駆け出し技術ブログ](https://sakitadaiki.hatenablog.com/entry/2021/06/07/071543)
:::

今回はBotに動作を行わせたいので「**Bot Token Scopes**」に設定をしていきます。
「**Add an OAuth Scope**」をクリックして「**chat:write**」を選択します。

![8_scope設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/58d3ee38-7a6c-9104-e48c-dda4a43a6dc4.png)

これで権限の設定ができました。
他にも様々なスコープがあるので興味があれば調べてみましょう！

### 4. GAS のプロジェクト作成

では、GASでプロジェクトを作成してみましょう。
まず、**Google Drive**にアクセスします。
左クリック、または「**新規**」ボタンから「**その他**」を選択して「**Google Apps Script**」を選択します。

![9_GAS作成画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/fc99fa8a-375d-8368-414f-5edd1a259456.png)

すると、エディタが立ち上がります。

![10_GASエディタ起動画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/cfb84deb-e377-9097-5af7-47c4e8fd8a30.png)

下記のコードをコピーして貼り付けます。

```javascript:コード.gs
function doPost(e) {
  let params = JSON.parse(e.postData.getDataAsString());

  if (params.type === 'url_verification') {
    return ContentService.createTextOutput(params.challenge);
  }

  if (params.event && params.event.type === 'message' && !params.event.subtype) {
    handleEvent(params.event);
  }

  return ContentService.createTextOutput(JSON.stringify({ "challenge": params.challenge }));
}

function handleEvent(event) {
  if (event.text.includes('リアクション')) { // 反応するメッセージ
    let userId = event.user;
    let replyMessage = createMentionMessage(userId);
    sendReply(event.channel, event.ts, replyMessage);
  }
}

function createMentionMessage(userId) {
  return `<@${userId}> こんにちは！`; // 送信するメッセージ
}

function sendReply(channelId, threadTs, message) {
  let token = ""; // トークン
  let url = "https://slack.com/api/chat.postMessage";

  let payload = {
    "channel": channelId,
    "text": message,
    "thread_ts": threadTs
  };

  let options = {
    "method" : "post",
    "contentType" : "application/json",
    "headers": {"Authorization": "Bearer " + token},
    "payload" : JSON.stringify(payload)
  };

  UrlFetchApp.fetch(url, options);
}

function sendTestMessage() {
  let channelId = ""; // テストメッセージを送信するチャンネルID
  let message = "テストメッセージ";
  let token = ""; // トークン
  let url = "https://slack.com/api/chat.postMessage";

  let payload = {
    "channel": channelId,
    "text": message
  };

  let options = {
    "method" : "post",
    "contentType" : "application/json",
    "headers": {"Authorization": "Bearer " + token},
    "payload" : JSON.stringify(payload)
  };

  UrlFetchApp.fetch(url, options);
}
```

![11_GASにコード貼り付け画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/7ddaa655-3a76-83c7-595e-bc6fb682f17f.png)

右上の「**デプロイ**」をクリックし、**新しいデプロイ**を選択します。

![12_新しいデプロイ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/110b6248-8b24-058c-421b-866231db8c79.png)

「**種類の選択**」の横の歯車から「**ウェブアプリ**」を選択します。

![13_ウェブアプリ選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/13be042f-1b6d-13bd-4209-0a17049df00c.png)

「**説明**」に「**初回デプロイ**」と入力します。アクセスできるユーザーを**全員**に設定します。
右下の「**デプロイ**」ボタンをクリックします。

![14_デプロイクリック画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/44775317-fca4-8fc6-9078-bcadb0d62a71.png)

:::note warn
このような画面が出たら、「**アクセスを承認**」をクリックします。

![15_アクセスを承認画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/c101cfb8-5488-51e8-828d-1f7ceaec66b5.png)

アカウントを選択します。

![16_アカウントを選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/5647fa8b-ab96-0175-5774-6e2846586a8e.png)

「**Hide Advanced**」をクリックして「**Go to （プロジェクト名）**」をクリックします。

![17_Hideadvanced画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/532e95d7-ded3-df44-75ef-1840838b3823.png)

「**Allow**」をクリックします。

![18_allow画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/70d37918-ba30-15b7-bb37-8a586b3cd23a.png)
:::

この URLが後で必要になりますので、コピーしておきます。

![19_デプロイ完了画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/ea3f750d-c416-a3e2-93c2-7edf513be47b.png)

### 5. Slack API でイベントの設定

Slack APIに戻ります。
左側のメニューバーから「**App Home**」をクリックします。

![20_AppHome選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/6c650484-1433-5911-eb18-0e488b56bb5d.png)

「**Your App’s Presence in Slack**」の「**Edit**」をクリックします。
「**Display Name**」に Bot の表示名を、「**Default username**」は特に使わないのでそんなに拘らなくてもいいかと思います。
入力したら「**Add**」をクリックします。

![21_displayname入力画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/bfa9a4c6-92fe-cb0a-f927-df6f085f39f7.png)

左側のメニューバーから「**Event Subscriptions**」をクリックします。

![22_eventsubscriptions画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/6547d6bf-db48-affc-bfa4-b93b9d9e8fdd.png)

「**Enable Events**」をオンにします。
すると「**Request URL**」の入力欄が出てきますね。
ここに先ほどのURLを貼り付けます。

![23_enableevent入力画面（成功）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/928c864e-f42a-edeb-9b7c-4f43f692b1d7.png)

ここで、「**Verified**」になれば成功です。

:::note warn
下記のような黄色いメッセージが出現してしまった場合、これまでのステップで何かミスをしている可能性があります。
飛ばしてしまった点などがないか確認しましょう。

![24_enableevent入力画面（失敗）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/e0296f44-915e-2889-ca63-7b00da4978ae.png)
:::

「**Subscribe to bot events**」をクリックするとイベントを設定できるようになります。
このイベントでは、何が起きた時にBotが動作するのかを設定することができます。

なお、ここで設定するイベントによって必要になるスコープは自動で追加してくれます。
例えば今回追加する「**message.channels**」では、チャンネルの履歴を読み込む権限が必要ですが、イベントを追加した時点でスコープは追加されています。

では「**Add Bot User Event**」をクリックして「**message.channels**」を追加します。

![25_subscribetobotevents設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/5c358e51-0ba2-5817-280b-5bb0abea3c69.png)

追加したら画面下部の「**Save Changes**」をクリックします。

![26_savechanges画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/f29431f0-1a23-7599-f081-d217e943ec68.png)

### 6. トークンの発行

それではbotをインストールしていきましょう。
まずはトークンを発行していきます。左側のメニューから「**OAuth & Permissions**」を選択してください。

![27_OAuth&permissions画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/eb9c8f5e-f14f-1082-feb0-ffb4b2b61ba4.png)

「**Install to Workspace**」をクリックして、設定した内容に問題がなければ「**許可する**」をクリックしましょう。

![28_ワークスペースへのインストール画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/6686d0a6-3448-8a27-1ec2-48e321507529.png)

発行されたトークンをコピーします。

![29_トークンの発行画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/cab85289-9ebf-0984-8455-8fdaf35ec016.png)

Slackのチャンネルに作成したアプリを追加します。

![30_チャンネルにアプリ追加画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/8f6a9081-9c29-9b66-0ff9-ed420287f8ca.png)

### 7. 動作を確認

では動作の確認をしていきましょう！
GASに戻って先ほどのプロジェクトを開きましょう。
「**// トークン**」と書いてある行のシングルクオーテーションの間に、先ほどのトークンを貼り付けます。
具体的に言えば **28行目** と **50行目** です。

![31_トークン貼り付け画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/7cfb00ad-da06-7954-6efd-43589cbdbce6.png)

次に、「**// テストメッセージを送信するチャンネルID**」と書いてある行に今回使うチャンネルのチャンネルIDを貼り付けます。

![32_チャンネルID貼り付け画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/3e32f71b-4146-818a-9380-21d13ee122b3.png)

画面上部のメニューバーから実行したい関数を選択してください。
「**sendTestMessage**」を選択して実行します。
これは実行すると設定したメッセージを指定したチャンネルに送信するテスト用の関数です。

![33_テスト送信関数実行画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/34a18021-82d5-4640-8d44-e649b4ff6aaf.png)

Slackを確認してみます。
このようにアプリケーションからメッセージを送信することができましたね。

![34_slack確認画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/b35ed5f6-1c65-aa86-1af5-9dd79df516fd.png)

ちなみにGASのスクリプトには、すでに特定の言葉に反応して返信を行う機能はすでに作ってあります。
すぐに試したいところですが、先ほどトークンの設定をしたのでもう一度デプロイしてあげる必要があります。
以前と同様の要領でデプロイします。

![35_2回目デプロイ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/cb05bfe6-afb0-bbfc-3341-55bad6cbf521.png)

URLが更新されたので、Slack APIに戻って新しいURLを設定してあげます。

![36_URL更新画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/43b0646f-5bad-3149-624c-acfd8bb5f4c6.png)

「**Verified**」になったことを確認したら「**Save Changes**」をクリックして更新を保存します。

![37_verified確認画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/f5edd379-a880-30cb-afc5-3109a478189c.png)

では実際に単語に反応するのか確認してみましょう。
今回は、「**リアクション**」という言葉に反応して、「**@送信者　こんにちは！**」と送信するように設定しています。
メッセージを送信してみましょう。

![38_slack動作確認画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3383150/c006890d-5c62-309d-1fd7-db8f45077ff7.png)

無事に動作が確認できましたね！これでBotの作成は終了です！お疲れ様でした！
メッセージなどは必要に応じて変更してみてください！

# おわりに

本記事では簡単なSlackbotの作成手順を解説しました。今回は簡単のために仕様や関数、機能の解説をかなり省いてしまいましたが、Slack APIにはまだまだ多くの機能があるので本記事を通して興味を持った方がいれば調べてみてください！

## 参考

- [Slack アプリ開発を始めるときに全人類が知っておくべきこと](https://www.wantedly.com/companies/wantedly/post_articles/302887)
- [Developer docs and guides | Slack](https://api.slack.com/docs)
- [【Slack API】user scopeとbot scope - 大ちゃんの駆け出し技術ブログ](https://sakitadaiki.hatenablog.com/entry/2021/06/07/071543)