Claude Code の開発セッションログから、Qiita 向け技術記事を半自動生成・公開する SaaS。 「Claude Code で作ったツールで、Claude Code の開発ログを Qiita 記事化する」というメタ構造のプロダクトです。
A self-hosted SaaS that turns your Claude Code development sessions into Qiita tech articles — generate, review, and publish, with a human always in the loop.
Cotton-Web 屋号で運営する自社プロダクト群の 5 本目です。AI 生成と人間レビューを必ず組み合わせる「規約セーフ」設計で、開発の記録を技術発信へつなげるハブとして自社運用しています。
| ダッシュボード | Claude Code ログ取込(v1.1) |
|---|---|
![]() |
![]() |
| 生成結果 | 下書きエディタ + Qiita 風プレビュー |
|---|---|
![]() |
![]() |
レスポンシブ対応(モバイル:ボトムナビ / エディタトグル)
| 領域 | 採用技術 |
|---|---|
| Frontend | Next.js 15 (App Router) / TypeScript / Tailwind CSS / pnpm / @uiw/react-md-editor |
| Backend | Python / FastAPI / SQLAlchemy 2.0 (async) / asyncpg / Alembic |
| 認証・暗号 | 自前 JWT(HS256・HttpOnly Cookie + Bearer 両対応)/ Fernet 暗号化 |
| DB | PostgreSQL(ローカルは docker-compose、本番は VPS 同居) |
| 外部 API | Anthropic Claude API / Qiita API v2 |
- 取込 — Claude Code のセッションログ(
~/.claude/projects/*.jsonl)や手入力テキストを記事の素材として取り込み。 - 生成 — Claude API で記事タイトル候補・タグ案・本文 Markdown を生成。
- 編集 — 左右分割の Markdown エディタ(autosave / タグ編集 / Qiita 風プレビュー)。
- Qiita 同期 — Qiita API v2 で下書き作成・更新(既定で限定共有 private)。
- 公開 — 2 段階モーダルを介して
private → publicを切り替え。取り下げも可能。
規約セーフ設計:生成物は必ず下書きとして保存され、人間が確認してから公開します(全自動投稿はしません)。
1 ユーザー前提のシングルテナント設計です(セルフサインアップは無し)。初期ユーザーは CLI で作成します。
cp .env.example .env # 必要なら値を調整
docker compose up -d # ホスト 5433 → コンテナ 5432(brew PG との衝突回避)cd backend
python3 -m venv .venv
.venv/bin/pip install -r requirements.txt
cp .env.example .env # 下記の鍵生成例を参照して JWT_SECRET / ENCRYPTION_KEY を設定
.venv/bin/alembic upgrade head # テーブル作成
.venv/bin/python scripts/create_user.py # 初期ユーザーを1人作成(対話)
.venv/bin/uvicorn app.main:app --reload --port 8100
# → http://127.0.0.1:8100/api/health (API docs: /docs).env の鍵生成例:
# JWT_SECRET
openssl rand -hex 32
# ENCRYPTION_KEY(Fernet)
.venv/bin/python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"cd frontend
pnpm install
cp .env.example .env.local
pnpm dev # http://localhost:3100本番デプロイ(VPS 同居・Nginx・systemd・PM2)の手順例は deploy/README.md を参照してください(ホスト名・IP・パスはプレースホルダです)。
開発中に踏んだ罠とその解法を、関連 Qiita 記事で詳説しています。要点のみ:
- 401/404 で情報を隠す認可 — 認可違反は「存在しない」ように振る舞い、リソースの有無を漏らさない。
UserScopedRepositoryによる認可境界の構造的強制 — アプリ層で必ずuser_idを WHERE 条件に注入し、テストで境界を検証(カバレッジ 74%)。- Fernet 暗号化 + マスク表示 — Qiita PAT / Anthropic Key は暗号化して保存し、画面にはマスクのみ返す(平文は二度と返さない)。
- Next.js standalone + リバースプロキシのリダイレクト罠 — 同一オリジン配信時のリダイレクト先が
localhostを指す問題を、Host起点の判定で解消。 - Qiita API の PATCH は full payload 必須 — 部分更新ではなくタグ・本文を含む全フィールド送信が必要。
AI コーディングエージェント(Claude Code / Codex 等)が残す開発ログを、再利用可能な技術知見として循環させる仕組みを継続検討しています。
- PR レビュー自動化 — Codex 等で初回レビュー(命名・テスト網羅・型安全性・セキュリティ)を自動実施し、メンテナー負荷を低減。
- Issue トリアージ — バグ / 機能要望 / 質問を自動分類、再現手順抽出と関連コード提示を AI 補助で実施。
- リリースワークフロー —
CHANGELOG.mdの差分自動生成、リリースノートの英日両言語化、依存パッケージのセキュリティ差分レビュー。 - セキュリティレビュー — Python / TypeScript / Rust(qiitto-desktop)の 3 言語横断で、脆弱性警告の自動トリアージ。
- 多言語ドキュメント — 英語版 README /
CONTRIBUTING.md/ API ドキュメントを AI 初稿生成で整備し、海外コントリビューター受入れ体制を整える。
OpenAI Codex for Open Source プログラムなど、OSS 持続可能性に資するパートナーシップを継続模索しています。
- シングルテナント設計:1 ユーザー前提。セルフサインアップ機能はありません(初期ユーザーは
scripts/create_user.pyで作成)。 - スナップショット公開:開発当時の commit 履歴は含まない、特定時点のスナップショットです。
- メンテナンス:Cotton-Web の自社運用に必要な範囲で実施します。Issue / PR は歓迎しますが、対応を保証するものではありません。
- 商用利用:MIT ライセンスの範囲で自由ですが、ご自身の責任でご利用ください。
- 設定値:
deploy/配下のホスト名・IP・SSH エイリアス・パス等は例示用プレースホルダです。ドメインは Cotton-Web の本番値をサンプルとして残しています。
MIT © 2026 山田 英紀 / Cotton-Web



