Pagedesigner
UI Patternsを活用したビジュアルコンテンツ作成を可能にするDrupal用ドラッグ＆ドロップページビルダー。
pagedesigner
インストール
composer require 'drupal/pagedesigner:^4.2'
概要
Pagedesignerは、強力なオープンソースWebビルダーフレームワークであるGrapesJSとDrupalのUI Patternsモジュールを統合した、Drupal向けの包括的なビジュアルページビルダーモジュールです。コンテンツ編集者が技術的な知識を必要とせずに、直感的なドラッグ＆ドロップインターフェースを通じてリッチで構造化されたページを作成できます。
このモジュールは「Pagedesigner Element」というカスタムエンティティタイプを導入し、ページの構成要素を階層構造で保存します。これらの要素は専用のフィールドタイプを通じてノードに接続され、Drupalのリビジョンおよび翻訳機能を維持しながらシームレスなコンテンツ管理を実現します。
主な機能には、リアルタイムビジュアル編集、パターンベースのコンポーネントシステム、メディア統合、競合を防ぐためのコンテンツロック、プラグインベースのアーキテクチャによる広範なカスタマイズが含まれます。このモジュールは複数のテーマ、レスポンシブデザイン編集をサポートし、Webform、Linkit、Yoast SEOなど様々なDrupalエコシステムモジュールと統合します。
Features
- GrapesJSエディタによるドラッグ＆ドロップビジュアルページビルダー
- UI Patternsモジュールと統合されたパターンベースのコンポーネントシステム
- 完全なリビジョンと翻訳サポートを備えたカスタムPagedesigner Elementエンティティ
- CKEditor 5によるWYSIWYGテキスト編集でのリアルタイムコンテンツ編集
- 同時編集の競合を防ぐコンテンツロック機構
- 要素のCRUD操作、パターン管理、レンダリング用REST API
- カスタム要素ハンドラーとアセットタイプ用の拡張可能なプラグインアーキテクチャ
- すべての要素操作に対するbefore/afterフックを持つイベント駆動システム
- きめ細かなアクセス制御のためのパターンごとの動的パーミッション
- 画像、動画、音声、ドキュメント、埋め込み、SVGをサポートするメディア統合
- Drupal Blocks、Webforms、外部統合のサポート
- アクティブなテーマに基づくパターンフィルタリングを備えたマルチテーマサポート
- レスポンシブブレークポイントサポートを持つCSSスタイル管理
- ページ複製およびクローン機能
- 構造検証とクリーンアップ用のDrushコマンドを備えたデバッグツール
Use Cases
マーケティングランディングページ
柔軟なレイアウト、ヒーローセクション、機能グリッド、お客様の声、コールトゥアクションボタンを備えたビジュアルに豊富なマーケティングランディングページを作成します。マーケティングチームは事前定義されたパターンを使用して、開発者の支援なしでページを構築・更新できます。
ブログと記事ページ
テキストコンテンツ、画像、埋め込み動画、プルクォート、関連コンテンツセクションを組み合わせた構造化された記事レイアウトを構築します。著者は一貫したデザインパターンを維持しながらコンテンツに集中できます。
製品ショーケース
画像ギャラリー、仕様表、機能ハイライト、埋め込みデモ動画を備えた製品詳細ページを作成します。ギャラリーサブモジュールはリッチなメディアプレゼンテーションを可能にします。
多言語コンテンツ
完全な翻訳ワークフローをサポートするページを構築します。Pagedesigner要素は翻訳可能で、構造的なレイアウトを共有しながら言語ごとに別々のコンテンツを維持します。
フォーム統合ページ
リード獲得、お問い合わせページ、アンケート用のWebformフォームとコンテンツを組み合わせたページを作成します。Webformサブモジュールはページレイアウト内でのシームレスなフォーム埋め込みを可能にします。
デザインシステム実装
UI Patternsを使用したコンポーネントベースのデザインシステムを実装します。デザイナーがパターンテンプレートを作成し、コンテンツ編集者が承認されたコンポーネントを使用してページを組み立て、ブランドの一貫性を確保します。
Tips
- 意味のあるカテゴリでUI Patternsを作成し、コンテンツ編集者がエディタサイドバーでコンポーネントを発見しやすくします。
- パターンに「designer: 1」の追加設定を使用して、高度なパターンを「access pagedesigner designer patterns」権限を持つユーザーに制限します。
- イベントシステムを活用して、コアコードを変更せずにカスタム検証や変換ロジックを実装します。
- ローディング画面のコンテンツは設定フォームを通じてサイトのブランディングに合わせてカスタマイズできます。
- 複雑なページでのパフォーマンス向上のために、DOM除外設定を使用してエディタによるコンテンツ以外の要素の処理を防ぎます。
- Drupalコアまたはモジュールの更新後は常にPagedesigner機能をテストしてください。GrapesJS統合はJavaScriptライブラリの変更に敏感な場合があります。
- 開発中はpagedesigner_debugモジュールを使用して構造的な問題を早期に発見します。
- pattern.ymlで定義されたパターンスタイリングオプションは、「edit pagedesigner styles」権限を持つユーザーのみが利用可能です。
Technical Details
Admin Pages 6
/admin/config/pagedesigner
Pagedesignerモジュール設定のメイン設定ランディングページ。
/admin/config/pagedesigner/settings
エディタ設定、トレイト設定、パフォーマンスオプションを含むPagedesignerモジュールのグローバル設定を構成します。
/admin/config/pagedesigner/locks
アクティブなコンテンツロックを表示および管理します。ユーザーがPagedesignerでコンテンツを編集しているとき、競合を防ぐためにロックが作成されます。管理者はすべてのアクティブなロックを表示し、必要に応じて強制的に削除できます。
/admin/structure/pagedesigner_type
Pagedesigner要素タイプ（バンドル）を管理します。これらのタイプは、ページビルダーで利用可能なさまざまな種類のビルディングブロックを定義します。
/admin/content/pagedesigner_elements
システム内のすべてのPagedesigner要素の管理用リスト。デバッグやコンテンツ管理に便利です。
/node/{node}/pagedesigner
ドラッグ＆ドロップPagedesignerを使用したノードコンテンツのビジュアル編集インターフェース。このページは利用可能なすべてのパターンを持つGrapesJSエディタを読み込み、リアルタイムのコンテンツ編集を可能にします。
権限 8
Hooks 3
hook_pagedesigner_css_statement_alter
個々の要素にレンダリングされるCSSステートメントを変更します。各要素のCSS出力に対して呼び出されます。
hook_pagedesigner_css_rendered_alter
Rendererサービスによってレンダリングされる最終的なCSS出力を変更します。各レスポンシブブレークポイント（large、medium、small）に対して呼び出されます。
hook_pagedesigner_access
特定のエンティティに対するpagedesigner編集アクセスを制御します。アクセスを拒否するにはAccessResult::forbidden()を返します。
Drush Commands 2
drush pagedesigner_debug:check
Pagedesigner要素の構造に不整合やエラーがないかチェックします。変更を加えずに問題を報告します。
drush pagedesigner_debug:correct
Pagedesigner要素の構造の問題を対話的にチェックして修正します。修正を適用する前に確認を求めます。
Troubleshooting 6
コンテンツロック機構がアクティブです。他のユーザーが終了するまで待つか、ロックが古い場合は/admin/config/pagedesigner/locksに移動してロックを強制的に削除します（「administer pagedesigner locks」権限が必要です）。
UI Pattern定義のpattern.ymlファイルの追加設定セクションに「pagedesigner: 1」が含まれていることを確認してください。また、パターンに有効なタイプが定義されており、ユーザーが「use pattern [pattern_id]」権限を持っていることを確認してください。
pagedesigner_debugサブモジュールを有効にし、「drush pagedesigner_debug:check」を実行して問題を特定し、その後「drush pagedesigner_debug:correct」を実行して対話的に修正します。
ブラウザコンソールでREST APIエラーを確認してください。/admin/config/services/restでRESTリソースが有効になっていることを確認してください。ユーザーが「edit pagedesigner element entities」権限を持っており、必要なREST認証が設定されていることを確認してください。
パフォーマンス設定を使用して不要なDOM要素をキャンバスから除外してください。読み込まれるパターンが多すぎないか確認してください。「exclude_dom_elements_before」および「exclude_dom_elements_after」設定を検討してください。
Pagedesignerフィールドがコンテンツタイプで翻訳可能に設定されていることを確認してください。コンテナ要素は親エンティティが翻訳されると自動的に翻訳を作成する必要があります。
Security Notes 5
- 「administer pagedesigner element entities」権限はすべてのPagedesignerコンテンツに対する完全な制御を提供するため、信頼された管理者にのみ付与する必要があります。
- コンテンツロックはデータ損失を防ぐのに役立ちますが、セキュリティ機能ではありません - 時間ベースの有効期限（180秒）を使用し、強制的にオーバーライドできます。
- REST APIエンドポイントには適切な認証と権限が必要です。RESTリソース設定を確認して、適切なアクセス制御を確保してください。
- テキストフォーマットが許可する場合、HTMLコンテンツトレイトはJavaScriptを実行できます - 適切なテキストフォーマット制限を使用してください。
- 動的パターン権限はすべてのUI Patternsに対して生成されます - システムに新しいパターンを追加した後は付与された権限を確認してください。