モジュールの作成と編集

デザイン マネージャー ツールで、カスタム コード モジュールを作成することにより、ブログ、ページ、またはEメールに高度な機能を追加できます。カスタムモジュールに搭載されている幅広い機能により、ページ、Eメール、またはブログのエディター上でコンテンツをカスタマイズすることができます。カスタムモジュールをゼロから構築したり、事前に構築済みのモジュールをHubSpotマーケットプレイスからアカウントに追加したりすることができます。

注：モジュールを作成するには、HTML、CSS、HubL、HubSpotデザインマネージャーの知識が必要です。コーディングを伴うモジュールを作成する際には、デザイナーと一緒にこの作業を行うことをお勧めします。

新規モジュールを作成する

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• ファインダーの最上部で、［ファイル］ドロップダウンメニューをクリックし、［新規ファイル］を選択します。

• ダイアログボックスで、［今日は何を作成しますか？］ドロップダウンメニューをクリックし、［モジュール］を選択します。

• ［次へ］をクリックします。
• ページテンプレート、ブログテンプレート、Eメールテンプレートでこのモジュールを使用するかどうかを選択します。Eメールテンプレートで使用されるモジュールには、CSSまたはJavaScriptに含めることはできません。 

• このモジュールをローカルモジュールまたはグローバルモジュールのどちらにするかを選択します。 グローバルモジュールとして作成した場合、このモジュールのコンテンツを編集すると、モジュールが使用されているすべての場所に変更が反映されます。
• モジュールのファイル名を入力して、［作成］をクリックします。

モジュールにラベルを付ける

既定では、コンテンツエディターはデザインマネージャーで指定された名前でモジュールを参照します。モジュールがコンテンツエディターで別の名前を使用するように設定するには、ラベルを入力します。

モジュールにフィールドを追加する

モジュールにフィールドを追加してモジュールのコンテンツを設定し、コンテンツエディターでそれを編集可能にします。利用可能なフィールドタイプの詳細を確認してください。

• 右側のモジュールインスペクターで、［フィールドの追加］ ドロップダウンメニュー（［フィールド］セクション内）をクリックし、モジュールに追加するフィールドを選択します。

• フィールド名の横にある鉛筆アイコンeditをクリックして、フィールドの名前を編集します。HubL変数名を編集するには、［HubL変数名］テキストフィールドに必要な変更を加えます。 

フィールドの既定のコンテンツを追加する

［コンテンツのオプション］セクションには、テンプレートエディターとコンテンツエディターの中でモジュールを使用する際に表示される既定のコンテンツを追加できます。既定のコンテンツのオプションは、フィールドタイプによって異なります。

以下の例では、フィールドタイプが画像フィールドであるため、既定のコンテンツのオプションは、［既定の画像］の選択と［サイズコントロールを非表示］になります。

フィールドエディターのオプションを設定する

［エディターオプション］セクションで、ユーザーがコンテンツエディターでモジュールを編集する際の次のオプションを有効にできます。

• このフィールドを必須にする：ユーザーがコンテンツエディターでこのフィールドを空白のままにできなくなります。
• コンテンツエディターでの編集を禁止する：コンテンツエディターでフィールドコンテンツを編集できません。ただしテンプレートレベルでは編集可能です。ページレベルで編集できないグローバルモジュールには、このオプションはありません。

• ツールチップのヘルプテキスト：フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、編集中にユーザーがフィールドにカーソルを置いたときにヒントとして表示されます。
  
  
• インラインのヘルプテキスト：フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、ユーザーがモジュールを編集するときにフィールドの下に表示されます。

フィールド表示条件を設定する

フィールド表示条件を使用して、別のフィールドが特定の条件を満たしている場合にのみモジュールフィールドが表示されるように設定できます。

• ［表示条件］セクションで、［HubL変数］ドロップダウン メニューをクリックしてモジュールフィールドを選択し、［が空ではない］ドロップダウンをクリックしてそのフィールドの条件を選択します。
• 条件［次と一致する］を選択した場合は、特定の値または正規表現を入力します。

以下の例では、画像フィールドの表示条件を設定しています。この条件では、画像フィールドがモジュールに表示されるためには、「image_title」というテキストフィールドの値が「Headshot」（顔写真）と等しくなければなりません。

条件を設定することにより、表示条件は自動的に有効になります。表示条件を無効にするには、［表示条件］の右側にある切り替えスイッチをクリックします。

フィールドのリピーターオプションを設定する

［リピーターオプション］セクションでフィールドのリピーターオプションも設定できます。リピーターとは、複数のオブジェクトを作成し、forループを使用して表示できるフィールドおよびグループです。

• ［リピーターオプション］セクションで、このフィールドに必要なインスタンスの最小数や最大数を選択します。
• モジュールに既定で表示されるフィールド数［規定のオブジェクト数］を設定することもできます。
  

以下の例では、画像フィールドを画像スライダーとして設定しています。オブジェクト数の制限が設定されている ため、モジュールには最小3つ、最大5つの画像フィールドが表示されます。既定で4つの画像フィールドがモジュールに表示され、ユーザーは1つの画像フィールドを追加するか、既存の画像フィールドを1つ削除できます。

いずれかのオプションを変更すると、リピーターオプションは自動的に有効になります。リピーターオプションを無効にするには、［リピーターオプション］の右側にある切り替えスイッチをクリックします。

モジュールフィールドのグループ化

フィールドを作成した後、最大4個の関連するフィールドをグループ化して整理することができます。フィールドグループを使用することで、カスタムのフィールドロジックを作成できます。モジュールのフィールドグループについて詳細をご確認ください。

モジュールフィールドをグループ化するには：

• モジュールエディターの右側にあるサイドバーで、［グループ］をクリックします。
  
  
• グループ化するフィールドを選択します。
• ［グループを作成］をクリックします。

フィールドスニペットをコピーして貼り付ける