Trelloで軽快にタスク管理~フォーム回答の自動登録~
こんにちは。
キャスレーコンサルティング TS(テクニカルサービス)部の塩田です。
皆さん、「Trello」は活用されていますか?
これまでも技術ブログにて、「Trello」を利用したタスク管理について紹介させていただきましたが、
今回は「Trello API」と「Google Apps Script(以下GAS)」を利用して、
送信されたフォームの回答を、自動で登録できるようにしてみたいと思います。
(GASの基本については、こちらの記事をご参照ください)
目次
- Trelloとは?
- ステップ1:Trello APIとGASを利用して、カードを登録してみよう
- ステップ2:問い合わせフォームから送信された回答を自動登録してみよう
Trelloとは?
どのようなツールなのか、どうやって使うのか、については以下の記事をご参照ください。
ステップ1:Trello APIとGASを利用して、カードを登録してみよう
「Trello API」との連携で必要なAPIKey、Tokenを取得し、GASを記述してカードを登録します。
Trello、GoogleAppsにログインを行って、以下の操作を行ってください。
1)APIKeyの取得
以下にアクセスし、APIKeyを取得&メモします。
https://trello.com/1/appKey/generate
2)Tokenの取得
以下にアクセスし、「Allow」を押下して、Tokenを取得&メモします。
https://trello.com/1/authorize?key=(取得したAPIKey)&name=GoogleFormForSaizo&expiration=never&response_type=token&scope=read,write
3)取得した情報の設定
フォームのスクリプトエディタを開き、
「ファイル>プロジェクトのプロパティ>スクリプトのプロパティ」に
「Trello API」との連携で必要な情報を設定しておきます。
- TRELLO_BASE_URL:ベースのURL
- TRELLO_USERNAME:使用するユーザのID
- TRELLO_API_KEY:1)で取得したAPIKey
- TRELLO_TOKEN:2)で取得したToken
4)ボード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」を実行してみてください。
以下のようなログが出力されます。
5)リスト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」を実行してみてください。
以下のようなログが出力されます。
6)カードの登録
いよいよカードの登録です。
/** * 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を見てみましょう。
ちゃんと登録されていますね!
ステップ2:問い合わせフォームから送信された回答を自動登録してみよう
1)概要
顧客⇒フォームから問い合わせ(送信)⇒回答内容をTrelloに自動登録
2)回答内容をTrelloに登録
新たに「submitForm1」を作成し、ステップ1で作成した「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のカード登録に失敗しました。"); } }
3)トリガーの設定
「現在のプロジェクトのトリガー」に2)で作成した「submitForm1」を設定します。
4)問い合わせフォームからの送信
さっそくTrelloを見てみましょう。
送信した内容が登録されていますね!
終わりに
いかがだったでしょうか?
他にも、以下のような機能をもたせると、ぐっと管理しやすくなると思います。
- 問い合わせ番号を採番
- 依頼種別でラベル(色)を設定
- 登録に失敗した時は、問い合わせ担当者にメールで通知
- 回答先メールアドレスに自動返信(サンキューメール)
みなさんも是非活用してみてください。