Core Media Lab記事一覧
開発・インフラ

【実践】n8n × microCMSをWebhook連携！記事公開からSNS告知文のAI生成・通知まで完全自動化する手順

【実践】n8n × microCMSをWebhook連携！記事公開からSNS告知文のAI生成・通知まで完全自動化する手順

ブログやWebメディアの運営において、記事を書き上げてCMSで「公開」ボタンを押したあとに待っているのが、「SNS（Xなど）用の告知文の作成」「公開記事管理シートへのURL・タイトルの転記」「インデックス登録やチームへの共有」といった細かなルーティン作業です。

1記事あたりは10分〜15分の作業でも、記事本数が20本、30本と増えるにつれて大きな負担になり、「記事を書くだけで疲れてしまい、SNSでの告知や管理シートの更新をついサボってしまう…」という悩みは個人メディア運営者によくある課題です。

この「記事公開後の雑務」をすべてゼロにしてくれるのが、ヘッドレスCMS「microCMS」のWebhook機能と、オープンソースのワークフロー自動化ツール「n8n（エヌエイトエヌ）」を組み合わせたイベント駆動型の自動化パイプラインです。

本記事では、microCMSで記事を公開した瞬間にn8nがデータを自動検知し、記事本文からAIがSNS告知文（3パターン）を自動生成してGoogleスプレッドシートへ保存・チャット通知するまでの全手順を、コピペで使えるコード付きで徹底解説します。

なぜ「microCMS × n8n」なのか？記事公開後のルーティン作業をゼロにする3つのメリット

WordPressのプラグインや商用の自動化ツール（Zapier / Make）ではなく、「microCMS × 自前VPS上のn8n」で公開後ワークフローを組むことには、コストと柔軟性の両面で大きなメリットがあります。

1. microCMS標準の「カスタムWebhook」で、公開の瞬間（0秒）に外部処理をキックできる

microCMSは最初からAPI連携を前提に設計されたヘッドレスCMSであるため、管理画面の「Webhook設定」にn8nのURLを登録するだけで、「記事が新規公開されたとき」「下書きから公開に切り替わったとき」などの細かいトリガー条件で、記事タイトル・slug・本文HTML・カテゴリ情報を含むJSONデータを外部へ即時送信できます。

2. Zapierの無料枠（月100タスク・2ステップ制限）を気にせず、複雑なAI処理や分岐を無制限に回せる

Zapierの無料プランでは「トリガー＋アクション1つ（2ステップ）」しか組めないため、「Webhook受信 ➔ HTMLタグの除去整形 ➔ AIでSNS投稿文を生成 ➔ スプレッドシートに記録 ➔ Discord/Slackへ通知」といった5ステップ以上の実用的なフローを作ると、すぐに有料プラン（月額約3,000円〜）への課金が必要になります。

一方、格安VPSにDockerで構築した自前のn8nであれば、どれだけノード（処理ステップ）を繋いでも、何百回テスト実行してもツール利用料は完全無料（0円）です。

💡 まだ自前のn8n環境やmicroCMSを用意していない方はこちら：
・【脱Zapier】n8nを格安VPSにDocker構築する完全手順！タスク無制限のAPI自動化基盤を作る
・microCMSで脱WordPress！個人メディアをAPI・自動化で省力化するメリットと導入ステップ

3. JavaScript（Codeノード）を挟めるため、長いHTML本文のクレンジングが自由自在

microCMSのリッチエディタから送られてくる本文データには、<h2> や <p>、<table> などのHTMLタグが大量に含まれています。これをそのままLLM（AI）に投げると、不要なタグにトークン（API費用）を消費してしまいます。

n8nなら標準の「Codeノード」を1つ挟むだけで、数行のJavaScriptによってHTMLタグを綺麗に除去し、「純粋なテキスト（冒頭3,000文字など）」だけに圧縮してからAIへ渡す処理が簡単に実装できます。

