WSLで動作するBacklog課題登録ツールを作ってみた
1. はじめに
開発や業務の中で思いついた課題やアイデアを、Backlogに登録することがよくあります。しかし、ChatGPTでアイデアを思いついた際に、そのままBacklogに登録できない点が課題でした。
そのため、ChatGPTで思いついた課題を簡単にBacklogに登録するツールを作成しました。このツールでは、まずChatGPTに課題のタイトルと内容を入力してもらい、それを元にJSONファイルを作成します。その後、このJSONファイルをドラッグ＆ドロップでBacklogに課題登録するという流れです。
この記事の内容はChatGPTと会話しながら作ったもので、文書もほとんどChatGPTに書いてもらっています。
ツール作成前の流れ：
- ChatGPTで課題タイトルと内容を思いつく
- タイトルと内容をコピペしてそのままBacklogに登録
ツール作成後の便利になった流れ：
- ChatGPTで課題タイトルと内容を思いつく
- ChatGPTが提供する内容を元に、ツールにドラッグ＆ドロップするだけでBacklogに課題が登録される
- 手動で登録する手間が省け、ワンクリックで課題登録が完了
2. 構成と使用する技術
- Node.js：バックエンド（Webhookサーバ）として使用
- Express：HTTPサーバを簡単に立ち上げるために使用
- axios：Backlog APIにリクエストを送るためのライブラリ
- HTML + JavaScript：課題を登録するためのフロントエンド
- CORS：フロントエンドとバックエンドが異なるオリジンにあるため、CORSの設定が必要
3. セットアップ手順
3.1 必要なもの
- Node.js（バージョン16以上推奨）
- npm
- WSL2環境（Windowsユーザー向け）
3.2 WSLでの環境構築
-
Node.jsのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install --lts -
必要なパッケージのインストール
npm install axios express dotenv cors
3.3 サーバの立ち上げ
-
静的ファイル用HTTPサーバ
http-server . -p 8080 -
Webhookサーバ
npm start
これで、バックエンドとフロントエンド両方のサーバが起動し、http://localhost:8080 でフロントエンドが動作します。
3.4 バッチでサーバを同時に起動
#!/bin/bash
# サーバ1: HTTPサーバ（静的ファイルを配信）
echo "Starting static file server..."
http-server ~/backlog_submit_tool_with_drag -p 8080 &
# サーバ2: Webhookサーバ（課題登録用）
echo "Starting Backlog Webhook server..."
npm start &
# 同時に両方のサーバがバックグラウンドで立ち上がります
wait
このスクリプトを使うことで、1発で2つのサーバを同時に立ち上げることができます。
4. WSL特有の注意点
- WSL2でポートを開放する方法：特に問題なくローカルホストのポートを使用できますが、ファイアウォールやネットワーク設定に注意してください。
- パフォーマンス向上：WSL2はファイルシステムのパフォーマンスが向上しており、Node.jsの動作も快適です。
5. フロントエンド：ドラッグアンドドロップで課題登録
- HTMLとJavaScriptを使って、JSONファイルをドラッグ＆ドロップで読み込むことができます。
- 読み込まれたJSONデータを、バックエンドサーバ（Webhookサーバ）にPOSTすることでBacklogに課題が登録されます。
6. ローカル展開方法
静的ファイルサーバを立ち上げて、ローカルで試す方法として、以下の手順でHTTPサーバを配信することができます。
6.1 静的HTTPサーバのセットアップ
-
http-serverパッケージのインストールnpm install -g http-server -
静的ファイル用サーバを起動
ダウンロードしたファイルが入っているディレクトリに移動し、サーバを起動します。
cd ~/backlog_submit_tool_with_drag # 実際のパスに変更 http-server . -p 8080 -
ブラウザでアクセス
http://localhost:8080にアクセスすれば、ツールを試せます！
7. 今後の展望
- OAuth2認証：Backlog APIにおける認証方法をOAuth2に変更し、よりセキュアにしたい。
- 拡張機能：課題の優先度や担当者を追加で設定できるようにする。
8. まとめ
このツールを使えば、手軽にBacklogに課題を登録することができ、チームの作業効率が向上します。また、WSLで動作するため、Windows環境でも簡単に動かすことができ、便利です。
サンプルコード
以下のサンプルコードをZIPファイルとして提供します。このファイルには、Backlog課題登録ツールのフロントエンドとバックエンドが含まれています。
-
index.html：ドラッグ＆ドロップで課題を登録するためのHTML -
script.js：バックエンドに課題をPOSTするためのJavaScript -
server.js：Backlogへの課題登録を行うNode.jsサーバ -
.env：BacklogのAPIキーやプロジェクトID、課題種別IDなどの設定ファイル
これらのコードをダウンロードして、すぐにお試しいただけます。
ダウンロードリンク：
ZIPに含まれるファイル
-
index.html：課題登録ツールのフロントエンド -
script.js：ドラッグ＆ドロップ機能とバックエンド通信のロジック -
server.js：Backlogへの課題登録を行うNode.jsサーバ -
.env：BacklogのAPIキーや設定用の環境変数ファイル