Slack Bot開発入門【第1回】ソケットモード対応Slackアプリの設定方法

## シリーズ紹介
この記事は、 **Slack Bot開発入門シリーズ（全3回）** の第1回です。Slackのソケットモードを活用し、Google Colabを使って手軽にBotを開発する方法をステップごとに解説します。シリーズの各回の内容は以下の通りです。

- **第1回:** ソケットモード対応のSlackアプリの作成と基本設定（本記事）
- **第2回:** [Google Colabを使ったオウム返しBotの実装方法](https://qiita.com/sprout/items/83823f3bc51e69f3f244)
- **第3回:** [Geminiを搭載したチャットボットの開発](https://qiita.com/sprout/items/36fcfc56794bfe1fdd97)

第1回では、Slack Botを開発するための基本設定、特にソケットモードの有効化とSlackアプリの作成手順について解説します。

## ソケットモードとは？
Slack Botを開発する際、**エンドポイント**（Webhook）を使用する方法と**ソケットモード**を使用する方法があります。

### エンドポイント（Webhook）方式
- **概要:** 公開URLを用意し、SlackがそのURLにHTTPリクエストを送信します
- **メリット:** 高速でシンプルな設計。外部サーバーにデプロイする場合に適しています
- **デメリット:** パブリックなURLを公開する必要があるため、セキュリティの管理が必要。ファイアウォール内の環境では設定が難しい場合があります

### ソケットモード方式
- **概要:** WebSocket接続を利用してSlackとリアルタイムで通信します
- **メリット:** **公開URLが不要**で、ローカル環境やファイアウォール内でもBotを動作させることが可能。セキュリティリスクを軽減できます
- **デメリット:** エンドポイント方式に比べて若干のセットアップ手順が増えることがあります

> **本シリーズでは、より安全かつ手軽に開発を進められるソケットモードを使用します。**

---

## 前提条件
Slack Botを作成するためには、以下が必要です。

- **Slackアカウントを持っていること**  
  (持っていない場合は、[Slack公式サイト](https://slack.com/)で無料登録しましょう)
- **Slackワークスペースがあること**  
  (自分のワークスペースを作成するか、既存のワークスペースに参加していること)

---

## Slackアプリの作成手順
### 1. Slack APIの管理画面にアクセス
1. まずはSlack [APIの管理ページ](https://api.slack.com/apps)にアクセスします
![スクリーンショット 2025-01-26 14.58.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/4092d811-b5bb-bc4e-9720-d1dd5b8c0896.png)
2. **「Create New App」** ボタンをクリックします
![スクリーンショット 2025-01-26 15.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/8f993694-7fc9-0a9e-63e3-e8d0191646d3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/38ec2b75-791e-7da8-0655-ccebffe23c96.png)
3. アプリの設定を記載したマニフェストファイルをつかった作成（「From a manifest file」）もできますが、今回は1から作成したいため、 **「From scratch」** を選択します。
![スクリーンショット 2025-01-26 15.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/b9d5f4f1-210d-ffa6-a8e0-726f6e43abe8.png)
![スクリーンショット 2025-01-26 15.14.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/f432c005-74fc-5634-1c9c-0aadb245143d.png)

---

### 2. Slackアプリの基本情報を設定
1. アプリ名を入力します。（例: bot）
![スクリーンショット 2025-01-26 15.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/a444c562-b525-2a4e-9033-5c0f25542fa0.png)
2. アプリを作成するワークスペースを選択します。（例：test）
![スクリーンショット 2025-01-26 15.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/57213024-8c76-3535-19c7-44155947e055.png)
3. **「Create App」** をクリック
![スクリーンショット 2025-01-26 15.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/97271625-9504-7420-fb3d-3172f9fc2d7e.png)
Slackアプリが作成され、設定画面に移ります。
![スクリーンショット 2025-01-26 15.23.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/53d82905-9a4d-bc0f-75dd-ea604d2679c8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/6101463a-fac3-4fbe-cba1-d11ca66e4645.png)

---

### 3. スコープの設定
Slack Botに必要な権限（スコープ）を設定します。
1. 左サイドメニュー内の **「OAuth & Permissions」** セクションへ移動します
![スクリーンショット 2025-01-26 15.23.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/67c40158-bfc9-b216-44c5-b1affcfd1c66.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/f80ede34-0d1e-ad62-1a83-d5b2dc47d04f.png)
2. 真ん中ほどまで下にスクロールし、 **「Scopes」** というセクションへ移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/d65eab2a-65e3-1b4a-a296-7974bf97676c.png)
3. **「Bot Token Scopes」** の **「Add an OAuth Token」** をクリックして権限を追加します
本記事では、以下のスコープを追加します。その他のスコープは[公式ページ](https://api.slack.com/scopes?filter=granular_bot)でご確認ください。
   - `chat:write` : チャットにメッセージを送信するための権限
   - `app_mentions:read` : @メンションの読み取りを許可する権限
![スクリーンショット 2025-01-26 15.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/c1e4672f-0679-857a-d001-242b500f3ab7.png)
![スクリーンショット 2025-01-26 15.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/5444a18d-b3d4-b788-afc1-27a69db149cc.png)
![スクリーンショット 2025-01-26 15.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/d55c59f6-0f9a-d7c4-9617-22d1c9115d39.png)
![スクリーンショット 2025-01-26 15.39.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/dfe805ce-ace4-eafd-3e00-24edeb4d003f.png)
![スクリーンショット 2025-01-26 15.40.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/0baab69f-49a3-40af-9775-82619e0127cb.png)
![スクリーンショット 2025-01-26 15.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/60e842ac-8a51-2b52-cb67-f163c2a06513.png)
![スクリーンショット 2025-01-26 15.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/37ba09ce-6039-d2b4-bb8b-82db95999011.png)

---

### 4. Bot Tokenの発行
1. スコープが設定できたら、ページ上部の **「Install to "選択したワークスペース名"」**（ここでは"test"）をクリックして、ワークスペースにインストールします
![スクリーンショット 2025-01-26 15.44.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/bb5cde93-70ec-c4c8-4128-25b3b4da4ef0.png)
2. 作成したbotがワークスペースにアクセスできるように権限をリクエストされるので、 **「許可する」** をクリックします
![スクリーンショット 2025-01-26 15.49.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/ae466aca-b385-6796-37ee-40c9d284acc7.png)
インストールされると、 **「Install to test」** 上部に"xoxb-"から始まる **「Bot User OAuth Token」** が生成されます（このトークンは第2回で使用します）。
※画像ではBot User OAuth Tokenを公開していますが、記事作成後再生成しております。
![スクリーンショット 2025-01-26 15.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/46865292-d7b4-e068-c5e2-d0b2d8dec7df.png)

---

### 5. ソケットモードの有効化
Slack Botがリアルタイム通信を行えるようにソケットモードを有効にします。

1. 左サイドメニュー内の **「Socket Mode」** セクションへ移動します
![スクリーンショット 2025-01-26 16.03.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/545e35c2-4797-807f-46e3-85339e4f36ce.png)
2. **「Enable Socket Mode」** 右横のトグルをオンにします
![スクリーンショット 2025-01-26 16.05.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/74d874b9-79ac-52c6-9a15-1e6f9e6d65a2.png)
![スクリーンショット 2025-01-26 16.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/8d474b4a-2a47-4e5e-8464-b1ef3b92a4d7.png)
3. **「Token Name」** には適当な名前を入力します。（例：echo-bot）
![スクリーンショット 2025-01-26 16.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/1850f896-3121-727e-9924-39ff3e364af3.png)
4. **「Generate」** をクリックします
![スクリーンショット 2025-01-26 16.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/39523e8d-c7be-400b-ba4f-26ae24e6ebf1.png)
App Token（xapp-から始まるトークン）が生成されます（第2回で使用します）。
5. **「Done」** をクリックして閉じます
![スクリーンショット 2025-01-26 16.12.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/09d99c18-8e35-ef48-c041-fa3bb8bf0702.png)
![スクリーンショット 2025-01-26 16.12.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/291b01b6-3cac-c85e-192a-d8189f176183.png)
![スクリーンショット 2025-01-26 16.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/b8957146-0e81-a4f2-ef51-ef852768d47f.png)

--- 

### 6. イベントの設定
アプリがメンションされたことを検知するには、アプリがリッスンする"イベント"を設定する必要があります。イベントには今回設定する、「メンションされたとき」の他に、「メッセージが投稿されたとき」や「絵文字リアクションがつけられたとき」などがあります（Event一覧は[こちら](https://api.slack.com/events?filter=Events)）。
この設定したイベントが発生した時に、そのイベント情報がアプリに送られるようになっています。
1. 左サイドメニュー内の **「Event Subscription」** セクションに移動します
![スクリーンショット 2025-01-28 22.06.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/10fa6523-ca91-832e-3936-c958d3ebf01c.png)
2. **「Enable Events」** 右横のトグルをオンにします
![スクリーンショット 2025-01-28 22.07.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/8b4a892f-d90b-3a15-6247-956e6e3b140f.png)
3. **「Enable」** をクリックします
![スクリーンショット 2025-01-28 22.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/50590b63-dd64-85cd-0e39-0b60148f7c33.png)
![スクリーンショット 2025-01-28 22.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/87edd948-743e-2d07-ec9a-c932491baf2f.png)
4. **「Subscribe to bot events」** を開きます
![スクリーンショット 2025-01-28 22.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/88c27f78-7691-6f87-2e34-5515f0c9bcf3.png)
![スクリーンショット 2025-01-28 22.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/088bdb01-5c10-8443-eacc-c54c23d7397e.png)
5. **「App Bot User Event」** をクリックし、以下のイベントを追加します
  - `app_metion`
![スクリーンショット 2025-01-28 22.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/60ffbfc6-0211-9f92-4c32-938560df6764.png)
![スクリーンショット 2025-01-28 22.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/8909cd3c-9f62-0497-5992-1776208eff5b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/fe984c16-66be-468e-2962-21c2634c97ed.png)
![スクリーンショット 2025-01-28 22.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/b667d873-56e3-dc03-5fb6-4da2ef3b4c63.png)
6. **「Save Changes」** をクリックし、保存します
![スクリーンショット 2025-01-28 22.19.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/c27eaa6e-d175-4226-4fa8-7d29e596bc69.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/488aa537-c7fe-13da-f4de-02f7deb4a603.png)

---

### 7. チャンネルへのBot追加
1. Slackを開き、作成したbotがワークスペースにインストールされていることを確認します

![スクリーンショット 2025-01-29 22.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/85ffd900-f64e-a197-efac-38d3e060b4c0.png)

2. 次に適当なチャンネルにbotを追加します
以下のコマンドを入力し、送信します。
 ```
 /invite @bot
 ```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/683227c8-c567-b51f-e218-c80dd30ed39f.png)

botがチャンネルに追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885493/1e336cbf-ed6a-b372-96c1-3f1afc19321e.png)

---

## おわりに
次回はGoogle Colabを使用して、オウム返しBotの実装方法を解説します。