ZennとQiitaに同時投稿！技術記事管理ツール「Zenn-Qiita Sync」を作りました

# はじめに

技術記事を書くとき、ZennとQiitaの両方に投稿したいと思ったことはありませんか？

同じ内容を2回投稿するのは面倒だし、更新するときも両方を修正する必要があって大変ですよね。

そこで、**ZennとQiitaに同時投稿・管理できるツール「Zenn-Qiita Sync」**を作りました！

## 🎯 このツールで解決できること

- **記事の二重管理からの解放** - 一度書けば両方に投稿
- **更新作業の簡略化** - 修正も一箇所で完結
- **AI対話による執筆** - Claude Desktopと会話しながら記事作成
- **シームレスな同期** - Qiitaの変更もローカルに反映

## 🚀 主な特徴

### 1. 2つの操作方法

#### 🤖 AI経由（MCPサーバー）
Claude Desktopに話しかけるだけで記事を管理できます。

```
あなた：「ReactのカスタムHookについて記事を書いて」
Claude：「記事を作成しました！」

あなた：「両方に投稿して」
Claude：「ZennとQiitaに投稿しました！」
```

#### ⌨️ 手動操作（CLI）
コマンドラインで直接操作することも可能です。

```bash
# 記事作成
npm run new -- --title "React入門" --emoji "⚛️" --topics "React,JavaScript"

# 投稿
npm run post 記事のslug

# 同期
npm run sync
```

### 2. 直感的なWeb UI

```bash
npm run web
```

ブラウザが自動的に開き、フォームで記事を作成できます。コマンドを覚える必要はありません！

### 3. リアルタイムプレビュー

```bash
# Zennのプレビュー
npm run preview:zenn

# Qiitaのプレビュー  
npm run preview:qiita
```

投稿前に両プラットフォームでの見た目を確認できます。

## 📋 必要な環境

- Node.js v18以上
- Git
- GitHubアカウント（Zenn用）
- Zennアカウント
- Qiitaアカウント
- Claude Desktop（AI経由の場合）

## 🛠 セットアップ手順

### 1. GitHubリポジトリの作成

Zenn用のリポジトリを作成します（Public必須）。

```bash
# リポジトリ名: zenn-content
# Public設定で作成
```

### 2. Zennとの連携

Zennの設定画面から、作成したGitHubリポジトリを連携します。

### 3. ツールのインストール

```bash
# リポジトリをクローン
git clone https://github.com/あなたのユーザー名/zenn-content.git
cd zenn-content

# Zenn-Qiita Syncをクローン
git clone https://github.com/ryoshin0830/zenn-qiita-sync.git
cd zenn-qiita-sync

# 依存関係をインストール
npm install
```

### 4. Qiitaトークンの設定

1. Qiitaの設定画面でアクセストークンを発行
2. `.env`ファイルに設定

```bash
echo "QIITA_TOKEN=取得したトークン" > .env
```

### 5. 初期化

```bash
npm run init
```

これで準備完了です！

## 💡 使い方の例

### 記事作成から投稿まで

```bash
# 1. 記事作成（対話形式）
./create-article.sh

# 2. 記事編集
code articles/生成されたslug.md

# 3. プレビュー確認
npm run preview:zenn

# 4. 両方に投稿
npm run post 生成されたslug

# 5. Zennに公開（GitHubへプッシュ）
git add .
git commit -m "Add new article"
git push origin main
```

### AI経由での使用例

Claude Desktopに以下のように話しかけるだけ：

1. 「TypeScriptの型システムについて記事を書いて」
2. 「ジェネリクスの例も追加して」
3. 「両方に投稿して」
4. 「Zennに公開して」

## 🔧 技術的な仕組み

### アーキテクチャ

```
┌─────────────┐     ┌─────────────┐
│   Claude    │────▶│ MCP Server  │
└─────────────┘     └─────────────┘
                           │
                    ┌──────┴──────┐
                    ▼             ▼
              ┌─────────┐   ┌─────────┐
              │  Zenn   │   │  Qiita  │
              │   CLI   │   │   API   │
              └─────────┘   └─────────┘
```

### 主な技術スタック

- **Node.js** - ランタイム環境
- **TypeScript** - 型安全な開発
- **Zenn CLI** - Zenn記事管理
- **Qiita API** - Qiita記事操作
- **MCP (Model Context Protocol)** - Claude連携

### ファイル構成

```
zenn-content/
├── articles/          # 記事ファイル（Markdown）
├── books/            # 本（Zenn用）
├── zenn-qiita-sync/  # このツール
│   ├── src/          # ソースコード
│   ├── mcp-server/   # MCPサーバー
│   └── .env          # 環境変数
└── .git/             # Git管理
```

## 🎨 工夫したポイント

### 1. シンプルなインターフェース

技術に詳しくない方でも使えるよう、Web UIを用意しました。コマンドを覚える必要がなく、フォームに入力するだけで記事を作成できます。

### 2. エラーハンドリング

よくあるエラーに対して、分かりやすいメッセージと解決方法を表示します。

### 3. 柔軟な記事管理

- 特定の記事だけ投稿
- 全記事を一括同期
- Qiitaからの変更取得

など、様々なユースケースに対応しています。

## 🚧 今後の展望

- **画像の自動アップロード対応**
- **差分比較機能**
- **スケジュール投稿**
- **統計情報の表示**
- **他のプラットフォーム対応**

## 📝 さいごに

このツールを使えば、技術記事の管理が格段に楽になります。一度の執筆で複数プラットフォームに展開でき、より多くの人に記事を届けることができます。

ぜひ使ってみて、フィードバックをいただけると嬉しいです！

## 🔗 リンク

- [GitHub リポジトリ](https://github.com/ryoshin0830/zenn-qiita-sync)
- [Issues・要望](https://github.com/ryoshin0830/zenn-qiita-sync/issues)

記事を書くことに集中して、配信は自動化しましょう！🚀

---

**License:** MIT  
**Author:** [@ryoshin0830](https://github.com/ryoshin0830)