お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Design Manager

モジュールの作成と編集

更新日時 2021年 1月 20日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

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

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


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

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーの最上部で、[ファイル]ドロップダウンメニューをクリックし、[新規ファイル]を選択します。

new-file

  • ダイアログボックスが表示されたら、[モジュール]をクリックします。

create-new-file-module

  • ページテンプレートブログテンプレートEメールテンプレートでこのモジュールを使用するかどうかを選択します。

注:これらのモジュールタイプには技術的な違いがあるため、互換性はありません。例えば、Eメールとの互換性を確保するためにEメールテンプレートを選択すると、CSSとJavaScriptは無効になります。

  • モジュールのコンテンツ範囲をローカルモジュールまたはグローバルモジュールのどちらにするかを選択します。グローバルモジュールとして作成した場合、このモジュールのコンテンツを編集すると、モジュールが使用されているすべての場所に変更が反映されます。グローバルモジュールでスマートコンテンツを使用する方法の詳細をご覧ください。
  • モジュールのファイル名を入力し、[作成]をクリックします。

set-up-your-new-module

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

モジュールラベルを付けると、デザインマネージャーとコンテンツエディターを使用してページまたはEメールにモジュールを追加するときに表示されます。デザインマネージャーとコンテンツエディターでは、モジュール名またはラベルでモジュールを検索できます。空白にした場合は、モジュールにモジュール名が表示されます。

design-manager-label-module

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

モジュールにフィールドを追加してモジュールのコンテンツを設定し、HubSpotのコンテンツエディターでそれを編集可能にします。個々のフィールドとそれらの実装方法についての詳細をご確認ください。

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

module-add-field

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

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

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

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

field-content-options

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

[エディターオプション]セクションで、次のオプションを有効にできます。

  • このフィールドを必須にする:ユーザーがこのフィールドを空白のままにできなくなります。
  • コンテンツエディターでの編集を禁止する:コンテンツエディターでモジュールが選択されても、エンドユーザーはフィールドコンテンツを編集できません。テンプレート側ではフィールドコンテンツの編集が可能です。ページレベルで編集できないグローバルモジュールには、このオプションはありません。
  • ツールチップのヘルプテキスト:フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、編集中にユーザーがフィールドにカーソルを置いたときにヒントとして表示されます。

    custom-module-help-text
  • インラインのヘルプテキスト:フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。このヘルプテキストは、ユーザーがモジュールを編集するときにフィールドの下に表示されます。

design-manager-module-field-options

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

モジュールフィールドは、別のフィールドがフィールドの表示条件を満たしている場合にのみ表示されるようにカスタマイズできます。

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

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

field-display-conditions

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

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

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

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

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

field-repeater-options

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

フィールドの繰り返しとループの詳細については、デザイナードキュメントを参照してください。

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

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

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

  • モジュールエディターの右側にあるサイドバーで、[グループ]をクリックします。

    design-manager-group-fields
  • グループ化するフィールドを選択します。
  • [グループを作成]をクリックします。

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

  • カスタムフィールドをモジュールに組み込む準備ができたら、フィールドスニペットをコピーしてモジュールのHTML + HubLエディターに貼り付けます。
    • フィールドインスペクターでは、フィールドの[HubL変数名]の右側にある[スニペットをコピーをクリックします。
    • モジュールインスペクターでは、フィールドにカーソルを置き、[アクション]ドロップダウンをクリックし、[スニペットをコピー]を選択します。
  • HTML + HubLエディターでフィールドを追加する場所をクリックし、CtrlVまたはCmdVを押してスニペットを貼り付けます。

copy-paste-field-snippet

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

モジュールを編集する際に、HTML + HubLCSS、およびJSの各エディター上でモジュール構文を追加できます。モジュール コード エディターモジュール構文リファレンスの詳細については、デザイナードキュメントをご覧ください。

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

[エディターオプション]セクションで、モジュールを編集する際にユーザーに提供するコンテキストを示すヘルプテキストを追加します。ヘルプテキストは最大300文字までです。 

design-manager-help-text

ユーザーがコンテンツエディターでモジュールを編集する際に、モジュールフィールドの上にヘルプテキストが表示されます。

page-editor-module-help-text

モジュールをプレビューする

モジュールエディターの右上にある[プレビュー]ボタンをクリックすると、コンテンツエディター上でいつでもモジュールの表示および動作をプレビューできます。モジュールのプレビューは新しいタブで開きます。このプレビューはエディターと同期され、作業の進行に合わせて自動更新されます。

preview-module

モジュールを公開する

フィールドの追加とモジュール構文の記述が完了し、プレビューでのモジュールの表示と動作に問題がなければ、モジュールの公開へと進むことができます。右上の[変更を公開]をクリックします

publish-module

モジュールをテンプレートで使用できるようにする

  • エディターの上部にある[テンプレートで使用可能にする]スイッチをオンに切り替えてモジュールをテンプレートに追加できるようにします。

content-toggle

  • このスイッチをオフに切り替えて、モジュールの機能を変更またはテストします。このスイッチがオフになっている場合、モジュールをテンプレートに使用できないという警告が表示されます。

make-module-available

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

  • テンプレート レイアウト エディターで、レイアウトインスペクターの上部にある[追加]タブをクリックし、モジュールを検索します。作成したカスタムモジュールは、カスタム モジュール アイコンcustomModules
  • モジュールをテンプレートにドラッグ&ドロップします。

add-custom-module

マーケットプレイスからモジュールを追加または購入する

独自のモジュールを作成するだけでなく、他のユーザーやプロバイダーが作成したカスタムモジュールをHubSpotマーケットプレイスで追加または購入できます。

  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • 左側の[製品を絞り込む]セクションで、[カテゴリー]にある[すべての製品]ドロップダウンをクリックし、[モジュール]を選択します。
    • 価格:無料のモジュールか有料のモジュールかを選択します。
    • 機能モジュールに含まれる機能のタイプを選択します(計算機、ギャラリー、地図など)。
    • 対応:モジュールを使用できるテンプレートタイプを選択します。
    • プロバイダー:モジュールの提供元プロバイダーを選択します。
  • モジュールを決めたら、カーソルを置いて[詳細を表示]をクリックします。
  • 右上にある[無料でモジュールを入手]または[...でモジュールを購入]をクリックします。モジュールが無料の場合、自動的にデザインマネージャーに追加されます。モジュールが有料の場合、支払いの詳細入力に進んでください。
  • 支払いが処理されると、モジュールがデザインマネージャーに追加されます。