ドラッグ＆ドロップエリアを使ってみる

APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Professional or Enterprise

ドラッグ＆ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションを作成できます。これにより、開発者はグローバル構造を使用していくつかのテンプレートを作成して制作担当者をサポートできます。制作担当者は、小さなレイアウトを変更するためにコードに手を加えたり新しいテンプレートを必要としたりすることなく、さまざまな目的とレイアウトの多数のページを作成できます。

列と行が調整された、ページにドラッグするアニメーションのモジュール

開発者は、ドラッグ＆ドロップエリアに空のドロップ領域を設置できます。この場所に制作担当者は自分のページコンテンツとレイアウトを作成できます。また、開発者はドラッグ＆ドロップエリアにさまざまなモジュール、レイアウト、コンテンツを事前に配置して、制作担当者が作業を開始する際に利用してもらうことができます。

このチュートリアルでは、簡単なドラッグ＆ドロップエリアの設定について説明します。ドラッグ＆ドロップエリアの開発者リソースについては、実装のベストプラクティスとしてboilerplate（ボイラープレート）を参照してください。また、ドラッグ＆ドロップエリアHubLタグのリファレンスドキュメントも参照してください。

1. 新規HTMLテンプレートを作成する

新しいHTMLテンプレートを作成して、ドラッグ＆ドロップセクションのHubLおよびHTMLを格納します。

ドラッグ＆ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ＆ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。これらのクラス名をターゲットとするスタイルシートは、開発者が追加する必要があります。実装可能なレイアウトスタイルの例はこちらを参照してください：CMS-Theme-Boilerplate。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。

2. ドラッグ＆ドロップエリアを作成する

dnd_areaは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアの既定のコンテンツは、dnd_areaタグの本文として提供します。 

このタグ自体によって、制作担当者がモジュールをコンテンツクリエイターにドラッグするためのドロップ領域が生成されます。 

{% dnd_area "body_dnd_area" %} <!-- generates an empty drag and drop area drop-section --> {% end_dnd_area %}

3. モジュールでセクションを作成する

dnd_sectionは最上位の行であり、常にdnd_areaの直接の子でなければなりません。セクションでは、制作担当者がコンテンツエディター内のセクションに指定するスタイルの既定値を制御するさまざまなパラメーターがサポートされます。

この例では、バックグラウンド画像を設定し、子コンテンツの垂直方向の位置合わせを中央にし、最大幅を1000pxに設定しています。ドラッグ＆ドロップHubLタグでサポートされる全てのパラメーターについては、ドラッグ＆ドロップエリアHubLタグのリファレンスドキュメントを参照してください。 

セクションのコンテンツをあらかじめ埋めておく場合は、dnd_moduleタグを使用してパスを参照することによりモジュールを含めることができます。この例では既定のHubSpotモジュールを参照していますが、デザインツールのファイルツリー内のパスを指定して、自分で作成した追加モジュールを含めることができます。

dnd_moduleの既定値を指定するには、module_attributeタグを使用できます。

{% dnd_area "body_dnd_area" %} {% dnd_section background_image = { 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute "html"%} This is your main headline. Use this space to tell everyone about what you have to offer. {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {% end_dnd_area %}

これで、ドラッグ＆ドロップエリアに、制作担当者がコンテンツエディター内で編集できるモジュールが格納され、表示されるようになりました。dnd_sectionのmax_widthを設定するとコンテンツにどのような影響があるかを確認することもできます。 

モジュールツールバーが表示されたページエディターのスクリーンショット

4. 複数のモジュールを含める

複数のモジュールを含めるには、複数のdnd_moduleタグを使用できます。12列グリッドに基づくoffsetおよびwidthパラメーターを設定することで、リッチ テキスト モジュールの横に画像モジュールを配置できます。

{% dnd_area "body_dnd_area" %} {% dnd_section background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %} {% module_attribute "html"%} <h1>This is your main headline.</h1> <p>Use this space to tell everyone about what you have to offer.</p> {% end_module_attribute %} {% end_dnd_module %} {% dnd_module path='@hubspot/linked_image', width=4, offset=8, img={ "src": "https://www.dragndrop.com/placeholder-image.jpg", "alt": "Stock placeholder image" } %} {% end_dnd_module %} {% end_dnd_section %} {% end_dnd_area %}

また、編集可能な画像モジュールも、ドラッグハンドルも用意されているため、制作担当者がモジュールの幅とオフセットを変更できます。dnd_sectionでvertical_alignmentを設定してコンテンツの垂直方向位置合わせを中央にするとどうなるかを確認することもできます。 

セクションに追加された画像モジュールを表示するページエディターのスクリーンショット

5. 列と行を組み込む

ドラッグ＆ドロップエリアをさらに複雑にする場合、dnd_rowおよびdnd_columnタグを使用して行と列を組み込めます。行と列はコンテンツエディターのセクションと同様に機能します。制作担当者は行と列をドラッグして操作し、複製、削除、スタイル設定を行うこともできます。 

{% dnd_area "body_dnd_area" %} {% dnd_section background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': 'https://www.dragndrop.com/bg-image.jpg' }, max_width=1000, vertical_alignment='MIDDLE' %} {% dnd_module path='@hubspot/linked_image', width=6, img={ "src": "https://www.dragndrop.com/placeholder-image.jpg", "alt": "Stock placeholder image" } %} {% end_dnd_module %} {% dnd_column width=6, offset=6 %} {% dnd_row padding={ 'bottom': 15 } %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute "html"%} <h1>This is your main headline.</h1> <p>Use this space to tell everyone about what you have to offer.</p> {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

これで、制作担当者は、モジュールやセクションに加えて、特定の行や列に対するスタイル設定とレイアウト制御ができるようになりました。 

2列の行を表示するページエディターのスクリーンショット。左側に画像モジュール、右側にリッチ テキスト モジュールとフォームモジュール。

6. ドラッグ＆ドロップコンポーネントの汎用スタイルを設定する

ドラッグ＆ドロップエリア、セクション、列、行、モジュールのさまざまなコンポーネント全てには、CSSを使用してスタイル設定できるクラスがあります。これらのコンポーネントの編集可能なスタイルとオプションは、HubLではなくCSSを使用して設定できます。例えば、既定のパディングはCSSでdnd_sectionに設定できます。

.dnd-section { padding: 80px 20px; }

ドラッグ＆ドロップ エリア コンポーネントの汎用CSSセレクターは、.dnd-section、.dnd-column、.dnd-row、および.dnd-moduleです。これらのdndプレフィックスが付いたクラス以外、マークアップの実際のグリッドクラス名はブートストラップ2の名前に基づいています。これは、ドラッグ＆ドロップでブートストラップ2を使用する必要があることを意味するわけではありません。ページにdnd_areaを追加するときは、グリッドで機能するスタイルを提供する責任があります。実装可能なレイアウトスタイルの例はこちらを参照してください：CMS-Theme-Boilerplate。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。

ドラッグ＆ドロップエリアの開発者リソースについては、実装のベストプラクティスとしてboilerplate（ボイラープレート）を参照してください。また、ドラッグ＆ドロップエリアHubLタグのリファレンスドキュメントも参照してください。  

関連するチュートリアル

参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。