この記事は obniz Advent Calendar 2021 の 23 日目の記事です!空いていたので参戦させていただきました!
タスク管理ツール ClickUp の Automation による Webhook から Node.js 経由で obniz のディスプレイにメッセージを送るメモです。
タスク管理ツール ClickUp とは
Clickup はタスク管理ツールの一つで、私が最近使っているツールなんですが、 List という単位でプロジェクトが柔軟に管理でき、いろいろな機能が細かくカスタマイズできるので、自分にいまのところ合っています。
ClickUp Automation で Webhook が簡単に作れる
さて、この Clickup ですが、Automationsという機能が素敵です。先ほどお伝えした List という単位で「あるタスクが完了したら Webhook をどこかに出す」ような設定が細かく設定することができます。IFTTT や Integromat のような外部で行うような仕組みを、内部で設定することが可能です。
英語ですが、このチュートリアルが分かりやすいです。
Automations | ClickUp Tutorials & Docs
しかも、
Free ユーザーでも一部制約はありますが Automations を設定することができます。これがびっくりしたんですよね!すごい。
今回はタスクの完了などステータスが変化したことをきっかけに Webhook を受け取って、Node.js で立てたサーバーで受け取り、obniz を動かすことをやってみます。
Node.js のプログラム
ClickUp から来る Webhook のデータを Express サーバーで受け付けて obniz に渡すシンプルな仕組みです。こちらを Node.js のプログラムがサーバーとして動くならどこでもOKです。今回は Gitpod で動かしてみました。
Gitpod で動かせるリポジトリはこちらです。
1ft-seabass/gitpod-clickup-webhook-controlling-obniz-server
プログラムは以下のようになっています。
const express = require('express'); const app = express(); const Obniz = require('obniz'); // obniz の接続 // <OBNIZ_ID> に、自分の使う obniz の ID を入力 const obniz = new Obniz("<OBNIZ_ID>"); // obniz 接続後にメッセージをだす obniz.onconnect = async function () { obniz.display.clear(); obniz.display.print("Hello ClickUp!"); } // public というフォルダに入れられた静的ファイルはそのまま表示 app.use(express.static(__dirname + '/public')); // bodyParser app.use(express.json()) app.use(express.urlencoded({ extended: true })); // Clickup Webhook の受信 app.post('/clickup/webhook', async function(req, res) { console.log('/clickup/webhook'); // タスクのタイトル const taskTitle = req.body.payload.name; console.log('タスクのタイトル'); console.log(taskTitle); // ClickUp の Webhook データからタスク詳細のテキストをメッセージとして抽出 const messageObnizDisplay = "[ClickUp Task]\n" + taskTitle + "\nCompleted!"; // obniz のディスプレイにメッセージ反映 obniz.display.clear(); obniz.display.print(messageObnizDisplay); res.end(); }); app.listen(3000); console.log('server start on port 3000!');
Gitpod で動かす分には自動でインストールされますが、手元で試す場合は npm i
コマンドで express
と obniz
をインストールしておきましょう。
// obniz の接続 // <OBNIZ_ID> に、自分の使う obniz の ID を入力 const obniz = new Obniz("<OBNIZ_ID>");
<OBNIZ_ID>
に、自分の使う obniz の ID を入力します。
node app.js
設定ができたら app.js
起動します。
起動すると別のタブで、今回の Gitpod のサーバーが起動したことが確認できます。
こちらの https://3000-<gitpodの今回のURL>.gitpod.io/
のURL を確認しておきましょう。実際に Webhook を送る先の URL は、https://3000-<gitpodの今回のURL>.gitpod.io/
に /clickup/webhook
をつけたもので、https://3000-<gitpodの今回のURL>.gitpod.io/clickup/webhook
になります。
ClickUp に タスクと Automation の準備
まず、今回試したい List に Sample というタイトルでタスクを作っておきます。Node.js の obniz で動かすのでディスプレイは英語しか受け付けないので、英語で書くようにしましょう。
右上の Automate ボタンから Automation を作ります。
このように、
- When
- Status Changes
- From: Any
- To: Any
- Status Changes
- Then
- Call Webhook
- URL
https://3000-<gitpodの今回のURL>.gitpod.io/
に/clickup/webhook
をつけたもの
で、設定します。これで、先ほど立ち上げたサーバーに、タスクが変化した時、たとえば OPEN(未完了)から COMPLETE (完了)に変化した時に Webhook が送られます。
動かしてみる
node app.js
でサーバーを起動した時点で、まず obniz のディスプレイには Hello ClickUp!
と表示されています。
ClickUp 側でタスクを確認します。
チェックをクリックして OPEN(未完了)から COMPLETE (完了)に変化させます。
数秒くらい待っていると、すぐに先ほどの Node.js サーバーが中継して obniz のディスプレイが反応しました!
実は当初 obniz の メッセージング機能 をさらに噛ませる方法をイメージしていたのですが、よく考えると Node.js のサーバーを立てた時点で全部内包できるじゃん。ということで、よりシンプルにできました!
この仕組みをうまく使うと、重要なタスクの完了に IoT で何かを動かしたりできそうですね。