WSLで動作するBacklog課題登録ツールを作ってみた


# WSLで動作するBacklog課題登録ツールを作ってみた

## 1. はじめに

開発や業務の中で思いついた課題やアイデアを、**Backlog**に登録することがよくあります。しかし、**ChatGPT**でアイデアを思いついた際に、**そのままBacklogに登録**できない点が課題でした。

そのため、**ChatGPTで思いついた課題を簡単にBacklogに登録する**ツールを作成しました。このツールでは、まず**ChatGPT**に課題のタイトルと内容を入力してもらい、それを元に**JSONファイルを作成**します。その後、このJSONファイルを**ドラッグ＆ドロップでBacklogに課題登録**するという流れです。

この記事の内容はChatGPTと会話しながら作ったもので、文書もほとんどChatGPTに書いてもらっています。

### ツール作成前の流れ：
1. ChatGPTで課題タイトルと内容を思いつく
2. タイトルと内容を**コピペして**そのままBacklogに登録

### ツール作成後の便利になった流れ：
1. ChatGPTで課題タイトルと内容を思いつく
2. ChatGPTが提供する内容を元に、**ツールにドラッグ＆ドロップするだけ**でBacklogに課題が登録される
3. **手動で登録する手間が省け**、ワンクリックで課題登録が完了

---

## 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での環境構築

1. **Node.jsのインストール**

   ```bash
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
   source ~/.bashrc
   nvm install --lts
   ```

2. **必要なパッケージのインストール**

   ```bash
   npm install axios express dotenv cors
   ```

### 3.3 サーバの立ち上げ

- **静的ファイル用HTTPサーバ**

   ```bash
   http-server . -p 8080
   ```

- **Webhookサーバ**

   ```bash
   npm start
   ```

これで、バックエンドとフロントエンド両方のサーバが起動し、**`http://localhost:8080`** でフロントエンドが動作します。

### 3.4 バッチでサーバを同時に起動

```bash
#!/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サーバのセットアップ

1. **`http-server` パッケージのインストール**

   ```bash
   npm install -g http-server
   ```

2. **静的ファイル用サーバを起動**

   ダウンロードしたファイルが入っているディレクトリに移動し、サーバを起動します。

   ```bash
   cd ~/backlog_submit_tool_with_drag  # 実際のパスに変更
   http-server . -p 8080
   ```

3. **ブラウザでアクセス**

   `http://localhost:8080` にアクセスすれば、ツールを試せます！

---

## 7. 今後の展望

- **OAuth2認証**：Backlog APIにおける認証方法をOAuth2に変更し、よりセキュアにしたい。
- **拡張機能**：課題の優先度や担当者を追加で設定できるようにする。

---

## 8. まとめ

このツールを使えば、**手軽にBacklogに課題を登録**することができ、チームの作業効率が向上します。また、WSLで動作するため、Windows環境でも簡単に動かすことができ、便利です。

---

# サンプルコード

以下のサンプルコードをZIPファイルとして提供します。このファイルには、**Backlog課題登録ツール**のフロントエンドとバックエンドが含まれています。

1. **`index.html`**：ドラッグ＆ドロップで課題を登録するためのHTML
2. **`script.js`**：バックエンドに課題をPOSTするためのJavaScript
3. **`server.js`**：Backlogへの課題登録を行うNode.jsサーバ
4. **`.env`**：BacklogのAPIキーやプロジェクトID、課題種別IDなどの設定ファイル

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

### ダウンロードリンク：
- 📥 [Backlog課題登録ツール（ZIP）をダウンロード](https://github.com/misawa-cobo/backlog-register-tool/raw/main/backlog_submit_tool_with_drag.zip
)

---

## ZIPに含まれるファイル

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