更新日時 2021年 8月 4日
デザイン マネージャー ツールで、カスタム コード モジュールを作成することにより、ブログ、ページ、またはEメールに高度な機能を追加できます。カスタムモジュールに搭載されている幅広い機能により、ページ、Eメール、またはブログのエディター上でコンテンツをカスタマイズすることができます。カスタムモジュールをゼロから構築したり、事前に構築済みのモジュールをHubSpotマーケットプレイスからアカウントに追加したりすることができます。
注：モジュールを作成するには、HTML、CSS、HubL、HubSpotデザインマネージャーの知識が必要です。コーディングを伴うモジュールを作成する際には、デザイナーと一緒にこの作業を行うことをお勧めします。
新規モジュールを作成する
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーの最上部で、［ファイル］ドロップダウンメニューをクリックし、［新規ファイル］を選択します。
- ダイアログボックスで、［今日は何を作成しますか？］ドロップダウンメニューをクリックし、［モジュール］を選択します。
- ［次へ］をクリックします。
- ページテンプレート、ブログテンプレート、Eメールテンプレートでこのモジュールを使用するかどうかを選択します。Eメールテンプレートで使用されるモジュールには、CSSまたはJavaScriptに含めることはできません。
- このモジュールをローカルモジュールまたはグローバルモジュールのどちらにするかを選択します。 グローバルモジュールとして作成した場合、このモジュールのコンテンツを編集すると、モジュールが使用されているすべての場所に変更が反映されます。
- モジュールのファイル名を入力して、［作成］をクリックします。
モジュールにラベルを付ける
既定では、コンテンツエディターはデザインマネージャーで指定された名前でモジュールを参照します。モジュールがコンテンツエディターで別の名前を使用するように設定するには、ラベルを入力します。
モジュールにフィールドを追加する
モジュールにフィールドを追加してモジュールのコンテンツを設定し、コンテンツエディターでそれを編集可能にします。利用可能なフィールドタイプの詳細を確認してください。
- 右側のモジュールインスペクターで、［フィールドの追加］
ドロップダウン メニュー（［フィールド］セクション内）をクリックし、モジュールに追加するフィールドを選択します。
- フィールド名の横にある鉛筆アイコンをクリックして、フィールドの名前を編集します。HubL変数名を編集するには、［HubL変数名］テキストフィールドに必要な変更を加えます。
フィールドの既定のコンテンツを追加する
［コンテンツのオプション］セクションには、テンプレートエディターとコンテンツエディターの中でモジュールを使用する際に表示される既定のコンテンツを追加できます。既定のコンテンツのオプションは、フィールドタイプによって異なります。
以下の例では、フィールドタイプが画像フィールドであるため、既定のコンテンツのオプションは、［既定の画像］の選択と［サイズコントロールを非表示］になります。
フィールドエディターのオプションを設定する
［エディターオプション］セクションで、ユーザーがコンテンツエディターでモジュールを編集する際の次のオプションを有効にできます。
- このフィールドを必須にする：ユーザーがコンテンツエディターでこのフィールドを空白のままにできなくなります。
- コンテンツエディターでの編集を禁止する：コンテンツエディターでフィールドコンテンツを編集できません。ただしテンプレートレベルでは編集可能です。ページレベルで編集できないグローバルモジュールには、このオプションはありません。
- ツールチップのヘルプテキスト：フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、編集中にユーザーがフィールドにカーソルを置いたときにヒントとして表示されます。
- インラインのヘルプテキスト：フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、ユーザーがモジュールを編集するときにフィールドの下に表示されます。
フィールド表示条件を設定する
フィールド表示条件を使用して、別のフィールドが特定の条件を満たしている場合にのみモジュールフィールドが表示されるように設定できます。
- ［表示条件］セクションで、［HubL変数］
ドロップダウン メニューをクリックしてモジュールフィールドを選択し、［が空ではない］ドロップダウンをクリックしてそのフィールドの条件を選択します。 - 条件［次と一致する］を選択した場合は、特定の値または正規表現を入力します。
以下の例では、画像フィールドの表示条件を設定しています。この条件では、画像フィールドがモジュールに表示されるためには、「image_title」というテキストフィールドの値が「Headshot」（顔写真）と等しくなければなりません。
条件を設定することにより、表示条件は自動的に有効になります。表示条件を無効にするには、［表示条件］の右側にある切り替えスイッチをクリックします。
フィールドのリピーターオプションを設定する
［リピーターオプション］セクションでフィールドのリピーターオプションも設定できます。リピーターとは、複数のオブジェクトを作成し、forループを使用して表示できるフィールドおよびグループです。
- ［リピーターオプション］セクションで、このフィールドに必要なインスタンスの最小数や
最大数 を選択します。 - モジュールに既定で表示されるフィールド数［規定のオブジェクト数］を設定することもできます。
以下の例では、画像フィールドを画像スライダーとして設定しています。オブジェクト数の制限が設定されている
いずれかのオプションを変更すると、リピーターオプションは自動的に有効になります。リピーターオプションを無効にするには、［リピーターオプション］の右側にある切り替えスイッチをクリックします。
モジュールフィールドのグループ化
フィールドを作成した後、最大4個の関連するフィールドをグループ化して整理することができます。フィールドグループを使用することで、カスタムのフィールドロジックを作成できます。モジュールのフィールドグループについて詳細をご確認ください。
モジュールフィールドをグループ化するには：
- モジュールエディターの右側にあるサイドバーで、［グループ］をクリックします。
- グループ化するフィールドを選択します。
- ［グループを作成］をクリックします。
フィールドスニペットをコピーして貼り付ける
- カスタムフィールドをモジュールに組み込む準備ができたら、フィールドスニペットをコピーしてモジュールのHTML + HubLエディターに貼り付けます。
- フィールドインスペクターでは、フィールドの［HubL変数名］の右側にある［スニペットをコピー］をクリックします。
- モジュールインスペクターでは、フィールドにカーソルを置き、［アクション］
ドロップダウン をクリックし、［スニペットをコピー］を選択します。
- HTML + HubLエディターでフィールドを追加する場所をクリックし、Ctrl＋VまたはCmd＋Vを押してスニペットを貼り付けます。
モジュールの構文を記述する
モジュールを編集する際に、HTML + HubL、CSS、およびJSの各エディター上でモジュール構文を追加できます。モジュール コード エディターとモジュール構文リファレンスの詳細については、デザイナードキュメントをご覧ください。モジュールにヘルプテキストを追加する
［エディターオプション］セクションで、モジュールを編集する際にユーザーに提供するコンテキストを示すヘルプテキストを追加します。ヘルプテキストは最大300文字までです。
ユーザーがコンテンツエディターでモジュールを編集する際に、モジュールフィールドの上にヘルプテキストが表示されます。
モジュールをプレビューする
モジュールエディターの右上にある［プレビュー］ボタンをクリックすると、コンテンツエディター上でいつでもモジュールの表示および動作をプレビューできます。モジュールのプレビューは新しいタブで開きます。このプレビューはエディターと同期され、作業の進行に合わせて自動更新されます。
モジュールを公開する
フィールドの追加とモジュール構文の記述が完了したら、モジュールの公開へと進むことができます。右上の［変更を公開］をクリックします。
モジュールをテンプレートで使用できるようにする
- エディターの右上にある［テンプレートで使用可能にする］スイッチをオンに切り替えてモジュールをテンプレートに追加できるようにします。
- このスイッチをオフに切り替えて、モジュールの機能を変更またはテストします。このスイッチがオフになっている場合、モジュールをテンプレートに使用できないという警告が表示されます。
モジュールをテンプレートに追加する
- テンプレート レイアウト エディターで、レイアウトインスペクターの上部にある［追加］タブをクリックし、モジュールを検索します。作成したカスタムモジュールは、カスタム モジュール アイコン。
- モジュールをテンプレートにドラッグ＆ドロップします。
マーケットプレイスからモジュールを追加または購入する
独自のモジュールを作成するだけでなく、他のユーザーやプロバイダーが作成したカスタムモジュールをHubSpotマーケットプレイスで追加または購入できます。
- HubSpotアカウントにて、ナビゲーションバーに表示される［マーケットプレイスアイコン ］をクリックします。
- 左側の［製品を絞り込み］セクションで、［カテゴリー］にある［すべての製品］ドロップダウンをクリックし、［モジュール］を選択します。使用可能なモジュールを次のように絞り込むことができます。
- 価格：モジュールが有料かまたは無料か。
- 機能：モジュールに含まれる機能のタイプ（計算機、ギャラリー、地図など）。
- 対応：モジュールを使用できるテンプレートタイプ。
- プロバイダー：モジュールを提供するプロバイダー。
- 選択するモジュールにカーソルを合わせて、［詳細を表示］をクリックします。
- 右上にある［無料でモジュールを入手］または［...でモジュールを購入］をクリックします。
- モジュールが無料の場合、自動的にデザインマネージャーに追加されます。
- モジュールが有料の場合、支払いの詳細入力に進んでください。支払いが処理されると、モジュールがデザインマネージャーに追加されます。
