Slack × Zapier × MiroでKPTでの振り返りをラクにする #LayerXテックアドカレ

こんにちは。バクラク申請・経費精算エンジニアの@upamuneです。最近「グラップラー刃牙」を全巻読んだので、懸垂マシンを買いました。

この記事はLayerXテックアドカレ2023の10日目の記事です。前回はデータチームの@saaaaaakyが「1人目データアナリストとしてデータチームに異動しました #LayerXテックアドカレ」を書いてくれましたが、明日は @shimacos が面白い話を書いてくれる予定です。私はなぜか3日分もテックアドカレに入れてしまったのですが、1回目の今回は軽い自動化ネタを紹介しようと思います。

弊チームではスクラム開発を行っています。スプリントごとに振り返りとしてKPT(Keep, Problem, Tryを出し合うふりかえり手法の1つ)を利用して行うのですが、リモートワーク下だったこともあり、オンラインホワイトボードとして利用できるMiroをKPTに利用しています。

MiroでKPTを行うこと自体は問題ないのですが、振り返り時点で中々スプリント期間中(2週間)のできごとを思い出せないという問題がありました。事前にMiroに記入しておけば良いのですが、普段開きっぱなしにしているツールではないので、思いついてMiro開いてふせんを作って記入するというのは障壁がありました。そのため、今回は普段開きっぱなしにしているツールであるSlackに投稿するとMiroにKPTのふせんが自動で作成されるという仕組みを作ったので紹介します。

Zapierとは

Zapierはオートメーションツールであり、サービス同士をつなぎ合わせて、エンジニアでなくとも簡単にワークフローを作成して自動化できます。弊社では過去にデザイナーもZapierを利用してSlackからNotionへの自動要望収集について書いているので、ぜひ覗いてみてください。

note.com

Miroに登録されるまでの流れ

詳細を解説する前にこの仕組みの全体の流れを解説します。

Slackのチャンネルで K: か P: か T: から始まる投稿をする
1. 弊チームではKPT投稿用のチャンネルは作成せず、普段使っているチャンネルをそのまま利用しています
  SlackのチャンネルへのKeepのポスト
Zapierで1でSlackに投稿したテキストをフィルタリングする
1. K: , P:, T:から始まるSlackの投稿に限定しています
MiroのKPT用のボードにふせんを作成する
1. 投稿内容に加えて、誰が書いたのかというのを by で分かるようにしています
2. ユーザーごとに横に別れるようになっており、KPTの種類により縦に別れるようになっています
3. そのため、自分が投稿したKPTのふせんを見つけるのが容易になっています
4. もちろん同じユーザーが複数回投稿する場合がありますが、その場合はふせんが重なります。しかし、弊チームでは振り返りの時間にボードの別の枠内にそれぞれ個人がふせんを移動して貼っていくという運用になっているのでユーザーの単位では重なっていても困ることはありません
  MiroのKPTボード上にふせんが自動で作成される
Slackの投稿のスレッドにMiroに追加したことを知らせる
1. 過去の経緯によりNotionのデータベースにも追加されているため、Notionへのリンクも追加されていますが今回の連携では関係ないため特に触れません

Zapierでの設定方法

ここからは、この仕組みのZapierでの設定方法を記載していきます。

まずZapの全体の流れです。ここでは Keep の投稿のワークフローについて解説します。

この仕組みを動作させるSlackチャンネルを決め、Triggerに設定します
Only continue if... のフィルターで K: から始まる投稿に限定します
ふせんの by ~~~ の部分の名前を取得したいのですが、Slackの投稿のイベントからユーザーのDisplay Nameを取得することができないため、メールアドレスを利用してここでSlackからユーザー情報を取得します (SlackのReal Nameで問題ない場合はここのステップは必要ありません)
ユーザーごとに左右にふせんがズレているのを実現するために、JavaScriptのコードを実行して、左からどれだけスペースを空けるかの計算をします
1. Input DataにはSlackの投稿のメールアドレスを利用します
2. コード中の emails にはこのワークフローを利用するチームメンバーのSlackで利用しているメールアドレスを列挙しています
3. 最終的にX座標がメールアドレスによって決定されるので、 user3@example.com のユーザーはX座標160になるので、他のユーザーと付箋がズレて表示されます
4. このワークフローはKeepのものなのでY座標が0で固定されていますが、Tryのワークフローではここが Y座標80で固定されているため、KPTの付箋でそれぞれ位置がバラバラになるようになっています
```
 const emails = [
   "user1@example.com",
   "user2@example.com",
   "user3@example.com",
   "user4@example.com",
   "user5@example.com",
 ];
 const index = emails.indexOf(inputData.email);
 const positionX = Math.max(index, 0) * 80;
 output = [{position: {x: positionX, y: 0 }}];
```
一番重要なMiroへの投稿の部分ですが、Miroの API Request (Beta) Eventを利用します
1. 以下のように設定します。設定は以下の通りですが、URLの部分は /boards/連携したいボードのID/sticky_notesとなるように設定してください
2. Bodyは以下の通りです
  1. contentの部分にはSlackから取得した投稿の内容とDisplay Nameを利用します
  2. positionのXはJavaScriptのコードを使って計算した値を利用します (Y座標を指定したい場合は同様に指定)
  3. (任意) parent はオブジェクトのIDを指定するのですが、ボード中のオブジェクトのIDをここに指定しておくとそこのオブジェクト中に付箋が作成されていきます
  4. 詳細は、Miro APIドキュメントを参照してください
最後にSlackのスレッドにMiroに追加した旨をSlackに投稿するアクションを設けています

長くなりましたが、これで最初に紹介した、Slackに投稿したKPTのアイテムをMiroにふせんとして追加できるZapierのワークフローが組めました。

改善ポイント

今回の仕組みですが、いくつかの改善したい部分があります。

KPTのワークフローが別れている
1. K, P, Tとそれぞれ別々のZapになってしまってメンテナンスコストが3倍になるので1つのZap中で完結させたいですね
メールアドレスの管理がJavaScriptのコード中に記載されている
1. チームに新しく人が来たり、抜けたりすることがもちろんあるため、そのたびにZapを開いてコードを修正するのは面倒なので、スプレッドシートなり他でマスタを管理して運用する方が楽そうですね