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

モジュールを作成して編集する方法

更新日時 2020年 8月 25日

対象製品

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

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

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

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

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

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

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

  • いずれかのカスタムフィールドをモジュールに組み込む準備ができたら、フィールドスニペットをコピーしてモジュールの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 ]をクリックします。
  • 左側の[製品を絞り込み]セクションで、[カテゴリー]にある[すべての製品]ドロップダウンをクリックし、[モジュール]を選択します。
    • 価格:モジュールが無料か有料かを選択
    • 機能モジュールに含まれる機能のタイプを選択(計算、ギャラリー、地図など)
    • 対応:モジュールを使用できるテンプレートタイプを選択
    • プロバイダー:モジュールを提供するプロバイダーを選択
  • モジュールを決定したら、そこにマウスカーソルを置いて[詳細を表示]をクリックします。
  • 右上にある[無料でモジュールを入手]または[...でモジュールを購入]をクリックします。モジュールが無料の場合、自動的にデザインマネージャーに追加されます。モジュールが有料の場合、支払いの詳細入力に進んでください。
  • 支払いが処理されると、モジュールがデザインマネージャーに追加されます。
/jp/cos-general/create-and-edit-modules