ライフハック

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

hubot-avatar
o_wani
この記事は作成から6年以上経過しているため、内容が古くなっている可能性があります。

今のプロジェクトではタスク管理で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
にアクセスする

Alt text

〈〈APIキー〉〉
6v3110v88n1hjk23d90j7ow083do20qa0fa011

2. トークン

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

Alt text

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

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

Alt text
トークンを取得します。

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側の準備

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

Webhook の追加

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

Alt text

以下の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の新規カード登録

Alt text

STAFF
o_wani
o_wani
スタッフ
大学卒業後、15年間WEB業界で働く。現在はマネジメントに従事していますが、ChatGPTの登場に触発され、このブログを再開。AIをパートナーに、自分で手を動かして実装する楽しさと喜びを再発見中。時代が変わりつつある中でも、陳腐化しない情報発信も目指しています。
記事URLをコピーしました