Visual Layout Suite (VLSuite)
VLSuiteは、DrupalのLayout Builderを基盤とした包括的なコンテンツ編集体験を提供するモジュールです。高度に設定可能なレイアウト、ブロック、ユーティリティクラス、アニメーション、コレクションコンポーネントを備えた、すぐに使えるWYSIWYG編集体験を実現します。
vlsuite
インストール
composer require 'drupal/vlsuite:^2.3'
概要
Visual Layout Suite (VLSuite)は、DrupalのLayout Builderを使用したサイト構築とコンテンツ作成において、最短時間で最大の価値を提供します。レイアウトレベルとコンテンツレベルの両方でWYSIWYG（見たままが得られる）体験を提供し、外観バリエーションのライブプレビューも含まれています。
このモジュールは、高度に設定可能なレイアウト（1〜4カラム＋スライダー）、基本ブロック（画像、アイコン、テキスト、CTA、ローカル動画、YouTube/Vimeo用リモート動画）、およびHero、カード、ギャラリー、ステートメント/引用などの拡張可能なプリセットバリエーションを持つ複合コレクションブロックを提供します。
VLSuiteは、識別子ベースのシステムを使用したCSSユーティリティクラスの概念を採用しており、以前に作成したコンテンツを編集することなく、実際のCSSクラスを切り替えることができます。これにより、使用するテーマやCSSフレームワークに依存しない優れた柔軟性が得られます。デフォルトでは、Bootstrap 5ベースのテーマですぐに動作します。
このモジュールには包括的な権限制御が含まれており、ユーザーに異なるレベルのコンテンツ編集を許可でき、経験豊富なエディター向けに「上級」としてマークできるユーティリティがあります。ディストリビューション、プロファイル、テーマへの依存がなく、他のLayout Builderアプローチとも互換性があります。
Features
- Drupal CoreのLayout Builderを基盤とした強化された編集体験
- レイアウトとコンテンツレベルでのWYSIWYG体験と外観バリエーションのライブプレビュー
- 設定可能なレイアウト：オプションの上部/下部リージョンを持つ1〜4カラム、およびスライダーサポート
- 基本ブロック：画像、アイコン、テキスト、CTA、ローカル動画、リモート動画（YouTube/Vimeo）
- コレクションブロック：拡張可能なプリセットバリエーションを持つHero、カード、ギャラリー、ステートメント/引用
- Bootstrap 5デフォルトのCSSユーティリティクラスシステム（任意のCSSフレームワーク用に設定可能）
- コンテンツ更新なしでCSSを変更できる識別子ベースのクラスシステム
- ホバーでユーティリティクラスをライブプレビューし、クリックで適用する機能
- 設定可能な入場/退場エフェクトを持つAnimate.cssを使用したスクロールトリガーアニメーション
- カスタマイズ可能なパラメータを使用したセクションと複数値フィールドのスライダー機能
- デフォルトでMaterial Iconsを使用するアイコンフォント統合（設定可能）
- Layout Builder UXを改善するモーダルダイアログ
- 再利用可能なセクションと完全なレイアウトのためのセクションライブラリ統合
- すぐに使用できるランディングページコンテンツタイプ
- 「上級」ユーティリティマーキングによる権限ベースのアクセス制御
- カスタムVLSuiteモジュールを作成するためのDrushジェネレーター
- セクションのメディア背景サポート（画像と動画）
- 水平タブとアコーディオン機能のためのタブレイアウト
- Layout Builderでのブロック複製機能
- 固定ヘッダー/フッターセクション用のコンテンツ上部/下部表示モード
Use Cases
ランディングページ作成
vlsuite_landingコンテンツタイプを使用してビジュアルリッチなランディングページを作成します。背景メディア付きのHeroセクション、機能紹介用のカードグリッド、ポートフォリオ用のギャラリーセクション、コンバージョン用のCTAブロックを追加します。ユーティリティクラスを使用して、カスタムCSSなしでスペーシング、色、タイポグラフィをカスタマイズします。
マーケティングキャンペーンページ
コレクションブロック（Hero、カード、ステートメント）と設定可能なレイアウトを組み合わせてプロモーションページを素早く構築します。スクロールトリガーの入場エフェクト用にアニメーションを適用します。推薦文カルーセルや機能紹介にスライダー機能を使用します。
コンテンツエディターの能力向上
コンテンツエディターが開発者の支援なしにプロフェッショナルな見た目のページを作成できるようにします。ライブプレビュー機能により、エディターは適用前にホバーでユーティリティクラスの効果を確認できます。権限制御により、エディターには適切なオプション（基本vs上級ユーティリティ）のみが表示されます。
コンポーネントライブラリ開発
VLSuiteをサイト固有のコンポーネントライブラリ構築の基盤として使用します。既存のコレクションブロックを拡張するか、ジェネレーターを使用して新しいものを作成します。Section Library統合により、承認されたレイアウトをサイト全体で保存して再利用できます。
ブランド一貫性の実装
ブランドのデザインシステムに合わせてユーティリティクラスを設定します。承認された色、スペーシング値、タイポグラフィオプションを設定します。コンテンツエディターはこれらの事前承認されたオプションからのみ選択でき、すべてのページでブランドの一貫性を確保します。
レスポンシブページ構築
カラム幅設定とレスポンシブユーティリティクラスを使用してレスポンシブレイアウトを作成します。メディア背景は自動的にレスポンシブ動作を処理します。スライダーコンポーネントにはレスポンシブブレークポイント設定が含まれます。
アニメーションリッチな体験
魅力的なユーザー体験のためにセクションとブロックにスクロールトリガーアニメーションを追加します。入場、退場、無限アニメーションタイプから選択します。Intersection Observer設定で正確なアニメーションタイミングを構成します。
カスタムブロック開発
ジェネレーターまたは手動でカスタムブロックタイプを作成してVLSuiteを拡張します。VLSuiteの規約に従えば、新しいブロックは自動的にユーティリティクラスとアニメーションサポートを継承します。
Tips
- すべての機能、サンプルコンテンツ、適切な設定を含む最速の初期セットアップにはVLSuite Demoを有効にしてください
- 識別子ベースのユーティリティクラスシステムを使用して、コンテンツを編集せずにCSS実装を変更できます
- 基本ユーザー向けにエディターインターフェースをクリーンに保つため、専門的なユーティリティを「上級」としてマークしてください
- ライブプレビュー機能を活用 - クリックして適用する前にユーティリティオプションにホバーして効果を確認できます
- Section Libraryを使用して、成功したセクションデザインをサイト全体で保存して再利用してください
- レイアウトで背景メディアを使用する前に、VLSuiteメディア設定で背景用のメディアタイプを設定してください
- 見出しメニューブロックには適切なHTMLフォーマットが必要です - テキストフォーマットが見出しタグで'id'属性を許可していることを確認してください
- カスタムテーマの場合、設定フォームでユーティリティクラスマッピングをCSSフレームワークに合わせて調整してください
- 読みやすいコンテンツ幅で全幅ビジュアルセクションを実現するには、含まれたコンテンツで「端から端まで背景」を使用してください
- 良好なユーザー体験を確保するため、異なるスクロール速度とデバイスサイズでアニメーションをテストしてください
Technical Details
Admin Pages 7
/admin/config/vlsuite
Visual Layout Suiteモジュールのメイン設定ハブ。すべてのVLSuiteサブモジュール設定へのアクセスを提供します。
/admin/config/vlsuite/utility-classes
エディターがレイアウト、セクション、リージョン、ブロックに適用できるCSSユーティリティクラスを設定します。クラスプレフィックス、値、アイコンを定義し、各ユーティリティを適用できる要素を指定します。
/admin/config/vlsuite/animations
CSSアニメーションクラスを使用したスクロールトリガーアニメーションを設定します。デフォルト設定ではAnimate.cssライブラリクラスを使用します。
/admin/config/vlsuite/icon-font
VLSuiteコンポーネント全体で使用するアイコンフォント設定を構成します。デフォルトではGoogle Material Iconsを使用します。
/admin/config/vlsuite/block
ユーティリティクラスを適用できるエンティティフィールドとブロックタイプを設定します。
/admin/config/vlsuite/media
VLSuiteコンポーネントで背景およびメインメディアとして使用できるメディアタイプを設定します。
/admin/config/vlsuite/modal
Layout Builder統合用のモーダルダイアログ設定を構成します。
権限 5
Hooks 2
hook_entity_view_alter
固定ヘッダー/フッターコンテンツセクション用に、Layout Builderを使用するエンティティにvlsuite_full_content_topおよびvlsuite_full_content_bottom表示モードを追加します。
hook_help
Markdownフィルタが利用可能な場合、README.mdをレンダリングしてヘルプページコンテンツを提供します。
Drush Commands 1
drush generate vlsuite-module
ライブラリテンプレートに基づいてブロックコンポーネントを含むカスタムVLSuiteモジュールを生成します。モジュール構造、エンティティ定義、設定を作成します。
Troubleshooting 8
views-view.html.twigテンプレートが行出力をラップする'div.view-content'を追加していることを確認してください。artisan:views SDCコンポーネントを参照として使用されているか確認してください。
コアブロックプラグインではなく'vlsuite_x'ブロックバリアントを使用していることを確認してください。ユーザーロールにVLSuite権限を付与してください。
適切なユーザーロールにVLSuite権限（「上級ユーティリティクラスを使用」、「上級レイアウトオプションを使用」など）を付与してください。
Bootstrap 5テーマを使用している場合、Layout BuilderとVLSuiteを使用するページに'container'クラスが追加されていないことを確認してください。エディターがセクションごとに端から端までを選択します。
「レイアウトオプション」のLayout Builder Restrictions設定で新しいブロックタイプを許可するか確認してください。これはエンティティディスプレイごとに設定可能です。
ユーティリティクラスが正しい'apply_to'ターゲットに適用されるように設定されていることを確認してください。CSSフレームワークのクラスがテーマで利用可能か確認してください。
Animate.css（またはカスタムアニメーションCSS）が読み込まれていることを確認してください。しきい値設定（デフォルト0.25）とroot_margin設定を確認してください。JavaScriptがブロックされていないことを確認してください。
VLSuiteメディア設定（bg_types）でメディアタイプが有効になっていることを確認してください。メディアタイプに'vlsuite_background'表示モードが存在することを確認してください。
Security Notes 5
- 'administer vlsuite settings'権限には'restrict access: true'があり、信頼できる管理者にのみ付与すべきです
- ユーティリティクラス識別子はインジェクション問題を引き起こす可能性のある特殊文字を防ぐためにトランスリタレーションされます
- メディア背景は適切なメディアエンティティのみが使用されることを確認するためにエンティティ参照バリデーションを使用します
- ブロックコンテンツはDrupalの標準エンティティアクセス制御に従います
- Layout Builderアクセス権限はすべてのVLSuiteレイアウト操作で尊重されます