ToBサービスのSlackBotを作りました

ここ数ヶ月ほど、reporuというサービスの開発をお手伝いしていて、このサービスと連携するSlackBotを作ったので、今回はその話をしたいと思います。

reporuとは

reporu.team

みなさん、日報を書いた経験はあるでしょうか。

僕は前職では日報を書いていました。一日の業務の終わりに、
「今日やったこと」「次回やること」「共有事項」「次回出社日」「一言」
をメールに書いて、チームのメーリングリストに送って帰る、という感じです。
日報を書くと、自分のことを知ってもらうことができるし、
日報を読むと、その人のその日の様子がわかったり、「共有事項」に学びがあったり、「一言」にその人の性格が出てたりして、良いなぁと思ってました。

現職の会社でも、新卒1年目の方々や入社間もない中途社員の方が日報を運用しているようです。
先日入社された中途の方は、Slackで毎日作業用スレッドを立てていて、
一日の終わりに「今日やったこと」「明日やること」「良くできたと思った点」「明日からもっと良くできる点」「成果物」を書いてチャンネルにも通知する、という感じで運用しているようです。

日報自体はあった方が良さそうだなぁと思いつつ、
メールだと未読が溜まって読まなくなったり、気楽に返信できなかったり、
Slackなどのチャットツールを使うとタイムラインがどんどん流れてしまい過去の日報を振り返りにくくなったりして、
ついつい「日報やめても良いかぁ」という感じになりがちかなぁと思います。

この辺をもっと良くできるんじゃないか?という問題意識が僕の中にあったので、今回このreporuというサービスをお手伝いすることにしました。

reporuは、いつもの業務報告と目標に対する進捗報告に特化した、業務のレポーティングツールです。向かうべき目標をいつものコミュニケーションに溶け込ませ、チームの目標達成をあと押しします。

reporuへの想いはNoteの記事やFacebookでCEOが書いているのでご興味ある方はぜひどうぞ。 note.mu www.facebook.com

作ったSlackBotの紹介

ここでは具体的にどんなことができるSlackBotを作ったのかを紹介していきます。

まずは(当たり前ですが)reporuと連携できます

これはreporuの「外部ツール連携」画面です。
(今のところSlackしかないですが今後他の外部ツールも増える予定)
この画面の Add to Slack ボタンを押すと、...

f:id:tanaken0515:20181126185231p:plain

承認画面に移ります。この画面でチャンネルを選んで 許可する ボタンを押すと...

f:id:tanaken0515:20181126185534p:plain:w300

Slackにメッセージが届きます。

f:id:tanaken0515:20181126190751p:plain

これで連携完了です。

Slackからレポート(日報)を投稿できます

先ほどの連携完了メッセージの お試しレポートを投稿する ボタンを押してみると、以下のような入力フォームが出ます。

f:id:tanaken0515:20181126191814p:plain:w400

これはSlackの世界では「ダイアログ」と呼ばれるものです。
ダイアログ内の 投稿する ボタンを押すと、Slackに通知メッセージが届きます。

f:id:tanaken0515:20181126192345p:plain

スラッシュコマンドでも投稿できます

/reporu コマンドを打つと、本文が空欄のダイアログが表示されます。
よしなに本文を書いて投稿することができます。

f:id:tanaken0515:20181129001410p:plain:w400

普段使い慣れているSlackから簡単に投稿することができるのですごく心地よいです。
Slackのモバイルアプリからも利用することができます。

オプションをつけてもっと便利に

日報を運用していると、前日のレポートを活用したい場合ってありますよね。
そんな時は /reporu コマンドに c というオプションをつけた /reporu c というコマンドで、前回書いたレポートの内容を転記してダイアログを開くこともできます。( ccopy_last_post の略記です )

さらに /reporu t というコマンドで、テンプレートを選択して投稿することができます。
コマンドを打つと以下のようなプルダウンメニューが出てきます。(テンプレートは自身で作成することができます。ttemplate の略です)

f:id:tanaken0515:20181129003805p:plain:w400

テンプレートを選ぶと本文にそのテンプレートが入った状態でダイアログが開きます。

f:id:tanaken0515:20181129004137p:plain:w400

コマンドに ct オプションをつけることで、より便利に使うことができます。

簡単にコメントとリアクションができます

投稿の通知には いいね ボタンと コメントする ボタンがついています。

f:id:tanaken0515:20181130231053p:plain

ボタンを押すとSlackからレポートに「いいね」ができたり、

f:id:tanaken0515:20181130231956p:plain:w300

ダイアログからコメントをして、そのレポートをわいわい盛り上げることができます。

f:id:tanaken0515:20181130232222p:plain:w400

コメントの通知も届くので、それに対して いいねコメント追加 をすることができます。

f:id:tanaken0515:20181130232400p:plain

このように、Slackを介して日報のコミュニケーションがぐるぐる回っていく仕組みにしています。 加えて、Slackだけでは流れてしまう情報をしっかりとreporuにストックできているので、いつでも読み返して振り返ることができます。

