カテゴリー内の他の記事

Trelloに添付ファイル付きのTo Doを登録する

フォローする

(Author : Fuji Business International Mamoru Fujinoki)

はじめに

タスク管理は、kintoneのTo Doアプリでも行えますが、Trelloを使えば、ワークフローをビジュアル化してタスク管理がより直感的に行えるようになります。
To DoアプリのレコードをTrelloと連携するには、ZapierやWebhooksを使えば、コード無しで簡単に実現できるのですが、添付ファイルの連携は標準機能だけでは、実現出来ません。
今回のサンプルでは、To Doのタスクが承認されたタイミングで、TrelloのTo Doリストに新規カードを添付ファイル付きで追加してみます。

Kintone-Trello.png
               [kintone-Trello連携イメージ]

1. To Doアプリの設定

kintoneアプリストアより、検索テキスト「To Do」で検索し、「このアプリを追加」をクリックして、「To Do」アプリを追加します。

ToDo_search.png

次にプロセス管理に「承認」のステータスを追加します。
To Doのアプリの設定より、「設定」タブを開き、「プロセス管理」を選択します。

ToDo_apps.png

1.有効化の欄の「プロセス管理を有効にする」がチェックされている事を確認し、2.ステータス欄で「未着手」の後に「承認」のステータスを追加します。
3.プロセス欄にて「未着手」の「アクション後のステータス」を「承認」に変更し、「アクション名」を「承認する」に変更します。
また、下記のイメージを参考に「未着手」の下に「承認」ステータスのプロセスを追加します。(「アクション実行後のステータス」に「作業中」、「未着手」を追加する。)
設定が終わったら、「保存」ボタンをクリックして、設定を保存します。

ToDo_addstatus.png

フォームのフィールドコードはデフォルト値を使用していますが、下記のテーブル、画像を参考に「フォーム」タブを開き、各フィールドの「設定」より確認してください。

フィールドの種類 フィールド名 フィールドコード
文字列(1行) ToDo名 To_Do
日付 締切日 Duedate
文字列(複数行) 詳細内容 Details
添付ファイル 添付ファイル Attachments

ToDo_form.png

設定終了後、必ず「アプリを更新」をクリックして、変更を反映してください。

以上で「To Do」アプリの設定は終了です。

2. Trelloの設定

Trelloにログイン後、ホームページより、「ボードを作成」をクリックします。

Trello_homepage.png

ボード名を適当に入力し、「ボードを作成」ボタンをクリックします。

Trello_board.png

ボード内にリストを追加します。(例:「To Do」、「作業中」、「完了」、「保留」等)

Trello_ristadd.png

次にリスト内にカードを追加します。このカードは、コーディングの際に必要となるリストIDの取得の為に仮作成します。(後に削除)

Trello_cardadd.png

作成されたカードをクリックし、詳細を表示します。
右下の「共有する」より「JSONでエクスポート」を選択します。

Trello_taskdetail2.png

下記のようにJSONフォーマットで文字列が表示されますので、「idList」のキー文字列を探します。
「idList」右側の文字列の値が(数字およびアルファベット)、カードのID となりますので、メモしておいて下さい。

idList.png

このカードは不要ですので、必要に応じて削除して下さい。

Trello_carddel.png

次に開発者向け、APIキーを取得します。
ログインした状態で、https://trello.com/app-key/へ移動します。
下記のような画面が表示され、「開発者向けAPIキー」が表示されます。
このAPIキーの値をメモし、画像にあるように「Token」のリンクをクリックします。

Trello_APIkey.png

下記の画像のように利用許可のページが表示されますので、「許可」をクリックして下さい。

Trello_grant.png

利用を「許可」すると下画像のようにトークンの値が表示されます。この値もメモしておいて下さい。

Trello_Token.png

以上でTrello側の設定は完了です。

コーディング

以下を参考にコーディングします。

 

コードの解説

変数の定義

複数の関数で使用する変数または定数を最初に定義しています。
また、上記で作成しメモしておいたTrelloのAPIキー、トークン、リストIDを指定します。

kintoneのプロセス変更時のトリガーイベント

レコードのステータスが「承認」に変更された場合に実行されるトリガーイベントです。
レコードが「承認」された場合のみ処理を実行します。

現在参照している詳細レコードの値を取得し、変数に設定しています。(「To Do 名」、「締切日」、「詳細内容」)

kintone.proxyメソッドを用いて、Trello の外部APIをコールします。
上記でメモしておいた「リストID」、上記で設定した「To Do名」、「締切日」、「詳細内容」、TrelloのAPIキーおよび、APIトークンをクエリーパラメーターとして設定しています。
詳細はtrelloのcardsリファレンスを参考にして下さい。

Trelloへの新規カード追加が成功したら、レスポンスのボディー内容をJSON形式に変換し、新規追加したカードのIDを取得します。

添付ファイルのレコードを取得し、ファイルが添付されているかチェックします。
添付ファイルが存在する場合、「ファイルキー」と「ファイル名」を取得します。
複数添付ファイルが存在する場合、ループして、全てのファイル情報を取得し,「カードID」、「ファイル名」、「ファイルキー」をJSON Arrayに格納します。
最後に、複数ファイルのダウンロード関数(downloadFiles関数)をコールします。

複数ファイルのダウンロード関数

複数の添付ファイルが存在する場合、非同期処理を同時に行うとサーバーに負担がかかり、パフォーマンスに影響する可能性がありますので、ダウンロード、アップロードがそれぞれ逐次終了してから処理しています。

kintoneの添付ファイルダウンロード関数

HTTP GET リクエストでkintoneの添付ファイルデータを「blob」形式で取得します。
fileKeyには、現在参照しているレコードから取得された添付ファイルのファイルキーの値を設定します。
レスポンスのタイプとして、「blob」形式を指定しています。
詳細については、kintone ファイルダウンロードAPIのリファレンスも参照して下さい。
非同期処理となるため、Promiseを使用しています。

Trelloへの添付ファイルアップロード関数

添付ファイルのデータは multipart/form-data としてTrello側に送信する必要があるため、FromDataオブジェクトを生成します。詳細は、trelloのattachmentsリファレンスを参考にして下さい。
Trello APIの添付ファイルアップロードメソッドのURLにカードID、APIキー、API トークンをクエリーパラメーターとして設定し、HTTP POSTリクエストで、添付ファイルデータをTrello APIに送信します。
非同期処理のため、Promiseを使用しています。

動作確認

作成した「To Do」アプリに新規レコードを添付ファイル付きで追加し、保存します。

ToDo_input.png

追加した「To Do」タスクを「承認」します。

ToDo_accept.png

下記の画像のようにタスクのカードが添付ファイル付きで新規追加されていれば成功です。

Trello_addTask.png

               [タスクカード詳細]

Trello_fileupload.png

まとめ

タスク管理、案件管理アプリとして昨今、注目されているTrelloですが、ワークフローをビジュアル化して直感的にタスク管理ができるだけでなく、kintoneと連携して、ステータス管理を行えば、さらに便利になると思います。
Zapierなどの連携サービスを使えばレコードの連携はコード無しで実現可能ですが、今回のようにちょっとしたコーディングによるカスタマイズで添付ファイルも連携できるようになり、より使い勝手がよくなるのではないでしょうか。

参照サイト

Trello REST API: Create a new card
Trello REST API: Add an attachment to a card
Cybozu Developer Network: ファイルダウンロード

このTipsは、2019年01月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。