ClaudeをCMSとして使う構成メモ

構成概要

Claude.ai
  └─ Supabase MCPコネクター(接続済み)
  └─ Skill: supabase-web-content
        └─ project_id: dcezhxeariawjnxoihpz
        └─ table: public.posts
        └─ storage bucket: post-images

postsテーブルのスキーマ

カラム

備考

id

uuid

自動生成

slug

text

unique、URLに使う

title

text

date

date

YYYY-MM-DD

img

text

ファイル名のみ(例:hero.png)

content

text

Markdown

published

boolean

デフォルト false

created_at / updated_at

timestamptz

自動

画像のフルURLは https://dcezhxeariawjnxoihpz.supabase.co/storage/v1/object/public/post-images/<filename> で構成される。サイト側で postImageUrl(filename) が展開する。

Skillに書いたこと

  • テーブルスキーマと各カラムの説明
  • 画像はファイル名のみ保存するルール
  • published = true にする前は必ず確認するルール
  • slugはタイトルから自動生成(未指定時)
  • updateは必ず updated_at = now() を含める
  • 操作には execute_sql を使う

Skillファイルは .skill 形式でパッケージ化してインストール済み。

よく使う操作メモ

一覧取得

SELECT id, slug, title, date, published FROM posts ORDER BY date DESC;

作成

INSERT INTO posts (slug, title, date, img, content, published)
VALUES ('my-slug', 'タイトル', '2026-05-19', null, '# 本文', false)
RETURNING *;

公開

UPDATE posts SET published = true, updated_at = now() WHERE slug = 'my-slug';

削除(要確認)

DELETE FROM posts WHERE slug = 'my-slug';

ハマりそうなポイント

  • Skillのfrontmatter(YAMLヘッダー)に " が入るとパースエラーになる。> のブロックスタイルで書くこと。
  • パッケージングは読み取り専用ディレクトリでは失敗する。/tmp/ にコピーしてから実行する。
  • MCPコネクターはClaude.aiの設定画面から有効化が必要。接続後は tool_searchexecute_sql が使えることを確認する。

再現手順(次回セットアップ時)

  1. Supabaseでプロジェクト作成、postsテーブルとストレージバケット(post-images)を用意する
  2. Claude.aiのコネクター設定からSupabase MCPを接続する
  3. Skillファイルを作成し、スキーマ・ルール・project_idを記載する
  4. .skill 形式にパッケージングしてインストールする
  5. 動作確認:「記事一覧を見せて」と話しかけてみる

自動化を導入する

この自動化を業務に取り入れたい方へ

まずは30分の無料相談から。あなたの業務に合った自動化フローをご提案します。

自動化を相談する →