Claude Code ChannelsでZenn・Qiita自動クロスポストシステムを開発した話

はじめに：Claude Code Channelsとは何か

Claude Code Channelsは、Anthropicが提供するClaude Codeの新機能で、DiscordやSlackなどのチャットプラットフォームからClaude Codeを操作できる仕組みだ。ターミナルを開かなくても、スマホのDiscordアプリから「この記事をZennに投稿して」と一言送るだけで、AIエージェントがコードを書き、APIを叩き、デプロイまで完了する。

今回、この Claude Code Channels を使って「nands.techのブログ記事をZenn・Qiitaに自動展開するシステム」を開発した。この記事では、開発プロセスそのものを一次情報として共有する。

なぜZenn・Qiitaへの自動展開が必要だったのか

SEO戦略としてのマルチプラットフォーム展開

自社ブログ（nands.tech）のドメインパワーを向上させるために、外部プラットフォームからのバックリンクが有効だ。特にZennやQiitaはdofollowリンクを許可しているため、記事内からnands.techへのリンクがSEO的に効果を発揮する。

ただし、同一コンテンツをそのままコピーするとGoogleからコピーコンテンツとしてペナルティを受ける。そこで以下の戦略を採用した：

各プラットフォーム向けに大幅リライト（重複率30%以下）
canonical_urlでnands.tech元記事を原典として明示
個人アカウント（原田賢治）から投稿（法人アカウントだと自作自演リンクとしてスパム扱いされるリスクがある）
記事末尾に自然なバックリンクを配置

手動運用の限界

ブログ記事を書くたびに、Zenn用にリライト、Qiita用にリライト、それぞれフォーマットを整えて投稿する…。これを毎回手動でやるのは現実的ではない。自動化が必須だった。

Claude Code Channelsでの開発プロセス

AIキャリア相談＆実務AI活用はこちらから無料相談AIキャリア相談＆実務AI活用は
こちらから無料相談

ステップ1：Discordから開発指示

開発はDiscordのチャンネルから始まった。Claude Code ChannelsのMCPプラグインを通じて、以下のような指示を送った：

「nands.techにブログ記事を公開したら、Zenn・Qiita・noteに自動でリライト＆投稿するシステムを作って」

Claude Codeは即座に既存のコードベースを分析し、以下を把握した：

既存のX/LinkedIn/Threads投稿パイプラインの構造
Supabaseのpostsテーブルのスキーマ
Gemini画像生成のパターン
Claude APIの使い方

ステップ2：アーキテクチャ設計と並列実装

Claude Codeは3つのエージェントチームを並列で立ち上げ、同時に実装を進めた：

Team A：コアパイプライン（記事取得→リライト→投稿管理）
Team B：プラットフォーム別クライアント（Zenn/Qiita/note投稿）
Team C：サムネイル生成（プラットフォーム別画像生成）

3チームが並列で動くことで、通常なら数時間かかる実装が短時間で完了した。

ステップ3：実装されたシステム構成

最終的に以下のファイル構成が生成された：

lib/cross-post/
  ├── types.ts              # 型定義
  ├── rewriter.ts           # Claude APIリライト
  ├── zenn-publisher.ts     # Zenn GitHub連携投稿
  ├── qiita-publisher.ts    # Qiita API v2投稿
  ├── note-publisher.ts     # note API投稿
  ├── thumbnail-generator.ts # Geminiサムネイル生成
  ├── trending-thumbnails.ts # トレンド画像リサーチ
  └── pipeline.ts           # メインオーケストレーター
scripts/
  └── cross-post.ts         # CLIエントリーポイント

合計9ファイル、約1,500行のTypeScriptコード。

技術的な実装詳細

リライトエンジン（Claude API）

各プラットフォームの特性に合わせたリライトを、Claude Sonnet 4で実行する。プラットフォームごとにシステムプロンプトを切り替える：

Zenn向け：技術記事フォーマット。実装コード例を重視し、type: techで技術記事として公開。

Qiita向け：タグ重視の実践的な「やってみた」スタイル。冒頭に「この記事は自社ブログの要約版です」と明記。

note向け：読み物スタイル。専門用語を平易に、ストーリー性を重視したカジュアルな語り口。

出力形式はXMLタグ方式を採用した。当初はJSON出力を試みたが、Markdown本文内のクォートや特殊文字がJSONを壊す問題が発生。XMLタグなら本文をそのまま格納できるため、安定した解析が可能になった。

<title>記事タイトル</title>
<tags>tag1, tag2, tag3</tags>
<body>
マークダウン本文
</body>

Zenn投稿（GitHub API連携）

