1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Next.js × Sanity】CMS管理画面はもう開かない。Difyとn8nで「記事執筆〜入稿」を完全自動化したヘッドレス運用術 🤯🤖

Posted at

はじめに

「ChatGPTでブログ記事を書いた。すごい、3分で終わった!」

...で、そのあとどうしていますか?
生成されたテキストをコピーし、CMSの管理画面を開き、タイトルをペーストし、本文をペーストし、見出しを整え、画像をアップロードし...。

「これ、執筆より入稿の方が時間かかってないか?」

私は現在、自社で外国人向け多言語メディア ibis (アイビス) を運営しています。
記事数はリリース直後で140記事以上。これを一人で、しかも手動で入稿していたら、私の指紋はなくなっていたでしょう。

本記事では、Next.js (App Router) とヘッドレスCMS Sanity を組み合わせ、Dify × n8n で「企画から入稿まで」を完全自動化したアーキテクチャを公開します。

この記事で得られる知見

  1. 🧠 Dify: 構造化データ(JSON)を出力させるプロンプト設計
  2. 🦾 n8n: Sanity APIを叩いて記事をCreate/Updateするフロー
  3. 🧱 Sanity: AIの出力を「Portable Text」に変換する泥臭い実装

1. なぜ WordPress / microCMS ではなく「Sanity」なのか?

自動化を前提とする場合、CMS選定の基準は「管理画面の使いやすさ」ではありません。「APIの柔軟性(Programmability)」 です。

私が Sanity を選んだ理由は以下の3点です。

  1. Content as Data: 記事を単なるHTMLの塊ではなく、完全に構造化されたJSON(Portable Text)として扱う思想。
  2. GROQ (Graph-Relational Object Queries): GraphQLよりも柔軟に、必要なデータを必要な形に整形して取得できるクエリ言語。
  3. Write APIの強さ: 記事の作成、更新、画像のアップロードまで、すべてがAPI経由で完結する。

特に3点目が重要です。Sanityなら、「管理画面を一度も開かずにメディアを運営する」 ことが現実的に可能です。


2. アーキテクチャ全体像

「脳」であるDifyと、「手足」であるn8nを、Sanityという「データベース」に接続します。


3. 実装の壁:Markdownを「Portable Text」に変換せよ

ここが最大のハマりポイントです。
Dify(LLM)はMarkdownを出力するのが得意ですが、SanityはMarkdownをそのまま保存することを推奨していません。Sanity独自の Portable Text というブロック形式のJSONで保存する必要があります。

❌ やりたくないこと

Difyに無理やり複雑なPortable TextのJSON構造を出力させること。(トークン消費が激しく、ハルシネーションの原因になります)

✅ 解決策:n8nのCodeノードで変換する

DifyからはシンプルなMarkdownを受け取り、n8nのJavaScript (Code Node) でパースしてSanity形式に変換します。

以下は、n8nで実際に稼働させている変換ロジックの簡易版です。

// n8n Code Node: Markdown to Portable Text (簡易版)
const markdown = items[0].json.body; // Difyからの入力
const blocks = [];

// 改行で分割してブロック化する泥臭い処理
const lines = markdown.split('\n');

for (let line of lines) {
  if (line.startsWith('## ')) {
    // H2見出し
    blocks.push({
      _type: 'block',
      style: 'h2',
      children: [{ _type: 'span', text: line.replace('## ', '') }]
    });
  } else if (line.length > 0) {
    // 通常の段落
    blocks.push({
      _type: 'block',
      style: 'normal',
      children: [{ _type: 'span', text: line }]
    });
  }
}

return { json: { blocks } };

※実際には、リスト(- )や太字(**)のパース処理も入りますが、基本思想は 「AIにはプレーンなテキストを書かせ、システム側で構造化する」 です。


4. Sanity APIへのPOST (n8n HTTP Request)

データが整ったら、Sanityの Mutations API を叩きます。

  • Method: POST
  • URL: https://<PROJECT_ID>.api.sanity.io/v2021-06-07/data/mutate/<DATASET>
  • Headers: Authorization: Bearer <SANITY_TOKEN>
// Body Example
{
  "mutations": [
    {
      "createOrReplace": {
        "_type": "post",
        "title": "Difyとn8nで自動化する方法",
        "slug": { "_type": "slug", "current": "dify-n8n-automation" },
        "body": [ ...Portable Text Blocks... ],
        "publishedAt": "2025-12-10T12:00:00Z"
      }
    }
  ]
}

これで、n8nの実行ボタンを押した瞬間(あるいはDifyが完了した瞬間)、Sanity上に記事が「公開状態」で生成されます。


5. 成果と実稼働デモ

このシステムを構築した結果、以下の成果が得られました。

  • 入稿工数: 1記事あたり20分 → 0分
  • ヒューマンエラー: コピペミス、タグ付け忘れ → ゼロ
  • 私の役割: 「ライター兼オペレーター」から 「編集長(プロンプトエンジニア)」 へシフト

🌐 実稼働ショーケース:ibis (アイビス)

この「完全自動入稿フロー」によって構築・運用されているのが、以下のメディアです。

ibis (アイビス) - 外国人向け多言語生活ガイド

ibis-prodouga-com.png

(※Next.js App Router × Sanity × Cloudflare で爆速動作中)

サイトを見ていただければわかりますが、AIが書いた記事であっても、SanityとNext.jsの組み合わせにより、目次、見出し、内部リンク、関連記事などが美しく構造化されて表示されています。


まとめ:ヘッドレスCMSは「AIの出力先」として最強である

「AIに記事を書かせる」までは多くの人がやっています。
しかし、「AIにCMSへ入稿させる」 ところまでやって初めて、業務自動化と言えます。

SanityのようなAPIファーストなヘッドレスCMSは、人間が使うためだけでなく、「AIエージェントが使いやすいデータベース」 としても非常に優秀です。

コピペ地獄から解放されたいエンジニアの皆さん、ぜひ Next.js × Sanity × n8n の構成を試してみてください。


🔗 著者情報

山本 勇志 (Yushi Yamamoto)
株式会社プロドウガ代表 / フルスタックエンジニア

「AIは育ててこそ、最強の参謀になる」。
自社メディア ibis を実験場に、AI×自動化の限界に挑戦中。

📢 開発・導入のご相談
「Sanityを導入したい」「AIによる自動入稿システムを構築したい」といったご相談を承っています。
XのDMまたはプロフィールリンクよりお気軽にご連絡ください。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?