【GAS】Slackの投稿を元に自動でClickUpに登録する

# やっぱり何事もslackを起点にできるとラク
フロー情報をストック情報に変えていくために、普段使っているslackを活用しよう！

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

# 実際にやってみる
## 使うツール
ワークフロービルダーで直接API叩けると便利なんですけど、まだないのでね…

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

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

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

### スプレッドシートの準備
ワークフローで入力してもらう項目に合わせて列を用意しておきます。
ヘッダーとして項目名を書いておくとわかりやすい。

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

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

- [Getting Started with the ClickUp API](https://docs.clickup.com/en/articles/1367130-getting-started-with-the-clickup-api)

## 実装
### 1. Slackワークフローの設定
[Slackワークフロービルダーガイド](https://slack.com/intl/ja-jp/help/articles/360035692513-%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%E3%82%AC%E3%82%A4%E3%83%89)

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

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

### 2. GoogleAppsScriptの実装
だいたいコピペでいけます。

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

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

- [ClickUp APIdocs](https://clickup.com/api)

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

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

#### `https://app.clickup.com//{teamID}/v/li/{listID}`の形のURLが取得できない場合
sidebar> list info>copy URLで取得できました！

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

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