jpskill.com
🛠️ 開発・MCP コミュニティ

directus

Directusは、ノーコードでコンテンツAPIを構築したり、データベースからREST/GraphQL APIを自動生成したりできるヘッドレスCMSで、バックエンド構築やコンテンツ管理を効率化するSkill。

📜 元の英語説明(参考)

Build backends and APIs with Directus headless CMS. Use when a user asks to create a headless CMS, build a content API without coding, set up a backend admin panel, create REST or GraphQL APIs from a database, manage content with roles and permissions, build a data platform with auto-generated APIs, or replace traditional CMS with a headless solution. Covers data modeling, auto-generated REST/GraphQL APIs, roles/permissions, flows (automation), file storage, and SDK integration.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Directusは、ノーコードでコンテンツAPIを構築したり、データベースからREST/GraphQL APIを自動生成したりできるヘッドレスCMSで、バックエンド構築やコンテンツ管理を効率化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o directus.zip https://jpskill.com/download/14836.zip && unzip -o directus.zip && rm directus.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14836.zip -OutFile "$d\directus.zip"; Expand-Archive "$d\directus.zip" -DestinationPath $d -Force; ri "$d\directus.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して directus.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → directus フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Directus

概要

Directus は、自動生成された REST および GraphQL API、視覚的な管理ダッシュボード、ロールベースのアクセス制御、ファイルストレージ、および自動化フローを備えた、あらゆる SQL データベースをラップするオープンソースのヘッドレス CMS およびデータプラットフォームです。Strapi (独自のスキーマを定義する) とは異なり、Directus は既存のデータベースをミラーリングします。管理 UI または SQL で直接カラムを追加すると、API が即座に更新されます。コンテンツ管理、内部ツール、データ API、および backend-as-a-service に使用できます。

手順

ステップ 1: デプロイメント

# Docker (最も簡単な起動方法)
docker run -d --name directus \
  -p 8055:8055 \
  -e SECRET="your-secret-key-min-32-chars" \
  -e ADMIN_EMAIL="admin@example.com" \
  -e ADMIN_PASSWORD="your-secure-password" \
  -e DB_CLIENT="sqlite3" \
  -e DB_FILENAME="/directus/database/data.db" \
  -v directus_data:/directus/database \
  -v directus_uploads:/directus/uploads \
  directus/directus:latest

# PostgreSQL を使用した本番環境
docker run -d --name directus \
  -p 8055:8055 \
  -e SECRET="your-secret-key" \
  -e ADMIN_EMAIL="admin@example.com" \
  -e ADMIN_PASSWORD="your-secure-password" \
  -e DB_CLIENT="pg" \
  -e DB_HOST="postgres" \
  -e DB_PORT="5432" \
  -e DB_DATABASE="directus" \
  -e DB_USER="directus" \
  -e DB_PASSWORD="dbpassword" \
  directus/directus:latest

# 管理画面へのアクセス: http://localhost:8055

ステップ 2: データモデリング

管理 UI または REST API を介してコレクション (テーブル) とフィールドを作成します。

# API 経由で "posts" コレクションを作成する
curl -X POST http://localhost:8055/collections \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "collection": "posts",
    "meta": { "icon": "article", "note": "Blog posts" },
    "fields": [
      { "field": "id", "type": "uuid", "meta": { "special": ["uuid"] }, "schema": { "is_primary_key": true } },
      { "field": "title", "type": "string", "meta": { "required": true } },
      { "field": "slug", "type": "string", "meta": { "interface": "input" } },
      { "field": "content", "type": "text", "meta": { "interface": "input-rich-text-html" } },
      { "field": "status", "type": "string", "meta": { "interface": "select-dropdown", "options": { "choices": [{"text":"Draft","value":"draft"},{"text":"Published","value":"published"}] } } },
      { "field": "published_at", "type": "timestamp" }
    ]
  }'

ステップ 3: 自動生成された API

コレクションが存在すると、Directus は完全な CRUD API を自動生成します。

# REST — 公開されたすべての投稿をリストする
curl 'http://localhost:8055/items/posts?filter[status][_eq]=published&sort=-published_at&limit=10' \
  -H 'Authorization: Bearer token'

# REST — 関連する著者を含む単一の投稿を取得する
curl 'http://localhost:8055/items/posts/POST_ID?fields=*,author.name,author.avatar' \
  -H 'Authorization: Bearer token'

# REST — 投稿を作成する
curl -X POST http://localhost:8055/items/posts \
  -H 'Authorization: Bearer token' \
  -H 'Content-Type: application/json' \
  -d '{"title": "My Post", "content": "<p>Hello world</p>", "status": "draft"}'

# GraphQL — 同じクエリ
curl -X POST http://localhost:8055/graphql \
  -H 'Authorization: Bearer token' \
  -H 'Content-Type: application/json' \
  -d '{"query": "{ posts(filter: {status: {_eq: \"published\"}}, sort: [\"-published_at\"], limit: 10) { id title content published_at author { name } } }"}'

