kintoneとBacklogが一瞬で連携できる魔法のプラグインを使ってみた！

2019.9.25

Jumpei Yamamoto

kintoneはノンプログラミングで自由にアプリを作れてすごく便利。

ただ！ガントチャートは描きづらい。。。そこでプロジェクト管理ツール「Backlog」との連携を実装してみました。

今回は、ジョイゾーさんが提供されている「Backlog課題連携プラグイン」にチョイ足しをして、kintoneでのプロセス変更時にコメントが追加されるように実装を行なっていきます！

プロジェクト管理ツールBacklog

プロジェクト管理ツールというと、Redmine、Trello、Asana等、世の中にたくさん出回っていますよね。

筆者も色々使った事があるのですが、機能が多すぎて使いこなせなかったり、UIがイマイチだったり、なかなか一長一短なんですよね。

その中でもBacklogは機能もシンプルで、操作性にも優れています。弊社でもタスク管理として利用しているツールです。

もちろんガントチャートも作れちゃいます。

kintone×Backlogの連携プラグインを設置してみる

ジョイゾーさんが提供しているプラグインの設定方法は、こちらの記事にわかりやすくまとめられているので、そちらを参照しましょう。

簡単に手順をまとめると、

BacklogのAPIキーを発行する
ジョイゾーさんのWebからプラグインをDLする
kintoneにプラグインを読み込む
連携したいkintoneアプリにプラグインを設置する
プラグインの基本設定を行う

たったこれだけ！難しいところは特になく、30分もあれば設定できると思います。

実際に使ってみたのがこちら。

kintoneからBacklogにタスクが追加されていますね！

ただ、ここまではkintoneからBacklogにタスクが追加されているだけ。

kintone上で何か更新があった場合には、Backlogにも反映させたいですよね。

そこで、kintoneでプロセス変更のアクションが行われた際に、Backlogにコメントが追加されるようにチョイ足し実装してみましょう！

kintoneのプロセス変更時にBacklogにコメントを追加する

サンプルコードはこちらです。

/* プロセス管理のアクションイベントを取得 */
kintone.events.on('app.record.detail.process.proceed', function(event) {
  var status = event.status.value; // 実行前のステータス
  var nextStatus = event.nextStatus.value; // 実行後のステータス
  var comment = 'ステータスが【' + status + '】から【' + nextStatus + '】に変更されました。'; // 追加するコメントの内容
  var taskId = "XXXXX"; // backlogのタスクID
  var apiKey = "XXXXX"; // backlogのAPIキー
  var url = 'https://XXXXX.backlog.com/api/v2/issues/' + taskId + '/comments?apiKey=' + apiKey;

  // backlogにコメントを追加する
  var body = { "content": comment };
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      // success
      console.log(JSON.parse(xhr.responseText));
    } else {
      // error
      console.log(JSON.parse(xhr.responseText));
    }
  };
  xhr.send(JSON.stringify(body));
});

/* プロセス管理のアクションイベントを取得 */

kintone.events.on('app.record.detail.process.proceed', function(event) {

var status = event.status.value; // 実行前のステータス

var nextStatus = event.nextStatus.value; // 実行後のステータス

var comment = 'ステータスが【' + status + '】から【' + nextStatus + '】に変更されました。'; // 追加するコメントの内容

var taskId = "XXXXX"; // backlogのタスクID

var apiKey = "XXXXX"; // backlogのAPIキー

var url = 'https://XXXXX.backlog.com/api/v2/issues/' + taskId + '/comments?apiKey=' + apiKey;

// backlogにコメントを追加する

var body = { "content": comment };

var xhr = new XMLHttpRequest();

xhr.open('POST', url);

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {

if (xhr.status === 200) {

// success

console.log(JSON.parse(xhr.responseText));

} else {

// error

console.log(JSON.parse(xhr.responseText));

}

};

xhr.send(JSON.stringify(body));

});

このプログラムは、プロセスが実行されkintoneアプリのステータスが更新された事をトリガーに動きます。

Backlogのタスクにコメントを書き込む処理は、BacklogのAPIを用いています。

実際に動かしてみると、

このように、コメントが追加されていますね！

kintone × Backlog連携まとめ

本記事では、kintoneとBacklogの連携方法について記載しました。

ポイントはこちら。

kintoneからBacklogにタスクを追加するのはプラグインを利用すれば簡単！
BacklogのAPIを使えばコメント追加もできる！

追加で実装したのはコメントの追加機能ですが、Backlogは様々なAPIを公開しているので、うまく活用すればより使いやすいkintoneアプリを作成することができます。

無料相談はこちら