Trelloで軽快にタスク管理～フォーム回答の自動登録～

こんにちは。
キャスレーコンサルティング TS(テクニカルサービス)部の塩田です。

皆さん、「Trello」は活用されていますか？

これまでも技術ブログにて、「Trello」を利用したタスク管理について紹介させていただきましたが、
今回は「Trello API」と「Google Apps Script（以下GAS）」を利用して、
送信されたフォームの回答を、自動で登録できるようにしてみたいと思います。
（GASの基本については、こちらの記事をご参照ください）

Trelloとは？

どのようなツールなのか、どうやって使うのか、については以下の記事をご参照ください。

ステップ１：Trello APIとGASを利用して、カードを登録してみよう

「Trello API」との連携で必要なAPIKey、Tokenを取得し、GASを記述してカードを登録します。
Trello、GoogleAppsにログインを行って、以下の操作を行ってください。

１）APIKeyの取得

以下にアクセスし、APIKeyを取得＆メモします。

https://trello.com/1/appKey/generate

２）Tokenの取得

以下にアクセスし、「Allow」を押下して、Tokenを取得＆メモします。

https://trello.com/1/authorize?key=（取得したAPIKey）&name=GoogleFormForSaizo&expiration=never&response_type=token&scope=read,write

３）取得した情報の設定

フォームのスクリプトエディタを開き、
「ファイル＞プロジェクトのプロパティ＞スクリプトのプロパティ」に
「Trello API」との連携で必要な情報を設定しておきます。

TRELLO_BASE_URL：ベースのURL
TRELLO_USERNAME：使用するユーザのID
TRELLO_API_KEY：１）で取得したAPIKey
TRELLO_TOKEN：２）で取得したToken

４）ボードIDの取得

まずはボードIDを取得します。

/**
* Trelloにカードを作成
*/
function addTrelloCard(){

  // Trelloの対象ボードIDを取得
  var bordId = getBoardId("取得したいボード名");
  Logger.log("bordId：" + bordId);
}

/** Trelloの対象ボードIDを取得
* targetBoardName : 対象のボード名
*/
function getBoardId(targetBoardName){
  if (isEmpty(targetBoardName)) {
    return null;
  }
  // リクエスト用のURL文字列を作成
  var url = trelloBaseURL + 'members/' + userName
  url += '/boards?key=' + trelloKey+ '&token=' + trelloToken + '&fields=name,id';

  // オプション
  var options = {
    'method' : 'get',
    'muteHttpExceptions' : true
  }

  var boardId = null;
  try {
    Logger.log("◆ボード情報を取得");

    // APIを利用し、Trelloのボード情報を取得
    var responseBoards = UrlFetchApp.fetch(url, options);
    // 正常に取得できているか
    if (chkResponseCode(responseBoards)) {
      var boardDataList = JSON.parse(responseBoards);
      var overIndex = boardDataList.length;
      // 取得した情報から、ボード名が一致するボードIDを設定
      for (var i = 0; i < overIndex; i++) {
        var bord = boardDataList[i];
        if (targetBoardName === bord.name) {
          // ボード名が対象のボード名と一致
          boardId = bord.id;
          break;
        }
      }
    }
  } catch (e) {
    Logger.log("Error:Trello情報の取得に失敗しました。");
  } finally {
    return boardId;
  }
}

// スクリプトのプロパティから連携に必要な基本情報を取得
var scriptProp =  PropertiesService.getScriptProperties().getProperties();
var trelloBaseURL = scriptProp.TRELLO_BASE_URL; // ベースURL
var userName = scriptProp.TRELLO_USERNAME; // ユーザのID
var trelloKey = scriptProp.TRELLO_API_KEY; // APIKey
var trelloToken = scriptProp.TRELLO_TOKEN; // Token

/** 空かチェック **/
function isEmpty(val){
  if (val == null || val === '') {
    return true;
  }
  return false;
}

