Drupal Canvas

サイトビルダーがブラウザベースのビジュアルインターフェースを通じてウェブサイトのテーマ設定と構築を行い、コンテンツ作成者がコードを書かずにコンポーネントを使用してページを構成できる、包括的なサイト構築およびコンテンツ構成システムです。

canvas
1,110 sites
59
drupal.org
gui api field content theme
site-building page-builder components visual-editor content-composition SDC no-code low-code theming layout
Drupal 11

インストール

Drupal 11 v1.0.0
composer require 'drupal/canvas:^1.0'

概要

Drupal Canvasは、Drupalでのウェブサイトの構築と管理方法を革新する、洗練されたコンポーネントベースのサイト構築プラットフォームです。従来のDrupalテーマ設定の専門知識を不要にする、ビジュアルなブラウザベースのインターフェースを提供します。

このモジュールにより、Drupalの経験がないサイトビルダーでも、基本的なHTML、CSS、テンプレートマークアップ（Twigなど）以外のコードを書くことなく、ブラウザのみを使用してウェブサイト全体のテーマ設定と構築を簡単に行えます。コンテンツ作成者は、開発者に頼ることなくページの任意の部分でコンテンツを構成できます。

Canvasは、Single Directory Components（SDC）、ブラウザで直接作成するJavaScript/Code Components、コンポーネントとしてのBlockプラグインなど、複数のコンポーネントソースをサポートしています。コンポーネントの包括的なバージョン管理システム、自動保存機能、ReactベースのUIのための強力なHTTP API、AIを活用したページ構築やパーソナライゼーションなどの高度な機能を備えています。

このモジュールには、コンポーネント、パターン、フォルダ、ページリージョン、コンテンツテンプレート、アセットライブラリを管理するための設定エンティティの完全なセットが含まれています。Canvasインターフェース内で完全にスタンドアロンページを構築するための専用の「Canvas Page」コンテンツエンティティタイプを提供します。

Features

  • ReactベースのUIによるビジュアルなブラウザベースのサイト構築インターフェース
  • 複数のコンポーネントソースのサポート：Single Directory Components（SDC）、JavaScript/Code Components、Blockプラグイン
  • 自動バージョン追跡とフォールバックサポートを備えたコンポーネントバージョン管理システム
  • 設定エンティティとコンテンツエンティティ両方の自動保存機能
  • UI通信用のOpenAPI仕様に準拠した包括的なHTTP API（v0）
  • コンテンツエンティティバンドル用のコンポーネントベースレイアウトを定義するContent Templates
  • コンポーネントツリーでテーマリージョンをカスタマイズするPage Template/Regionシステム
  • 再利用可能なコンポーネントツリー構成を作成するPatternシステム
  • コンポーネントとパターンのフォルダ整理
  • サイト全体のカスタムCSSとJavaScript用のGlobal Asset Library
  • JSON Schema定義をDrupalフィールドタイプにマッピングするShape Matchingシステム
  • コンテンツエンティティから構造化データを評価するPropExpressionシステム
  • スタンドアロンページ構築用のCanvas Pageコンテンツエンティティタイプ
  • 一貫したプレビューレンダリングのためのセミカップルドテーマエンジン
  • Canvas UIにカスタム機能を追加するExtensionシステム
  • コンポーネント内のリッチテキスト編集のためのCKEditor 5統合
  • コンポーネントでの画像およびメディア処理のためのMedia Library統合

Use Cases

コードなしでのランディングページ構築

マーケティングチームはCanvasビジュアルインターフェースを通じてランディングページを完全に作成できます。Canvas Pageコンテンツエンティティタイプを使用して、コンポーネントをドラッグアンドドロップし、自動生成されたフォームでプロパティを設定し、リアルタイムで変更をプレビューできます。Drupalテーマ設定、PHP、Twigの知識は必要ありません。

一貫したコンテンツテンプレートの作成

サイトビルダーは特定のコンテンツタイプ（記事、イベント、製品など）のコンポーネントベースのレイアウトを定義するContent Templatesを作成できます。コンテンツエディタはコンテンツデータを入力し、ビジュアル構造は一貫して維持されます。公開スロットにより、定義された境界内で限定的なレイアウトの柔軟性が許可されます。

ブラウザでのカスタムコンポーネント開発

開発者はCanvas UI内でJavaScriptとCSSを使用してCode Componentsを直接作成できます。これらのコンポーネントはJSON Schemaで定義されたプロパティをサポートし、canvasData設定を通じてDrupalデータにアクセスできます。コードベースに触れずにインタラクティブなコンポーネントを作成するのに最適です。

コンポーネント構成のパターンとしての再利用

一般的なコンポーネント配置（特定のスタイリングを持つヒーローセクションなど）はPatternsとして保存できます。これらのパターンは任意のページやテンプレートに挿入でき、一貫性を確保し、繰り返しの設定作業を削減します。

テーマリージョンのカスタマイズ

サイトビルダーはPage Regionシステムを通じてテーマリージョン（サイドバー、ヘッダー、フッターなど）にコンポーネントツリーを配置できます。これはブロックを配置する代わりのビジュアルな方法を提供し、より複雑なリージョン構成を可能にします。

外部アプリケーション統合

canvas_oauthサブモジュールを使用することで、ヘッドレスCMSフロントエンドやモバイルアプリなどの外部アプリケーションが認証されたHTTP APIを通じてCanvasと対話できます。これにより、Canvasのビジュアル編集機能を維持しながら、デカップルドアーキテクチャが可能になります。

