こんにちは。ビザスクのITチーム(情シス)のみともりです。普段はPCの管理やGSuiteやSlackなどの社内ITの管理をしています。今回はコードを書かずに普段の業務をちょっと便利にしてみた話をしたいと思います。
※この記事は、「corp-engr 情シスSlack（コーポレートエンジニア x 情シス）#1 Advent Calendar 2019」12月20日(金)のエントリーです。
Slackワークフロービルダーで問い合わせをフォーム化
Slackワークフロービルダーって知ってますか？2019年10月にリリースされた機能で、NoCodeで各種手続きなどのフローを定義できるというものです。モーダルウィンドウのフォームも簡単に作れるので、リリース直後から色々いじくり倒してました。
ビザスクのITチームでは問い合わせは基本的にSlackで受け付けています。「問い合わせのフォーマットが無いから問い合わせしづらい」という声を受けて、問い合わせフォームをワークフロービルダーで作ってみたんですが、かなりシンプルな構成にもかからず、どういったことを問い合わせてきているのかが明確に分かるようになりました。
↑はPCにコーラをこぼしたという対応依頼(悲しみ)
やっぱり外部と連携したい
とはいえワークフロービルダーは、機能的にはちょっと物足りないなーという感想です。具体的には最終的に「メッセージを投稿する」というアクションしかできないので、フォームに入力された内容をSlack外部に連携することが(簡単には)できません。
ITチームのタスク管理はClickUpを使っており、定型作業やプロジェクト的なタスクの進捗管理を行なっています。もちろんSlackに来た問い合わせもClickUpで管理したいのですが、転記するのが面倒で対応漏れや対応履歴が流れてしまうという課題がありました。そこでGASでなんとかできないかと試しにこんな仕組みを作ってみました。
- 投稿されたフォームの内容をフォーマットを変えて別のチャンネルにも投稿
- OutgoingWebhookでGASに飛ばす
- GASでメッセージを整形
- ClickUpのAPIを呼び出してタスクを作る
ということをやってみたんですが専用のチャンネルを用意するのはちょっとイケてないし、(私のスキル不足で)GASで改行コードがうまく扱えなかったので一旦断念。
いずれワークフロービルダーからWebHookを叩けるようになるらしいので、jsonを直接投げられるようになればもうちょっとうまくできるようになると思うんですが、私は今すぐ何とかしたいんです！
Zapier(ザピアー)を使う
ZapierはこれまたNoCodeで各種サービス同士を連携させて自由にプロセスを組み立てられるというサービスです。SlackとClickUpの両方に対応しているので、これを使えばSlackに来た問い合わせをClickUpに自動でタスクを作成することができるはず！
考えた仕組みがこちら
というわけで早速Zapierを使っていい感じに連携してみましょう！
(以下はZapierのフロー作成画面の説明です)
①Slackへの投稿を取得
まず、特定のチャンネルにメッセージが投稿されたらzapierが動作するようにします。
[Choose App & Event] Choose App -> Slack Choose Trigger Event -> New Message Posted to Channel
[Choose Account] Slack account -> [自分のSlackアカウントを追加]
[Customize Message Posted] Channel -> [#rq-it-helpdesk(問い合わせが投稿されるチャンネル名)] Trigger for Bot Messages? -> yes
[Find Data] ワークフロービルダーで投稿されたメッセージを選択 (これが後続処理で使われるテストデータになります)
②投稿をフィルターする
このままだと全ての投稿で動作してしまうので、問い合わせフォーム以外は処理をストップさせます。
[Choose App & Event] Choose App -> Filter by Zapier
[Filter Setup & Testing] Only continue if ... -> [User Name] [(Text) Contains] [情シス問い合わせフォーム(ワークフロービルダーの投稿名)]
③問い合わせ内容だけを切り出す
都合よくjsonでデータを取り出せるわけではないので、メッセージから必要な内容を切り出します。私が作成したワークフロービルダーでは、問い合わせ内応を複数行のインラインコード(バッククォート３個で区切る)にしているので、これを区切り文字にして切り出します。
[Choose App & Event] Choose App -> Formatter by Zapier Choose Action Event -> Text
[Customise Text] Transform -> Use a Custom Value (advanced) Custome Value for Transform Key -> string.split Values -> Slackで投稿されたメッセージを選択 Separator -> バッククォート３個 Segment Index -> All (as Separete Fields)
[Send Data] TESTを実行して区切り文字で分割できていることを確認する
④問い合わせ内容から件名と依頼者名を抜き出す
タスクのタイトルを[件名(依頼者名)]という形式にしたいのでメッセージから抽出します。この処理はメッセージの内容によって何を区切り文字にするかが変わってくるので、抽出が難しい場合は区切り文字を新しく追加するなど工夫してみてください。
[Choose App & Event] Choose App -> Formatter by Zapier Choose Action Event -> Text
[Customize Text] Transform -> Split Text Values -> ③で切り出した問い合わせ内容 Separator -> 空欄 Segment Index -> All (as Separate Fields)
[Send Data] TESTの実行結果の2番目に件名が、4番目に依頼者名が取り出せていることを確認する
⑤ClickUpにタスクを作成する
ここまでで抽出したデータをもとにClickUpに新規タスクを作成します。なお、問い合わせから時間が経つとSlackのメッセージが迷子になるので、ClickUpから追跡できるようにPermalinkも追加しておきます。
[Choose App & Event] Choose App -> ClickUp Choose Action Event -> Create Task
[Choose Account] ClickUp account -> タスクを作成するアカウントを指定(専用アカウントにしたほうがよいです)
[Customise Task] Workspace, Space, Folder, List はタスクを作りたい任意の場所を選択。 Template -> 空欄 Task Name -> [④の2番目のOutput] ( [④の４番目のOutput] ) Task Description [③で切り出した問い合わせ内容] [①のPermalink] Markdown Content -> no Assignee Emails -> 空欄 Assignees -> 自動的にタスクをアサインするユーザーを指定 (その他の項目は適当に...)
[Send Data] TESTを実行して実際にClickUpにタスクが作成されることを確認しましょう。
ちゃんと作成されてますね
問い合わせ内容とSlackへのリンクもばっちり記載されてます
ちなみに出来上がったZapはこんな感じです。
対応履歴も保存する
上記設定でClickUpにタスクが自動で作成されるようになりました。ちなみに、問い合わせへの回答はSlackのスレッドに投稿しているんですが、やっぱり対応履歴もClickUpに残しておきたいですよね？(Slackで検索するの大変だし)
対応履歴を残すには、Slackメッセージのユニークな識別子(タイムスタンプ)とClickUpのタスクIDを紐づける必要があります。いろいろ試してみたんですが、結局Google Spread Sheetに対応表を作成するという方法に落ち着きました。
(前準備)登録用のスプレッドシートを作成
単純に２つのカラムを用意しただけのシンプルなシートです(画像ではすでにデータが入ってます)
Task ID : ClickUpのタスクID
Time Stamp : 問い合わせメッセージのタイムスタンプ(ユニークらしいのでこれで判別)
⑥スプレッドシートへのデータ登録処理を追加
先ほどのZapのClickUpへのタスク登録の後に処理を追加します。
[Choose App & Event] Choose App -> Google Sheets Choose Action Event -> Create Spreadsheet Row
[Choose Account] Google Sheets account -> スプレッドシートを操作するアカウントを指定
[Customize Spreadsheet Row] Drive, Spreadsheet, Worksheetで対象のスプレッドシートを選択 ※スプレッドシートを選択すると自動的にカラムの情報が取得され、入力ボックスが自動で生成されます(便利！)続けて以下を設定 Task ID -> ⑤で取得したTask ID Time Stamp -> ①のメッセージ内のTsというキーの値(多分TimeStampの略)
[Send Data] TESTを実行してスプレッドシートにデータが登録されていることを確認する
最終的に出来上がったZapはこちらです。
コメント投稿用Zapの作成
次はスレッドに投稿されたメッセージをClickUpのコメントに追加する処理を作っていきましょう。
最終的な仕組みがこちら(見づらくてすみません)
①' Slackへの投稿を取得
先ほどと同様に特定のチャンネルに投稿されたらzapierが動作するようにします。
[Choose App & Event] Choose App -> Slack Choose Trigger Event -> New Message Posted to Channel
[Choose Account] Slack account -> [自分のSlackアカウントを追加]
[Customize Message Posted] Channel -> [#rq-it-helpdesk(問い合わせが投稿されるチャンネル名)] Trigger for Bot Messages? -> no (BOTの投稿では動作しないように)
[Find Data] スレッドに投稿されたメッセージを選択
②' Task IDを検索
SlackのスレッドメッセージにはThread Tsという項目があり、これはスレッド元メッセージのタイムスタンプの値です。この値を元にTask IDをスプレッドシートから引っ張ってきましょう。もしTask IDが無い場合はエラーで止まります(雑なつくり)
[Choose App & Event] Choose App -> Google Sheets Choose Action Event -> Lookup Spreadsheet Row
[Choose Account] Google Sheets account -> スプレッドシートを操作するアカウントを指定
[Customize Spreadsheet Row] Drive, Spreadsheet, Worksheetで対象のスプレッドシートを選択 Lookup Column -> Time Stamp Lookup Value -> ①' のメッセージのThread Ts(スレッド元のメッセージのタイムスタンプ) 後は空欄でOK
[Send Data] TESTを実行してTask IDが検索できることを確認する
③' タスクにコメントを追加
引っ張ってきたTask IDのタスクにコメントを追加します。
[Choose App & Event] Choose App -> ClickUp Choose Action Event -> Post a Task Comment
[Choose Account] ClickUp account -> タスクを作成するアカウントを指定(専用アカウントにしたほうがよいです)
[Customise Task] Workspace, Space, Folder, List はタスク自動的に作成される場所を選択。 Task -> Use a Custome Value (advanced) Custom Value for Task ID -> ②' で取得したTask IDを指定 Comment -> ①' のメッセージの内容 [改行] (①' のメッセージ投稿者名) Assignee -> 空欄
[Send Data] TESTを実行して実際にコメントが追加されることを確認する
実際に確認する
問い合わせフォームのメッセージにスレッドで返信してみる
コメントに反映されてる！やったぜ！
課題
画像をClickUpに登録できない
スレッドにスクリーンショットなどをアップロードしてもらうことがあるのですが、Slackに普通にファイルをアップロードするとZapier側で「新規メッセージの投稿」というトリガが動きません。(おそらくメッセージフォーマットが違う)
画像のアップロードというトリガもうまく動かないのでZapierの対応待ちという感じです。
Slack側からClickUpのタスクをクローズできない
「済」みたいなリアクション文字を付けたらClickUpのタスクのステータスを「Close」にできないかなーと思ったんですが、ZapierのClickUpのアクションにステータスの変更が無かったので、やっぱりZapierの対応待ちみたいです。
Zapierの有料プランが必要
最低でも$19.99/mo(年払い) のプランを契約する必要があります。やはり便利なものにはお金がかかる。
所感
Zapierめっちゃいい
Slackのようにどんどん情報が流れて行ってしまうツールでは、何かしらのトリガーで自動でどこかにストックされるという仕組みはとても相性が良いと思います。Zapierはコードを書いた経験が無くてもかなり簡単にプロセスフローを作成できるので、ちょっとしたことを自動化したいときはお勧めのツールです。ビザスクでもある程度検証ができたら全社利用プランに変更しようと思ってます。(ということで社員のみなさんはもう少しお待ちを)
ビザスクで一緒に働きませんか(直球)
今ビザスクではすごい勢いでビジネスが拡大しておりまして、いろんなポジションが必要になってきています。つまり、一緒に働くメンバーが足りないんです！！！
一言ではビザスクの素晴らしいところを紹介しきれないのですが、例えば私が「Zapier導入したいッス」って打診したら経営層のメンバーも「お、いいじゃんやってみようよ！」と挑戦を後押ししてくれるアジリティの高い社風で、とても刺激的です。
ここまで読んで頂いたことですし、せっかくですので会社説明資料をチラッとご覧くださいm( )m
会社紹介資料
https://speakerdeck.com/eikohashiba/bizasuku-hui-she-shuo-ming-zi-liao
「お、なんか面白そうな会社じゃん」と少しでも気になったら是非オフィスに遊びに来てください！(私のTwitterアカウントにDM頂いてもいいですし、↑のスライドの最終ページの連絡先からでも、このページ右上の「RECRUIT」リンクからでもOKです！)
