この記事は 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
• 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 で何かを動かしたりできそうですね。