Trelloのタスクやり忘れを無くすためにSlackと連携した

f:id:kenev:20200408192644p:plain

Trelloに「今日やること」を入れるようにしてるのですが、どうにもこうにも夕方ごろには忘れて、やり残してしまうタスクがあったりします。どうにかこれを改善できないかと思い、GAS（Google App Scripts）とSlackを連携する簡単なスクリプトを作ることにしました。

スクリプトの概要
記事を読みたくない人へ
Trello→Slack通知の作り方
- 前提知識
- Trello BoardのListに含まれるカード一覧を取得
SlackにIncoming Webhook経由で通知
GASのTriggerで定期的にスクリプトを実行
完成
カスタマイズしましょう

スクリプトの概要

この記事で紹介するスクリプトで僕がやりたかったことはとてもシンプルで、

「Trelloの "Do Today" リストに含まれているカードをSlackに定期的に通知する」

というものです。これを実現するためには以下が必要となります。

指定したTrello Boardの指定したListに含まれるカード一覧を取得
カード一覧を整形してSlackにIncoming Webhook経由で通知
GASのTriggerで定期的にスクリプトを実行

記事を読みたくない人へ

GASもSlackのWebhookもだいたいわかってるという人は：

TrelloのAPIキーとトークン
SlackのWebhook URL

上記を用意しておけば、以下のスクリプトをGASに配置して動かすことができます。

Trello List to Slack

これより下で、設定方法を詳しく見ていきます。

Trello→Slack通知の作り方

それでは、作り方を順番に見ていきます。

前提知識

この記事は親切丁寧にすべてのステップは説明しません。以下の点についてはある程度わかっているものとします。

GASを知っている（1個くらい作ったことある）
SlackでIncoming Webhookを使ったことがある

「全くわからない！」という方は入門記事やチュートリアルを試してみることをおすすめします！

Trello BoardのListに含まれるカード一覧を取得

まずはGASでTrello Boardの指定したListからカード一覧を取得します。

以下記事を参考にほとんどそのまま使わせていただきました。

qiita.com

上記の記事の手順に従って

TrelloのAPIキー（①）
Trelloのトークン（②）
Trelloのユーザー名（③）

を取得してください。下のスクリプトで使います。

次にGASの新規プロジェクトを用意します。

script.google.com

スクリプトには以下を記載します。

// --------------EDIT REQUIRED START---------------------
// Trello
var TRELLO_USERNAME = "<USERNAME>";// enter your trello username
var TRELLO_KEY   = "<TRELLO KEY>";// enter your trello key
var TRELLO_TOKEN = "<TRELLO TOKEN>";// enter your trello token
var TRELLO_BOARD_NAME = "<TRELLO BOARD NAME>"; // enter your trello board name
var TRELLO_LIST_NAME = "<TRELLO LIST NAME>"; // enter your trello list name
// --------------EDIT REQUIRED END---------------------

var TRELLO_CREDENTIALS = "key=" + TRELLO_KEY + "&token=" + TRELLO_TOKEN;

function main() {
  var cards = findTrelloCardsFromList(TRELLO_BOARD_NAME, TRELLO_LIST_NAME);
  if (cards.length === 0) {
    // don't notify if cards are empty
    return;
  }
  
  Logger.log(cards);
}

function findTrelloCardsFromList(boardName, listName) {
  var boardId = findTrelloBoardId(boardName);
  var listId = findTrelloListId(boardId, listName);
  
  var url = "https://trello.com/1/lists/" + listId + "/cards?&fields=name,shortUrl&" + TRELLO_CREDENTIALS;
  var res = UrlFetchApp.fetch(url, {'method':'get'});
  var cards = JSON.parse(res);
  
  return cards;
  
  ///////////// function implementations
  
  function findTrelloBoardId(name) {
    var url = "https://trello.com/1/members/" + TRELLO_USERNAME + "/boards?fields=name&" + TRELLO_CREDENTIALS;
    var res = UrlFetchApp.fetch(url, {'method':'get'});
    
    var boards = JSON.parse(res);
    for (var board of boards) {
      if (board.name === name) {
        return board.id;
      }
    }
    throw new Error("board not found: " + name);
  }
  
  function findTrelloListId(boardId, listName) {
    var url = "https://trello.com/1/boards/" + boardId + "/lists?fields=name&" + TRELLO_CREDENTIALS;

    var res = UrlFetchApp.fetch(url, {'method':'get'});
    var lists = JSON.parse(res);
    for (var list of lists) {
      if (list.name === listName) {
        return list.id;
      }
    }
    throw new Error("list not found: " + listName);
  }
}

スクリプト上部の以下のプレースホルダーは適宜置き換えてください。

<USERNAME> → ③の値
<TRELLO KEY> → ①の値
<TRELLO TOKEN> → ②の値
<TRELLO BOARD NAME> → 通知したいListが含まれるBoardの名前
<TRELLO LIST NAME> → 通知したいListの名称（僕の場合だとDo Today）

これを実行してみます。初めて実行するときには権限を与えてあげる必要があります。

f:id:kenev:20200408161940p:plain

遷移すると下記のような警告が出ます。

f:id:kenev:20200408162346p:plain

AdvancedからGo to Trello to Slack (unsafe) をクリックします（個人でしか使わない前提なのでこの方法にしています）。

SlackにIncoming Webhook経由で通知

Trelloのカードの情報を手に入れたらあとは整形してSlackに通知するだけです。作ったことが無い人は以下の記事を参考にしてみるとイメージがわきやすいと思います。

qiita.com

それではGASを仕上げます。下のコードの<SLACK WEBHOOK URL>には、SlackのIncoming Webhooksで生成されたURLを設定します。

// --------------EDIT REQUIRED START---------------------
// 中略
// Slack
var SLACK_WEBHOOK_URL = "<SLACK WEBHOOK URL>";
// --------------EDIT REQUIRED END---------------------

残りの実装も入れます。

function main() {
  // 中略
  notifySlack(cards);
}
// 中略
function notifySlack(cards) {
  var item = [];
  for (var card of cards) {
    item.push("- <" + card.shortUrl + "|" + card.name + ">");
  }
  var text = item.join("\n");

  // FYI: Message formatting
  // https://api.slack.com/messaging/webhooks#advanced_message_formatting
  var jsonData = {
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "*本日の残タスク*"
        }
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: text 
        }
      }
    ]
  };
  
  var payload = JSON.stringify(jsonData);

  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };

  UrlFetchApp.fetch(SLACK_WEBHOOK_URL, options);
}