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

2021年の7月あたりから、フロントエンドをVue.js バックエンドをFlaskで書いたアプリケーションの開発を行い、公開してきました。
[その顛末はこちら](https://qiita.com/geeorgey/items/5091e94943337e4e1781#%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF)

今回は、誰でも簡単にSlackアプリを作ることができるように、チュートリアル形式でテンプレートをビルドしていきたいと思います。

開発環境はMacを想定して書いてあります。
コードはこちら
https://github.com/geeorgey/vue_flask_template

##準備する
Github右上のForkボタンからコードをforkしてください。
![geeorgey_vue_flask_template__フロントエンドVue_js_バックエンドFlaskで作るWebアプリケーションの学習教材.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/3aed4f08-28d5-55f0-4d69-0fb3cfe3c50b.png)

### リモートリポジトリの設定と、ローカルへのコードのダウンロード

```
$ git init
$ git remote add origin Forkしたgitのアドレス
$ git pull
$ git checkout main
```

### pythonの仮想環境を作る
```
$ python3 -m venv .venv
$ source .venv/bin/activate
```
これで仮想環境で作業できるようになります

### ローカル環境にPostgreSQLをインストールする
https://qiita.com/yorokobi_kannsya/items/f77d074e382a88dae971

https://mrradiology.hatenablog.jp/entry/2020/08/06/173523

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_–_vue_flask_template_Local2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/caacd75b-8264-62de-4b91-4e53944ce035.png)
こんな風になります。



## Slackアプリを立ち上げる
アプリの立ち上げ方は @seratch さんのこちらの記事を参照。

https://qiita.com/seratch/items/610c14208772d49ac9e4#slack-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B

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](https://github.com/geeorgey/vue_flask_template/blob/main/backend/bolt.py) にあります。

- インストール時にDMでインストールされたことを伝える機能
- 全ての公開チャンネルにjoinする機能
- ホーム画面からユーザーにDMを送る機能

https://qiita.com/geeorgey/items/5091e94943337e4e1781

等が組み込まれています。

## Vue.jsを使うには
こちらはオプションです。
フロントエンドはこんな形になっています。
https://vueflasktestgeeorgey.herokuapp.com/

![Vue_Material_Admin_Template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/5cffdac7-e037-20d5-992b-6602ea7fa3c1.png)

詳細はこの辺をみてみてください。

https://qiita.com/geeorgey/items/b080617f5332ab7255c4

こちらは、もともとはGoogleのOAuthを紐付けるために作成した機能です。
Slackのアプリ上で出来ないようなことをやる必要がある場合はWebのフロントエンドが必要になりますので、必要になった場合に使ってみて下さい。不要な場合は特に使う必要はありません。

## 本番環境を構築しよう
こちらのアプリはHerokuで動かせるようになっています。
やり方はこちらを参照して下さい。

https://qiita.com/geeorgey/items/961c1d1092ec60bb06bd#heroku%E3%81%AB%E3%81%82%E3%81%92%E3%81%A1%E3%82%83%E3%81%84%E3%81%9F%E3%81%84%E3%81%B2%E3%81%A8%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89

## これを元にして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です。