こちらは ゆるWeb勉強会@札幌 Advent Calendar 2021 15日目の記事です。
概要
- Backlog のお知らせが溜まっていたら、デスクトップ通知する Chrome 拡張機能を作ります。
- この記事の段階では未完成です。（動くけど改良の余地あり）
作ろうと思ったきっかけ
先日、プロジェクトの課題管理に Backlog を導入した話 を投稿したのですが、その案件の顧客側の担当者がふと呟いたことがありました。
「まだ Backlog 慣れていないから、見るの忘れちゃう。デスクトップ通知あると助かるなー」
Backlog には、お知らせやメール通知などの機能が用意されているし、個人的には「チャットツールのように即時性を求めるものではないので、デスクトップ通知は不要」という考えです。
ただ、技術で解決できそうなことで困っている声を聞くと「なんとかしたい」という気持ちになるのも事実。前から興味のあった Chrome 拡張機能へのチャレンジを決めました。
Chrome 拡張機能の作り方
作りたい機能のイメージは、次のような感じです。
- 定期的に Backlog API でお知らせ件数を取得する（リアルタイムの通知はしない）
- 一定件数以上であれば「〇〇件以上のお知らせがあります」とデスクトップ通知する
基本構成
はじめに、こちらの記事を参考にさせていただきました。
Chrome拡張の作り方 (超概要)
まずは「APIの呼び出し」と「デスクトップ通知」を実装しようと思ったので、最低限必要な manifest.json と jsファイル の2つを作成することにしました。
最終的なディレクトリ構成は次の形です。
root(任意の名前)
├ manifest.json -- 設定ファイル
├ background.js -- 処理本体
└ backlog-favicon.svg -- デスクトップ通知用のアイコン
※じっくり勉強したい方は Google が公開している公式ドキュメントを読むのが良さそうです。
https://developer.chrome.com/docs/extensions/
Backlog APIキーの発行
Backlog API とは？
課題,Wiki,ファイルの追加や取得を始め、プロジェクトやユーザーの管理などブラウザ上のBacklogでできる操作の大部分をAPIから行うことができます。
https://developer.nulab.com/ja/docs/backlog/
Backlog API の認証は、APIキーを使うか OAuth の二通りです。
今回はAPIキーを使用します。
Backlog にログインして [個人設定] > [API] > 「登録」ボタン押下で、APIキーが発行されます。
manifest.json の作成
manifest.json は Chrome 拡張機能の設定ファイルで、作成必須です。今回は次のように記述しました。
{
"name": "Backlog Desktop notification",
"version": "1.0.0",
"manifest_version": 2,
"description": "Backlog のお知らせ件数を通知します",
"permissions":[
"notifications"
],
"background": {
"scripts": [
"js/background.js"
],
"persistent": false
}
}
主要な部分のみ説明します。
| 項目名 | 説明 | 必須 |
|---|---|---|
| name | Chrome 拡張機能の名前 | ○ |
| version | Chrome 拡張機能のバージョン。4階層まで表現可能。 | ○ |
| manifest_version | 設定ファイルのバージョン。現在は必ず 2 になる。 | ○ |
| permissions | Googleが提供する JS API を使う際、使う対象を記述する。 | |
| background | バックグラウンドで動作させる JS ファイルを指定。複数指定可。 |
メイン処理の作成（jsファイル）
細かい説明は割愛しますが、Backlog のお知らせ情報取得APIを15分置きに実行して、お知らせが10件以上ある場合はデスクトップ通知を出します。
setInterval(function(){
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let contents = xhr.responseText;
let parse_data = JSON.parse(contents);
if (parse_data.length > 0) {
let options={
type: "basic",
title: "Backlog 通知",
message: "お知らせが" + parse_data.length + "件以上あります！確認してね",
iconUrl: "backlog-favicon.svg"
};
chrome.notifications.create(options);
}
}
}
};
let url = 'https://[スペースID].backlog.jp/api/v2/notifications?apiKey=[自分のAPIキー]&count=10';
xhr.open('GET', url, true);
xhr.send();
}, 1000 * 60 * 15);
動作確認
作成した Chrome 拡張機能をブラウザに適用します。
- Chrome のアドレスバーに
chrome://extensions/を入力し、拡張機能設定画面を表示 - 右上の「デベロッパーモード」がOFFの場合は、ONにする
- 左上の「パッケージ化されていない拡張機能を読み込む」で、作成した拡張機能のディレクトリを選択
- 正しく適用された場合、次のように表示されます。（パッケージ化していないため、IDは固定ではない）
お知らせが10件以上ある状態だと、15分置きに次のようなデスクトップ通知が表示されます。
Windwos ユーザーで通知が表示されない方は、次の設定を確認してみてください。
[設定] > [システム] > [通知とアクション] > [送信元ごとの通知の受信設定]
Chrome の設定がオンになっていること。
これから改善したい部分
Backlog をしばらく確認できないときに通知が出続けると辛いので、一度確認したら一定時間通知しなくするようなオプションが欲しいです。
まとめ
Chrome 拡張機能を作成したのは初めてですが、意外と簡単に作れることが分かりました。
また Backlog API も今まで活用する機会がなかったのですが、便利なAPIが多数用意されており、自分で bot やツールなどを作りたいときに有用だと感じました。
自分で欲しいものを自分で作るのは楽しい！と思えたのが、今回の一番大きな収穫です。