Tips

  • Canvasエディタで'V'キーのショートカットを使用して、UIオーバーレイを一時的に非表示にし、ブラウザの開発者ツールでレンダリングされたプレビューマークアップを検査しやすくします。
  • 開発中はcanvas_dev_modeモジュールをインストールして、デバッグ用の拡張ツールバーとプライベートAPIにアクセスできるようにします。
  • 外部データが必要なCode Componentsには、dataDependencies設定を使用してURLフェッチとdrupalSettings要件を宣言します。
  • Canvas用のSDCコンポーネントを作成する際は、各必須プロパティの例を含む包括的なJSON Schemaを定義して、自動生成されたフォームの体験を向上させます。
  • よく使用するコンポーネント構成をPatternsに保存し、一貫したレイアウトのためにページに挿入します。
  • canvas_viteモジュールは、Canvas UI開発中にHot Module Replacementを有効にすることで、UI開発を大幅に高速化します。

Technical Details

Admin Pages 4
コンポーネント /admin/appearance/component

Canvasシステムで利用可能なすべてのコンポーネントを表示・管理します。コンポーネントは有効化、無効化、監査、フォルダへの整理が可能です。このページにはSDC、Code Components、Blockプラグインを含むすべてのソースからのコンポーネントが一覧表示されます。

ページ /admin/content/pages

Canvas Pageコンテンツエンティティを管理します。Canvasビジュアルエディタで作成したページの表示、編集、削除を行います。

Drupal Canvas /canvas

Canvasビジュアル編集インターフェースへのメインエントリーポイント。コンポーネントを使用してページとコンテンツを構成するためのReactベースのUIを開きます。

Canvasエディタ /canvas/editor/{entity_type}/{entity}

コンポーネントを使用してコンテンツを構成するためのビジュアルエディタインターフェース。Canvas Page、Content Templates、その他のコンポーネントツリー対応エンティティの編集をサポートします。

権限 10
コンポーネントの管理

すべてのコンポーネント設定の管理、コンポーネントの有効化/無効化、コンポーネント監査情報へのアクセスを行います。

Code Componentsの管理

JavaScript/Code Componentsの作成、編集、削除を行います。Code ComponentsはJavaScriptを実行できるため、この権限は制限されています。

フォルダの管理

コンポーネントとパターンを整理するためのフォルダの作成、編集、削除を行います。

パターンの管理

再利用可能なパターン設定の作成、編集、削除を行います。

ページテンプレートの管理

ページリージョンの設定とテーマリージョンのページテンプレート設定を管理します。

コンテンツテンプレートの管理

コンテンツエンティティバンドル用のコンポーネントレイアウトを定義するコンテンツテンプレートの作成、編集、削除を行います。

Canvas Pageの作成

新しいCanvas Pageコンテンツエンティティを作成します。

Canvas Pageの編集

既存のCanvas Pageコンテンツエンティティを編集します。

Canvas Pageの削除

Canvas Pageコンテンツエンティティを削除します。

Drupal Canvasコンテンツの公開

Drupal Canvasで自動保存された変更でエンティティを更新します。対象エンティティの更新権限が必要です。

Hooks 1
hook_canvas_storable_prop_shape_alter

コンポーネントプロパティの保存可能なプロパティシェイプを変更します。このhookにより、モジュールはJSON Schemaプロパティ定義がDrupalフィールドタイプ、ウィジェット、設定にどのようにマッピングされるかをカスタマイズできます。

Troubleshooting 5
Canvas UIが空白画面を表示するか、読み込まれない

modules/contrib/canvas/uiディレクトリで'npm install && npm run build'を実行してフロントエンドUIがビルドされていることを確認してください。また、canvas_starkテーマがインストールされていることも確認してください。

コンポーネントがコンポーネントライブラリに表示されない

コンポーネントがソースの要件を満たしているか確認してください。SDCコンポーネントの場合、component.ymlファイルに有効なJSON Schema定義があることを確認してください。/admin/appearance/component/statusにアクセスして、無効化された非互換のコンポーネントを確認してください。

自動保存が機能しない

ユーザーが'publish auto-saves'権限を持ち、編集中のエンティティへの更新アクセス権があることを確認してください。ブラウザコンソールでAPIエラーを確認してください。

Code Componentsが正しくレンダリングされない

JavaScriptコードが有効で、プロパティがJSON Schemaで正しく定義されていることを確認してください。ブラウザコンソールでJavaScriptエラーを確認してください。

JSON:API互換性の警告

CanvasはJSON:APIの読み取り専用モードを無効にする必要があります。JSON:API設定に関する警告についてはステータスレポートを確認してください。

Security Notes 4
  • 'administer code components'権限はCode Componentsが任意のJavaScriptを実行できるため、制限付きとしてマークされています。信頼できるユーザーにのみこの権限を付与してください。
  • Canvasはすべての変更を伴うAPIエンドポイントにCSRF保護を使用しています。外部APIアクセスには、canvas_oauthサブモジュールを通じたOAuth2認証が必要です。
  • 安全な認証を確保するために、外部アプリケーション統合にはcanvas_oauthサブモジュールを使用する必要があります。
  • コンポーネントツリー入力は、無効なデータの注入を防ぐために定義されたスキーマに対して検証されます。