【全体像】今回作る「記事公開 ➔ AI告知文生成 ➔ シート記録＆通知」の自動化フローと注意点

ハンズオンに入る前に、今回n8n上で構築するワークフローの全体像（全4ノード構成）と、SNS運用における重要な注意点を整理しておきます。

ステップ 使用するn8nノード 処理内容
STEP 1 Webhook ノード microCMSからの記事公開通知（POSTリクエスト）を待ち受け、記事データを取得する
STEP 2 Code ノード（JS） 複雑なJSON階層からタイトル・slug・本文を取り出し、HTMLタグを除去して記事URLを組み立てる
STEP 3 HTTP Request / AI ノード OpenAI（または自前Dify API）を呼び出し、X（旧Twitter）用の告知文を3パターン（要約型・共感型・箇条書き型）生成する
STEP 4 Google Sheets / Discord ノード 生成された告知文3案と公開URLをスプレッドシートへ自動追記し、スマホ（Discord/Slack）へ完了通知を送る

⚠️ なぜX（旧Twitter）へAPIで直接自動投稿せず「シート保存＆通知」にするのか？

n8nにはX（Twitter）ノードも用意されていますが、現在のSNS運用において「API経由でURL付きのポストを完全無人で自動投稿する構成」は以下の2つの理由から推奨しません。

  1. スパム判定・アカウント凍結リスクの回避： 自動化ツールから定型的なURL付きポストを繰り返すと、X側のアルゴリズムによってシャドウバン（検索除外）や凍結の対象になりやすくなります。
  2. インプレッション最大化（リプライ欄へのURL配置）： 現在のXでは、1投稿目（親ポスト）の本文内に外部リンク（ブログURL）を入れると表示回数が大きく制限される傾向があります。「1投稿目はテキスト＋アイキャッチ画像のみで興味を惹き、記事URLはリプライ欄（2投稿目）にぶら下げる」または「数日おきに切り口を変えて3回告知する」のが最も流入を稼げる運用法です。

そのため、n8n側では「記事公開と同時に、切り口の異なる3パターンの告知文とURLをスプレッドシート（およびスマホ通知）へ自動で用意するところまで」を完全自動化し、投稿自体はスマホに届いたテキストをコピペ（または公式の予約投稿にセット）する「半自動スタイル」が、安全性・集客効果ともに最強のベストプラクティスとなります。

【STEP 1〜2】n8nのWebhookノードを立ち上げ、microCMSの管理画面と接続する手順

それでは実際にn8nのキャンバスを開き、microCMSからの公開通知を受け取るトリガー部分から構築していきましょう。

STEP 1：n8n側で「Webhook」ノードを作成し、Header Auth（認証）を設定する

  1. n8nのダッシュボードで「Add workflow」をクリックし、最初のトリガーとして「Webhook」ノードを選択します。
  2. Webhookノードの設定画面が開いたら、以下の通りに設定します。
    • HTTP Method： POST に変更します（microCMSからのデータはPOST形式で送られてくるため必須です）。
    • Path： microcms-publish など分かりやすいパス名を入力します。
    • Authentication： Header Auth を選択し、「Create New Credential」から Name: X-MICROCMS-Secret、Value: 任意の推測されにくいパスワード文字列 を登録します（万が一WebhookのURLが外部に知られても、この秘密ヘッダーが一致しない限り不正実行されないためのセキュリティ対策です）。
  3. 画面上部の「Webhook URLs」にある「Test URL」をコピーし、下部の「Listen for test event」ボタンをクリックして待機状態にします。

STEP 2：microCMSの「Webhook設定」にURLを登録してテスト送信する

