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などの設定ファイル

これらのコードをダウンロードして、すぐにお試しいただけます。

ダウンロードリンク：

📥 Backlog課題登録ツール（ZIP）をダウンロード

ZIPに含まれるファイル

index.html：課題登録ツールのフロントエンド
script.js：ドラッグ＆ドロップ機能とバックエンド通信のロジック
server.js：Backlogへの課題登録を行うNode.jsサーバ
.env：BacklogのAPIキーや設定用の環境変数ファイル