🚀
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）
コマンドラインで直接操作することも可能です。
# 記事作成
npm run new -- --title "React入門" --emoji "⚛️" --topics "React,JavaScript"
# 投稿
npm run post 記事のslug
# 同期
npm run sync
2. 直感的なWeb UI
npm run web
ブラウザが自動的に開き、フォームで記事を作成できます。コマンドを覚える必要はありません！
3. リアルタイムプレビュー
# 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必須）。
# リポジトリ名: zenn-content
# Public設定で作成
2. Zennとの連携
Zennの設定画面から、作成したGitHubリポジトリを連携します。
3. ツールのインストール
# リポジトリをクローン
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トークンの設定
- Qiitaの設定画面でアクセストークンを発行
-
.envファイルに設定
echo "QIITA_TOKEN=取得したトークン" > .env
5. 初期化
npm run init
これで準備完了です！
💡 使い方の例
記事作成から投稿まで
# 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に以下のように話しかけるだけ：
- 「TypeScriptの型システムについて記事を書いて」
- 「ジェネリクスの例も追加して」
- 「両方に投稿して」
- 「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からの変更取得
など、様々なユースケースに対応しています。
🚧 今後の展望
- 画像の自動アップロード対応
- 差分比較機能
- スケジュール投稿
- 統計情報の表示
- 他のプラットフォーム対応
📝 さいごに
このツールを使えば、技術記事の管理が格段に楽になります。一度の執筆で複数プラットフォームに展開でき、より多くの人に記事を届けることができます。
ぜひ使ってみて、フィードバックをいただけると嬉しいです！
🔗 リンク
記事を書くことに集中して、配信は自動化しましょう！🚀
License: MIT
Author: @ryoshin0830
Discussion