/** responseCodeのチェック：200ならtrue */
function chkResponseCode(response) {
  var responseCode = "";
  if (response != null) {
    responseCode = response.getResponseCode();
  }
  if (responseCode === 200) {
    return true;
  }
  Logger.log("リクエストError:ResponseCode[" + responseCode + "]");
  return false;
}

上記コード内容で、「addTrelloCard」を実行してみてください。
以下のようなログが出力されます。

５）リストIDの取得

次はリストIDを取得します。

/**
* Trelloにカードを作成
*/
function addTrelloCard(){

  // Trelloの対象ボードIDを取得
  var bordId = getBoardId("取得したいボード名");
  Logger.log("bordId：" + bordId);

  // Trelloの対象リストIDを取得
  var listId = getListId(bordId, "取得したいリスト名");
  Logger.log("listId：" + listId);

}

/** ------------------------------------------------- */
// ＜ボードIDの取得部分は省略します＞
/** ------------------------------------------------- */

/** Trelloの対象ボード内の対象リストIDを取得
* targetBoardId : 対象のボードID
* targetListName : 対象ボード内の、対象のリスト名
*/
function getListId(targetBoardId, targetListName){
  if (isEmpty(targetBoardId) || isEmpty(targetListName)) {
    return null;
  }

  // リクエスト用のURL文字列を作成
  var url = trelloBaseURL + 'boards/' + targetBoardId
  url += '/lists?key=' + trelloKey + '&token=' + trelloToken + '&fields=name,id';

  // オプション
  var options = {
    'method' : 'get',
    'muteHttpExceptions' : true
  }

  var listId = null;
  try {
    Logger.log("◆リスト情報を取得");
    // APIを利用し、Trelloの対象ボード内リスト情報を取得
    var responseLists = UrlFetchApp.fetch(url, options);
    // 正常に取得できているか
    if (chkResponseCode(responseLists)) {
      listDataInBoardList = JSON.parse(responseLists);
      var overIndex = listDataInBoardList.length;
      // 取得した情報から、リスト名が一致するリストIDを設定
      for (var i = 0; i < overIndex; i++) {
        var list = listDataInBoardList[i];
        if (targetListName === list.name) {
          // リスト名が対象のリスト名と一致
          listId = list.id;
          break;
        }
      }
    }
  } catch (e) {
    Logger.log("Error:Trello情報の取得に失敗しました。");
  } finally {
    return listId;
  }
}

上記コード内容で、「addTrelloCard」を実行してみてください。
以下のようなログが出力されます。

６）カードの登録

いよいよカードの登録です。

/**
* Trelloにカードを作成
*/
function addTrelloCard(){

  // Trelloの対象ボードIDを取得
  var bordId = getBoardId("技術ブログテスト");
  Logger.log("bordId：" + bordId);

  // Trelloの対象リストIDを取得
  var listId = getListId(bordId, "結果リスト");
  Logger.log("listId：" + listId);

  if (listId == null) {
    return;
  }

  /** ----------------- */
  // カードを作成する。
  /** ----------------- */
  // リクエスト用のURL文字列を作成
  var url = trelloBaseURL + 'cards/?key=' + trelloKey + '&token=' + trelloToken;
  /** 内容
   * name    :カードタイトル;
   * desc    :カード詳細
   * idList  :listId
   */
  var options = {
    'method' : 'post',
    'muteHttpExceptions' : true,
    'payload' : {
      'name'      : "カードの登録テスト",
      'desc'      : "スクリプトからカードを登録しました。",
      'idList'    : listId
    }
  }
  /** ------------------------------- */
  // APIを利用し、Trelloにカードを作成
  /** ------------------------------- */
  try {
    Logger.log("◆カードを作成")
    var result = UrlFetchApp.fetch(url, options);
  } catch (e) {
    Logger.log("Error:Trelloのカード登録に失敗しました。");
  }
}

