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

モジュールの作成と編集

更新日時 2022年 8月 5日

対象製品

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

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

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

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

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

new-file

  • ダイアログボックスで、[今日は何を作成しますか?]ドロップダウンメニューをクリックし、[モジュール]を選択します。

build-a-module

  • [次へ]をクリックします。
  • モジュールを使用する各タイプのコンテンツの横にあるチェックボックスをオンにします:ページ ブログ投稿ブログリストメール、または引用符。Eメールテンプレートで使用されるモジュールには、CSSまたはJavaScriptに含めることはできません。 

注意:メールで使用するカスタムモジュールは、Marketing Hub ProfessionalまたはEnterpriseサブスクリプションを持つアカウントでのみ作成できます。  

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

set-up-your-new-module

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

既定では、コンテンツエディターはデザインマネージャーで指定された名前でモジュールを参照します。モジュールがコンテンツエディターで別の名前を使用するように設定するには、ラベルを入力します。

design-manager-label-module

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

モジュールにフィールドを追加して、モジュールのコンテンツまたはスタイルを設定し、コンテンツエディターで編集可能にします。利用可能なフィールドタイプの詳細については、開発者向けドキュメントを参照してください。 

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

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 + HubL、CSS、およびJSの各エディター上でモジュール構文を追加できます。モジュール コード エディターモジュール構文リファレンスの詳細は、デザイナードキュメントをご覧ください。

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

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

design-manager-help-text

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

page-editor-module-help-text

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

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

preview-module

モジュールを公開する

フィールドの追加とモジュール構文の記述が完了したら、モジュールの公開へと進むことができます。右上の[変更を公開]をクリックします。

publish-module

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

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

content-toggle

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

make-module-available

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

モジュールを公開したら、テンプレートに追加してページ全体で使用できます。

ドラッグアンドドロップテンプレートにモジュールを追加するには:

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

add-custom-module

コード化されたテンプレートにモジュールを追加するには、モジュールスニペットをコピーしてテンプレートに貼り付けることができます。

  • モジュールエディタからモジュールスニペットをコピーするには、右サイドバーの下部にある[スニペットをコピー]をクリックします。

    module - editor - copy - snippet 0
  • デザインマネージャの左サイドバーからモジュールスニペットをコピーするには:
    • 左側のサイドバーで、カスタムモジュールを見つけます。
    • モジュールを右クリックし、[スニペットをコピー]を選択します。または、モジュールを選択して、左上の[操作]をクリックし、[スニペットのコピー]を選択することもできます。

      custom - module - copy - snippet 00
  • コード化されたテンプレートで、必要に応じてスニペットを貼り付けます。

    コード化テンプレート-ペースト-スニペット0

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

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

  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • 左側の[製品を絞り込み]セクションで、[カテゴリー]にある[すべての製品]ドロップダウンをクリックし、[モジュール]を選択します。使用可能なモジュールを次のように絞り込むことができます。
    • 価格:モジュールが有料かまたは無料か。
    • 機能モジュールに含まれる機能のタイプ(計算機、ギャラリー、地図など)。
    • 対応:モジュールを使用できるテンプレートタイプ。
    • プロバイダー:モジュールを提供するプロバイダー。
  • 選択するモジュールにカーソルを合わせて、[詳細を表示]をクリックします。
  • 右上にある[無料でモジュールを入手]または[...でモジュールを購入]をクリックします。
    • モジュールが無料の場合、自動的にデザインマネージャーに追加されます。
    • モジュールが有料の場合、支払いの詳細入力に進んでください。支払いが処理されると、モジュールがデザインマネージャーに追加されます。
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.