【連携】Backlogに入力したタスクをTrelloへ

今のプロジェクトではタスク管理でBacklog（バックログ）を使用しているが、もっと手軽なTrelloを個人的には使用したい。。Backlogは、ガントチャートも備えていて、スケジュールとタスクの進捗を照らし合わせながら確認できるのは便利かと思うが、1つのタスクに対して複数の担当者を設定することができなかったり、リマインドもいまいちな感じだったりする。Trelloは、柔軟性が高いインターフェースがとにかく使いやすい。ガントチャートもアドオンを入れれば表示できる。

そこで、業務では、Backlogを使用しているので、

Backlogで新規登録したタスクを、Trelloの特定のボードの特定のリストにタスク（カード）として連携（新規登録）することは出来ないか

調べてみた。参考サイトを大いに参考にさせて頂き、手順をまとめてみた。

参考サイト：
Backlogの課題が追加されたらHubotからTrelloにカードを追加する

Hubotを使った内容だが、以前Hubotは導入済みなので今回はHubotを前提に進めることとする。流れとしては、backlog⇒Hubot⇒Trelloといった感じ。

Trello側の準備

連携のため、Trello側で準備が必要なものは3つある

• APIキー
• トークン
• リストID

まずは、Trelloにログインしておく。

1. APIキー

Trelloにログインしているブラウザで
https://trello.com/app-key
にアクセスする

〈〈APIキー〉〉
6v3110v88n1hjk23d90j7ow083do20qa0fa011

2. トークン

APIキーを取得したページの下部リンクより、トークンを取得する。

アカウントを利用することを許可

利用することを許可します。

トークンを取得します。

You have granted access to your Trello information.
To complete the process, please give this token:
pa21099odoide0338kof1of4opkas22kdgb3o22353isnd076035xf9ced12146l97f8

〈〈トークン〉〉
pa21099odoide0338kof1of4opkas22kdgb3o2....

3. リストID

まずはボードIDを取得して、それをもとにリストIDを取得する。

ボードIDを取得

curlコマンドでボードIDを取得する。

$ curl "https://trello.com/1/members/〈〈ユーザ名〉〉/boards?key=〈〈APIキー〉〉&token=〈〈トークン〉〉&fields=name"

実行結果：
{"name":"〈〈ボードの名前〉〉","id":"〈〈ボードID〉〉"}
返ってきた結果の、〈〈ボードID〉〉の部分が『ボードID』

リストIDを取得

curlコマンドでリストIDを取得する。

$ curl "https://trello.com/1/boards/〈〈ボードID〉〉/lists?key=〈〈APIキー〉〉&token=〈〈トークン〉〉&fields=name"

実行結果：
{"id":"〈〈リストID〉〉","name":"〈〈リストの名前〉〉"}
返ってきた結果の、〈〈リストID〉〉の部分が『リストID』

Hubot側の準備

前提：Hubot側の設定が事前に終わっていること。
Herokuでホスティングしているのでまず、コマンドラインでHerokuログインする。
（Herokuの管理画面にログインしても設定できる）

Herokuログイン

コマンドラインでHerokuログインする。

$ heroku login
Enter your Heroku credentials.
Email: 〈〈Herokuのメールアドレス〉〉
Password (typing will be hidden): 〈〈Herokuのパスワード〉〉
Logged in as 〈〈Herokuのメールアドレス〉〉

Herokuのconfig設定

これまでに取得した3つの値をHeroku側に設定する。

HUBOT_TRELLO_KEY：APIキー

$ heroku config:set HUBOT_TRELLO_KEY=〈〈APIキー〉〉
Setting HUBOT_TRELLO_KEY and restarting ⬢ herokuapp_name... done, v21
HUBOT_TRELLO_KEY: 〈〈APIキー〉〉

HUBOT_TRELLO_TOKEN：トークン

$ heroku config:set HUBOT_TRELLO_TOKEN=〈〈トークン〉〉
Setting HUBOT_TRELLO_TOKEN and restarting ⬢ herokuapp_name... done, v22
HUBOT_TRELLO_TOKEN: 〈〈トークン〉〉

HUBOT_TRELLO_POST_LIST：リストID

$ heroku config:set HUBOT_TRELLO_POST_LIST=〈〈リストID〉〉
Setting HUBOT_TRELLO_POST_LIST and restarting ⬢ herokuapp_name... done, v23
HUBOT_TRELLO_POST_LIST: 〈〈リストID〉〉

node-trello

trello用のAPIをインストールする。

$ npm install node-trello --save

CoffeeScript設定

内容は上記参考サイトをそのまま利用させてもらいました。
backlog-to-trello.coffee

#
# Description:
#   Backlog to Trello
#
# Dependencies:
#   "node-trello": "^1.1.1"
#
# Configuration:
#    HUBOT_TRELLO_KEY
#    HUBOT_TRELLO_TOKEN
#    HUBOT_TRELLO_POST_LIST
#    ※heroku 環境設定
#
# Commands:
#   
#

backlogUrl = 'https://<自分のスペース名>.backlog.jp/'

module.exports = (robot) ->
  Trello = require("node-trello")
  t = new Trello(process.env.HUBOT_TRELLO_KEY, process.env.HUBOT_TRELLO_TOKEN)

  robot.router.post "/trello/:room", (req, res) ->
    room = req.params.room
    body = req.body

    try
      switch body.type
          when 1
              label = '課題の追加'
          else
              # 課題関連以外はスルー
              return

      # 投稿メッセージを整形
      url = "#{backlogUrl}view/#{body.project.projectKey}-#{body.content.key_id}"

      title = "[#{body.project.projectKey}-#{body.content.key_id}] "
      title += "#{body.content.summary}"

      description = "#{url}\n"
      description += "登録者：#{body.createdUser.name}\n\n"
      description += "#{body.content.description}"

      t.post "/1/cards/", {
        name: title
        desc: description
        idList: process.env.HUBOT_TRELLO_POST_LIST_SNK
      }, (err, data) ->
        if (err)
          console.log err
          return

#      # カードを追加したら Slack に投稿したい場合はここを利用
#      if title?
#          robot.messageRoom room, title
#          res.end "OK"
#      else
#          robot.messageRoom room, "Backlog integration error."
#          res.end "Error"

    catch error
      robot.send
      res.end "Error"

git 操作

追加したbacklog-to-trello.coffeeをaddしてcommitし、herokuにデプロイします。

$ git add backlog-to-trello.coffee
$ git commit backlog-to-trello.coffee
$ git push heroku master

Backlog側の準備

ログイン後、自分のスペースを選びます。

Webhook の追加

メニューから『プロジェクト設定』＞『Webhook』と進みます。
そして「Webhookを追加する」ボタンで登録します。

以下の4つの項目を入力します。

1. Webhook名

例）BacklogとTrelloの連携

2. 説明

例）BacklogとTrelloの連携をします。

3. WebHook URL

https://●●●●●.herokuapp.com/trello/〈〈Slack チャンネル名〉〉
→●●●●●は、herokuのアプリ名
→Slack チャンネル名は、Slackに通知する場合は、存在するチャンネル名。
通知の必要ない場合は、任意の文字列。（通知するチャンネルには、Hubotを招待）

4. 通知するイベント

「すべて」にチェックしていい。

※今回は、課題の追加時のTrello連携なので「課題の追加」は必ずチェックされていること

動作確認

動作確認の流れは

1. Backlogの課題新規登録
   ↓ （同期）
2. Trelloの新規カード登録