SlackでWEBアプリライクな社内システムを開発しました

f:id:yoshhiide:20191206171947p:plain

Slack Advent Calendar 2019 の10日目の記事です。

こんにちは。鍋山です。
ようやくSlackに入門して2ヶ月が過ぎました。気後れしていたSlackにもやや慣れてきたところです。先月開催されたSlack Tiny Spec Tokyoにも参加したことでモチベーションが上がり、アドベントカレンダーに参加させていただこうと思いました。

概要

今回紹介させていただくSlackアプリは、経費事前申請アプリ です。『申請』→『1次承認』→『2次承認』という申請承認フローを管理する社内用のアプリです。

使用した機能や他サービス等

Slack ホームタブ(Beta版 2019/12/10時点)
Slack モーダル
Slack チャンネルへのメッセージ送信
Googleスプレッドシート

ライブラリや言語、DB

Slack Bolt
Node.js
MongoDB

実現したこと

複数の入力項目がある申請をモーダルから入力する
ホームタブを起点に申請(モーダル)をしたり、ホームタブ上で一覧表示をする
申請メッセージに付いているボタンのクリックで承認をする
申請~承認結果はGoogleスプレッドシートにも出力する

動作内容

細かい仕様を説明するよりも動作を見た方がわかりやすいと思いますので、お見せしていきます！

1. 申請

まずはホームタブから申請する場面です。申請のモーダルが表示されます。

💡ポイント： Slackに用意されているSlack Block Kitを使ってモーダル内容を構築することで、別の場所から同じモーダルを表示させたい場合に、使いまわせることができます。

slack1

申請に必要な内容を入力し、申請します。

💡ポイント：カレンダー日付選択やユーザ選択はSlack Block Kitに用意されている項目なので、簡単に用意できる項目です。

slack2

2. 承認

特定のチャンネルにメッセージが来ています。承認します。(メンションされているユーザだけが可能)
→ ステータスの「チーム責任者」が"OK"になります。

💡ポイント：ここではメッセージの更新を行っています。新たなメッセージ送信は行われていません。更新したメッセージに追加されたメンションで通知が飛ぶようになります。

slack3

チーム責任者が承認すると、次は2次承認となります。承認します。(経費ロールとしてメンションされているユーザグループ内のユーザだけが可能)
→ ステータスの「経費ロール」が"OK"になります。

💡ポイント：メッセージの更新でボタンを消しています。

slack4

一連のフローは以上です。

3. Googleスプレッドシート更新

次は更新されていくGoogleスプレッドシートも一緒に確認していきます。申請を新たに始めます。
→ スプレッドシートに新しい行が追加されます。 slack5

チャンネルで承認します。
→ スプレッドシートの「承認結果_責任者」に"OK"と記入されます。 slack6

先ほどはチャンネルで承認しましたが、今度はホームタブから承認してみます。
「未処理一覧」をクリックし、申請が表示されたら承認します。
→ スプレッドシートの「承認結果_経費ロール」に"OK"と記入されます。
→ この申請は自分で申請したので「申請一覧」に今承認した申請が表示されます。