n8nを待機状態にしたまま、別タブでmicroCMSの管理画面を開きます。

  1. 対象の記事API（例：blogs）を開き、右上メニューの「API設定」➔「Webhook」をクリックします。
  2. 「追加」ボタンを押してサービス一覧から一番下の「カスタム通知」を選択します。
  3. 以下の項目を入力します。
    • 識別名： n8n_SNS告知文自動生成（任意）
    • URL： 先ほどn8nでコピーした「Test URL（https://あなたのn8nドメイン/webhook-test/microcms-publish）」を貼り付けます。
    • カスタムヘッダー： STEP 1で決めたヘッダー名（X-MICROCMS-Secret）とパスワード文字列を設定します。
    • 通知のタイミング（トリガー）： 「コンテンツの公開（新規作成時・更新時）」のみにチェックを入れます（※「下書き保存」などのチェックは外しておきます）。
  4. 設定を保存したら、microCMS上で既存の記事（またはテスト記事）を1本開いて「更新（公開）」ボタンを押します。
  5. n8nの画面に戻り、右側のOUTPUTパネルにmicroCMSからのJSONデータが表示されていれば接続成功です！
⚠️ 本番稼働時（ワークフロー完成後）のURL切り替え忘れに注意！
n8nのWebhookにはテスト用の /webhook-test/ と、本番常時稼働用の /webhook/（Production URL）の2種類があります。
最後までワークフローを作り終えてn8n右上のスイッチを「Active（有効）」に切り替えたら、必ずmicroCMS側のWebhook設定URLから -test を消した「Production URL」へ書き換えて保存してください。

【STEP 3〜4】コピペで動く！HTMLタグ除去・AI告知文生成・シート自動記録の実装レシピ

Webhookで受け取った生データは階層が深く、本文にHTMLタグが含まれているため、後続のノードで綺麗に整形してからAIとスプレッドシートへ渡します。

STEP 3：Codeノード（JavaScript）でmicroCMSのJSONから本文を抽出し、HTMLタグを除去する

Webhookノードの右側の「＋」ボタンから「Code」ノードを追加し、以下のJavaScriptコードをそのままコピー＆ペーストしてください。

このコードは、microCMS特有の階層（body.contents.new.publishValue）から記事情報を安全に取り出し、HTMLタグの除去と文字数カット（冒頭3,000文字）を一気に行います。

// microCMSのWebhookペイロードから公開データを取得
const payload = $input.first().json.body;
const publishData = payload?.contents?.new?.publishValue || {};

// 1. タイトル・slug・本文HTMLの抽出（※フィールド名は自分のスキーマに合わせて調整）
const title = publishData.title || 'タイトル未取得';
const slug = publishData.slug || payload?.id || '';
const rawHtml = publishData.content || publishData.body || '';

// 2. 公開記事の本番URLを組み立てる（※自分のサイトドメインに変更してください）
const siteDomain = 'https://coremedialab.com';
const articleUrl = `${siteDomain}/blog/${slug}`;

// 3. 本文からHTMLタグと余分な改行・空白を除去してプレーンテキスト化
const plainText = rawHtml
  .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
  .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
  .replace(/<[^>]+>/g, ' ')
  .replace(/&nbsp;/g, ' ')
  .replace(/&lt;/g, '<')
  .replace(/&gt;/g, '>')
  .replace(/&amp;/g, '&')
  .replace(/\s+/g, ' ')
  .trim();

// 4. AIのトークン節約のため冒頭3,000文字に制限して出力
return [
  {
    json: {
      title: title,
      slug: slug,
      articleUrl: articleUrl,
      summaryText: plainText.slice(0, 3000),
      publishedAt: publishData.publishedAt || new Date().toISOString()
    }
  }
];

「Test step」をクリックすると、綺麗なプレーンテキスト（summaryText）と公開URL（articleUrl）が生成されているのが確認できます。

STEP 4：AI（OpenAI / Dify）でSNS告知文3パターンを生成し、スプレッドシート＆Discordへ出力する

続いて、整形したテキストをAIに渡してX（旧Twitter）用の告知ポストを3パターン作らせます。n8nの「OpenAI（Message a model）」ノード（または自前DifyのAPIを叩く「HTTP Request」ノード）を繋ぎ、プロンプトに以下を設定します。

