🤖

ZennとGitHub連携でAI駆動開発の記事を楽に公開する方法

に公開
AI
GitHub
Zenn
Claude Code
tech

Claude Codeと対話しながらZenn記事を効率的に公開するワークフローを構築しました。

私は普段、AI駆動開発をiPhoneからTailscaleを使ってSSHでMacに接続して行うことが多いため、状況の見通しが悪いことから、mdファイルにドキュメントを起こしてもらってそれをzennにプッシュしはじめました。自分のためと、どなたかにも役立つかな？という二段構成です。

zennはGithub連携があり、リポジトリにプッシュすると自動的に記事化してくれるので便利です。

この記事も基本をClaude Codeが書いて、人間が加筆修正しています。

やりたかったこと

  • 技術的な問題解決の過程をAIと対話しながら記事化
  • 大袈裟なタイトルは避けて、個人メモ的に気軽に公開
  • GitHubにpushするだけで自動公開

構築したワークフロー

1. Zenn用GitHubリポジトリ作成

# publicリポジトリとして作成（例: zenn-push）
git clone https://github.com/YOUR_USERNAME/zenn-push.git
cd zenn-push
npm init --yes
npm install zenn-cli
npx zenn init

2. Zennとの連携

  1. https://zenn.dev/dashboard にアクセス
  2. 「GitHub連携」から作成したリポジトリを選択
  3. 連携完了

3. 記事作成の流れ

AI（Claude Code）側の作業

# プロジェクト内に記事用ディレクトリを作成
mkdir zenn-articles

# 記事を作成
# ここは毎回Claude Codeに実行してもらってます。

cat > zenn-articles/article-name.md << 'EOF'
---
title: "記事タイトル"
emoji: "📝"
type: "tech"
topics: ["topic1", "topic2"]
published: false
---

記事内容...
EOF

人間側の要望

「大袈裟なタイトルは避けて、開発メモ的にして」
「最新の記事を自動でpushできるようにして」

自動化スクリプト（AI作成）

#!/bin/bash
# scripts/push-latest-to-zenn.sh

ZENN_ARTICLES_DIR="$(pwd)/zenn-articles"
ZENN_REPO="$HOME/Documents/zenn-push"

# 最新のmarkdownファイルを取得
LATEST_FILE=$(ls -t "$ZENN_ARTICLES_DIR"/*.md 2>/dev/null | head -1)

if [ -z "$LATEST_FILE" ]; then
    echo "❌ No markdown files found"
    exit 1
fi

FILENAME=$(basename "$LATEST_FILE")
echo "📝 Found: $FILENAME"

# コピーしてpush
cp "$LATEST_FILE" "$ZENN_REPO/articles/"
cd "$ZENN_REPO"
git add "articles/$FILENAME"
git commit -m "Add/Update: $FILENAME"
git push origin main

echo "🚀 Pushed to GitHub!"

実際の運用例

1. 問題発生

「TailscaleでiPhoneからローカル環境に繋がらない」

2. AIと対話しながら解決

人間: データ表示されません
AI: CORSエラーの可能性があります。確認しましょう
人間: 403エラーが出ます
AI: cors_header.phpを修正します

3. 解決後、記事化

人間: この内容を記事にまとめて
AI: 記事を作成しました
人間: もっとカジュアルなトーンで
AI: 修正しました

4. 公開

# 人間が実行
./scripts/push-latest-to-zenn.sh

ポイント

AIとの効果的な対話

  • 「完全ガイド」→「〜した時のメモ」のような控えめな表現を指示
  • セキュリティ的な問題点の指摘（例：TODOで本番対応は危険）
  • 実用的な自動化の要望（最新ファイルの自動検出など）

ディレクトリ構成

project/
├── zenn-articles/        # AI作成の記事置き場
├── scripts/
│   └── push-latest-to-zenn.sh
└── （プロジェクトファイル）

~/Documents/zenn-push/    # Zenn連携リポジトリ
├── articles/
└── books/

記事スタイル

# 控えめなタイトル例
title: "〜でハマった時のメモ"
title: "〜を試してみた"
title: "〜の対処法"

メリット

  • AIが技術的な内容を整理してくれる
  • 人間は方向性の指示と最終確認のみ
  • 問題解決と同時に記事が完成
  • pushコマンド一つで公開

注意点

  • セキュリティ情報（IP、APIキーなど）はAIが自動でマスク
  • 本番環境の設定はAIが環境変数化を提案
  • 記事の最終確認は人間が行う

まとめ

AI駆動開発で問題解決しながら、その過程を記事化。気軽に技術メモを公開できる環境ができた。

この記事作成にかかった時間：AIとの対話含めて約5分

Discussion