Ryunosuke Matsuoka
DrupalCMSラボ 編集部
はじめに
Drupal界隈でいま最も注目を集めているモジュールが、Drupal Canvasです。かつて「Experience Builder」という開発コード名で呼ばれていたこのプロジェクトは、2025年末に正式版がリリースされ、2026年2月現在ではDrupal 11.2以降で安定稼働しています。
Canvasは単なる「ページビルダーの追加機能」ではありません。Drupalのコアアーキテクチャと深く統合されたビジュアル編集基盤であり、フロントエンド開発者が慣れ親しんだReact（Preact）ベースのコンポーネント開発ワークフローをDrupal上に実現します。同時に、コンテンツ編集者はドラッグ＆ドロップで自由にページを組み立てられます。
本記事では、Drupal Canvasの全体像から開発者が知っておくべきコンポーネントアーキテクチャ、ローカル環境でのセットアップ手順、カスタムコンポーネントの実装まで、実践的な観点から解説します。
1. Drupal Canvasとは何か？
背景：Experience BuilderからCanvasへ
Drupal Canvasは、2024年4月に「Experience Builder」という名称でDrupal.orgに登録されたプロジェクトが起源です。Starshotイニシアティブの一環として、Drupalの創設者Dries Buytaert氏とコミュニティが「Drupalを誰でも使えるCMSにする」という目標のもとで開発を進めてきました。2025年後半に「Canvas」と改名され、2025年12月に1.0.0がリリース。2026年初頭にはDrupal CMS 2.0の中核機能として採用されています。
Canvasが解決する課題
従来のDrupalでページを作るには、ParagraphsモジュールやLayout Builderを駆使する必要があり、フロントエンドエンジニアや編集者にとって学習コストが高い状況でした。Canvas プロダクトリードのLauri Timmanee氏はこの課題を「クッキーカッターなサイトを作るか、複雑なコーディングを行うか、という二択を強いられていた」と表現し、Canvasはその二択を打ち破るためのツールだと説明しています。
Canvasの主要コンセプト
Canvasは大きく3つの立場のユーザーを想定して設計されています。開発者はSDC（Single Directory Components）やコードコンポーネントを使ってコンポーネントライブラリを構築します。サイトビルダーはブラウザ上でレイアウトやデザインを調整し、ブランドに合ったサイトを構成します。コンテンツ編集者はページの任意の場所にコンポーネントを配置し、独立してコンテンツを管理できます。
この3層構造こそがCanvasの本質であり、それぞれのロールに適切な権限と操作範囲を与えることで、大規模サイトでも一貫性のあるデザインシステムを維持できます。
2. アーキテクチャの全体像
フロントエンド：Preact + React互換レイヤー
CanvasのUIはReactベース（正確にはPreact＋React互換レイヤー）で構築されています。開発者がコードコンポーネントを書く際もJSXとCSSを使用し、ReactまたはPreactの知識があればすぐに開発に入れます。コンポーネントはブラウザ内のコードエディタで直接記述でき、リアルタイムプレビューを確認しながら開発できる点が大きな特徴です。
バックエンド：DrupalコアAPIとの統合
バックエンド側はDrupalのコアAPIと深く統合されており、Drupalの強みである構造化データ、きめ細かなアクセス制御、翻訳管理、コンテンツのバージョン管理などの機能をそのまま活かすことができます。CanvasページはDrupalのコンテンツエンティティとして管理されるため、既存のDrupal運用ワークフロー（コンテンツモデリング、パーミッション設計、ワークフロー管理など）と自然に統合できます。
コンポーネントの種類
Canvasで使えるコンポーネントは4種類あります。SDCコンポーネントはDrupalのテーマやモジュールが提供するTwig/CSS/JSベースのコンポーネントです。コードコンポーネントはCanvas UI上でJSXとCSSを直接記述して作成するインタラクティブなコンポーネントです。ブロックコンポーネントは既存のDrupalブロック（ViewsディスプレイやカスタムブロックなどのBlockプラグイン）をCanvasのコンポーネントとして公開したものです。パターンコンポーネントは複数のコンポーネントの配置をまとめて保存し、再利用できるテンプレートです。
3. ローカル環境のセットアップ（DDEV使用）
前提条件
Drupal Canvasを試すにはDDEV 1.24.2以降が推奨されます。また、Drupal Canvas 1.1.0はDrupal 11.2以降が必要です。以下のセットアップ手順では、公式デモパッケージを使ったクイックスタートと、Drupal CMS 2.0（アルファ版）を使った構成を紹介します。
方法1：公式デモパッケージを使ったクイックスタート
最も手軽にCanvasを体験するには、phenaproxima氏が公開しているデモパッケージを使う方法がおすすめです。
# プロジェクトディレクトリの作成
mkdir canvas-demo
cd canvas-demo
# DDEVの初期化
ddev config --project-type=drupal11 --docroot=web
# デモパッケージのインストール（DDEV v1.24.2以降）
ddev composer create-project phenaproxima/xb-demo --stability=dev
# Drupalのインストール
ddev drush si -y
# Canvas編集画面への直接ログイン
ddev drush user:login canvas/editor/canvas_page/1最後のコマンドで生成されたURLをブラウザで開くと、Starshot Demo Design System（SDDS）が組み込まれたCanvas編集環境が起動します。このデモには多数のプリビルトコンポーネントが含まれており、Canvasの基本的な操作感をすぐに確認できます。
方法2：Drupal CMS 2.0（アルファ版）を使った構成
より本番に近い構成でCanvasを試したい場合は、Drupal CMS 2.0のアルファ版を使う方法があります。
# プロジェクトディレクトリの作成
mkdir drupal-cms-v2
cd drupal-cms-v2
# DDEVの初期化
ddev config --project-type=drupal11 --docroot=web
# Drupal CMS 2.0アルファ版のインストール
ddev composer create-project drupal/cms:2-alpha1 -s alpha --no-install
ddev composer config minimum-stability alpha
ddev composer install
ddev composer drupal:recipe-unpack
# サイトの起動と確認
ddev launchインストールウィザードを完了後、管理画面の「/canvas」にアクセスするとCanvas編集UIが開きます。
既存サイトへのCanvasモジュール追加
既存のDrupal 11.2以降のサイトにCanvasを後付けする場合は、Composerでモジュールを追加します。
# Canvasモジュールのインストール
ddev composer require drupal/canvas
# モジュールの有効化
ddev drush en canvas -y
# キャッシュのクリア
ddev drush cr4. コンポーネント開発：SDCコンポーネントの作成
SDC（Single Directory Components）とは
SDCはDrupal 10.1からコアに統合されたコンポーネントアーキテクチャです。コンポーネントに必要なTwig、CSS、JavaScript、メタデータをひとつのディレクトリにまとめて管理できます。Canvasはこの仕組みを活用してコンポーネントライブラリを構築するため、SDCの理解はCanvas開発における最初のステップです。
SDCコンポーネントの基本構成
カスタムテーマのcomponents/ディレクトリ配下に、コンポーネント名のフォルダを作成し、最低限以下のファイルを配置します。
my_theme/
└── components/
└── hero/
├── hero.component.yml # コンポーネントの定義（props・slots）
├── hero.twig # Twigテンプレート
├── hero.css # スタイル
└── hero.js # JavaScript（任意）hero.component.ymlの記述例
コンポーネントのメタデータとprops（入力値の型定義）を定義します。
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: Hero
description: 'ヒーローセクションコンポーネント'
props:
type: object
properties:
title:
type: string
title: 'タイトル'
description: 'メインタイトルテキスト'
subtitle:
type: string
title: 'サブタイトル'
description: 'サブタイトルテキスト'
cta_label:
type: string
title: 'CTAボタンラベル'
cta_url:
type: string
title: 'CTAボタンURL'
background_color:
type: string
title: '背景色'
enum:
- primary
- secondary
- dark
slots:
- name: content
title: 'カスタムコンテンツ'hero.twigの記述例
定義したpropsをTwigテンプレートで使用します。
{%
set classes = [
'hero',
background_color ? 'hero--' ~ background_color : 'hero--primary',
]
%}
<section{{ attributes.addClass(classes) }}>
<div class="hero__inner">
{% if title %}
<h1 class="hero__title">{{ title }}</h1>
{% endif %}
{% if subtitle %}
<p class="hero__subtitle">{{ subtitle }}</p>
{% endif %}
{% if slot.content %}
<div class="hero__content">{{ slot.content }}</div>
{% endif %}
{% if cta_label and cta_url %}
<a href="{{ cta_url }}" class="hero__cta">{{ cta_label }}</a>
{% endif %}
</div>
</section>SDCとCanvasの連携を有効化する
作成したSDCをCanvasで使えるようにするには、テーマの.info.ymlファイルでコンポーネントディスカバリを有効にします。
# my_theme.info.yml
name: 'My Theme'
type: theme
base theme: false
core_version_requirement: ^11
components:
enabled: true設定後、キャッシュをクリアすれば/admin/appearance/component管理画面にコンポーネントが一覧表示され、Canvas上で利用可能になります。
5. コンポーネント開発：コードコンポーネントの作成
コードコンポーネントとは
コードコンポーネントはCanvas UI上で直接JSXとCSSを記述して作成するコンポーネントです。PreactのReact互換レイヤーで動作するため、ReactのHooks（useState、useEffect等）をそのまま使えます。インタラクティブなUI要素、APIからのデータ取得、アニメーションなど、SDCでは表現しにくい動的なコンポーネントに適しています。
Canvas UIでのコードコンポーネント作成手順
Canvas編集画面を開いたあと、左サイドバーの「Manage Library」を選択し、「Code」タブを開いて「Code Component」を選ぶと新規作成モードに入ります。画面は左パネル（JSX/CSSのコード入力）、右パネル（リアルタイムプレビュー）、下部セクション（propsとslotsの定義）の3エリアに分かれています。
コードコンポーネントのJSX記述例
以下はタブ切り替えUIのコードコンポーネント例です。
// props: { tabs: Array<{ label: string, content: string }> }
const { useState } = React;
export default function TabComponent({ tabs = [] }) {
const [activeIndex, setActiveIndex] = useState(0);
return (
<div className="tab-component">
<div className="tab-component__nav" role="tablist">
{tabs.map((tab, index) => (
<button
key={index}
role="tab"
aria-selected={activeIndex === index}
className={`tab-component__tab ${activeIndex === index ? 'is-active' : ''}`}
onClick={() => setActiveIndex(index)}
>
{tab.label}
</button>
))}
</div>
<div className="tab-component__panel" role="tabpanel">
<p>{tabs[activeIndex]?.content}</p>
</div>
</div>
);
}propsのJSON Schema定義
コードコンポーネントのpropsはJSON Schemaで定義し、Canvas UIが自動的に入力フォームを生成します。
{
"type": "object",
"properties": {
"tabs": {
"type": "array",
"title": "タブリスト",
"items": {
"type": "object",
"properties": {
"label": {
"type": "string",
"title": "タブラベル"
},
"content": {
"type": "string",
"title": "タブコンテンツ"
}
}
}
}
}
}プレビューで動作確認が取れたら「Add to components」をクリックするだけで、コンポーネントライブラリに追加されます。ファイルの編集やデプロイは不要で、ブラウザだけで開発が完結します。
canvasDataを使ったDrupalデータへのアクセス
コードコンポーネントからDrupalのデータにアクセスするには、canvasData設定を使います。これにより、Drupalのノードデータ、ユーザー情報、カスタム設定などをコンポーネント内で動的に参照できます。
// canvasDataを使ってDrupalのページタイトルを取得する例
export default function PageTitle({ canvasData }) {
const title = canvasData?.page?.title ?? 'タイトル未設定';
return (
<h1 className="page-title">{title}</h1>
);
}6. コンテンツテンプレートとLayout Builderからの移行
コンテンツテンプレートの概念
Drupal Canvasでは、従来の「コンテンツタイプの表示設定（Manage Display）」がコンテンツテンプレートに置き換わります。コンテンツテンプレートは、特定のコンテンツタイプ×表示モードに対してCanvasコンポーネントを使ったレイアウトを定義するものです。開発者がコンポーネントライブラリを用意し、テンプレート内でどのコンポーネントをどこに配置するかを定義することで、編集者が個別コンテンツのフィールド値を入力するだけで一貫したデザインのページが生成されます。
テンプレートの作成手順
Canvas編集画面を開き、左サイドバーの「Templates」を展開して「+ Add new template」をクリックします。ドロップダウンからコンテンツタイプと表示モード（Full content / Teaserなど）を選択して「Add new template」をクリックすると、テンプレート編集モードに入ります。ここでコンポーネントを配置し、フィールドとのマッピングを設定します。
Layout Builderからの段階的移行
既存のLayout Builderを使ったサイトからCanvasへ移行する際は、一括移行ではなく段階的な移行が推奨されます。まず新規ページをCanvasで作成し、並行して既存ページを順次移行していくアプローチが現実的です。特にDrupal 7やDrupal 8からのアップグレードを伴う場合は、PHP 8.3以降への対応確認、Drupal 11互換性の検証、SDCへのコンポーネント移行という3ステップを踏むことになります。
7. Mercury テーマとデザインシステムの統合
Mercuryテーマとは
Drupal CMS 2.0に同梱されているMercuryテーマは、Canvasと密接に統合されたデフォルトテーマです。見出し、ボタン、セクション、グリッド、ヒーロー画像など多数のプリビルトSDCコンポーネントが含まれており、すぐにページ構築を始められます。Mercuryを起点としてカスタムテーマを開発することで、Canvasとの互換性を維持しながら独自のデザインシステムを構築できます。
Starshot Demo Design System（SDDS）
公式デモパッケージに含まれるStarshot Demo Design System（SDDS）は、civic themeをベースに構築されたコンポーネントライブラリです。WCAG 2.2準拠のアクセシブルなコンポーネント群を提供しており、FigmaとStorybookのUIキットも公開されています。自社のデザインシステムをCanvasに統合する際の参考実装として活用できます。
Tailwind CSS + StorybookによるSDC開発フロー
Canvasエコシステムでは、Tailwind CSSとStorybookを組み合わせたSDC開発フローが広まっています。SDC Canvas Sprintスターターキットを使うと、component.ymlと.twigファイルを作成するだけで、自動的にStorybookにコンポーネントが表示されます。SCSSはCSSに自動コンパイルされ、ビルドステップの手間を大幅に削減できます。
# SDC Canvas Sprint スターターキットの導入
composer require drupal/sdc_canvas_sprint
# Storybookの起動（コンポーネント開発サーバー）
npm run dev:storybook
# プロダクションビルド
npm run build8. AI統合：Canvas AIアシスタント
Drupal CMS 2.0では、Canvas AIモジュールによるAIアシスト機能がオプションで利用できます。AIアシスタントはコンテンツ生成、レイアウト提案、コンポーネントの配置最適化などをサポートし、コンテンツ制作の効率化を図ります。開発者向けには、AIアシスタントをカスタムコンポーネントと組み合わせることで、ユーザーの入力に応じて動的にページ構造を提案するインタラクティブな編集体験を構築することも可能です。
# Canvas AIモジュールのインストール
ddev composer require drupal/canvas_ai
ddev drush en canvas_ai -yAIモジュールを有効化後、Canvas編集画面の右上にAIアシスタントのアイコンが表示されます。自然言語でページ構成を指示すると、適切なコンポーネントを選んで配置する提案が生成されます。
9. Canvas管理ページとAPIの活用
主要な管理ページ
Canvasモジュールを有効化すると、以下の管理ページが追加されます。コンポーネント管理は/admin/appearance/componentで行い、SDC・コードコンポーネント・ブロックコンポーネントをすべて一覧表示できます。Canvasページ管理は/admin/content/pagesで行い、Canvas Pageコンテンツエンティティの一覧・編集・削除を行います。Canvas編集UIへのエントリーポイントは/canvasです。
HTTP API
CanvasはReactベースのUIとDrupalバックエンドを繋ぐHTTP APIを提供しています。このAPIを使うことで、ヘッドレス構成のフロントエンドからCanvasのコンテンツエンティティを操作したり、カスタムダッシュボードからページ管理機能を組み込んだりすることが可能です。また、コンテンツのインポート・エクスポート・マイグレーションにもAPIを活用できます。
コンポーネントのバージョン管理
Canvasはコンポーネントの包括的なバージョニング機能を備えています。コンポーネントの変更履歴を追跡でき、必要に応じて以前のバージョンにロールバックできます。マルチステップのアンドゥ（Ctrl+Z）機能もサポートしているため、編集中のミスを素早く取り消せます。
10. セキュリティとパーミッション設計
Canvasのアクセス制御
CanvasはDrupalのきめ細かなアクセス制御を活用しています。「Canvas pages: Create new Canvas pages」「Canvas pages: Edit any Canvas page」「Canvas pages: Administer component library」など、専用のパーミッションがロール別に設定可能です。コンポーネントライブラリの管理権限と、実際にページを編集する権限を分離できるため、開発者がコンポーネントを管理し、編集者がページを構成するという役割分担を明確に実現できます。
コンテンツモデリングとの統合
コンテンツテンプレートで「Exposed slots（公開スロット）」を設計する際には、編集者にどの範囲のレイアウト変更を許可するかを慎重に設計してください。スロットを広く公開しすぎると、編集者が意図しないレイアウト崩れを起こすリスクがあります。本番環境では、スロットの公開範囲を最小限に絞り、デザインシステムの一貫性を保護する設計が推奨されます。
まとめ
Drupal Canvasは、Drupalエコシステムにおけるページ構築の考え方を根本から変えるツールです。開発者にとっては、ReactのエコシステムをDrupal上で活用できる新しいフロントエンド開発体験を提供します。サイトビルダーにとっては、コーディングなしで本格的なサイトを組み立てられる自由度をもたらします。コンテンツ編集者にとっては、開発者に依存せずページを更新・管理できる独立性を実現します。
現在（2026年2月時点）のDrupal Canvas 1.1.0はDrupal 11.2以降で安定稼働しており、Drupal CMS 2.0の中核機能として採用されています。ParagraphsやLayout Builderからの移行を検討しているチームはもちろん、新規プロジェクトでDrupalの採用を検討している開発者にとっても、Canvasは非常に有力な選択肢です。
まずはDDEVで公式デモパッケージを動かしてみてください。ブラウザ上でコンポーネントを作りながら操作感を掴むのが、Canvas習得の最短ルートです。コミュニティへの参加はDrupal Slackの#drupal-canvasチャンネルから。活発な議論が日々展開されており、開発に関するフィードバックや質問の場として大いに活用できます。
カテゴリ
カテゴリ
タグ
関連リンク
