Backlogインテグレーションチームの鈴木です。この記事では2023年にリリースされたBacklogの外部連携機能を振り返っていきたいと思います💁♂️
1. Slack連携機能の強化
新たなSlack連携機能では、BacklogとSlackの連携がこれまで以上にスマートになりました。リリース時のブログはこちら。
これまでの通知メッセージの投稿から一歩進んで、Slackのスラッシュコマンドやメッセージショートカットで操作できるようになりました。スラッシュコマンドを使えば、課題の更新やチャンネルへの通知設定が簡単に行え、メッセージショートカットを利用すれば、Slackの投稿から直接Backlogの課題を作成できます。
今回、Slackからの操作を受け取るために、SlackとBacklogの橋渡しをする新しいマイクロサービスを開発しました。使用言語はTypeScript(Node.js)、使用フレームワークはSlackが提供しているBoltを利用しました。
Boltは、Slackが送信するイベントのリスナーを簡単に実装できるフレームワークです。下記のようなコードでSlackのイベントを処理することができます。
const { App } = require('@slack/bolt');
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
});
// スラッシュコマンドの処理
app.command('/backlog', async ({ command, ack, say }) => {
// イベント発生から3秒以内に、ack()関数を呼び出して、
// メッセージを受け取ったことをSlackに通知する必要があります
await ack();
// command.textでは `/backlog add` の add のような、
// スラッシュコマンドに続くテキストを取得できます
// SlackのBacklogアプリでは、
// add や help などのサブコマンドの判定を行い、処理を振り分けています
const subCommand = command.text.trim();
// ユーザーのSlackにメッセージを投稿する便利な関数なども用意されています
await say(`Command received: ${subCommand}`);
});
// Slackで発生する様々なイベントを受け取ることができます
app.event('app_uninstalled', async ({ context, logger }) => {
// Slack上でBacklogアプリがアンインストールされた時のイベントのハンドラを実装できます
// Slackに関連するユーザーデータの削除処理などを実装しています
});
また、Boltの初期化時にHTTPリクエストを受け取る部分をカスタマイズすることができます。私たちはBoltが提供しているExpressReceiverを利用しました。Backlogに対するログイン処理で、Slackイベント以外のリクエストを処理する必要があり、それをExpressで実装することができています。
const expressReceiver = new ExpressReceiver({
// ...ExpressReceiverの初期化（シークレットなど）
});
// 通常のExpressを扱うようにミドルウェアを設定できます
expressReceiver.app.engine('hbs', engine({ extname: 'hbs' }));
expressReceiver.app.set('view engine', 'hbs');
expressReceiver.app.set('views', './src/views');
// 通常のExpressを扱うようにGETリクエストのハンドラを設定できます
expressReceiver.app.get('/backlog/space', backlogSpaceRequestHandler);
// 定義したExpressReceiverオブジェクトをコンストラクタに渡すだけで利用できます
const app = new App({
receiver: expressReceiver,
});
個人的にはメッセージショートカットから課題を追加できる機能が特に便利だと思っています。また、今回の開発をする中で、さらに便利な機能を追加する余地があると実感しました。他のチャットの連携機能も併せて、今後も改善を行っていきます！
2. 外部ストレージに保存されているファイルへのリンクが可能に
次にご紹介するのは、外部サービスに保存されたファイルと課題を紐付ける新機能です。これにより、プロジェクトのファイル管理がより便利になりました。リリース時のブログはこちら。
Box、Dropbox、Google ドライブ、OneDriveとの連携が可能になりました。課題の詳細画面や、追加、編集、コメント時に簡単な操作で外部サービスに保存されたファイルを課題に紐づけられます。これにより、一つの課題に関連する異なる箇所に保存されたファイルもBacklog上で一元管理が実現されました。
ファイル情報を取得する際には、各外部サービスが提供しているファイルピッカーを活用しています。一切の認証は外部サービスで行われ、認証情報はBacklogには保持していないため、安心してご利用いただけます。
下記は簡略化したGoogle ドライブでの例です。
// HTMLで下記スクリプトをロードしておきます
<script src="https://apis.google.com/js/api.js" async></script>
// ファイルピッカーを使用したいタイミングでPickerBuilderを利用してピッカーを表示します
const picker = new google.picker.PickerBuilder()
// 複数ファイルの選択を許可などのオプションが指定できます
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setCallback((data: google.picker.ResponseObject) => {
// ユーザーのファイル選択後に動作するコールバックが記述できます
// 各サービスのピッカーで、ほとんど同様にコールバックを記述できました
// 選択されたファイル情報から必要な情報を取得して、Backlogに保存しています
if (data.action === google.picker.Action.PICKED) {
onFilePicked(
data[google.picker.Response.DOCUMENTS].map((d) => ({
name: d.name,
url: d.url,
}))
)
}
})
.build();
// ピッカーを表示します
picker.setVisible(true);
現在、弊社ではGoogle ドライブを使用しており、この機能がよく活用されているのを見て嬉しく思っています。Backlogの課題を情報集約の中心として、是非有効活用してみてください。
終わりに
来年も連携機能の強化や改善を進め、サービス向上に努めていきたいと考えています。連携に関するご要望がありましたら、ぜひBacklogの連携に関するページのリクエストフォームからお送りください。
それではみなさま、よいお年を。
