モジュールの作成と編集

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

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

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

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

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

• ［次へ］をクリックします。
• モジュールを使用する各タイプのコンテンツの横にあるチェックボックスをオンにします:ページ、 ブログ投稿、ブログリスト、メール、または引用符。Eメールテンプレートで使用されるモジュールには、CSSまたはJavaScriptに含めることはできません。 

注意：メールで使用するカスタムモジュールは、Marketing Hub ProfessionalまたはEnterpriseサブスクリプションを持つアカウントでのみ作成できます。 

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

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

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

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

モジュールにフィールドを追加して、モジュールのコンテンツまたはスタイルを設定し、コンテンツエディターで編集可能にします。利用可能なフィールドタイプの詳細については、開発者向けドキュメントを参照してください。 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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