モジュールを使ってみる

​

始める前に

• CMS Hub開発者用サンドボックスをセットアップします。既存のアカウントを使用することもできますが、サンドボックスを使用すると、メインアカウントのアセットに影響を与えることなく開発できます。
• HubSpotのローカル開発ツールの利用に必要なNode.jsをインストールします。バージョン10以降がサポートされています。

1. Testimonial.module: チュートリアルで作成されるカスタムモジュールを構成するファイルを含むフォルダー。
2. homepage.html: 編集してカスタムモジュールを含めるテンプレート。
3. images: モジュール内で使用するプロファイル写真が入ったフォルダー。

​

ローカル開発環境をセットアップする

• ターミナルで次のコマンドを実行して、CLIをグローバルにインストールします。CLIを現在のディレクトリーにのみインストールする場合は、npm install @hubspot/cliを実行します。

npm install -g @hubspot/cli

• テーマファイルの保存先とするディレクトリーで、HubSpotアカウントを認証し、CLIを介してアカウントを操作できるようにします。

hs account auth

• Enterキーを押して、ブラウザーでパーソナル アクセス キーのページを開きます。
• デプロイ先にするアカウントを選択してから、［このアカウントで続行］をクリックします。アカウントのパーソナル アクセス キーのページにリダイレクトされます。
• 「パーソナル アクセス キー」の横にある［表示］をクリックしてキーを表示します。次に［コピー］をクリックして、キーをクリップボードにコピーします。
• コピーしたキーをターミナルに貼り付け、Enterキーを押します。
• 他と重複しないアカウント名を入力します。この名前はユーザーが区別するためのもので、コマンドの実行時にも使用します。次にEnterキーを押して、ローカル開発ツールをアカウントに接続します。

​

CMSボイラープレートをアカウントに追加する

• 次のコマンドを実行して、my-themeという名前の新しいテーマを作成します。このコマンドを実行すると、ボイラープレートアセットを格納するmy-themeという名前のフォルダーが作業ディレクトリー内に作成されます。

hs create website-theme my-theme

• ファイルをアカウントにアップロードします。

hs upload <src> <destination>

​

HubSpot内でモジュールを作成する

• HubSpotアカウントにログインし、［マーケティング］>［ファイルとテンプレート］>［デザインツール］に移動してデザインマネージャーを開きます。
• デザインマネージャーの左のサイドバーで、アップロードしたテーマフォルダーを開きます。
• テーマフォルダー内にあるモジュールフォルダーを開きます。
• このフォルダー内に新しいモジュールを作成するために、画面左上の［ファイル］>［新規ファイル］をクリックします。
• ダイアログボックスで、ドロップダウンメニューをクリックし、［モジュール］を選択してから［次へ］をクリックします。
• ［ページ］チェックボックスをオンにして、モジュールをウェブサイトとランディングページで使用できるようにします。
• モジュールの名前として「Testimonial」と入力してから、［作成］をクリックします。

​

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

• 評価コメントを寄せてくれた顧客の名前を保存するテキストフィールド。
• 顧客のプロファイル写真を保存する画像フィールド。
• 顧客からの評価コメントを保存するリッチ テキスト フィールド。

​

顧客名を入力するテキストフィールドを追加する

• モジュールエディターの右のサイドバーで、［フィールドの追加］ドロップダウンメニューをクリックし、［テキスト］を選択します。
• 右のサイドバーで、右上にある鉛筆アイコンをクリックし、フィールドに名前を付けます。このチュートリアルでは、「Customer Name」（顧客名）と入力します。これにより、HubL変数名が「customer_name」に変わります。
• ［デフォルトのテキスト］を「Sally」に設定します。

• 右側のサイドバーの階層リンクアイコンをクリックして、メインモジュールのメニューに戻ります。

​

顧客のプロファイル写真を設定する画像フィールドを追加する

• 同じ方法で他のフィールドを追加します。今回は、［画像］フィールドタイプを選択します。
• 画像フィールドに「Profile Picture」（プロファイル写真）というラベルを付け、［HubL変数名］を「profile_pic」にします。
• ［デフォルトの画像］では、完成したプロジェクトファイルが格納されている「images」フォルダー内にあるSallyのプロファイル写真を選択します。
• ［代替テキスト］を「Sally Profile Picture」（サリーのプロファイル写真）に設定します。

​

Sallyからの評価を入力するリッチ テキスト フィールドを追加する

• 同じ方法で他のフィールドを追加します。今回は［リッチテキスト］フィールドタイプを選択します。
• リッチ テキスト フィールドに「Testimonial」というラベルを付けます。
• ［デフォルトのリッチテキスト］ボックスをクリックし、「I’ve had nothing but wonderful experiences with this company」（この会社のサービスは素晴らしいの一言でした）と入力します。

