Vue.js & Flask & Bolt for Python でSlackアプリを作るチュートリアル

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はこんな感じです

appmanifest.yml

_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です。