f:id:tanaken0515:20181130233638p:plain

日報だけではありません

ここまでは日報に関する話だけを紹介してきましたが、reporuには日報以外の機能も備わっており、その機能に関してもSlackでコミュニケーションが取れるように実装してあります。 その機能とは『目標レポーティング機能』です。

日報の目的に立ち返ってみると、もちろんメンバー同士のコミュニケーションの観点はありますが、そもそもなぜコミュニケーションを取ろうとしているのかといえば『チームでより大きな成果を残すため』だと思います。
成果を残すために具体的な目標をたて、日々の業務の中でアクションをしていきますよね。実行したアクションと目標に対する進捗状況を、リアルタイムにチームに共有することは、より大きな成果を残すためには重要だと思っています。
目標のレポーティングに関してもSlackで共有、コミュニケーション、進捗更新をすることができます。

目標の更新ができます

あらかじめreporuで目標を作っておき、slackで /reporu_okr コマンドを打つと、次のようなメニューが表示されます。

f:id:tanaken0515:20181201001431p:plain:w400

更新したい目標を選ぶと、次のようなダイアログが表示されます。

f:id:tanaken0515:20181201001549p:plain:w400

ここで最新の値とコメントを入力することで目標の進捗状況を更新することができます。

これもリアクションやコメントが簡単にできます

目標の更新が完了すると、次のような通知が届きます。

f:id:tanaken0515:20181201001802p:plain

現在の進捗状況や、今回の更新でどれくらい進捗したのかを一目で把握することができます。
通知には いいねコメントする のボタンがついており、 日報と同様にコミュニケーションをすることができます。

作る上で大事にしたこと

Slack内でコミュニケーションが完結すること

普段Slackの世界にどっぷり浸かっている自分としては、Slackの世界から出ずに日報のコミュニケーションを取れるようにすることは最重要課題でした。
そして今回のSlackBotは自分のような人をターゲットにした機能だったので、自分が使いやすいように作っていこうと決めて作っていました。

「投稿」「いいね」「コメント」が全てslack内で完結できるように実装するのは当然のこと、 どこにボタンを置いたら使いやすそうか、いいねの結果をどこに表示したら見やすそうか、など、『slack上で一目で迷いなく使えて、コミュニケーションが捗る!』という体験を実現することを目指していました。

まだまだ改善点はありそうですが、自分の納得できるラインまでは作ることができたと思っています。

モバイルからも使いやすくすること

加えて、Slackのモバイルアプリからも使いやすいように実装する、という観点も大事にしました。
reporuのコミュニケーションのシーンとして、モバイルからの利用もかなり多いはずだと考えたためです。

例えば、Slackのユーザとreporuのユーザを連携tokenで紐づける処理があるのですが、
その際にSlackに送る通知をモバイルでも利用しやすいように工夫しました。

具体的には、当初は次のような通知だったのですが f:id:tanaken0515:20181201010226p:plain:w500

実はこの通知でモバイルから連携トークン(Step.1の黒塗りの部分)をコピーしようとしても、できないんです。(Slackの仕様っぽい) これだと実質的にモバイルからユーザ連携できないことになってしまい、『まだ連携してないけどすぐいいねやコメントをしたい!』という時にモヤモヤしてしまうだろうなと思い、次のように改善しました。

f:id:tanaken0515:20181201010501p:plain:w500

Step.1の黒塗りの部分がコピーできないのは仕方ないので諦めて、代わりに赤矢印の黒塗りの部分に連携トークンを書くことにしました。こうすることで、モバイルアプリでも長押し等の操作で連携トークンをコピーすることができるようになりました。

また、見た目に関してもいくつかモバイル用の工夫しています。
例えば目標の更新通知は当初次のような通知でした。

f:id:tanaken0515:20181201011150p:plain

進捗率を横長のグラフのように表示していたのですが、これがモバイルだと2行になってしまいました。

f:id:tanaken0515:20181201011739j:plain:w400

これだと直感的ではないため、1行に収まるように修正しました。

細かいですが、このような修正や微調整をいくつも重ね、モバイルでの使いやすさを実現するよう努めました。

まとめ

今回の記事では、reporuと連携するSlackBotを作った話を書いてみました。
自分が作ったものについてちゃんと整理して記事にするのは初めてだったので結構時間が掛かってしまいましたが、あとで振り返った時に書いておいてよかったな〜と思う気が、なんとなくしています。

ちゃんとしたSlackBotを作ったのは今回が初めてだったので、それぞれの機能を作った時の話(もう少し技術寄りなこと)も記事にしたいなぁと思っています。(一度Qiitaの記事にして下書きまでは書いたんですが、ちょっと体系立てた技術記事にはできなそうだったので、個人ブログに移行して書きたいと思います)

この記事を読んでSlackBotだったりreporuに興味を持ってくれた方が少しでもいたら嬉しいです。

ではまた。