← CMS一覧に戻る

Decap CMS

Netlify CMSの後継。Git-based静的サイト管理に特化したオープンソースCMS。

CMSヘッドレスGit-basedJAMstackJavaScriptReactオープンソース無料
ライセンス
MIT
言語
JavaScript/React
料金
完全無料
公式サイト
公式サイトを見る

CMS

Decap CMS

概要

Decap CMSはNetlify CMSの後継として、Git-basedの静的サイト管理に特化したオープンソースCMSで、コミュニティ主導で開発されています。

詳細

Decap CMSは、2023年2月にNetlify CMSからリブランドされた完全無料のオープンソースCMSです。NetlifyからPM TechHubに所有権が移転され、コミュニティ主導のプロジェクトとして積極的に開発が続けられています。

Gitワークフローのラッパーとして機能し、GitHub、GitLab、BitbucketのAPIを使用してコンテンツを管理します。静的サイトジェネレータとの統合に特化しており、Hugo、Jekyll、Gatsby、Next.js、Nuxt、Gridsome、Docusaurusなど、ほとんどのSSGをサポートしています。

2024年の最新アップデートでは、ビジュアル編集（click-to-edit）機能、ネストされたコレクションのサポート、Giteaバックエンドの追加、リレーションウィジェットのフィルタリング機能などが追加され、より使いやすくなっています。

メリット・デメリット

メリット

  • 完全無料: オープンソースでライセンス料金なし
  • コミュニティ主導: ベンダーロックインのリスクなし
  • 豊富なSSG対応: 主要な静的サイトジェネレータをカバー
  • シンプルな設定: YAMLファイル1つで構成可能
  • Gitワークフロー: バージョン管理とコラボレーションが容易
  • プラットフォーム非依存: Netlify以外でも利用可能
  • 継続的な改善: コミュニティによる活発な開発

デメリット

  • 機能が基本的: エンタープライズ機能は限定的
  • 動的機能なし: リアルタイムコンテンツに非対応
  • UI制限: カスタマイズの自由度が低い
  • 技術的知識が必要: GitとYAMLの基本知識が必須
  • メディア管理の制約: 高度な画像管理機能が不足
  • APIベースの制限: REST/GraphQL APIは提供しない

主要リンク

使い方の例

基本セットアップ（CDN版）

<!-- /admin/index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- 最新版のDecap CMSをロード -->
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>

npmインストールと設定

# npmでインストール
npm install decap-cms-app

# または特定のモジュールのみ
npm install decap-cms-core decap-cms-widget-string

詳細な設定ファイル

# /admin/config.yml
backend:
  name: github # gitlab, bitbucket, giteaも利用可能
  repo: owner/repo-name
  branch: main
  api_root: https://api.github.com # カスタムAPIルート

# メディア設定
media_folder: static/img
public_folder: /img

# ワークフロー設定
publish_mode: editorial_workflow

# 国際化設定
locale: 'ja'

# コレクション定義
collections:
  - name: posts
    label: ブログ記事
    label_singular: 記事
    folder: content/posts
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    preview_path: posts/{{slug}}
    fields:
      - {label: "タイトル", name: "title", widget: "string"}
      - {label: "公開日", name: "date", widget: "datetime"}
      - {label: "概要", name: "description", widget: "text"}
      - {label: "アイキャッチ画像", name: "image", widget: "image", required: false}
      - {label: "タグ", name: "tags", widget: "list"}
      - {label: "本文", name: "body", widget: "markdown"}

リレーションウィジェットの使用

collections:
  - name: authors
    label: 著者
    folder: content/authors
    create: true
    fields:
      - {label: "名前", name: "name", widget: "string"}
      - {label: "プロフィール", name: "bio", widget: "text"}
      
  - name: posts
    label: 投稿
    folder: content/posts
    create: true
    fields:
      - label: "著者"
        name: "author"
        widget: "relation"
        collection: "authors"
        search_fields: ["name"]
        value_field: "name"
        display_fields: ["name"]
        # 新機能: フィルタリング
        filter: {field: "active", value: true}

ビジュアル編集機能の有効化

// admin/index.js
import CMS from 'decap-cms-app'

// ビジュアル編集を有効化
CMS.init({
  config: {
    backend: {
      name: 'git-gateway',
    },
    // ビジュアル編集設定
    editor: {
      preview: true,
      frame: true, // iframeでプレビュー
    },
  },
})

// カスタムプレビューテンプレート
CMS.registerPreviewTemplate('posts', PostPreview)

カスタムウィジェットの作成

// カラーピッカーウィジェット
const ColorControl = ({ value, onChange }) => (
  <input
    type="color"
    value={value || '#000000'}
    onChange={(e) => onChange(e.target.value)}
  />
)

const ColorPreview = ({ value }) => (
  <div
    style={{
      backgroundColor: value,
      width: '50px',
      height: '50px',
      borderRadius: '4px',
    }}
  />
)

// ウィジェット登録
CMS.registerWidget('color', ColorControl, ColorPreview)