---
title: Backlogのウォッチした課題のコメントをデスクトップ通知でお知らせするChrome拡張機能
tags: chrome-extension Backlog
author: ongaq
slide: false
---
# BacklogWatch
https://chrome.google.com/webstore/detail/backlog-watch/hgbfbnmhafkhigfegihpgapnmnmlfhgd

# 何するものなの
気になる課題を**ウォッチ**[^1]するとコメントがついた時にChromeのデスクトップ通知を出してくれる良い感じの奴です。

![backlog_watch.png](https://qiita-image-store.s3.amazonaws.com/0/2509/4661e59a-ee4b-d1a5-ced0-d5f689dd9fd1.png)

ウォッチの方法は各課題のブラウザウィンドウ右下にfixedで:heart:がいるのでクリックでウォッチ完了です。（通知出したい場合はAPI Keyの発行とOption設定を忘れずに）

ちなみにウォッチした課題は`chrome.storage.sync`に保存されるためGoogleアカウントで同期設定をしていれば他のPCでログインした際もウォッチは引き継げます。
他にも以下の機能もオマケ程度にあります。

- ダッシュボードにお気に入りのプロジェクトを固定表示します。
- ダッシュボードにウォッチ中の課題を固定表示します。

# 経緯
Backlogでは課題にコメントを追加する際に「コメントをお知らせしたいユーザ」という機能があって、プロジェクトに参加しているユーザを選択するとそのユーザ宛にメールが飛んできたりダッシュボードに通知アイコンが出たりするのですが、そのお知らせをするかしないかはコメントする人の手に委ねられるので「俺は監視したいのにコメントが追えない、かといってメール全チェックは馬鹿らしい…」というジレンマがありました。RedmineからBacklogに移った方はより顕著にそう感じる人もいると思います。
そして色々検討した結果、「Chromeのデスクトップ通知でコメントを飛ばせば冒頭の数行しか表示されないにしろ何となくは何の話なのか掴めるし時間指定で勝手に通知を閉じる事も出来るしうざくないし良いかも」と思いその問題を解決する一つの手段としてChromeの拡張機能で作る事にしました。
以前から[BacklogのAPI一覧](http://developer.nulab-inc.com/ja/docs/backlog/)を眺めては色々弄ってみたい想いを募らせていたので丁度良かったです。

# 技術的な事
最新のコメントの取捨選択は以下のAPIから取得しています。

- [課題情報の取得](http://developer.nulab-inc.com/ja/docs/backlog/api/2/get-issue)
- [課題コメントの取得](http://developer.nulab-inc.com/ja/docs/backlog/api/2/get-comments)

## 通知作成処理の流れ
- ウォッチした際に課題キーを`chrome.storage`に保存する
- チェック間隔(1分)毎にstorageにアクセスし課題キーから課題コメントの取得を行う

```json:取得した課題コメントのjson
[
    {
        "id": 6586,
        "content": "テスト",
        "changeLog": null,
        "createdUser": {
            "id": 1,
            "userId": "admin",
            "name": "admin",
            "roleType": 1,
            "lang": "ja",
            "mailAddress": "eguchi@nulab.example"
        },
        "created": "2013-08-05T06:15:06Z",
        "updated": "2013-08-05T06:15:06Z",
        "stars": [],
        "notifications": []
    },
    ...
]
```

- 初回取得時に一番最後に投稿されたコメントの`id`（配列では0番目に位置する）を取得しこれもstorageに保存。
- 次回チェック時にGETする際にクエリパラメータに`minId`を付与し前回取得したコメントの`id`を指定する。
    - `minId`を指定していると指定した`id`の数値以上の`id`しかオブジェクトを返さない。
    - この際に0番目のコメントの`id`が保存していた`id`と同一のものだったりするとjsonは空の配列を返す。（サーバにかかる負担少ないように感じて気持ち嬉しい:blush:）
- `id`が新しいもののコメントを`chrome.notifications`で通知を作成する。

本当はFirefoxでも使える拡張機能にしようと考えていたのですが以下のような都合上、全てChrome APIで賄ったほうが楽だなって事で断念しました。

- background pageで常に動作するのはコメントチェックの都合上、Chromeが重くなりかねないのでevent pageにした。
- event pageでは`setTimeout()`が使えないので`chrome.alarms`を使う事にした。
- それに合わせて`indexedDB`で実装していたものを途中で`chrome.storage`に切り替えた。
    - `indexedDB`はデバッグで苦労させられたのも乗り換えた理由の一つです。
- それに合わせて`Web Notifications API`ではなく`chrome.notifications`を使う事にした。
- 気付いたらChrome APIばかりになっていた（さようならFirefox）

# 他
[GitHub](https://github.com/ongaq/backlogWatch)にリポジトリがあるのでソースコードは読めますが去年の秋ぐらいからデスクトップ通知以外の部分を割と自由気ままにのんびりと作ってたのでjsによってちぐはぐな部分が多々有りますがご容赦を…:persevere:
ピッチをあげたのはnulabが[本家本元でウォッチ機能を実装](https://nulab-inc.com/ja/blog/backlog/backlog-release-2016-06-24/)しやがったからです。
コメントでウォッチ機能のAPI開発中、とあるのでもう少し待ってたら本家本元のウォッチ機能を使いつつ、もっと楽に開発出来るようになってたんでしょうね…

あとnulab側で進行中のBacklogの新UIに関する対応はダッシュボードのデザインがβより更に変わるみたいなので、それ待ちです。

少しでもBacklogのAPIを利用したChrome拡張機能を作成する助けになれば嬉しいです。
バグを見つけたり、機能要望とかあればGitHubのIssuesに頂けると喜びます！:innocent:


[^1]: 本記事で言葉にする「ウォッチ」は所謂Backlog標準で実装されているウォッチ機能ではなく、本拡張機能における課題を通知させるための総称。