Trelloの内容をスプレッドシートに書き込む

自分は業務のタスク管理で Trello を使用しているのですが, チームメンバーからタスクがどうなってるかチェックしたいと言われた際に行ったメモ.

GSuite を使っているので, せっかくなので Trello の内容をスプレッドシートにうつしていく.

Trello API

今回は Google Apps Script からTrello API を使用してスプレッドシートに連携させていきます.

そのため、まず Trello APIAPI key と API token を入手しましょう.

まず Trello にログインをします.

ログイン後にAPIキー取得ページより、キーとトークンを取得しましょう.

f:id:shsm385:20190919232100p:plain

上記のような画像のページに飛びます. 灰色の部分に各々の API キーが書いてあります.

同じページ内にトークンの取得リンクへ飛べるものがあるので, API token も入手します.

スプレッドシート作成

スプレッドシートを新しく作成して, 「ツール」> 「スクリプトエディタ」より Google Apps Script のエディタ画面を開きます.

f:id:shsm385:20190919232135p:plain

プロジェクト名とGASの表記を適当に定めてからコードを書いていきます.

Google App Script

Trello API に必要な変数を作成します.

API を叩いた結果は JSON 形式で返ってきます.

var user = 'username';
var api_key = 'api_key';
var api_token = 'api_token';
var board_id = 'boad_id';

user の変数は今回 ボードの名前を取得する際に使います. Trello のユーザ名に当てはまります. 

次に Board の名前を取得する関数を作ります.

function getBoardsName() {
  var url = 'https://api.trello.com/1/members/' + user + '/boards?key=' + api_key + '&token=' + api_token + '&fields=name';
  var res = UrlFetchApp.fetch(url, {'method':'get'});
  var json = JSON.parse(res.getContentText());
  return json[0].name;
}
次に List の名前を取得する関数を作ります.
function getListsName() {
  var url = "https://trello.com/1/boards/" + board_id + "/lists?key=" + api_key + "&token=" + api_token + "&fields=name";
  var res = UrlFetchApp.fetch(url, {'method':'get'});
  var json = JSON.parse(res.getContentText());
  var namelist = [];
  for(var i = 0; i < json.length; i++){
    namelist.push(json[i].name);
  }
  return namelist;
}

次に Card の名前を取得する関数を作ります.

function getCardsName() {
  var url = "https://trello.com/1/boards/" + board_id + "/lists?key=" + api_key + "&token=" + api_token + "&fields=name&cards=open&card_fields=name";
  var res = UrlFetchApp.fetch(url, {'method':'get'});
  var json = JSON.parse(res.getContentText());
  var cardlist = [];
  for(var i = 0; i < json.length; i++){
    var card = json[i].cards;
    var cardnum = json[i].cards.length;
    cardlist[i] = {};
    for(var j = 0; j < cardnum; j++){
      cardlist[i][j]=card[j].name;
    }
  }
 return cardlist;
}

ここまでできたら, いい感じにスプレッドシートに表示できるように記入していきます.

function saveTask(){
  clear();
  const sheet = SpreadsheetApp.getActiveSheet();
  var row = 1;
  var colum = 1;
  var namelist = getListsName();
  var cardlist = getCardsName();
  var cell_board = sheet.getRange(row, colum).setValue(getBoardsName());
  setBoardDesign(sheet,cell_board)
  for(var i=0; i<namelist.length; i++){
    var cell_list = sheet.getRange(row + 1, colum).setValue(namelist[i]);
    setListDesign(sheet, cell_list);
    colum = colum + 1;
    if(i === namelist.length - 1){
      colum = 1;
    }
  }

  for(var i=0; i<Object.keys(cardlist).length; i++){
    var obj = new maxSize();
    obj.setmaxSize(0);
    for(var j=0; j<Object.keys(cardlist[i]).length; j++){
      Logger.log(cardlist[i][j])
      var cell_card = sheet.getRange(row + 2, colum).setValue(cardlist[i][j]);
      setCardsDesign(sheet,cell_card,obj);
      row = row + 1;
      if(j === Object.keys(cardlist[i]).length - 1){
        row = 1;
      }
    }
    sheet.getColumnWidth(colum);
    colum = colum + 1;
  }
}

ここまででスプレッドシートに Trello に保存した内容が表示されるようになっていると思います.

ついでにデザインを整えていくと次のような感じで完成になります. 

f:id:shsm385:20190919232155p:plain

後は GAS を実行する時間設定をして 1時間に一度更新するといった感じにしておくとある程度の頻度で更新できます.

完成品のコードは以下のURLから.

https://github.com/shsm385/Trello2spredsheet