デザインマネージャーでモジュールを作成および編集する

デザインマネージャーを使用すると、カスタムモジュールを作成して、ブログ、ページ、Eメールに高度な機能を追加できます。カスタムモジュールに搭載されている幅広い機能により、ページ、Eメール、またはブログのエディター上でコンテンツをカスタマイズすることができます。

注：モジュールを作成するには、HTML、CSS、HubL、HubSpotデザインマネージャーの知識が必要です。HubSpotでは、開発者と協力してコードモジュールを作成することをお勧めしています。

新規モジュールの作成

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

3. ダイアログボックスで、［今日は何を作成しますか？］ドロップダウンメニューをクリックし、［モジュール］を選択します。
4. ［次へ］をクリックします。
5. ［このモジュールをどこで使用しますか？］フィールドで、モジュールを使用する各コンテンツタイプ（［ブログ記事］、［Eメール］、［ランディングページ］など）の横にあるチェックボックスをオンにします。 
6. ［モジュールコンテンツ範囲］フィールドで、オプション（例：［ローカルモジュール］または［グローバルモジュール］）を選択します。グローバルモジュールとして作成した場合、このモジュールのコンテンツを編集すると、モジュールが使用されている全ての場所に変更が反映されます。 
7. モジュールのファイル名を入力します。
8. モジュールのファイルの場所を変更するには、［ファイルの場所］セクションの［変更］をクリックします。ポップアップボックスで、新しい場所を選択し、［選択］をクリックします。
9. 完了したら、［作成］をクリックします。
10. モジュールの編集を続けます。

注：Eメールで使用されるモジュールを作成するには、アカウントにMarketing Hub ProfessionalまたはEnterpriseサブスクリプションが必要です。CSSやJavaScriptを含めることはできません。 

モジュールを編集する

デザインマネージャーでモジュールを作成したら、その機能と外観をカスタマイズできます。分かりやすくするためにモジュールにラベルを付けたり、フィールドを追加および構成したり、既定のコンテンツなどのフィールドエディターのオプションを調整したりすることができます。表示条件とリピーターオプションを設定し、関連フィールドをグループ化して分かりやすく整理します。また、フィールドスニペットをコピーして貼り付けたり、カスタムモジュール構文を作成したり、便利な説明テキストを追加したり、モジュールを使用できるテンプレートタイプを編集したりすることもできます。

モジュールにラベルを追加する

デザインマネージャーでは、コンテンツエディターでのモジュールの識別に役立つラベルをモジュールに追加または更新することができます。ラベルが空白の場合、既定でモジュールの名前が表示されます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、ラベルを編集するモジュールをクリックして開きます。
3. インスペクターで、ラベルを入力します。

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、［フィールドの追加］ドロップダウンメニューをクリックします。続けて、モジュールに追加するフィールドを選択します。

4. フィールドの名前を編集するには、edit 編集アイコンをクリックし、新しい名前を入力します。HubL変数名を編集するには、［HubL変数名］フィールドに新しい名前を入力します。 

フィールドの既定のコンテンツをカスタマイズする

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、フィールドにマウスポインターを置き、［編集］をクリックします。
4. ［コンテンツオプション］セクションで、既定のコンテンツオプションを追加または編集します。使用可能な既定のコンテンツオプションは、選択したフィールドタイプによって異なります。

例えば、［日時］フィールドタイプをモジュールに追加した場合は、既定の日時を選択できます。既定の時間間隔を入力することもできます。

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

