0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

microCMS MCP × Github Actions × Gemini サムネイル画像から記事の内容まで全自動投稿した話

Last updated at Posted at 2025-12-14

はじめに

個人開発や小規模チームでプロダクトを作っていると、「技術発信やコンテンツマーケティングは重要」と分かっていても、開発工数を割けずに後回しになりがちではありませんか?

私も現在、Night Table というナイトワーク店舗向けのDXシステムを開発していますが、機能開発に追われる日々で、なかなかブログ記事の更新まで手が回りませんでした。

「それなら、記事の執筆からサムネイル作成、投稿まで、全部AIに任せれば良いのでは?」

そう思い立ち、microCMS MCPGitHub Actions、そして Gemini を組み合わせた完全全自動の記事生成パイプラインを構築しました。

実際にこのシステムを導入し、毎日自動で記事が生成されるようになりました。

事前設定

ここから、keyを発行しクレカ登録したら無料クレジットを90日使える300ドル分のクレジットがもらえるのでそれを利用しています

全体アーキテクチャ

GithubActions上で定期実行で記事の執筆をしてmicroCMS MCPで投稿するようにしています。

実装のポイント

1. GitHub Actions のワークフロー定義

これが実際に動いているワークフローファイル(抜粋)です。
google-github-actions/run-gemini-cli アクションを利用し、MCPサーバーの設定を settings ブロックに記述しています。

jobs:
  generate-article:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Generate article with Gemini CLI
        uses: google-github-actions/run-gemini-cli@v0
        env:
          MICROCMS_SERVICE_ID: ${{ secrets.MICROCMS_SERVICE_ID }}
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
        with:
          gemini_api_key: ${{ secrets.GEMINI_API_KEY }}
          # 画像生成拡張機能をロード
          extensions: |
            [
              "https://github.com/gemini-cli-extensions/nanobanana"
            ]
          # MCPサーバーの設定
          settings: |-
            {
              "mcpServers": {
                "microcms": {
                  "command": "npx",
                  "args": [
                    "-y",
                    "microcms-mcp-server@latest",
                    "--service-id",
                    "${MICROCMS_SERVICE_ID}",
                    "--api-key",
                    "${MICROCMS_API_KEY}"
                  ]
                }
              }
            }
          # プロンプト(後述)
          prompt: |
             ...

2. 「プロダクトを理解させる」ためのプロンプト設計

単に「xxの記事を書いて」と指示すると、ありきたりな内容になってしまいます。
そこで、プロジェクト内のソースコード(DBスキーマなど)を読み込ませることで、プロダクトの具体的な機能に基づいた記事を書かせています。

以下のようなプロンプト構成にしています。

Phase 1: システム分析(プロダクト理解)

まず記事を書く前に、prisma/schema.prisma などのコードを読みに行かせます。

### Phase 1: システム分析(プロダクト理解)
記事を書く前に、Night Tableが「具体的に何ができるシステムなのか」をコードレベルで把握する。

1. データベース設計の確認:
  - ファイル: prisma/schema.prisma
  - アクション: どのようなデータモデル(Cast, Sales, Customer, Attendanceなど)が存在するか確認する。

これにより、Geminiは「あ、このシステムは『ボトルキープ』と『顧客ランク』が紐付いているんだな」といった仕様を理解します。

Phase 2: 企画・重複チェック

次に、microCMS MCPを使って既存の記事一覧を取得し、ネタ被りを防ぎます。

### Phase 2: 企画・重複チェック
1. 既存記事の確認:
  - MCPを使用する場合: list_contents (schema: blog) を使用してタイトル一覧を取得。
  - 目的: 過去の記事とテーマが重複しないようにする。

Phase 3 〜 4: 執筆と画像生成

記事本文を執筆した後、その記事の内容にマッチしたOGP画像を nanobanana で生成させます。

### Phase 4: コンテキストマッチ画像生成
1. プロンプト作成:
  - 執筆した記事の具体的なシーンや感情を反映した英語プロンプトを作成する。
2. 画像生成 (Nanobanana):
  - 比率: 1.91:1 (OGPサイズ)
  - 生成した画像は ./article-output/ ディレクトリにも保存すること

Phase 5: MCPによる入稿

最後に、生成した画像とテキストを microCMS に入稿します。これもgeminiを通して実行しています。

### Phase 5: 投稿・設定
1. 画像のアップロード (必須):
  - ツール: microcms_upload_media
2. 記事のドラフト投稿:
  - ツール: microcms_create_content

下書きがガンガン出来上がるので最終チェックをして、公開するだけです
スクリーンショット.png

実際のActions