ZennはGitHubリポジトリと連携する仕組みを持っている。nandstech01/zenn-contentリポジトリのarticles/ディレクトリにMarkdownファイルをpushすると、Zennが自動でデプロイする。

GitHub Contents APIを使って直接ファイルを作成・コミット：

const response = await fetch(
  `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/${filePath}`,
  {
    method: 'PUT',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      message: `publish: ${article.title}`,
      content: encodedContent,
      branch: 'main',
    }),
  },
)

Qiita投稿（API v2）

Qiita API v2は非常にシンプル。POST /api/v2/itemsにタイトル・本文・タグを送るだけ。

const response = await fetch('https://qiita.com/api/v2/items', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: article.title,
    body: article.body,
    tags: tags.map((name) => ({ name })),
    private: false,
  }),
})

サムネイル生成（Gemini 3.1 Flash）

各プラットフォームに最適化されたサムネイルをGemini 3.1 Flash Image Previewで生成する。プラットフォーム別の仕様：

プラットフォーム	サイズ	スタイル
Zenn	800x800	絵文字 + タイトルカード
Qiita	1200x630	コードエディタ風OGP
note	1280x670	カジュアルバナー

5つのカラースタイル（navy-gold、dark-cyan、midnight-coral、deep-purple、dark-emerald）からランダムに選択し、ダーク背景に日本語タイトルを大きく配置する。

実際の投稿結果

開発したシステムを使って、nands.techの記事「OpenAI Codex導入の落とし穴7つと回避策」をZennとQiitaに自動投稿した結果：

Zenn

記事タイトル：「OpenAI Codex業務自動化で陥りがちな7つの罠と解決方法」

URL:https://zenn.dev/kenji_harada/articles/openai-codex-7

元記事から構成を変え、企業導入の観点から大幅にリライト。Zennの技術記事フォーマットに最適化されている。

Qiita

記事タイトル：「【実践】OpenAI Codexでワークフロー自動化失敗しないための7つのポイント」

URL:https://qiita.com/kenji_harada/items/47f35fc59da9e6324fcb

「やってみた」スタイルの実践的なトーンで、コード例を多く含むリライト。冒頭にnands.techへの参照を明記。

パイプライン実行ログ

Cross-post pipeline: slug="openai-codex7-022514", platforms=[zenn,qiita]
Article found: "OpenAI Codex導入の落とし穴7つと回避策" (10413 chars)
Rewriter: zenn rewrite complete - 6064 chars
Rewriter: qiita rewrite complete - 23777 chars
zenn thumbnail uploaded: Supabase Storage
qiita thumbnail uploaded: Supabase Storage
[OK] zenn: https://zenn.dev/kenji_harada/articles/openai-codex-7
[OK] qiita: https://qiita.com/kenji_harada/items/47f35fc59da9e6324fcb

運用フロー

完成したシステムの運用は極めてシンプルだ：

nands.techに記事を公開する（既存のブログ生成パイプライン）
DiscordでClaude Codeに指示する：「openai-codex7-022514 を Zenn Qiita に展開して」
Claude Codeが自動実行：リライト→サムネイル生成→各プラットフォームに投稿→結果をDiscordに返信

GitHub Actionsからもcross-postモードで実行可能なため、CIパイプラインに組み込むこともできる。

Claude Code Channelsを使った開発の所感

良かった点

Discord起点の開発が想像以上に快適。移動中やスマホからでも開発指示が出せる。コードの生成、テスト、デプロイまでClaude Codeが自律的に進める。

並列エージェントによる高速実装。3つのチームが同時に動くことで、依存関係のない実装が並列化される。

既存コードベースの理解が正確。Claude Codeが既存のパターン（Supabaseクライアント、Gemini画像生成、エラーハンドリング）を正確に把握し、一貫性のあるコードを生成した。

注意点

複雑なOAuth認証フローは手動が必要。Zennのアカウント作成やGitHub連携など、ブラウザでのOAuth認証が必要な部分はClaude Codeだけでは完結しない。

APIキーの漏洩に注意。開発中にドキュメントにAPIキーを書いてコミットしてしまい、Googleに自動検出されてキーが無効化された。.env.localは.gitignoreに入っていても、ドキュメント内にキーを書くとリスクがある。

まとめ

Claude Code Channelsを使えば、Discordから一言指示するだけでマルチプラットフォームの記事配信システムを構築できた。開発だけでなく、日常的な記事投稿もDiscordから実行可能だ。

自社ブログの記事を書くたびに、Zenn・Qiitaへの展開を手動で行う時代は終わった。AIエージェントに任せて、コンテンツ制作に集中しよう。

詳細な実装手順はこちら →https://nands.tech/posts/claude-code-channels-cross-post

目次