ステップ 4: SDK 統合

// lib/directus.js — フロントエンド/バックエンド統合のための JavaScript SDK
import { createDirectus, rest, readItems, createItem, authentication } from '@directus/sdk'

const client = createDirectus('http://localhost:8055')
  .with(authentication())
  .with(rest())

// 公開された投稿を取得する
const posts = await client.request(
  readItems('posts', {
    filter: { status: { _eq: 'published' } },
    sort: ['-published_at'],
    limit: 10,
    fields: ['id', 'title', 'slug', 'content', 'published_at', { author: ['name', 'avatar'] }],
  })
)

// 新しい投稿を作成する
const newPost = await client.request(
  createItem('posts', {
    title: 'New Post',
    content: '<p>Content here</p>',
    status: 'draft',
  })
)

ステップ 5: ロールと権限

# 読み取り専用の "viewer" ロールを作成する
curl -X POST http://localhost:8055/roles \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{"name": "Viewer", "admin_access": false}'

# 権限を設定する: viewer は公開された投稿のみを読み取ることができる
curl -X POST http://localhost:8055/permissions \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "role": "VIEWER_ROLE_ID",
    "collection": "posts",
    "action": "read",
    "permissions": { "status": { "_eq": "published" } },
    "fields": ["id", "title", "content", "published_at"]
  }'

ステップ 6: フロー (自動化)

Directus Flows は、イベントによってトリガーされる視覚的な自動化パイプラインです (Zapier のようなものですが、組み込みです)。

# フローを作成する: 投稿が公開されたときに、webhook を送信する
curl -X POST http://localhost:8055/flows \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Notify on Publish",
    "trigger": "event",
    "options": { "type": "action", "scope": ["items.update"], "collections": ["posts"] },
    "accountability": "all",
    "status": "active"
  }'

例 1: マーケティング Web サイト用のコンテンツ API を構築する

ユーザープロンプト: 「ブログ投稿、チームメンバー、ケーススタディ、FAQ など、マーケティングサイト用の CMS バックエンドが必要です。技術者ではない編集者が、視覚的なダッシュボードを通じてコンテンツを管理できるようにする必要があります。」

エージェントは以下を行います。

  1. Docker + PostgreSQL を使用して Directus をデプロイします。
  2. posts、team_members、case_studies、faqs のコレクションを作成します。
  3. リレーショナルフィールド (posts → author、case studies → tags) を設定します。
  4. フロントエンドへの読み取り専用アクセス権を持つパブリックロールを構成します。
  5. Directus SDK を使用して Next.js/Astro フロントエンドを接続します。

例 2: 運用データ用の内部ツールを構築する

ユーザープロンプト: 「当社の運用チームは、注文を追跡し、su

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Directus

Overview

Directus is an open-source headless CMS and data platform that wraps any SQL database with auto-generated REST and GraphQL APIs, a visual admin dashboard, role-based access control, file storage, and automation flows. Unlike Strapi (which defines its own schema), Directus mirrors your existing database — add columns in the admin UI or directly in SQL, and the API updates instantly. Use it for content management, internal tools, data APIs, and backend-as-a-service.

Instructions

Step 1: Deployment

# Docker (quickest start)
docker run -d --name directus \
  -p 8055:8055 \
  -e SECRET="your-secret-key-min-32-chars" \
  -e ADMIN_EMAIL="admin@example.com" \
  -e ADMIN_PASSWORD="your-secure-password" \
  -e DB_CLIENT="sqlite3" \
  -e DB_FILENAME="/directus/database/data.db" \
  -v directus_data:/directus/database \
  -v directus_uploads:/directus/uploads \
  directus/directus:latest

# Production with PostgreSQL
docker run -d --name directus \
  -p 8055:8055 \
  -e SECRET="your-secret-key" \
  -e ADMIN_EMAIL="admin@example.com" \
  -e ADMIN_PASSWORD="your-secure-password" \
  -e DB_CLIENT="pg" \
  -e DB_HOST="postgres" \
  -e DB_PORT="5432" \
  -e DB_DATABASE="directus" \
  -e DB_USER="directus" \
  -e DB_PASSWORD="dbpassword" \
  directus/directus:latest

# Access admin: http://localhost:8055

Step 2: Data Modeling

Create collections (tables) and fields via the admin UI or REST API:

# Create a "posts" collection via API
curl -X POST http://localhost:8055/collections \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "collection": "posts",
    "meta": { "icon": "article", "note": "Blog posts" },
    "fields": [
      { "field": "id", "type": "uuid", "meta": { "special": ["uuid"] }, "schema": { "is_primary_key": true } },
      { "field": "title", "type": "string", "meta": { "required": true } },
      { "field": "slug", "type": "string", "meta": { "interface": "input" } },
      { "field": "content", "type": "text", "meta": { "interface": "input-rich-text-html" } },
      { "field": "status", "type": "string", "meta": { "interface": "select-dropdown", "options": { "choices": [{"text":"Draft","value":"draft"},{"text":"Published","value":"published"}] } } },
      { "field": "published_at", "type": "timestamp" }
    ]
  }'