モジュールの複数のフィールドにデータを追加しました。ただし、現時点ではこのモジュールに、そのデータをレンダリングするためのHTMLが含まれていません。モジュールエディターでは、この状態を反映してmodule.htmlセクションが空になっています。

​

フィールドデータを表示するためのHubLを追加する

<!-- module.html -->
{{module.customer_name}}
<img src={{module.profile_pic.src}} alt="{{module.profile_pic.alt}}">
{{module.testimonial}}

• HubLをモジュールに追加した後、画面右上の［プレビュー］をクリックして、現時点でモジュールがどのように表示されるかを確認します。

• 確認が終わったら、右上にある［変更を公開］をクリックします。

​

モジュールをローカル環境で表示して変更する

• ターミナルで、hs fetch <hs_src> <destination>コマンドを実行します。
  • <hs_src>は、HubSpot内でのモジュールのファイルパスです。ファイルパスを取得するには、デザインマネージャーの左のサイドバーでモジュールを右クリックし、［パスをコピー］を選択します。
  • <destination>は、テーマが置かれているローカルディレクトリーのパスです。これを省略した場合はデフォルトで、コマンドによって現在の作業ディレクトリーが使用されます。

hs fetch my-theme/modules/testimonial.module

​

ローカル環境内のモジュールフォルダーを開く

​

モジュールのfields.jsonファイルを確認する

//fields.json

[
  {
    "label": "Customer Name",
    "name": "customer_name",
    "id": "2a025cd5-7357-007f-ae2f-25ace762588e",
    "type": "text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "allow_new_line": false,
    "show_emoji_picker": false,
    "default": "Sally"
  },
  {
    "label": "Profile Picture",
    "name": "profile_pic",
    "id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
    "type": "image",
    "required": false,
    "locked": false,
    "responsive": true,
    "resizable": true,
    "default": {
      "src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
      "alt": "Sally Profile Picture",
      "width": 100,
      "height": 100,
      "max_width": 100,
      "max_height": 100
    }
  },
  {
    "label": "Testimonial",
    "name": "testimonial",
    "id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
    "type": "richtext",
    "required": false,
    "locked": false,
    "default": "<p>I’ve had nothing but wonderful experiences with this company.</p>"
  }
]

• name：フィールドの名前。
• label：フィールドのラベル。
• default：フィールドのデフォルト値。

​

モジュールのmodule.htmlファイルを確認する

<div class="testimonial">
  <h1 class="testimonial__header"> {{ module.customer_name }} </h1>
  <img class="testimonial__picture" src={{ module.profile_pic.src }} alt={{ module.profile_pic.alt }}>
  {{ module.testimonial }}
</div>

​

モジュールのmodule.cssファイルを確認する

.testimonial {
  text-align: center;
}

.testimonial__header {
  font-weight: bold;
}

.testimonial__picture {
  display: block;
  margin: auto;
}

​

ローカル環境で行った変更をHubSpotアカウントにプッシュする

• ターミナルを開き、正しいディレクトリー上で作業していることを確かめます。
• 保存時に変更がHubSpotに適用されるように、hs watch <src> <destination>コマンドを実行します。

hs watch my-theme my-theme

​

HubSpotでローカルの変更をプレビューする

• HubSpotアカウントにて、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］の順に進みます。
• 左側のサイドバーで、作成したテーマに進み、moduleフォルダーを開いてTestimonialモジュールを選択します。
• モジュールを開き、module.htmlペインとmodule.cssペインに変更が反映されていることを確認します。
• 右上にある［プレビュー］をクリックします。新しいタブが開き、モジュールのプレビューが表示されます。

• HubSpotでモジュールを作成しました。
• モジュールをローカル環境に取り込みました。
• ローカルの開発ツールを使用してHubL＋HTMLおよびCSSを変更しました。

​

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

チュートリアルのこの部分では、ローカルのテーマファイル内のmodulesフォルダーとtemplatesフォルダーを主に扱います。

• コードエディターで、templatesフォルダーを開き、home.htmlファイルを開きます。
• home.htmlファイル内の28行目付近から始まる最後のdnd_sectionに移動します。ここでは、このセクションに新しいモジュールを追加します。
• dnd_section内の他のdnd_modulesの上に、次のHubLモジュールタグをコピーして貼り付けます。

{% dnd_module
 path= “../modules/Testimonial.module”,
 offset=0,
 width=4
%}
{% end_dnd_module %}

• HubSpotのCMSでは12列のグリッドシステムを使用しているため、このモジュールを他の2つと均等な割合で配置するには、dnd_sectionの各モジュールを更新して幅を4に設定する必要があります。
• 次に、グループの最初のdnd_module（testimonial）のオフセットを0に設定して、このモジュールが最初に配置されるようにします。
• 2つ目のdnd_module（linked_image）のオフセットを4に設定して、2番目に配置されるようにします。
• 3つ目のdnd_module（rich_text）のオフセットを8に設定して、3番目に配置されるようにします。

