非エンジニアがTrelloとGoogleフォームを自動連携してタスク二重管理を根絶する！

アンケートフォームとタスク管理ツールで二重管理が起きてしまう。これってあるあるではないですかね？Googleフォーム（スプレッドシート）とTrelloをGASで連携を実現する方法と、ノンコーディングで連携を実現する方法を実際にやってみました！

この記事はこんな人におすすめ！
・お問い合わせフォームとタスク管理ツールがバラバラ
・別のアプリケーションにコピペする、などのノンコア業務が多い
・業務を自動化したいけど、コーディングなんてできない

1. どうしても生まれてしまう二重管理問題

お手伝いさせていただいていた会社では、お問い合わせフォームをGoogleフォーム、お問い合わせ対応も含め、全てのタスク管理をTrelloで実施していました。

そのため、
スプレッドシートに反映されたお問い合わせを、Trelloで新しいカードとして発行し直す、という業務が発生。

これが面倒くさい。気づいた人がカード発行する、という暗黙のルールだったのですが、
１．だんだんとカードを作らなくなり
２．お問い合わせ対応のタスクだけスプレッドシート管理になり
３．Trelloで全て完結するという文化のためお問い合わせを見落とすことも
と、最悪の３ステップを踏んでしまっていました。

ということで今回は、noteに設定している下記の問合せフォームと弊社のTrelloを連携してみます！

お問い合わせの内容を「担当振り分け前」にカード作成することを目指します。

2.Google Apps Scriptで実装してみる

今回も、いわゆる"GAS"で頑張って実装してみようと思い、下記の記事を参考に設定してみました。
（コーディングできないので参考にならない！という方は、3. ノーコーディングで実装してみるまで読み飛ばしてください！）

Googleフォームからトレロのカード自動作成 - Qiita

GASを使ってTrelloのボードID・リストID・カードIDを取得する方法 - Qiita

 2-1. Trelloの情報を集める

GoogleフォームとTrelloの連携するためには、Trelloの
・ユーザー名
・APIキー
・トークン
・ボードID
・リストID
が必要になります。
下2つはGASを実行させて取得するので、まず上3つを集めます。

◆ユーザー名
ユーザー名はアイコンをクリックすると下記のように表示されます。
hogehoge1234（h.hoge1234）
この（　）内の部分をユーザー名として扱います！（下記画像の赤の方）

◆APIキー名・トークン
右記リンクから取得します。https://trello.com/app-key
リンク先でAPIキーを取得したら、「トークン」のリンクからトークンを発行します。

これでTrello上で行う準備は完了です。

 2-2. GASを書いてIDを取得する

次にGoogleフォームのスクリプトエディタを開き、「ボードID」「リストID」を取得するためのGASを記載します。

◆ボードIDの取得
下記を実行し、ログからボードIDを取得します。（ログの赤の箇所）

function getBoardId() {
 var trelloKey   = "取得したAPIキー";//keyを入力してください
 var trelloToken = "取得したトークン";//tokenを入力してください
 var userName = "取得したユーザー名";//ユーザ名を入力してください
 var url = 'https://trello.com/1/members/' + userName + '/boards?key=' + trelloKey + '&token=' + trelloToken + '&fields=name';
 res = UrlFetchApp.fetch(url, {'method':'get'});
 Logger.log(res);
}

◆ボードIDの取得
下記を実行し、ログからボードIDを取得します。（ログの赤の箇所）

function getListId() {
 var trelloKey   = "取得したAPIキー";//keyを入力してください
 var trelloToken = "取得したトークン";//tokenを入力してください
 var boardId = "取得したボードID";//ボードIDを入力してください

 var url = "https://trello.com/1/boards/" + boardId + "/lists?key=" + trelloKey + "&token=" + trelloToken + "&fields=name";

 res = UrlFetchApp.fetch(url, {'method':'get'});
 Logger.log(res);
}

今回は「担当振り分け前」のリストにカードを作成したいので、赤の箇所のIDを使います。

 2-3. カードを作成するGASを書く

ここまでで取得したIDなどを下記のGASに反映させます。

// ユーザー名
var user_name = 'ユーザー名';

// APIキーとトークン
var api_key = 'APIキー';
var api_token = 'APIトークン';

// ボードID
var board_id = 'ボードID';

// リストID
var list_id = 'リストID';