Step 3: Auto-Generated APIs

Once collections exist, Directus auto-generates full CRUD APIs:

# REST — List all published posts
curl 'http://localhost:8055/items/posts?filter[status][_eq]=published&sort=-published_at&limit=10' \
  -H 'Authorization: Bearer token'

# REST — Get single post with related author
curl 'http://localhost:8055/items/posts/POST_ID?fields=*,author.name,author.avatar' \
  -H 'Authorization: Bearer token'

# REST — Create post
curl -X POST http://localhost:8055/items/posts \
  -H 'Authorization: Bearer token' \
  -H 'Content-Type: application/json' \
  -d '{"title": "My Post", "content": "<p>Hello world</p>", "status": "draft"}'

# GraphQL — Same queries
curl -X POST http://localhost:8055/graphql \
  -H 'Authorization: Bearer token' \
  -H 'Content-Type: application/json' \
  -d '{"query": "{ posts(filter: {status: {_eq: \"published\"}}, sort: [\"-published_at\"], limit: 10) { id title content published_at author { name } } }"}'

Step 4: SDK Integration

// lib/directus.js — JavaScript SDK for frontend/backend integration
import { createDirectus, rest, readItems, createItem, authentication } from '@directus/sdk'

const client = createDirectus('http://localhost:8055')
  .with(authentication())
  .with(rest())

// Fetch published posts
const posts = await client.request(
  readItems('posts', {
    filter: { status: { _eq: 'published' } },
    sort: ['-published_at'],
    limit: 10,
    fields: ['id', 'title', 'slug', 'content', 'published_at', { author: ['name', 'avatar'] }],
  })
)

// Create a new post
const newPost = await client.request(
  createItem('posts', {
    title: 'New Post',
    content: '<p>Content here</p>',
    status: 'draft',
  })
)

Step 5: Roles and Permissions

# Create a read-only "viewer" role
curl -X POST http://localhost:8055/roles \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{"name": "Viewer", "admin_access": false}'

# Set permissions: viewer can read published posts only
curl -X POST http://localhost:8055/permissions \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "role": "VIEWER_ROLE_ID",
    "collection": "posts",
    "action": "read",
    "permissions": { "status": { "_eq": "published" } },
    "fields": ["id", "title", "content", "published_at"]
  }'

Step 6: Flows (Automation)

Directus Flows are visual automation pipelines triggered by events (like Zapier, but built-in).

# Create a flow: when a post is published, send a webhook
curl -X POST http://localhost:8055/flows \
  -H 'Authorization: Bearer admin_token' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Notify on Publish",
    "trigger": "event",
    "options": { "type": "action", "scope": ["items.update"], "collections": ["posts"] },
    "accountability": "all",
    "status": "active"
  }'

Examples

Example 1: Build a content API for a marketing website

User prompt: "I need a CMS backend for our marketing site — blog posts, team members, case studies, and FAQ. Non-technical editors should be able to manage content through a visual dashboard."

The agent will:

  1. Deploy Directus with Docker + PostgreSQL.
  2. Create collections for posts, team_members, case_studies, and faqs.
  3. Set up relational fields (posts → author, case studies → tags).
  4. Configure a public role with read-only access for the frontend.
  5. Connect the Next.js/Astro frontend using the Directus SDK.

Example 2: Build an internal tool for operations data

User prompt: "Our ops team tracks orders, suppliers, and inventory in spreadsheets. Build a proper backend with an admin panel where they can manage everything."

The agent will:

  1. Deploy Directus pointing at the existing PostgreSQL database.
  2. Directus auto-detects existing tables and generates APIs + admin UI.
  3. Create roles: admin (full access), manager (CRUD), viewer (read-only).
  4. Set up flows for notifications (new order → Slack alert).

Guidelines

  • Directus mirrors your database schema — it does not own it. You can add columns via Directus admin or directly in SQL, and both stay in sync. This makes it safe for existing databases.
  • Use Directus as a backend-as-a-service for content-heavy apps. For complex business logic (multi-step workflows, custom calculations), extend with custom endpoints or use a separate API layer.
  • Configure the PUBLIC role carefully — it defines what unauthenticated users can access. For a public blog, allow read access to published posts only.
  • File uploads go to local storage by default. In production, configure S3, Cloudflare R2, or Google Cloud Storage for scalability.
  • Directus supports PostgreSQL, MySQL, MariaDB, MS SQL, SQLite, CockroachDB, and OracleDB. PostgreSQL is recommended for production.