やっぱり何事もslackを起点にできるとラク

フロー情報をストック情報に変えていくために、普段使っているslackを活用しよう！

やりたいこと

特定のワークフローでslackに投稿されたらClickUpの特定のスペース・リストにタスクとして登録されるようにする。

実際にやってみる

使うツール

ワークフロービルダーで直接API叩けると便利なんですけど、まだないのでね…

• Slackワークフロー（ワークフロービルダー）
• GoogleSpreadSheet
• GoogleAppsScript（GAS）
• ClickUp

事前準備

まずは、Slackでどういう内容を入力してもらって、
それをどういう感じにClickUpにタスク登録するか考えておきましょう。

概要をタスクのタイトルにしよう、とか、
他の細かい情報は全部タスクのdescriptionにぶち込みでいいや、とか、
細かい情報も全部カスタムフィールドで入れるんだ！とかです。

スプレッドシートの準備

ワークフローで入力してもらう項目に合わせて列を用意しておきます。
ヘッダーとして項目名を書いておくとわかりやすい。

今回はシンプルにこんな感じにしました。

ClickUpの準備

タスクを登録させたいリストを用意しておきます。
また、APIリクエストをする必要があるので、Personal API keyを取得しておきましょう。

• Getting Started with the ClickUp API

実装

1. Slackワークフローの設定

Slackワークフロービルダーガイド

1. フォームを作る
2. 作っておいたスプレッドシートに新規行を追加する

ここまでで用は足りますが、フォームを送信してくれた人や、フォームがあるチャンネルに、フォームの内容を送信しておくと親切です。送れたか不安になりますもんね。

2. GoogleAppsScriptの実装

だいたいコピペでいけます。

今回は、概要をタスクタイトル、書いてくれた人の名前と詳細をタスクの詳細、書いてくれた内容の種別をタグとすることにします。

カスタムフィールドに値を入れたい場合などの例を入れていないので、必要な場合は以下の公式ドキュメントを見て追加してください。

• ClickUp APIdocs

function sheettoClickup(){
let mySheet = SpreadsheetApp.openById("<https://docs.google.com/spreadsheets/d/xxxx/のxxxx部分>").getSheetByName("<シート名>");
let lastRow = mySheet.getLastRow(); 

// フォーム内容・シート内容に合わせて以下の変数を追加・変更する。数字の部分が列番号。
var person = mySheet.getRange(lastRow,1).getValue();
var taskname = mySheet.getRange(lastRow,2).getValue();
var taskdesc = mySheet.getRange(lastRow,3).getValue();
var category = mySheet.getRange(lastRow,4).getValue();

// タスク詳細に入れる文章をここで作成。
var description = person +"さんより。\n\n"+ taskdesc;

// ClickUpに送る情報をここで作成。タグいらない場合はtagsの部分を削除。
var payload =
{
  "name": taskname,
  "description": description,
    "tags": [
    category
  ],
  "status": "Open"
}

clickup(payload);
}

// ClickUpへのAPI叩く用のfunction。
function clickup(payload){
const apikey = PropertiesService.getScriptProperties().getProperty('apikey');
  var headers = {
    'Authorization': apikey
};
const listid = "<https://app.clickup.com//{teamID}/v/li/{listID}の{listID}部分>";
const url = "https://api.clickup.com/api/v2/list/"+ listid +"/task/";


  var options = {
    'method': "post",
    'headers': headers,
    'payload': payload
  };

  var response = UrlFetchApp.fetch(url, options);
  return response;
}

1. 準備しておいたスプレッドシートのツール＞スクリプトエディタからGASを開く（いまのところ旧エディタ推奨）
2. <>の部分を準備しておいたスプレッドシートやClickUpのリストに合わせて変える
3. ClickUpのAPIkeyを スクリプトのプロパティ として設定する
   • ファイル＞プロジェクトのプロパティ＞スクリプトのプロパティ
     • プロパティ：apikey　値：取得したapikey
4. トリガーの追加。 「スプレッドシートから」「編集時」を選択する。
   • 初回実行時、アカウントのリクエスト許可を与える必要がある。スプレッドシートなどと連携させるために必要な認証なので「許可」

2021/6/18　追記：「変更時」じゃないと動かなかったというご意見も頂きました。ので、「変更時」がおススメです。

https://app.clickup.com//{teamID}/v/li/{listID}の形のURLが取得できない場合

sidebar> list info>copy URLで取得できました！

3. 関数を実行

実際にSlackワークフローを公開して、テストで入力してみましょう。
無事にClickUpに登録されました！

備考

最近（2020年秋ごろ？）GASの新エディタが出たのですが、スクリプトのプロパティ（環境設定）がGUI上でできなくなっていて、SetPropertyメソッドに若干めんどくささを感じてしまうので、旧エディタのほうが好きです。