以下のブログ記事の内容をもとに、X（旧Twitter）で読者が思わずクリックしたくなる告知ポストを3パターン作成してください。

【制約事項】
・各パターンは日本語で110〜130文字程度（ハッシュタグ2個を含む）に収めること。
・記事URLはリプライ欄に別途貼る運用のため、本文内にはURLを含めないこと。
・出力は必ず以下のJSON形式のみで返すこと（Markdownのコードブロック記号は不要）。
{"post1": "パターン1の本文", "post2": "パターン2の本文", "post3": "パターン3の本文"}

【3パターンの切り口】
・post1（結論・メリット直球型）：この記事で何が解決・自動化できるかを端的に提示
・post2（悩み共感・課題解決型）：「〇〇で消耗していませんか？」という読者の悩みから入る構成
・post3（箇条書き・ノウハウ要約型）：記事の重要ポイントを「・」の箇条書き3点でまとめる構成

【記事タイトル】
{{ $json.title }}

【記事本文（抜粋）】
{{ $json.summaryText }}

OpenAIノードのオプションで「Output Content as JSON（JSON形式で出力）」をONにしておけば、AIの回答から post1、post2、post3 を個別のデータとしてそのまま次のノードへ渡せます。

最後に「Google Sheets」ノードと「Discord（またはSlack）」ノードを繋ぐ

  1. Google Sheetsノード（Operation: Append Row）：
    スプレッドシートの列に「公開日時」「タイトル」「記事URL」「告知文①（結論型）」「告知文②（共感型）」「告知文③（箇条書き型）」を用意し、ドラッグ＆ドロップで各変数をマッピングします。
  2. Discord / Slackノード：
    自分専用の通知チャンネルにWebhookで 🎉 新規記事「{{ $('Code').item.json.title }}」が公開され、SNS告知文3パターンの生成が完了しました！ とともに告知文とURLを送信させます。

これで、microCMS上で「公開」ボタンを押してからわずか数秒後に、スマホのDiscordへ「完成した3パターンのX告知文」と「記事URL」がポンと届くようになります。あとはスマホ上でテキストをコピーし、アイキャッチ画像を添えてXへ投稿（または予約設定）するだけでSNS運用が完了します。

💡 あわせて読みたい（スプレッドシート連携＆Dify活用ガイド）：
・【脱コマンド】GoogleスプレッドシートからmicroCMSへワンクリック自動入稿する完全手順（GASコード付き）
・【コピペで動く】DifyのAPIをGASから叩いてスプレッドシート上でAI自動化する完全手順！

まとめ：CMSとn8nを繋いで「コンテンツ制作」だけに集中できる環境を作ろう

本記事では、microCMSのカスタムWebhookと自前VPS上のn8nを連携させ、記事公開後のSNS告知文作成やシート記録を完全自動化する手順を解説しました。

  • Webhook × Header Authで安全・即時に連携： microCMSの「コンテンツ公開時」だけをトリガーにし、秘密ヘッダーで安全にn8nを起動できる。
  • CodeノードでHTMLタグを綺麗に除去： JavaScriptを1ステップ挟むことで、リッチエディタのHTMLから純粋な本文テキストだけを抽出してAIの精度とコスパを高められる。
  • 凍結リスクゼロの「半自動SNS運用」： 切り口の異なる3パターンの告知文とURLをシートとスマホへ即時配信することで、アカウントの安全性を守りながら最小限の手間でSNS集客を最大化できる。

「スプレッドシートからmicroCMSへの自動入稿（GAS）」と、今回の「microCMS公開後のn8n自動ワークフロー」を組み合わせれば、個人メディアの運営効率は劇的に向上します。まだ自前の自動化サーバー（VPS）をお持ちでない方は、以下の比較記事を参考に月額1,000円以下の自動化基盤を立ち上げてみてください。

🚀 【2026年最新】n8n・AI自動化におすすめの国内VPS 3選を比較する
← トップページへ戻る