function addTrelloCard() {
 
// カード名にする列番号
var title_column_no = 2;
// カード詳細説明にいれる列番号
var description_column_no1 = 2;
var description_column_no2 = 3;
var description_column_no3 = 4;
var description_column_no4 = 5;
var description_column_no5 = 1;


 // 選択しているセルの開始行番号を取得
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getActiveSheet();
 var upper_left_cell = sheet.getActiveCell();
 var start_row = upper_left_cell.getRow();

 // 選択しているセルの行数を取得
 var range = SpreadsheetApp.getActiveRange();
 var rows = range.getNumRows();

 // カード作成
 for (var i = 0; i < rows; i++) {
   var row = start_row + i;
   var card_title = sheet.getRange(row, title_column_no).getValue();
   var card_description1 = sheet.getRange(row, description_column_no1).getValue();
   var card_description2 = sheet.getRange(row, description_column_no2).getValue();
   var card_description3 = sheet.getRange(row, description_column_no3).getValue();
   var card_description4 = sheet.getRange(row, description_column_no4).getValue();
   var card_description5 = sheet.getRange(row, description_column_no5).getValue();
   var url = 'https://api.trello.com/1/cards/?key=' + api_key + '&token=' + api_token;
   var options = {
     'method' : 'post',
     'muteHttpExceptions' : true,
     'payload' : {
       'name'      : card_title + 'さんからの問合せ',
       'desc'      : card_description2 + '\n' + card_description3 + '\n' + card_description4 + '\n' + card_description5 + '\n' + card_description1,
       'due'       : '',
       'urlSource' : ''
     }
   }
   var response = UrlFetchApp.fetch(url, options);

 }
}

◆動かしてみる

実際に動かしてみると、なんとかカードが生成されていました！

3. もっと簡単に、ノーコーディングで実装してみる！

結構頑張っていろいろやってみたのですが、今回も最終的にはエンジニアの手を借りることになりました…。

と、いうことで、ここからが本番。弊社で開発したツールを使って、ノンコーディングでアプリケーションの連携＋業務自動化を実現してみます。
おまけでSlackへの通知も行えるようにしてみました！

◆ 連携したいアプリケーションを選択する

GoogleフォームとTrello、Slackを選択

◆ Googleフォームの設定を行う

トリガー（何を持ってこのフローを開始するのか）とアクション（どういう挙動をするのか）を選択。今回は、
・トリガー：新しい回答（Googleフォームで新しい回答を取得）
・アクション：データを取得する
を選択しました。

該当するスプレッドシート（Googleフォームの回答を収集しているスプレッドシート）を指定し、抽出項目を選択。
フォームから問合せ入ると、スプレッドシートに新しく行が追加されるため、「追加された行」を選択。

これでGoogleフォームの設定は完了です！

◆ Trelloの設定を行う

アクションを「カードを作成する」に設定

アカウント認証を行い、カードを作成するボードとリストの選択を行う
今回は下記の「お問い合わせ対応」のボードの、「担当振り分け前」リストにカードを作成したいので、下記の通り設定。
・ボードの設定：お問い合わせ対応
・リストの設定：担当振り分け前

次に作成するカードのタイトルを設定します。今回のお問い合わせフォームには「お問い合わせのタイトル」の記入欄がないため、「〇〇さんからのお問い合わせ」としました。
Googleフォームで取得したカラムの<お名前>を使って下記のように設定。

最後に説明の設定を行います。こちらはGoogleフォームで取得した情報を羅列し、お問い合わせ内容をわかるように設定しました。

これでTrelloの設定も完了しました！

◆ Slackの設定を行う

こちらは前回の記事、「スプレッドシートとSlackの連携」部分と同様に、「チャンネル」「メッセージ」を設定するだけ！
詳細は下記をご確認ください。

◆組んだフローを実行してみる

ページ下部のフォームから下記の内容で問合せしてみます。

Trelloを確認すると、

きちんとカードが生成されていました！

さらにSlackにもしっかり通知が来ていました。

およそ５分で自分１人で設定完了！問合せフォームの仕様を変更しても、「取得するデータ」「説明の内容」「メッセージの内容」を少し編集すれば対応可能です！

今回のケース以外にも、
・salesforceとマネーフォワードの連携
・スプレッドシートとクラウドサインの連携
・GmailとGoogle Driveの連携
などが簡単に実現できます！

「興味がある！」「使ってみたい！」という方、「こんなアプリケーション同士の連携はできないのか？」「こういうアプリケーションを使っているんだけど、どう連携したら業務が楽になるか？」といったご相談がある方、是非下記のページからお問い合わせください！

お問い合わせはこちらから！