タスク管理ツールとして大変メジャーなTrelloですが、自社システムと連携したい場合がありますよね。
この記事では以下について実装方法を説明します。
・Trelloでコメントが投稿されたら自社システムに通知
機能を実装するために「Trello Webhook API」を使用します。
Webhookとは何ぞや、と普段思っている方もいるかもしれませんが、改めて調べてみたら
「Webアプリケーションでイベントが実行された際、外部サービスにHTTP で通知する仕組み」
とヒットしました。
ここで言う「Webアプリケーション」はTrelloのことで「外部サービス」は自社システムですね。
ですからTrelloが提供しているWebhook APIが必要なのです。
使うまでの手順を優しく説明します。
１．https://trello.com/app-key にアクセス。
２．「Trello 開発契約」を確認し、「APIキーを表示」をクリック。
３．キーが表示される（このキーは後の手順で使用するため、メモしておいてください）
この画面で「Token」のリンクをクリック。
４．アクセス許可画面が表示されるので「許可」をクリック。
５．トークンが発行される（このトークンは後の手順で使用するため、メモしておいてください）
６．コメント投稿されたら自社システムに通知したいボードIDを取得します。
コマンドプロンプトやターミナルで以下のコマンドを実行しましょう。
curl "https://trello.com/1/members/[ユーザ名]/boards?key=[３で表示されたキー]&token=[５で表示されたトークン]&fields=name"
文字化けしてしまう場合は以下の方法で文字コードを変更してあげましょう。
https://qiita.com/user0/items/a9116acc7bd7b70ecfb0
「Trelloへようこそ」「テスト」という2つのボードが表示されました。
ここでは例として「テスト」のボードにしましょう。
「テスト」のidをコピーしておきます。
７．次にWebhookを生成します。
ここでもコマンドプロンプトやターミナルで以下のコマンドを実行しましょう。
curl -X POST "https://api.trello.com/1/token/[５で表示されたトークン]/webhooks?key=[３で表示されたキー]&callbackURL=[コールバックURL]&idModel=[でコピーしたid]&description=[Webhookの説明]"
コールバックURLはTrelloでアクションがあった場合に通知してほしいURLを設定してください。
ちゃんとステータスコード200を返すURLにしてください。
８．正常に生成されたらWebhookを確認してあげましょう。
ブラウザで以下のURLにアクセスすると、正常に生成されていることがわかります。
https://trello.com/1/tokens/[５で表示されたトークン]/webhooks/
これで準備は整いました。
該当のボードにて何かアクションがあった際にコールバックURLにリアルタイムで通知がされるようになりました。
あとは自社システム側の処理ですね。
Trelloでアクションがあるとこんな感じのデータが飛んできますす。
この各項目に関するリファレンスがなかったので今度時間がある際にまとめたいと思います。
ちょっと解析していただければわかると思います。
PHPの処理側はこんな感じ。
POSTリクエストでかつTrelloからの通知の場合のみ動作するようにしました。
function index(){
// trelloからのアクセスのみ受け付ける
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_SERVER['HTTP_X_TRELLO_WEBHOOK'])) {
$body = file_get_contents("php://input");
if (!empty($body)) {
$bodyArray = json_decode($body, true);
// 登録されたコメント
// コメント編集時にはここには入らないのでスルー
if(!empty($bodyArray['action']['data']['text'])){
$operatorName = $bodyArray['action']['display']['entities']['memberCreator']['text']; // コメントした人
$comment = $bodyArray['action']['data']['text']; // 投稿されたコメント
$boardName = $bodyArray['model']['name']; // ボード名
$title = $bodyArray['action']['data']['card']['name']; // カードのタイトル
$cardId = $bodyArray['action']['data']['card']['id']; // カードID
// 以降の処理はご自由に～
}
}
}
}
以上になります。
手順に沿ってやっていただければすぐ実装できますのでぜひやってみてくださいね。