今回は、Node.jsとTypeScriptを使用したSlackBotの構築手順をまとめていきます。普段、Slackはもちろん、SlackBotもよく使っているのですが、自身で開発したことはないためどんなもんか実装していきます。
Slack Botについて
Slackについて
Slackは、ビジネスチーム向けのコミュニケーションツールです。チャット機能やファイル共有機能、ビデオ通話機能などを備えており、リモートワークやオフィス内でのコミュニケーションツールとして利用されているため、ほぼデファクトスタンダードと言っても過言ではないかと思います。恐らく読者の皆様のほとんどがSlackを使っているもしくは使ったことがあるのではないでしょうか。もちろん私もSlackにはいつもお世話になっています。
ここで豆知識
Slackの正式名称は「Searchable Log of All Conversation and Knowledge」らしいです。
Slack Botとは
SlackBotは、Slack上で自動的に動作するプログラムのことです。SlackBotを使うことで、Slack上での作業を自動化することができ、業務効率を向上させることができます。SlackBotの開発には、プログラミングの知識が必要となりますが、Boltフレームワークを使うことで簡単に実装することができます。
そして、SlackBotには以下のようなユースケースが考えられます。
- 特定の言葉に反応して、返信
- 定期的に業務報告をまとめて送信
- スプレッドシートのデータをSlackに自動的に転送
- 会議室予約の管理
- チームメンバーの業務量を可視化
- プロジェクトのタスク管理
- 特定の領域に対して質問応答
これらはほんの一部であるため、可能性は無限大です。
そのため、SlackBotはチームメンバーの作業効率を向上させるための重要なツールの一つとなっています。
Boltとは
Slackの公式開発フレームワークで、Node.jsやPythonでSlackBotやアプリを簡単に作成できるツールです。イベント駆動アーキテクチャを採用し、Slack APIへのリクエストや応答の処理を効率的に行います。Boltを使うことで、コードの量を減らし、開発時間を短縮できます。また、セキュリティ対策やエラーハンドリングもサポートされており、開発者に優れた開発体験を提供します。
オープンソースとして開発されており、Bolt for Javascriptのリポジトリは以下です。
開発自体はTypeScriptで行われているようです。
実装の流れ
前回の記事を参考にNode.js + TypeScriptの実行環境を構築
Botの登録やトークン取得などの初期設定を実施
パッケージのインストールやSDKを利用した実装を行う
ngrokを利用してローカルサーバーを外部公開
外部公開したURLをSlackBot側に登録し、トリガーとなるイベントを設定
実装したSlackBotに対してメッセージを送信し、正常に動作することを確認
開発環境
- Node.js：
v18.15.0 - npm：
v9.5.0 - TypeScript：
v4.9.5 - OS：
MacOS Monterey
構築手順
実行環境の構築
本章でのゴール：Node.js + TypeScriptによる実行環境の構築ができていること
まずはNode.js + TypeScriptで実行できる環境を構築します。
構築方法は以下をベースに実施しましたので、まだ構築できていない方は参考にしてください。
この時点でのディレクトリ構成は以下
.
├── README.md
├── dist
│ └── index.js
├── src
│ └── index.ts
├── package-lock.json
├── package.json
└── tsconfig.jsonSlack Botのセットアップ
本章でのゴール：SlackBotのアプリが作成できていること
セットアップの流れとしては以下となります。
- Slack Botの作成（アプリを作成）
- 権限の付与
- ワークスペースへのインストール&トークン取得
- シークレット情報の取得
Slack Botの作成（アプリを作成）
下記リンクにアクセスして、アプリを作成していきます。
https://api.slack.com/apps?new_app=1
- 「Create New App」「From scratch」を選択
- 「App Name」にボットの名前を入力
- 追加先のワークスペースを選択
- 「Create App」をクリックして作成
権限の付与
- 左側のサイドバーから「OAuth & Permissions」を開く
- 「Scopes」内にある「Add an OAuth Scope」をクリック
- 以下のスコープを追加
chat:write：botがメンバーとして参加しているチャンネルへのメッセージの投稿を許可app_mentions:read：botに直接メンションしてメッセージを送った場合に応答を許可
ワークスペースへのインストール&トークン取得
- 「OAuth & Permissions」内にある「Install to Workspace」をクリック
- BotがSlackのワークスペースにアクセスできるように「許可する」をクリック
- 「Bot User OAuth Token」が発行されるためメモする
※.envファイルにSLACK_BOT_TOKENとして定義
シークレット情報の取得
- 左側のサイドバーから「Basic Information」を開く
- 「App Creadentials」内の「Signing Secret」の「Show」をクリック
- 内容が表示されたらメモしておく
※ .envファイルにSLACK_SIGNING_SECRETとして定義
これでSlackBotのアプリ作成は完了となります。
さらに詳しい手順に関しては公式ドキュメントが詳しい部分まで書いてありますので、
必ず参照してください。
https://slack.dev/bolt-js/ja-jp/tutorial/getting-started-http#create-an-app
次にSlackAPIと疎通するための実装を行なっていきましょう。
Boltフレームワークの導入と設定
本章でのゴール：ローカル上でBoltを使用した実装が完了していること
実装の流れとしては以下となります。
- Boltのインストール
- 環境変数のセット
- Slack Botのインスタンス化
- メッセージの受け取りと返信の実装
- SlackBotの起動
まずは@slack/boltをnpmでインストール。
$ npm install --save @slack/bolt次に.envファイルに前章で取得したトークンとシークレットを定義します。
SLACK_BOT_TOKEN=xo**-************************************************
SLACK_SIGNING_SECRET=1a********************************
PORT=3000そして、メインファイルとなるindex.tsに処理を実装していきます。
import { App } from '@slack/bolt';
import { load } from 'ts-dotenv';
//②SlackBotのトークンとシークレットを環境変数から読み込む
const env = load({
SLACK_BOT_TOKEN: String,
SLACK_SIGNING_SECRET: String,
PORT: Number,
});
//③SlackBotの初期化
const app = new App({
token: env.SLACK_BOT_TOKEN,
signingSecret: env.SLACK_SIGNING_SECRET,
});
//④SlackBotにメッセージを送信する
app.message('', async ({ message, say }) => {
if (!message.subtype) {
await say(`Hello, <@${message.user}>. You said: ${message.text}`);
}
});
(async () => {
//⑤SlackBotを起動する
await app.start(process.env.PORT || 3000);
console.log('⚡️ Bolt app is running!');
})();
これで最低限Slack Botとやり取りするための実装が完了しました。
Botに対してDMまたはメンションをつけてメッセージを送ると、自身のユーザーIDと送ったメッセージが返ってくる動作となるはずです。
外部公開の設定
SlackBotを開発する際、ローカル環境での開発では、外部からのアクセスができません。そこで、ngrokを使ってローカル環境を外部に公開する必要があります。これよりngrokを使ったローカル環境の外部公開方法について解説します。
本章でのゴール：ngrokを使用して外部公開ができており、SlackBotのRequest URLに登録できていること
今回は下記記事を参考にngrokの準備をしました。
ngrokでlocalhost(127.0.0.1)をHTTPS化する
一応こちらにも主な流れを記載します。
- ngrokのインストール
ターミナルでbrew install --cask ngrokのコマンドを入力して、ngrokをインストールします。Homebrewがインストールされていることが前提 - アカウントの登録
ngrokを使用するためには、アカウント登録が必要なため、https://dashboard.ngrok.com/signup から登録する。 - 認証トークンの取得
ngrokを使用するには認証トークンが必要なため、アカウント登録後、ダッシュボードからトークンを取得 - ngrokの認証
ターミナルでngrok authtoken <your_auth_token>を入力して、ngrokを起動。<your_auth_token>には、③で取得した認証トークンを入力 - ngrokの起動
ngrok http 3000のコマンドを実行して、Node.jsで起動したポート番号3000のサーバーを公開 - 動作確認
ターミナルに表示されたhttps://*******.jp.ngrok.ioのURLを使用して、サーバーにアクセスし、画面上に「Hello World!」と表示されていればOK
以上の手順で、ngrokの準備は完了となります。
Slack BotにURLとイベントを登録
最後にステップ⑥で表示されたURLをコピーして、SlackBotの設定画面で登録をしていきます。
また、どのようなイベントが発生したときにBotが起動して欲しいかも併せて設定していきます。
URLの登録
- 「Event Subscriptions」を開く
- 「Enable Events」をONにする
- RequestURLにngrokが生成したURLを登録
https://****.ngrok-free.app/slack/eventsとすること
※ Events APIから受信するイベントを受信できるようになるため
イベントの登録
- 「Event Subscriptions」の下部にある「Subscribe to bot events」を開く
- 以下2つのイベントを追加
・message.im：ボットのDM内でメッセージを送った際のイベント
・message.channels：パブリックチャンネルでbotに対してメンションをつけて送った際のイベント - イベント追加後、警告が表示されるため「reinstall your app」を実施
※ イベントを追加した場合は必ず`reinstall`が必要
これで全ての実装と設定が完了しましたので、実際に動かしていきましょう！
動作検証
まず、ご自身のワークスペース内に今回作成したBotのアプリを追加していきましょう。
サイドバーの「アプリを追加する」から作成したアプリを追加してください。
では実際にボット内でメッセージを送ってみてください。
下記のようにメッセージが返ってくれば成功です！
また、パプリックチャンネル内でBotに対してメンションをつけてメッセージを送ることも可能です。
※message.channelsのイベントが追加されていることが前提
補足
ホスティングサービスによるデプロイ
ngrokはあくまでもローカル環境での開発時に利用するためのツールであり、継続的に利用していくのは難しいです。
そのため、HerokuやRenderといったPaasのホスティングサービスを利用してデプロイすることをオススメします。
別記事にて、Renderを用いたデプロイ方法もまとめていますので良かったら参考にしてください。
機能拡張
今回は決まったメッセージを返すだけの超絶簡単な実装しかしておりません。
他にも様々なイベントをトリガーにしたり、ボタンや選択処理などのメッセージが存在します。
メッセージテンプレート
下記ドキュメントに様々なテンプレートが用意されていますので、色々試してみてください。
https://app.slack.com/block-kit-builder/
外部APIの利用
受け取ったメッセージから様々な処理を行い、Slackにメッセージを返すことも可能です。
一番イメージしやすいのはChatGPTなどの用いてメッセージのやり取りをすることでしょうか。
以下の記事はLINEBotですが、似たようなことを実装しておりますのでもし宜しければ参考にしてみてください。
まとめ
Node.jsとTypeScriptを用いたSlackBotの開発手順を解説しました。記載した内容通りに実施すれば、最低限のSlack Botが作ることができたかと思います。今回は開発したBotはあくまでも基盤となるため、トリガーやイベントを追加したり、メッセージに対する処理を拡張してみたりと色々なことに挑戦していければと思います。
