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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
directus.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
directusフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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 バックエンドが必要です。技術者ではない編集者が、視覚的なダッシュボードを通じてコンテンツを管理できるようにする必要があります。」
エージェントは以下を行います。
- Docker + PostgreSQL を使用して Directus をデプロイします。
- posts、team_members、case_studies、faqs のコレクションを作成します。
- リレーショナルフィールド (posts → author、case studies → tags) を設定します。
- フロントエンドへの読み取り専用アクセス権を持つパブリックロールを構成します。
- 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:
- Deploy Directus with Docker + PostgreSQL.
- Create collections for posts, team_members, case_studies, and faqs.
- Set up relational fields (posts → author, case studies → tags).
- Configure a public role with read-only access for the frontend.
- 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:
- Deploy Directus pointing at the existing PostgreSQL database.
- Directus auto-detects existing tables and generates APIs + admin UI.
- Create roles: admin (full access), manager (CRUD), viewer (read-only).
- 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
PUBLICrole 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.