2021年の7月あたりから、フロントエンドをVue.js バックエンドをFlaskで書いたアプリケーションの開発を行い、公開してきました。
その顛末はこちら
今回は、誰でも簡単にSlackアプリを作ることができるように、チュートリアル形式でテンプレートをビルドしていきたいと思います。
開発環境はMacを想定して書いてあります。
コードはこちら
https://github.com/geeorgey/vue_flask_template
準備する
Github右上のForkボタンからコードをforkしてください。
リモートリポジトリの設定と、ローカルへのコードのダウンロード
$ git init
$ git remote add origin Forkしたgitのアドレス
$ git pull
$ git checkout main
pythonの仮想環境を作る
$ python3 -m venv .venv
$ source .venv/bin/activate
これで仮想環境で作業できるようになります
ローカル環境にPostgreSQLをインストールする
PostgreSQLのクライアントはPostico使えば良いと思います。無料版もあります。
https://eggerapps.at/postico/
利用するDBを作成する
$ psql
psql $ create database slack;
pssql $ \q
slack部分はデータベース名なので、適宜変更してください。
pipenvのインストール
pythonのパッケージ管理ツールをインストールします
https://original-game.com/how-to-build-a-python-development-environment-on-mac-using-pipenv/
yarnのインストール
こちらはフロントエンド開発に使います。
https://zenn.dev/oimo_revolution/articles/c61c034f7af41e
ローカル環境を立ち上げる
python環境を作る
$ pipenv install -r requirements.txt
これでOKです。
DBを初期化する
$ flask db init
$ flask db upgrade
こちらでDBが初期化されます。
Slackアプリを立ち上げる
アプリの立ち上げ方は @seratch さんのこちらの記事を参照。
YAMLはこんな感じです
_metadata:
major_version: 1
minor_version: 1
display_information:
name: vue_flask_template
description: Bolt for python sample bot
background_color: "#070d1f"
long_description: "Bolt for Pythonを使って、どのような実装ができるかをテストするためのアプリケーション。\r
An application to test what kind of implementation can be done with Bolt
for Python.\r
https://qiita.com/geeorgey/items/85905a4772903b180fad"
features:
bot_user:
display_name: vue_flask_template
always_online: true
oauth_config:
redirect_urls:
- https://vueflasktestgeeorgey.herokuapp.com/slack/install
scopes:
bot:
- chat:write
- channels:history
- groups:history
- im:history
- mpim:history
settings:
event_subscriptions:
request_url: https://vueflasktestgeeorgey.herokuapp.com/slack/events
bot_events:
- app_home_opened
- app_uninstalled
- message.channels
- message.groups
- message.im
- message.mpim
- team_access_revoked
- tokens_revoked
interactivity:
is_enabled: true
request_url: https://vueflasktestgeeorgey.herokuapp.com/slack/events
org_deploy_enabled: false
socket_mode_enabled: false
is_hosted: false
token_rotation_enabled: false
URL部分はngrokのURLに適宜置き換えて下さい。
環境変数を登録します。ターミナルで以下を設定します。
export SLACK_CLIENT_ID=
export SLACK_CLIENT_SECRET=
export SLACK_SIGNING_SECRET=
export SLACK_SCOPES=chat:write,users:read,users:read.email,channels:join,groups:write,im:write,mpim:write,channels:read,app_mentions:read,im:read,mpim:read,channels:history,groups:history,im:history,mpim:history,commands
botを立ち上げる
$ flask run
これでbotが動き始めます。簡単!
インストールしてみる
https://ngrokのURL/slack/install
にアクセスすると、インストールボタンが現れますので、そこからインストールしてみましょう。
Boltの本体について
本体はbackend/bolt.py にあります。
- インストール時にDMでインストールされたことを伝える機能
- 全ての公開チャンネルにjoinする機能
- ホーム画面からユーザーにDMを送る機能
等が組み込まれています。
Vue.jsを使うには
こちらはオプションです。
フロントエンドはこんな形になっています。
https://vueflasktestgeeorgey.herokuapp.com/
詳細はこの辺をみてみてください。
こちらは、もともとはGoogleのOAuthを紐付けるために作成した機能です。
Slackのアプリ上で出来ないようなことをやる必要がある場合はWebのフロントエンドが必要になりますので、必要になった場合に使ってみて下さい。不要な場合は特に使う必要はありません。
本番環境を構築しよう
こちらのアプリはHerokuで動かせるようになっています。
やり方はこちらを参照して下さい。
これを元にして5つのアプリを作りました!
Slackアプリの開発の共通テンプレートとしてつかっているのですが、これを元にして5つのアプリを作りました。
よろしければインストールして使ってみて下さい!
- OYASUMI bot https://lne.st/oyasumilink
- TIPS https://lne.st/tips
- TimeLine for Slack https://lne.st/wr21
- YOKOKU for Slack https://lne.st/4cdy
- TASUKARU-TaskALL- https://lne.st/3x1u
OYASUMI bot
Googleカレンダーのスケジュールに「休み」等の、休暇判定キーワードが入っていた場合に、自動的にSlackをスヌーズ状態に変更します。
メンションがあった場合に、メンションした相手にその日は休暇ですというレスを付けます。
スタッフの休暇を気持ちよく過ごしてもらう為のアプリです。
TIPS
Slack用のリマインダーアプリです。
デフォルト機能のリマインダーは、一つのスケジュールに一つのメッセージの設定しか出来ません。
このアプリでは、一つのスケジュールに複数のメッセージを登録し、ランダムで指定された時間にpostします。
チャンネル特有のノウハウ等をスケジュール登録しておくことで、自然と情報が浸透する状態を作ります。
TimeLine for Slack
全ての公開チャンネルのpostを一つのチャンネルにまとめるタイムラインチャンネルを生成するアプリです。
一部のチャンネルのみを集めたミックスチャンネルを作成すると、自分が必要なチャンネルだけのタイムラインを作り出すことが出来ます。
オプション機能として、メッセージ転送時にDeepL翻訳を挟むことが出来ます。
YOKOKU for Slack
OYASUMI botの応用です。
例えば「営業」というキーワードが入った予定だけを抽出したいと思ったことはありませんか?
カレンダーをいちいち検索するのは手間がかかります。
このアプリを用いれば、特定のキーワードが入った予定を、特定のチャンネルに流すことが出来ます。
TASUKARU
Slackで色々な人からメンションをもらって混乱したことはありませんか?
何か頼まれていたはずだけど思い出せない… そんな状態からあなたを救います。
TASUKARUはSlack専用のタスクマネージャーです。
デフォルトのスレッドやメンション画面では、処理が終わったpostをアーカイブすることが出来ませんが、TASUKARUならそれが出来ます。
今アクションが必要なものだけに集中することができる、それがTASUKARUです。