moto blog

Slack向けのミーティング用Botを作成してみた

f:id:nmmmk:20181213114857j:plain

Slack向けのミーティング用のBotを作成しました。
Geekbot(https://geekbot.com/)を参考にしており、Geekbotの超簡易版となっています。

機能

以下の設定が可能です。
・ミーティング参加者の設定
・各メンバーへの質問内容の設定
・各メンバーの回答内容を投稿するチャンネルの設定
・ミーティング開始時間の設定

現状、1件のミーティングにしか対応していません。

システム構成

Botは、Lambdaで実装しており、Botの設定画面をS3に静的ホスティングで配置しています。
設定画面は、作り上、AWSのアクセスキーIDやシークレットアクセスキーが見えてしまう状態となるため、とりあえずIPアドレス制限を行う形を取っています。

f:id:nmmmk:20181213115326p:plain

開発環境

以下の環境で開発しています。

項目 開発環境 バージョン
Bot Python 3.6
設定画面 create-react-app 1.5.2

設定画面イメージ

画面は下記のようになっており、設定内容は以下の通りです。

項目 内容
Project title ミーティング名
Broadcast channel & Participants 投稿先チャンネルとミーティング参加者
Schedule ミーティング開始時間
Intro message ミーティング開始時のメッセージ
Questions 質問内容
Outro message ミーティング終了時のメッセージ

f:id:nmmmk:20181213130240p:plain

動作イメージ

Botからダイレクトメッセージが送信されてくるので、一つ一つ質問に答えます。
f:id:nmmmk:20181213130314p:plain

全ての質問に答えると、回答内容がミーティング用チャンネルにまとめて投稿されます。
f:id:nmmmk:20181213130323p:plain

リリース方法

SlackにBotを作成する

以下のURLにアクセスし、Slackアプリケーションを作成します。
https://api.slack.com/apps

作成方法は、以下の記事を参考にしてください。

nmmmk.hatenablog.com

Frontendの環境変数の設定

frontendフォルダ直下に、.envファイルを作成します。
以下を参考にして、各項目の値を定義をしてください。

REACT_APP_AWS_REGION='ap-northeast-1'
REACT_APP_AWS_ACCESS_KEY_ID='ABCDEFG'
REACT_APP_AWS_SECRET_ACCESS_KEY='HIJKLMN'
REACT_APP_SLACK_TOKEN='OPQRSTU'

上記の定義は、それぞれ以下の内容です。

項目 内容
REACT_APP_AWS_REGION AWSのリージョン
REACT_APP_AWS_ACCESS_KEY_ID AWSのアクセスキーID
REACT_APP_AWS_SECRET_ACCESS_KEY AWSのシークレットアクセスキー
REACT_APP_SLACK_TOKEN SlackのBot User OAuth Access Token

Botのセットアップ用ファイルの設定

プロジェクトのルートフォルダのsetup.ymlを編集します。 以下のキーワードの部分を環境に合わせて変更してください。

SLACK_BOT_USER_ACCESS_TOKEN: xoxb-abcde
SLACK_BOT_VERIFY_TOKEN: fghijklmn
aws:SourceIp: 
  - "111.222.333.444/32"
項目 内容
SLACK_BOT_USER_ACCESS_TOKEN SlackのBot User OAuth Access Token
SLACK_BOT_VERIFY_TOKEN SlackのVerification Token
aws:SourceIp S3に配置する設定画面へのアクセスを許可するIPアドレス

リリース

(1)S3にmeetbot-botというBucketを作成します。

(2)botディレクトリ内のファイル一式をsrc.zipとして作成後、(1)で作成したbucketにアップロードします。

(3)AWSのCloudFormationを使用して、setup.ymlを実行します。

(4)frontendフォルダに移動して、以下を実行します。

npm run build

(5)S3に(3)でmeetbot-frontというBucketが作成されているので、buildフォルダに作成されたファイル一式をアップロードします。

ソースコード

ソースコード一式をGitHubに置いています。

github.com