タスク管理ツール ClickUp の Automation による Webhook から Node.js 経由で obniz のディスプレイにメッセージを送るメモ

この記事は obniz Advent Calendar 2021 の 23 日目の記事です!空いていたので参戦させていただきました!

タスク管理ツール ClickUp の Automation による Webhook から Node.js 経由で obniz のディスプレイにメッセージを送るメモです。

タスク管理ツール ClickUp とは

image

Clickup はタスク管理ツールの一つで、私が最近使っているツールなんですが、 List という単位でプロジェクトが柔軟に管理でき、いろいろな機能が細かくカスタマイズできるので、自分にいまのところ合っています。

ClickUp Automation で Webhook が簡単に作れる

image

さて、この Clickup ですが、Automationsという機能が素敵です。先ほどお伝えした List という単位で「あるタスクが完了したら Webhook をどこかに出す」ような設定が細かく設定することができます。IFTTT や Integromat のような外部で行うような仕組みを、内部で設定することが可能です。

英語ですが、このチュートリアルが分かりやすいです。

Automations | ClickUp Tutorials & Docs

しかも、

image

Free ユーザーでも一部制約はありますが Automations を設定することができます。これがびっくりしたんですよね!すごい。

image

今回はタスクの完了などステータスが変化したことをきっかけに 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 コマンドで expressobniz をインストールしておきましょう。

// obniz の接続
// <OBNIZ_ID> に、自分の使う obniz の ID を入力
const obniz = new Obniz("<OBNIZ_ID>");

<OBNIZ_ID> に、自分の使う obniz の ID を入力します。

node app.js

設定ができたら app.js 起動します。

image

起動すると別のタブで、今回の 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 の準備

image

まず、今回試したい List に Sample というタイトルでタスクを作っておきます。Node.js の obniz で動かすのでディスプレイは英語しか受け付けないので、英語で書くようにしましょう。

image

右上の Automate ボタンから Automation を作ります。

image

このように、

  • When
    • Status Changes
      • From: Any
      • To: Any
  • Then
    • Call Webhook
    • URL
      • https://3000-<gitpodの今回のURL>.gitpod.io//clickup/webhook をつけたもの

で、設定します。これで、先ほど立ち上げたサーバーに、タスクが変化した時、たとえば OPEN(未完了)から COMPLETE (完了)に変化した時に Webhook が送られます。

動かしてみる

image

node app.js でサーバーを起動した時点で、まず obniz のディスプレイには Hello ClickUp! と表示されています。

image

ClickUp 側でタスクを確認します。

image

チェックをクリックして OPEN(未完了)から COMPLETE (完了)に変化させます。

image

数秒くらい待っていると、すぐに先ほどの Node.js サーバーが中継して obniz のディスプレイが反応しました!

実は当初 obniz の メッセージング機能 をさらに噛ませる方法をイメージしていたのですが、よく考えると Node.js のサーバーを立てた時点で全部内包できるじゃん。ということで、よりシンプルにできました!

この仕組みをうまく使うと、重要なタスクの完了に IoT で何かを動かしたりできそうですね。