気になる方だけみてください。
何度か試した際に画像のアップロードを実行してくれなかったパターンがあったので、
curlでの手法、自分でfetchでアップロードするというフォールバックをするようにしています。これでもまだ画像はアップロードの調整が必要そうでした。
また、画像アップロード失敗した際にnanobananaが生成した画像が失われるので、ActionsのArtifactとしてアップロードする処理をしています。

実際に私が作ったActions
name: Daily Article Generation

on:
  schedule:
    # 日本時間12:00 = UTC 03:00
    - cron: '0 3 * * *'
  workflow_dispatch:

permissions:
  contents: read

jobs:
  generate-article:
    name: Generate and Publish Article
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Create output directory and timestamp marker
        run: |
          mkdir -p ./article-output
          touch /tmp/workflow-start-marker

      - name: Generate article with Gemini CLI
        id: gemini
        uses: google-github-actions/run-gemini-cli@v0
        env:
          MICROCMS_SERVICE_ID: ${{ secrets.MICROCMS_SERVICE_ID }}
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
        with:
          gemini_api_key: ${{ secrets.GEMINI_API_KEY }}
          extensions: |
            [
              "https://github.com/gemini-cli-extensions/nanobanana"
            ]
          prompt: |
            # Night Table ブログ記事作成・投稿タスクガイド
            このガイドは、Night Tableブログの記事を高品質かつ効率的に作成・投稿するための手順書です。MCPサーバー(microcms-mcp-server)の利用を推奨しますが、利用できない場合のAPIリクエスト手順も記載しています。

            ## 目的
            「Night Table」のシステム仕様(機能的強み)と、ターゲット(経営者・黒服・キャスト)の深い悩みを正確に結びつけたブログ記事を作成し、microCMSに公開する。

            ## 実行プロセス

            ### Phase 1: システム分析(プロダクト理解)
            記事を書く前に、Night Tableが「具体的に何ができるシステムなのか」をコードレベルで把握する。
            **ただし、技術的なことやプロジェクトの情報については絶対に記事にしないこと。悩みごとを解決できるシステムか、他のシステムにない機能があるかなどの判別に利用すること**

            1. データベース設計の確認:
              - ファイル: prisma/schema.prisma
              - アクション: どのようなデータモデル(Cast, Sales, Customer, Attendanceなど)が存在するか確認する。「給与計算ロジック」や「顧客情報の詳細さ」を把握する。

            2. 主要機能の特定:
              - ディレクトリ: src/features, docs/, src/lib など
              - アクション: 競合に勝てる機能(USP)を洗い出す(例:複雑なバックの自動計算、LINE連携、リアルタイム座席管理など)。

            ### Phase 2: 企画・重複チェック
            1. 既存記事の確認:
              - MCPを使用する場合: list_contents (schema: blog) を使用してタイトル一覧を取得。
              - APIを使用する場合: curl -H "X-MICROCMS-API-KEY: <API_KEY>" "https://xxxxx.microcms.io/api/v1/blog?fields=title"
              - 目的: 過去の記事とテーマが重複しないようにする。

            2. 広範なWebリサーチ:
              - Google検索、Yahoo!知恵袋、SNS、業界ニュースを用いて多角的にリサーチする。
              - 検索軸:
                - 悩み: 「キャスト 飛ぶ 理由」「黒服 きつい」「キャバクラ 売上管理 ミス」「付け回し 難しい」
                - トレンド: 「ナイトワーク DX」「インボイス制度 キャバクラ」「風営法 改正」

            3. マッチング(企画立案):
              - Phase 1で把握した「Night Tableの機能」で、Phase 2で集めた「ユーザーの悩み」をどう解決できるか、具体的なシナリオを企画する。

            ### Phase 3: 記事執筆
            - 構成: 読者の共感(悩み) → 原因分析 → Night Tableによる解決(機能紹介) → 導入後の未来。
            - 機能への言及: システム分析に基づき、「○○というデータ構造だから、××な分析が可能」といった解像度の高い記述を行う。
            - 形式: HTML形式(h2, h3, p, ul, strong など)。
            - 文字数: 2000〜3000文字目安。

            ### Phase 4: コンテキストマッチ画像生成
            1. プロンプト作成:
              - 執筆した記事の具体的なシーンや感情を反映した英語プロンプトを作成する。
              - 例: "Store manager smiling with relief as payroll calculation finishes instantly on a tablet."

            2. 画像生成 (Nanobanana):
              - 比率: 1.91:1 (OGPサイズ)
              - スタイル: modern, professional, digital-art
              - 生成した画像は ./article-output/ ディレクトリにも保存すること

            ### Phase 5: 投稿・設定

            **重要: 画像アップロードは必ず実行すること**

            1. 画像のアップロード (必須):
              - ツール: microcms_upload_media
              - 方法: nanobananaで生成した画像のURLを使用してアップロード
              - 引数例: { "url": "生成された画像のURL" }
              - レスポンスから画像URLを取得し、記事のmainVisualに使用

            2. 記事のドラフト投稿:
              - ツール: microcms_create_content
              - 引数:
                - schema: "blog"
                - data: { "title": "...", "content": "...", "mainVisual": { "url": "アップロードした画像のURL" } }
                - status: "draft"

            代替1: curlを使用する方法(MCPが失敗した場合)
            1. 画像のアップロード:
              - エンドポイント: POST https://night-table.microcms-management.io/api/v1/media
              - コマンド例: curl -X POST -H "X-MICROCMS-API-KEY: $MICROCMS_API_KEY" -F "file=@<FILE_PATH>" "https://night-table.microcms-management.io/api/v1/media"
              - レスポンスのurlを記事のmainVisualに使用

            2. 記事のドラフト投稿:
              - エンドポイント: POST https://xxxx.microcms.io/api/v1/blog?status=draft
              - コマンド例: curl -X POST -H "X-MICROCMS-API-KEY: $MICROCMS_API_KEY" -H "Content-Type: application/json" -d '{"title":"...","content":"...","mainVisual":{"url":"..."}}' "https://xxxxx.microcms.io/api/v1/blog?status=draft"

            代替2: スクリプトを使用する方法(curlも失敗した場合)
            - 画像アップロード: node .github/scripts/upload-image-to-microcms.mjs <画像ファイルパス>
            - 出力されるURLを記事のmainVisualに使用すること

            ### Phase 6: 結果報告
            - 記事タイトルとターゲット層
            - 訴求した機能と解決した悩み
            - microCMSの記事管理画面URL、または記事ID

            ## 重要な指針
            - 機能の裏付け: 「便利です」だけでなく、「なぜ便利なのか(仕組み)」をシステム分析に基づいて語る。
            - 現場視点: 表面的な悩みではなく、現場のオペレーションレベル(例:締め作業の伝票計算、同伴の連絡漏れ)に踏み込む。
            - 画像の一貫性: 記事の内容とビジュアルのトーンを合わせる。

          gemini_model: gemini-3-pro-preview
          settings: |-
            {
              "mcpServers": {
                "microcms": {
                  "command": "npx",
                  "args": [
                    "-y",
                    "microcms-mcp-server@latest",
                    "--service-id",
                    "${MICROCMS_SERVICE_ID}",
                    "--api-key",
                    "${MICROCMS_API_KEY}"
                  ]
                }
              },
              "tools": {
                "core": [
                  "run_shell_command(cat)",
                  "run_shell_command(echo)",
                  "run_shell_command(grep)",
                  "run_shell_command(head)",
                  "run_shell_command(tail)",
                  "run_shell_command(curl)"
                ]
              }
            }


      - name: Collect newly created images
        run: |
          echo "=== Searching for new images ==="
          # Find images created after the workflow started
          find . -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.webp" \) \
            -newer /tmp/workflow-start-marker \
            ! -path "./node_modules/*" \
            ! -path "./.git/*" \
            ! -path "./article-output/*" \
            ! -path "./.next/*" \
            ! -path "./public/*" \
            -exec cp -v {} ./article-output/ \; 2>/dev/null || true

          echo "=== Files in article-output ==="
          ls -la ./article-output/ || echo "No files in article-output"

      - name: Upload article artifacts
        uses: actions/upload-artifact@v4
        with:
          name: article-${{ github.run_id }}
          path: ./article-output/
          retention-days: 30
          if-no-files-found: warn

      - name: Output result
        run: echo "Article generation completed"

導入して分かったmicroCMS MCP × Github Actions × Gemini の強み

1. 「嘘」が減る(Grounding)

LLMに自由に書かせるとハルシネーションが怖いですが、「まずソースコードを読んで、そこにある機能について書くこと」、「Web検索をする」という制約を与えることで、実在しない機能を捏造するリスクが大幅に減りました。

2. 完結性

以前は「AIに記事を書かせる → コピペして入稿」というフローでしたが、MCPのおかげで「入稿」まで完了します。気づいたら記事の下書きが出来上がっている体験は感動的です。

3. 一貫した運用

人間だと「今日は忙しいから...」と更新が止まりがちですが、GitHub Actionsは文句を言わずに毎日定時にトリガーを引き、Geminiを起こしてくれます。

まとめ

MCP × GitHub Actions × Gemini の組み合わせは、これまで「専用のスクリプトをガリガリ書かないとできなかったこと」を、自然言語のプロンプトと少しの設定ファイルだけで実現してくれました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?