---
# System prepended metadata

title: 20230713_NUTMEG-SlackBot開発やってみた
tags: [ブログ記事]

---


- [x] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
飯田 庸介
}


***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
Slackbotで送信したメッセージをスプレッドシートに記録する機能を作ってみた
}


<br>

## 表示される部分
***サムネイル画像***
{
![](https://hackmd.io/_uploads/BkbZqL6K3.png)
}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [x] 活動の様子
- [ ] メンバーの趣味

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [x] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [ ] フロントエンド
- [ ] バックエンド
- [x] インフラ
- [ ] Web-design
- [ ] API関係
 


---

***以下に本文を記載してください***

# はじめに

はじめまして，この春NUTMEGに加入した飯田です．

チャットツールとして使用しているSlackを便利にしよう！！ということで，SlackBotの開発をM2の後方腕組大臣から受け継ぎました！！

今回は，SlackBotで送信したメッセージをスプレッドシートに記録する機能を作りました

# GM2意見箱を作ってみた


要望：意見・課題点を一覧に記録しておきたい

SlackでBotをメンションしてメッセージを送信すると，スプレッドシートに書き込む

![](https://hackmd.io/_uploads/HJxXs46tn.png)


![](https://hackmd.io/_uploads/S1IEjVpY2.png)


# SlackBotの仕組み


Botが入っているチャンネル上で，メッセージが送信されたら，SlackがBotのサーバーにリクエストを送信する．Botのサーバーは処理を行い，Slackに結果を送信(チャンネルにメッセージを送信とか)する．

![](https://hackmd.io/_uploads/Sy5IoV6Yn.png)


# ngrokのインストール


[ngrok - download](https://ngrok.com/download)からインストールする

(ngrokをローカルにインストールせず，Dockerを使用する方法でもできそうなので，そっちのほうが簡単かも) 

     docker run -it -e NGROK_AUTHTOKEN=<token> ngrok/ngrok http 3000 

  
Slackはイベントに対応するHTTP POSTリクエストを”Request URL”エンドポイントに送信する
そのため，ワークスペースに常駐しているSlackBotがローカルPCのポートにアクセスする必要がある
ローカルPCのネットワークを外部に公開し，アクセスできるようにするためにngrokを使用する

参考 : [Slack BotをBoltで開発した](https://zenn.dev/peg/articles/a3597550a61006)


# git cloneする


`git clone git@github.com:NUTFes/nutmeg-slack.git`



# 環境変数を設定する

- api/env/.env に以下を作成する

```text
# 開発環境
DB_NAME="***************"
DB_USER="***"
DB_PASSWORD="*******" 
```


- env/.env に以下を作成する
```text
SLACK_BOT_TOKEN=*******************************************
SLACK_SIGNING_SECRET=*****************
DB_NAME=*********
DB_USER=***
DB_PASSWORD=****
DB_PORT=27017
DB_HOST=mongo
SPREADSHEET_KEY=******************
```


- vite/.env に以下を作成する
``` 
VITE_API_URL=http://localhost:1323
VITE_KEYCLOAK_URL=********
VITE_KEYCLOAK_REALM=NUTFES
VITE_KEYCLOAK_CLIENT_ID=slack-auth
```


# Slack APIの設定


- Slack Appの設定ページにアクセスし， Collaborators に名前を追加する
(招待する必要があるかも)
(NUTMEGワークスペースの develop-nutfes_slack チャンネルのタブにピン留めされている)

![](https://hackmd.io/_uploads/rk1spVaYh.png)


Boltサーバーの起動

---

docker compose upする

![](https://hackmd.io/_uploads/SyaApVat3.png)


`⚡Bolt app is runnning!` と表示されると，Slack Botサーバーが起動している



# ngrokの起動・RequestURLの設定


ubunutのタブをもう1つ開いて， ngrok http 3000 で3000番のポートにインターネット上からアクセスできるようにする

(注意 : インターネット上に公開しているので，作業終了時には閉じるようにしたほうがいい)



`Session Status` が `online` であれば，接続できている

![](https://hackmd.io/_uploads/B1BGRNTF2.png)



`Forwarding` の `https://035....ngrok-free.app` をコピーする

Slack appの設定ページの `Event Subscriptions` の `Request URL` の `Change` を押して，**コピーしたURL +  `/slack/event`**  を入力する

入力した後，緑色の文字で `Verified` と表示されると，Slackからngrokに通信できている　

![](https://hackmd.io/_uploads/r1E5046K3.png)

> 
> **準備完了！！**
>  

これでSlack bot開発ができるようになります!!

# おわりに

Slack Botで**技大祭を円滑に**というビジョンを持って，趣味程度に取り組んでいこうと思います