［エディターオプション］セクションで、フィールドを必須にし、コンテンツエディターで編集されないようにすることができます。ヘルプテキストをカスタマイズすることもできます。 

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、フィールドにマウスポインターを置き、［編集］をクリックします。
4. ［エディターオプション］セクションでフィールドを必須にするには、［このフィールドを必須にする］スイッチをオンに切り替えます。こうすると、ユーザーはコンテンツエディター内でそのフィールドを空白のままにしておくことができなくなります。
5. フィールドのコンテンツが編集されないようにする場合は、［コンテンツエディターでの編集を禁止する］をオンに切り替えます。デザインマネージャーのテンプレートレベルでは、引き続きフィールドのコンテンツをカスタマイズできます。このオプションは、グローバルモジュールでは使用できません。
6. フィールドの使用方法に関するコンテキストや指示を追加するには、［ツールヒントのヘルプテキスト］フィールドまたは［インラインのヘルプテキスト］フィールドにテキストを入力します。
   • ツールヒントのヘルプテキスト：このテキストは、ユーザーがコンテンツエディターでinfoCircleIcon 情報アイコンにマウスポインターを合わせると、ツールヒントに表示されます。
   • インラインのヘルプテキスト：このテキストは、ユーザーがコンテンツエディターでモジュールを編集しているときに、フィールドの下に表示されます。

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、フィールドにマウスポインターを置き、［編集］をクリックします。
4. ［表示条件］セクションで、［HubL変数］ドロップダウンメニューをクリックし、変数を選択します。 
5. 2番目のドロップダウンメニューをクリックし、オプションを選択します（［次の値と等しい］や［空ではない］など）。選択したオプションによっては、さらに条件フィールドが必要になる場合があります。例えば、［次の値と等しい］を選択した場合、追加の値フィールドが必要です。
6. 既定では、条件が構成されると、表示条件は自動的に有効になります。表示条件を無効にするには、［表示条件］スイッチをオフに切り替えます。

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、フィールドにマウスポインターを置き、［編集］をクリックします。
4. ［リピーターオプション］セクションで、［最小］および［最大（任意）］フィールドに数値を入力します。これにより、モジュールにフィールドが表示される最小回数と最大回数が設定されます。 
5. 既定でフィールドが表示される回数を設定するには、［デフォルトのオブジェクト数］フィールドに数値を入力します。
6. 既定では、リピーターオプションは構成されると自動的に有効になります。リピーターオプションを無効にするには、［リピーターオプション］スイッチをオフに切り替えます。

例えば、画像フィールドのリピーターオプションが、少なくとも3つ、最大5つの画像フィールドを表示するように変更されているとします。既定の画像フィールド数には4が設定されています。コンテンツエディターでは、ユーザーには既定で4つの画像フィールドが表示されますが、もう1つ画像フィールドを追加したり、既存の画像フィールドを削除したりできます。

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［フィールド］セクションで、［アクション］ドロップダウンメニューをクリックし、［グループ］を選択します。
4. グループ化する1つ以上のフィールドを選択し、［グループを作成］をクリックします。

モジュールにヘルプテキストを追加する

［エディターオプション］セクションで、モジュールを編集する際にユーザーに提供するコンテキストを示すヘルプテキストを追加できます。このテキストはモジュール内のフィールドの上に表示されます。 

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターの［エディターオプション］セクションで、［インラインのヘルプテキスト］フィールドにテキストを入力します。

モジュールのコンテンツタイプと利用可能性を管理する

［ブログ記事］や［ランディングページ］など、ユーザーがモジュールを使用できるコンテンツのタイプを追加または削除します。テンプレートやページでのモジュールの利用可能性のオンとオフを切り替えることもできます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. モジュールのコンテンツタイプを編集するには、インスペクターの右上のモジュール名の下にある［コンテンツタイプ］をクリックします。

1. • ダイアログボックスで、モジュールを使用するまたはモジュールを使用しない各コンテンツタイプ（［ブログ記事］、［Eメール］、［ランディングページ］など）の横にあるチェックボックスをオンまたはオフにします。 
   • 完了したら、［更新］をクリックします。

4. テンプレートまたはページでのモジュールの利用可能性を管理するには、右上にある［Make available for templates and pages（テンプレートおよびページで利用可能にする）］スイッチをオンに切り替えます。モジュールの機能をテストするか、テンプレートおよびページで利用できないようにする場合は、［Make available for templates and pages（テンプレートおよびページで利用可能にする）］スイッチをオフに切り替えます。 

注：［テンプレートまたはページで使用可能にする］スイッチをオフに切り替えても、既存のテンプレートやページからはモジュールは削除されません。

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

モジュールにフィールドを組み込む場合は、フィールドスニペットをコピーして、モジュールエディター内の「module.html（HTML + HubL）」セクションに貼り付けることができます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. インスペクターで、モジュールフィールドにマウスポインターを置き、［フィールド］セクションの［アクション］ドロップダウンメニューをクリックします。次に、［スニペットをコピー］を選択します。 
4. モジュールエディターで、「module.html（HTML + HubL）」セクション内の目的の場所にフィールドスニペットを貼り付けます。キーボードショートカットのCmd+VまたはCtrl+Vを使用できます。 

