はじめに
プロジェクトの進捗共有のために、Google SheetsでWBSを作成して関係者との会議で利用することがあります。
しかし、ClickUpで管理しているタスクのステータスや担当者、開始日・終了日を手動で転記していると、更新作業に時間がかかるうえ、気づかないうちに情報が古くなってしまうことがあります。
そこで今回は、Google Apps Script（GAS）を利用してClickUpのタスク情報を取得し、Google SheetsのWBSに自動反映する仕組みを作ってみました。
※本記事は個人のGoogleアカウントおよびClickUpの無料プランで検証した内容です。実際の業務環境へ導入する際は、社内ルールやセキュリティポリシーを確認してください。
やりたいこと
- WBSにClickUpのチケットURLを貼り付ける
- GASでClickUp APIから情報を取得する
- ステータス、担当者、開始日、終了日を自動反映する
- スケジュールを色分け表示する
- ボタンをクリックすると最新情報へ更新する
ClickUp側の準備
1. ClickUpアカウントを作成する
今回は無料プランを利用しました。
※プラン内容やAPI利用条件は将来的に変更される可能性があるため、事前にClickUpの公式サイトをご確認ください。
2. Workspaceとタスクを作成する
今回は以下の項目を利用しました。
- Task Name
- Assignee
- Start Date
- Due Date
- Status
3. API Tokenを取得する
以下の画面からAPI Tokenを生成します。
Avatar → Settings → ClickUp API → Generate
後ほどGoogle Apps Scriptで利用しますので、一旦コピーしておきます。
Google Sheets側の準備
新しいGoogle Sheetsを作成し、WBSテンプレートを用意します。
その後、チケットのURLを貼り付けます。
ClickUp APIでタスク情報を取得する
今回利用したのはClickUp APIの Get Task エンドポイントです。
公式ドキュメントはこちらです。
API Explorerを利用すると、チケットIDを指定してレスポンス内容を確認できます。
Google Apps Scriptを作成する
Google Sheet 画面の Extensions → Apps Script を開きます。
今回の処理では以下を行います。
- URLからタスクIDを取得する
- ClickUp APIを呼び出す
- ステータス、担当者、開始日、終了日を返す
const CLICKUP_TOKEN = 'YOUR_TOKEN';
//retrieve data from ClickUp by API
function getTask(url) {
const match = url.match(/\/([^\/]+)$/);
if (!match) {
return null;
}
const taskId = match[1];
const response = UrlFetchApp.fetch(
`https://api.clickup.com/api/v2/task/${taskId}`,
{
headers: {
Authorization: CLICKUP_TOKEN
}
}
);
return JSON.parse(response.getContentText());
}
// this is the function to be input on the sheet
function CLICKUPDATA(url) {
const task = getTask(url);
if (!task) {
return [['Invalid URL', '', '', '']];
}
const status = task.status?.status || '';
const assignee =
task.assignees?.length
? task.assignees.map(a => a.username).join(', ')
: '';
const startDate =
task.start_date
? new Date(Number(task.start_date))
: '';
const dueDate =
task.due_date
? new Date(Number(task.due_date))
: '';
return [[
status,
assignee,
startDate,
dueDate
]];
}
CLICKUP_TOKEN の部分は、自分のAPI Tokenに置き換えてください。
URL形式の違いに対応する
実装中に気づいたのですが、ClickUpのURLはコピー元によって形式が異なります。
-
ブラウザのアドレスバーからコピーした場合
https://app.clickup.com/t/TASK_ID -
タスクリストからコピーした場合
https://app.clickup.com/t/WORKSPACE_ID/TASK_ID
今回はどちらの形式にも対応できるように実装しました。
シートから利用する
スクリプトを保存したら、シートに戻って以下のように入力します。
=CLICKUPDATA(C5)
チケットURLを入力したセールIDを指定すると、ステータスや担当者などの情報が取得できます。
色付きでWBSを見やすくする
取得した開始日と終了日を利用して、スケジュール部分を自動で色付けしました。
また、ステータスごとに色を変えることで、進捗状況も一目で確認できるようにしています。
使用した条件付き書式の例です。
=AND(H$4>=INT($F5),H$4<=INT($G5),$D5="complete")
チケット更新後、最新情報を取得する
チケットが更新されても自動で最新状態になるわけではありません。
そこで、シート上にカスタムメニューを追加し、必要なタイミングで最新情報を取得できるようにしました。
//function to check ticket updates
function refreshClickUpData() {
const sheet = SpreadsheetApp.getActiveSheet();
const lastRow = sheet.getLastRow();
for (let row = 5; row <= lastRow; row++) {
const url = sheet.getRange(row, 3).getValue();
if (!url) {
continue;
}
try {
const data = CLICKUPDATA(url);
sheet.getRange(row, 4, 1, 4).setValues(data);
} catch (error) {
Logger.log(error);
sheet.getRange(row, 4).setValue('ERROR');
}
}
}
//add a menu to refresh data from clickUp
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('ClickUp')
.addItem(
'Refresh Tasks',
'refreshClickUpData'
)
.addToUi();
}
シートを再読み込みすると、メニューに「ClickUp」が表示されます。
カスタムメニューの作り方は Google Workspaceの公式ドキュメントをご覧ください。
更新を試してみる
ClickUp上でチケットのステータスを変更します。
その後、シート上で「Refresh Tasks」をクリックします。
最新状態へ更新されました。
まとめ
今回はGoogle Apps ScriptとClickUp APIを利用して、Google SheetsのWBSへタスク情報を自動反映する仕組みを作ってみました。
もちろん、ZapierやClickUpのアドオンなど、既存の自動化ツールを利用する方法もあります。
一方で、簡単な要件であればGASでも十分実現できることが分かりました。
実際に業務で利用する場合は、トークン管理やエラーハンドリング、パフォーマンス改善などを検討する必要がありますが、個人的にはGASの勉強にもなり、楽しい検証になりました。