{% dnd_section
    background_color="#f8fafc",
    vertical_alignment="MIDDLE"
  %}

    {% dnd_module
      path= “../modules/Testimonial.module”,
      offset=0,
      width=4
    %}
    {% end_dnd_module %}

    {% dnd_module
      path="@hubspot/linked_image",
      img={
        "alt": "Stock placeholder image with grayscale geometrical mountain landscape",
        "loading": "lazy",
        "max_height": 451,
        "max_width": 605,
        "size_type": "auto_custom_max",
        "src": get_asset_url("../images/grayscale-mountain.png")
      },
      offset=4,
      width=4
    %}
    {% end_dnd_module %}
    {% dnd_module
      path="@hubspot/rich_text",
      html="<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>"
      offset=8,
      width=4
    %}
    {% end_dnd_module %}
  {% end_dnd_section %}

​

HubSpotで変更をプレビューする

• 保存された作業を自動的に追跡するwatchコマンドを実行中の状態にしていない場合はhs watch <src> <dest>を実行します。以降の一連のステップを進めるに当たり、必ずこのコマンドを実行してください。
• HubSpotアカウントで、デザインマネージャーを開きます（［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］）。
• デザインマネージャーの左のサイドバーで、home.htmlファイルを選択します。
• 右上の［プレビュー］をクリックし、［表示オプションを使用したライブプレビュー］を選択して、新しいウィンドウでテンプレートのプレビューを開きます。

• 新しいタブでテンプレートプレビューを表示すると、新しく追加したTestimonialモジュールが含まれているはずです。

​

テンプレート内のモジュールをカスタマイズする

• コードエディターに戻り、home.htmlファイルを開きます。
• Testimonialモジュールタグに、以下のパラメーターを追加します。

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
 offset=0,
 width=4
%}
{% end_dnd_module %}

• customer_name このパラメーターは、Maryという名前を顧客名フィールドに渡し、元の値であるSallyをオーバーライドします。
• profile_pic: このパラメーターは、2つのプロパティーを含むオブジェクトです。
  • srcプロパティーではget_asset_url HubL関数を使用して、新しいプロフィール写真のURLを取得します。画像のファイルパスは、作業ディレクトリーを基準とした相対パスであることにご注意ください。まず、この画像をimagesフォルダー内のローカル テーマ ファイルに追加する必要があります。この画像は、完成したプロジェクトファイルを格納するimagesフォルダー内にあります。
  • altプロパティーでは、画像の代替テキストを割り当てます。
• testimonial: このパラメーターは、評価コメントのフィールドに新しいテキストを渡します。

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 offset=0,
 width=4
%}
 {% module_attribute "testimonial" %}
   Wow, what a product! I can't wait to recommend this to all my family and friends!
 {% end_module_attribute %}
{% end_dnd_module %}

​

テンプレートにさらに2つのTestimonialモジュールを追加する

• コードエディターを開き、home.htmlファイルを開きます。
• 前に追加したTestimonialモジュールをコピーして、その下に貼り付けることにより、このモジュールの別のインスタンスを追加します。新しいTestimonialモジュール内で、前と同じ手順に従って以下の詳細を指定します。
  • 顧客の名前はOllieです。
  • Ollieからの感想は「I can't believe that I ever conducted business without the use of this product!」です。
  • Ollieの写真として、imagesフォルダー内のファイルの相対ファイルパスを追加します。この画像そのものは、完成したプロジェクトファイルから取得できます。Ollieの画像に、Ollie Profile Picture（Ollieのプロファイル写真）というalt属性を設定します。
  • 間隔を均等に維持するには、offsetを4に、widthを4に設定します。
• 2つ目のTestimonialモジュールの下に、3つ目のTestimonialモジュールを追加して、以下の詳細を指定します。
  • 顧客の名前はErinです。
  • Erinからの感想は「My business has nearly tripled since I began to use this product! Don't wait, start now!」です。
  • Erinの写真として、imagesフォルダー内のファイルの相対ファイルパスを追加します。Erinの画像に、Erin Profile Picture（Erinのプロファイル写真）というalt属性を設定します。
  • 間隔を均等に維持するには、offsetを8に、widthを4に設定します。
• 変更内容を保存します。

​

テーマ名を変更する

// example theme.json

{
  "name": "my_first_theme",
  "label": "My first theme"
}

​

次のステップ

• モジュールの設定
• テンプレートでモジュールを使用する
• デフォルトのモジュール

​

その他のチュートリアル

• テーマを使ってみる
• サーバーレス関数を使ってみる
• 効率的な開発ワークフローの構築
• アクセシビリティーについて
• CMS HubでのJavaScriptフレームワークの使用方法
• カスタムモジュールでウェブコンポーネントを使用する方法
• モジュールをベースにコード ブロック ウェブ コンポーネントを作成する方法