モジュール構文を記述する

モジュールを編集する際には、モジュールエディターの「module.html（HTML + HubL）」、「module.css」、および「module.js」の各セクションでモジュール構文を記述することができます。詳しくは、モジュールエディターとモジュールの概要をご覧ください。

モジュールをプレビューして公開する

フィールドの追加やモジュール構文の記述など、モジュールの編集が完了したら、モジュールをプレビューして公開できます。 

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、モジュールをクリックして開きます。
3. モジュールをプレビューするには、右上の［プレビュー］をクリックします。モジュールをプレビューするための新しいブラウザータブに移動します。このプレビューはモジュールエディターと同期され、編集が行われると自動的に更新されます。
4. モジュールを公開するには、［変更を公開］をクリックします。 

テンプレートにモジュールを追加する

公開したモジュールは、デザインマネージャーでドラッグ＆ドロップテンプレートまたはカスタムコーディングされたテンプレートに追加することで、複数のテンプレートで使用できるようになります。コンテンツエディターでモジュールを追加するには、コンテンツエディターでモジュールを追加および編集する方法をご覧ください。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、テンプレートをクリックして開きます。
3. レイアウトエディターでドラッグ＆ドロップテンプレートにモジュールを追加するには、インスペクターの上部にある［+追加］タブをクリックします。
   • ［検索］フィールドに、モジュールの名前を入力します。検索をカスタムモジュールに絞り込むには、［カテゴリーまたはタグによる絞り込み］ドロップダウンメニューをクリックし、［カスタムモジュール］を選択します。
   • dragHandleIconドラッグ＆ドロップアイコンをクリックし、レイアウトエディター内の目的の位置にモジュールを移動します。
4. カスタムコーディングされたテンプレートにモジュールを追加するには、次のようにします。
   •  ファインダーで、モジュールを右クリックするか、Ctrlを押しながらクリックし、［スニペットをコピー］を選択します。または、モジュールをクリックして開き、インスペクターの［テンプレートの使用］セクションで、［スニペットをコピー］をクリックします。
   • カスタムコーディングされたテンプレートで、コードエディターにモジュールスニペットを貼り付けます。
5. 完了したら、右上の［変更を公開］をクリックします。

例

カウントダウンモジュールを作成する

1. デザインマネージャーでモジュールを作成し、「Countdown Timer」という名前を付けます。
2. インスペクターの［フィールド］セクションで、［フィールドを追加］ドロップダウンメニューをクリックします。

• • ［日時］フィールドを選択します。「Event date and time」という名前を入力します。これにより、［HubL変数名］フィールドがevent_date_and_timeに更新されます。

• • ［色］フィールドを選択します。「Timer Font Color」という名前を入力します。これにより、［HubL変数名］フィールドがtimer_font_colorに更新されます。

注：HubL変数名は、以下のmodule.html（HTML + HubL）コードセクションに含まれる変数名と一致する必要があります。

3. モジュールエディターで、次のコードをコピーし、「module.html（HTML + HubL）」セクションに貼り付けます。

<!-- Hidden span to store the target date -->
<span id="target-date" style="display: none;"></span>

<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
 <div class="time_container" style="margin-left: 30%;">
 <span id="days"></span><br>
 Days
 </div>
 <div class="time_container">
 <span id="hours"></span><br>
 Hours
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
 Minutes
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
 Seconds
 </div>
</div>

4. 次のコードをコピーし、「module.css」セクションに貼り付けます。

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. 次のコードをコピーし、「module.js」セクションに貼り付けます。

// カウントダウンを計算および表示する関数
function updateCountdown() {
// 非表示のspanから目的の日付を取得する
const targetDate = new Date(document.getElementById('target-date').textContent);
// 現在の日付を取得する
const currentDate = new Date();
// 残り時間を計算する（ミリ秒単位）
const timeRemaining = targetDate - currentDate;
// 目的の日付が過ぎたかどうかをチェックする
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// 残りの日数、時間数、分数、秒数を計算する
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// カウントダウンを表示する
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// 毎秒カウントダウンを更新する
setInterval(updateCountdown, 1000);
// 即時にカウントダウンを更新するための最初の呼び出し
updateCountdown();

6. 完了したら、モジュールをプレビューして公開します。
7. 引き続き、テンプレートにモジュールを追加します。