ドラッグ＆ドロップエリア
このページでは、dnd_areaの効果と概念について説明します。この効果は重要なポイントなので、コーディングに取り掛かる前にぜひ理解しておいてください。
開発の準備ができたら、dnd_area入門およびdnd_areaリファレンスを参照してください。
開発者がドラッグ＆ドロップエリアを使うと、制作担当者に役立つページエリアとグローバルパーシャルを提供できます。ドラッグ＆ドロップエリアを使うと制作担当者はモジュールの配置、レイアウトの変更、コンテンツエディター内での一部のスタイル設定ができます。これにより、作成するテンプレートの数を減らすことができ、制作担当者はこれを使用して目的に応じてさまざまなレイアウトのページを自分で作成できるようになります。小さなレイアウトを変更するためにコードに手を加えたり新しいテンプレートを必要としたりすることなく、制作担当者が自分で作業できます。柔軟で使いやすいので、テーマの少なくとも1つのテンプレートにドラッグ＆ドロップエリアを含めることをお勧めします。
現時点では、ブログ記事とEメールテンプレートでドラッグ＆ドロップエリアを使用することはできません。
制作担当者がドラッグ＆ドロップエリアを含むテンプレートを使用してページを作成する際には、開発者がレイアウトに配置した定義済みモジュールを使用したページが最初に表示されます。これにより、制作担当者はこのテンプレートを使用する多くのページがどのような見た目になるか、あるいはどのような表示に役立つかを理解できます。これはあくまで初期状態の外観で、固定ではありません。制作担当者は、モジュール、セクション、行、列をドラッグ＆ドロップして再配置できます。これらのサイズ変更、コンテンツの編集、さまざまなビジュアルスタイル設定の調整を行うことで、コンテンツを垂直方向と水平方向にそろえたり、背景を追加したりできます。
制作担当者にとっては、非常に便利です。小さな調整のために開発者を煩わさずに、シンプルにページを変更できる豊富な柔軟性が得られます。
開発者にとって、dnd_areaの作業は一般的なCSSフレームワークとそのグリッドを使用することとある程度似ています。開発者はセクションと呼ばれるコンテナーを使用してページをレイアウトします。セクションに行が含まれています。行の内部はモジュールと列です。ページエディターで制作担当者がドラッグ＆ドロップエリアでできるほとんど全ての作業は、テンプレート自体の中のコードで開発者が実行できることと近くなっています。開発者が構築するのは、テンプレートを使用するページの既定のコンテンツです。
テンプレートに入れるハードコードのモジュールタグと比べたドラッグ＆ドロップエリアのメリットは、制作担当者がコンテンツと内部レイアウトを変更できることです。この柔軟性があるので、ドラッグ＆ドロップエリアを使用する1つのテンプレートでさまざまなページデザインを解決できます。
実際のコードでの様子を紹介するためにdnd_areaを使用してCMS Theme Boilerplateテンプレートを作成しました。
ドラッグ＆ドロップエリアはわずかな構成要素で作成されており、それらがレイアウトを定義し、スタイル調整を柔軟にしています。dnd_areaタグはページエディターが認識するページの領域を作成し、ドラッグ＆ドロップ要素の追加、削除、再配置を可能にします。これらはHTML+HubLテンプレート内のHubLを使用して定義します。ドラッグ＆ドロップ要素は全てドラッグ＆ドロップエリアの中にあります。ドラッグ＆ドロップエリアをネストすることはできず、ドラッグ＆ドロップ要素にドラッグ＆ドロップエリア自体を含めることはできません。
開発者が理解しておくべき重要な点は、テンプレートで定義したドラッグ＆ドロップエリアのコンテンツがそのテンプレートを使用するページの初期状態になる点です。制作担当者は、ドラッグ＆ドロップエリア内のコンテンツを完全に変更できます。開発者の役割は、コンテンツ作成者が変更を始めるための最適な初期状態を提供することです。
この図は、さまざまなドラッグ＆ドロップ要素をどのようにネストできるかを示しています。理解しておくべき重要な仕組みは、セクションと行の両方に列とモジュールを含めることができる点です。
セクションは特殊なタイプの行です。セクションはdnd_sectionタグを使用してテンプレート内に作成します。これはドラッグ＆ドロップエリアの直接の子にすることができる唯一のドラッグ＆ドロップ要素です。セクションは外側のラッピングコンテナーと考えることができます。コンテンツは全幅に広げることも、中央で最大幅制限を持たせることもできます。セクションは列とモジュールを囲むので、コンテンツの大部分を簡単に再配置して実装できます。dnd_sectionタグはHTML<section>要素をレンダリングしません。
ページエディターでのセクションの表示。
開発者は、ページエディター内に再利用可能セクションを作成可能なセクションテンプレートを提供できます。このように開発者によって定義された事前設定済みのセクションを、制作担当者は出発点として使用できます。再利用可能なセクションには固有の機能があり、例えば、標準のHubLパーシャルテンプレートのように使用できます。
列は行とモジュールのラッパーです。列は、行の内部、または特殊な行であるセクションに配置します。列はdnd_columnタグを使用してテンプレート内に作成します。
行内の複数の列を使用して、水平方向に行とモジュールを配置します。
列は行を含めることができる垂直方向の領域です。幅を変更することで、異なるサイズの列を作成できます。行のサイズが12「列」幅だという場合、これはCSSグリッドを指します。行内の列は12以下ならどんなサイズにもできますが、12を超えて追加することはできません。
複数行を列に配置すると、それらの行内のモジュールは垂直方向に積み重なって表示されます。モジュールは列自体であるため、モジュールを列の直接の子にすることはできません。モジュールは行内に含める必要があります。
ページエディターでの列の表示。
行は列のラッパーです。行はdnd_rowタグを使用してテンプレート内に作成します。モジュールは、行内に直接配置できる列です。これにより、モジュールは水平方向に隣り合って表示されます。
モジュールを行内に配置することにより、垂直方向に整理できます。モジュールを他のモジュールの上に配置する場合は、そのモジュールを行内に配置します。次に、最初の行の上または下の行内に別のモジュールを追加します。
ページエディターでの行の表示。
モジュールはCMS Hubの基本パーツであり、サイトにまとめてコンテンツを表示するために使用する再利用可能な構築要素として機能します。テンプレートを作成するとき、dnd_moduleタグを使用してドラッグ＆ドロップ行内およびセクション内にモジュールを配置します。モジュールは列でもあります。つまり、2つのモジュールタグを配置するか、モジュールと列を直接隣に配置すると、それらは水平方向に並べて表示されます。
ドラッグ＆ドロップ要素をモジュール内に配置することはできません。モジュールをdnd_areaの直接の子にすることはできません。
ドラッグ＆ドロップエリアとその要素はレンダリングされるとき、ブートストラップ2に基づいて12列グリッドのクラス名を持ちます。簡単に実行できるようにするため、CMS Theme Boilerplateの_layout.cssファイルを使用できます。これはそのクラス名の既定のスタイルを提供します。
このスタイルシートを使用する必要はなく、代わりに独自のスタイルを提供できます。CMS Theme Boilerplateに基づいてサイトを構築していて独自のCSSを使用する場合は、base.htmlで呼び出されないようにlayout.cssを削除するとよいでしょう。独自のCSSグリッドを使用するには同じグリッドクラス名をターゲットにする必要がありますが、スタイルは自由に設定できます。
ドラッグ＆ドロップエリアは、レンダリングされるときにページエディターで使用されるクラスを使用するdivを作成します。例としてwidget-spanとwidget-type-cellがあります。これらのクラスはページエディターで使用されるので直接ターゲットにするべきではありませんが、後で変更することはできます。
代わりに、使用するクラス名を使うクラスパラメーターをdnd_areaにHubLが追加します。
ドラッグ＆ドロップエリアで制作担当者はページのスタイルにエフェクトを付けることができます。例えば、セクションに背景を設定できます。開発者は、属性によって設定の既定値を渡すことができます。
ページが実際にレンダリングされるとき、この設定に基づいて生成されるスタイルがstandard_header_includesに追加されます。
dnd_areaのリリース時点では、これらのスタイルはstandard_footer_includesから読み込まれていました。これはstandard_header_includesに最近変更され、CMS Hubを伴う全てのHubSpotアカウントに提供されていきます。
フレキシブルカラムで構築されたテンプレートを変更してドラッグ＆ドロップエリアを使用する場合は、理解しておく点があります。フレキシブルカラムはドラッグ＆ドロップエリアと同じではありません。フレキシブルカラムのみを持つテンプレートからドラッグ＆ドロップエリアのみを持つテンプレートに交換することはできません。安全上、この交換は認められません。コンテンツはフレキシブルカラムからドラッグ＆ドロップエリアにマッピングされません。この理由を考えてみましょう。新しいテンプレートを作成してサイドバーとメインのコンテンツエリアを設定したとします。サイドバーはフレキシブルカラムで、メインコンテンツはドラッグ＆ドロップエリアです。交換ツールはフレキシブルカラム同士をマッピングしようとします。
貴重なご意見をありがとうございました。