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

デザインマネージャーでは、カスタムモジュールを作成してブログ、 ページ、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. テンプレートまたはページでのモジュールの利用可能性を管理するには、右上の[ テンプレートとページで使用可能にする]スイッチをオンに切り替えます。モジュールの機能をテストするか、テンプレートとページで利用可能性をオフにするには、[ テンプレートとページで使用可能にする] スイッチをオフに切り替えます。 

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

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

モジュールにフィールドを組み込む場合は、そのフィールドスニペットをコピーして 、モジュールエディター内の 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. デザインマネージャーでモジュールを作成し 、「カウントダウンタイマー」という名前を付けます。
2. インスペクターの [フィールド ]セクションで、[ フィールドの追加]ドロップダウンメニューをクリックします。

• • [日時 ]フィールドを選択します。名前 [イベントの日時]を入力します。これにより、[ HubL変数名 ]フィールドが event_date_and_timeに更新されます。

• • 色 フィールドを選択します。「タイマーのフォントの色」 という名前 を入力します。これにより、[ 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>
日
 </div>
 <div class="time_container">
 <span id="hours"></span><br>
時間
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
分
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
秒
 </div>
</div>

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

.time_container {
float: left;
幅:10%;
text-align: center;
}
。time_container span {
font-weight: bold;
フォントサイズ: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 = 'カウントダウンの有効期限が切れました';
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. 引き続きテンプレートにモジュールを追加します。