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