上記コード内容で、「addTrelloCard」を実行してみてください。
Trelloを見てみましょう。

ちゃんと登録されていますね！

ステップ２：問い合わせフォームから送信された回答を自動登録してみよう

１）概要

顧客⇒フォームから問い合わせ（送信）⇒回答内容をTrelloに自動登録

２）回答内容をTrelloに登録

新たに「submitForm1」を作成し、ステップ１で作成した「addTrelloCard」にパラメータを渡すように修正します。

function submitForm1(e){
  /** ------------------------ */
  // フォームの内容を登録用に加工する
  /** ------------------------ */
  var sendTime = Utilities.formatDate(new Date() , 'Asia/Tokyo' , 'yyyy/MM/dd HH:mm');
  var itemResponses = e.response.getItemResponses();
  var titleVal = "";
  var descVal = "送信日時：" + sendTime + '\n\n';
  for (var i = 0; i < itemResponses.length; i++) {
    var itemResponse = itemResponses[i];
    // 質問
    var question = itemResponse.getItem().getTitle();
    // 回答内容
    var answer = itemResponse.getResponse();
    // 質問に連番をふり、回答内容を設定
    descVal += '【' + (i + 1).toString() + '. ' + question + '】' + '\n' + answer + '\n\n';
    switch (i) {
      case 0:
        //担当者名
        titleVal += answer + "様";
        break;
      case 1:
        //依頼種別
        titleVal += "「" + answer + "」依頼";
        break;
    }
  }
  // Trelloにカードを作成
  addTrelloCard(titleVal, descVal);
}

/**
* Trelloにカードを作成
* titleVal : カードタイトル
* descVal  : カード詳細
*/
function addTrelloCard(titleVal, descVal){

  // Trelloの対象ボードIDを取得
  var bordId = getBoardId("技術ブログテスト");
  Logger.log("bordId：" + bordId);

  // Trelloの対象リストIDを取得
  var listId = getListId(bordId, "結果リスト");
  Logger.log("listId：" + listId);

  if (listId == null) {
    return;
  }

  /** ----------------- */
  // カードを作成する。
  /** ----------------- */
  // リクエスト用のURL文字列を作成
  var url = trelloBaseURL + 'cards/?key=' + trelloKey + '&token=' + trelloToken;
  /** 内容
   * name    :カードタイトル
   * desc    :カード詳細
   * idList  :listId
   */
  var options = {
    'method' : 'post',
    'muteHttpExceptions' : true,
    'payload' : {
      'name'      : titleVal,
      'desc'      : descVal,
      'idList'    : listId
    }
  }
  /** ------------------------------- */
  // APIを利用し、Trelloにカードを作成
  /** ------------------------------- */
  try {
    Logger.log("◆カードを作成");
    var result = UrlFetchApp.fetch(url, options);
  } catch (e) {
    Logger.log("Error:Trelloのカード登録に失敗しました。");
  }
}

３）トリガーの設定

「現在のプロジェクトのトリガー」に２）で作成した「submitForm1」を設定します。

４）問い合わせフォームからの送信

フォームから回答を送信してみてください。

さっそくTrelloを見てみましょう。

送信した内容が登録されていますね！

終わりに

いかがだったでしょうか？

他にも、以下のような機能をもたせると、ぐっと管理しやすくなると思います。

問い合わせ番号を採番
依頼種別でラベル（色）を設定
登録に失敗した時は、問い合わせ担当者にメールで通知
回答先メールアドレスに自動返信（サンキューメール）

みなさんも是非活用してみてください。

Trelloで軽快にタスク管理〜フォーム回答の自動登録〜

Trelloで軽快にタスク管理～フォーム回答の自動登録～

目次

Trelloとは？

ステップ１：Trello APIとGASを利用して、カードを登録してみよう

ステップ２：問い合わせフォームから送信された回答を自動登録してみよう

終わりに

人気の記事

カテゴリー