backlog-exporterのVSCode/Cursor拡張機能を作ってみた【Backlog×AI検索】
はじめに
今回の記事では、戸田さんが作ったCLIツール「backlog-exporter」をVS Code / Cursorの拡張機能にしてみたので紹介します。作った拡張機能はVS Code / Cursorのマーケットプレイスで配布してみました！
CLIツール「backlog-exporter」紹介記事
backlog-exporterとは
Backlogのデータ(課題・Wiki・ドキュメント)をローカルに保存するためのツールです。
保存したデータは、Copilot や Cursor などの AI ツールから参照して、コンテキストとして活用できます。ワークスペース内に、ソースコードも合わせて配置すると、Backlog関連情報とコードを同一のコンテキストで扱うこともできます
今回CLIツールを拡張機能にすることで、
- CLIを普段あまり使わない人
- 久しぶりでコマンドを忘れた人
- CLIコマンドのキャッチアップが手間
といった人たちでもUI操作で簡単に利用できるようにしました。
インストール方法
Cursor / VSCodeのマーケットプレイスで「backlog exporter」と検索すると出てきます。
Cursor/VSCodeをインストール済みの環境であれば以下のリンクからも開けます。
機能
機能としては基本的にCLIツールと同じです。
- Export All — 課題・Wiki・ドキュメントを一括エクスポート
- Export Issues — 課題のみエクスポート
- Export Wiki — Wiki ページをエクスポート
- Export Documents — ドキュメントをエクスポート
- Update — 回エクスポート以降の差分のみ更新
入力設定
CLIツールの紹介記事でも書かれていますが、エクスポートには３つの情報(ドメイン、プロジェクトキー、APIキー)が必要です。
Backlogのドメイン、プロジェクトキーは、プロジェクトページのURLから取得します
https://example.backlog.jp/projects/PROJECT1
- ドメイン:
example.backlog.jp - プロジェクトキー:
PROJECT1
APIキーは以下の画像のような操作で取得します。
UpdateではAPIキーのみ必須です。出力ディレクトリ配下に複数のBacklogプロジェクトがあっても一括で更新できます。CLI でエクスポート済みの人も、出力先が一致すればAPIキーのみで差分更新できます。
拡張機能の開発
ここからは開発時の話について書きます。
今回作ったリポジトリです。
実装
Claude Codeにバイブコーディングしてもらってから、一通りコードレビューとリファクタリングをしました。
https://www.npmjs.com/package/backlog-exporter
こちらのツールをcursorの拡張機能にしたいです。node.js製なのですが実装可能でしょうか？
UI実装
UI実装をclaudeにお願いすると、以下のように実装イメージをテキストで表現してくれました。拡張機能のUIはHTML/CSSで実装できるので簡単です。
┌─────────────────────────────┐
│ 設定 │
│ Domain yourspace.backlog.jp ✎ ← クリックで変更
│ Project MY_PROJECT ✎ ← クリックで変更
│ API Key •••••••• ✎ ← クリックで変更
├─────────────────────────────┤
│ エクスポート │
│ [⬇ Export All ...] │ ← メインボタン（青）
│ [📋 Export Issues ] │
│ [📖 Export Wiki ] │
│ [📄 Export Documents] │
├─────────────────────────────┤
│ 更新 │
│ [🔄 Update ] │
├─────────────────────────────┤
│ 状態 │
│ ● 実行中... ファイルを保存 ログ│ ← リアルタイム進捗
└─────────────────────────────┘
デバッグしながら、必要な機能を追加実装してもらいました。
- エラー時はダイアログ表示
- 出力先の設定項目追加、相対/絶対パス対応
- UI操作で実行されたCLIコマンドをログ出力
- APIキーの表示/非表示、コピーボタンの追加
アイコン画像
実装の過程で、拡張機能のアイコン画像(.svg)もclaude codeが勝手に生成してくれました。特に指示を出さずとも作ってくれたので賢いなあって思いました
UI上のボタンアイコンについては実装当初、AIらしく絵文字が使われていました。claudeに相談すると、vscodeには公式アイコンフォントがあるらしく、そちらを使ってもらいました。
リファクタ
コードを見て気になった点を修正しました。特に気になったのは以下です。
-
バンドルサイズ
配布用にバンドルしてみると、一般的な拡張機能のサイズと比較して当初は10倍くらいファイルサイズ大きかったです。原因は拡張機能のバンドルに、CLI版のbacklog-exporterの依存ライブラリが丸ごと含まれていたことでした。
拡張機能ではCLI版のbacklog-exporterを内部的に利用しています。backlog-exporterの依存ライブラリ(node_modules)ではnpm, yarnに間接的に依存しています。しかし拡張機能では利用しないので.vscodeignoreを作成して除外しました。すると9割近くファイルサイズを減らせました。 -
フロントの実装
typescriptの中にHTML/CSS/JSが文字列として埋め込まれていました。可読性が悪い状態になっていたので、html/js/cssファイルとして切り出しました。
公開
-
Visual Studio Code Marketplace
VSCodeの拡張機能を配布は、こちらのサイトから出来ます。
https://marketplace.visualstudio.com/vscode
サイトにログインし、Publisherを作成します。配布者の名前やIDを登録し、package.jsonのpublisherフィールドに同じIDを記載します。拡張機能はパッケージ化するとvsixというファイルが作成されます。そのファイルをブラウザ操作でアップロードすれば公開完了です。 -
Open VSX Registry
Cursorの拡張機能を公開するには、Open VSX Registryというマーケットプレイスで公開します。(利用規約上、CursorはVisual Studio Code Marketplaceを利用できず、代替マーケットプレイスを使っている)
https://open-vsx.org/
Open VSXはEclipse Foundationが管理しています。公式がwikiに拡張機能の配布手順をまとめています。
- eclipse.org でアカウントを登録
- open-vsx.org に GitHub アカウントでログインし、利用規約に同意
- 公開用のトークンを発行
- ネームスペース作成 — npx ovsx create-namespace <name> -p <token> で作成
- open-vsxのリポジトリに Issue を作成してネームスペース所有権を申請
- vsixをアップロードして公開
大まかにはこのような手順でした。VSCodeでの配布に比べると登録するサイトが多かったり、issue作成もあって少し手間でした。配布直後、open vsxのサイト上で「backlog」で検索すると、すぐに自分の拡張機能が出てきましたが、その時点ではCursor上での検索では表示されませんでした。一晩くらい経過すると、Cursorの検索欄にも表示されました
感想
ストアで自分の作ったツールが表示されると結構達成感があります。インストール数がたまに伸びるのも眺めていて嬉しいです。でももしかしてbotやクローラで数が増えてたりするのかな、とか考えちゃいます。自分は普段業務でbacklogの会話内容をコンテキストにAIに回答してもらうことはよくあります。Cursorは案件のドメイン知識についてもよく把握してくれて便利なので、良ければ使ってみて下さい！
