`コマンドを実行します。
```shell theme={null}
hs watch my-theme my-theme
```
## HubSpotでローカルの変更をプレビューする
* HubSpotアカウントにて、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］の順に進みます。
* 左側のサイドバーで、作成した**テーマ**に進み、**module**フォルダーを開いて**Testimonial**モジュールを選択します。
* モジュールを開き、`module.html`ペインと`module.css`ペインに変更が反映されていることを確認します。
* 右上にある［プレビュー］をクリックします。新しいタブが開き、モジュールのプレビューが表示されます。
ここまでのチュートリアルでは、次のような作業を行いました。
* HubSpotでモジュールを作成しました。
* モジュールをローカル環境に取り込みました。
* ローカルの開発ツールを使用してHubL＋HTMLおよびCSSを変更しました。
このチュートリアルの次のパートでは、テンプレート内のモジュールの使い方を説明します。
## モジュールをテンプレートに追加する
チュートリアルのこの部分では、ローカルのテーマファイル内の`modules`フォルダーと`templates`フォルダーを主に扱います。
簡単な定義で説明するなら、モジュールとはHubSpotのテンプレートとページの編集可能な領域です。HubSpotではデザインマネージャーを使ってモジュールをテンプレートに挿入できますが、ここではHubLを使用して、モジュールをローカル環境内のテンプレートに追加します。
* コードエディターで、`templates`フォルダーを開き、`home.html`ファイルを開きます。
* `home.html`ファイル内の28行目付近から始まる最後の`dnd_section`に移動します。ここでは、このセクションに新しいモジュールを追加します。
* `dnd_section`内の他の`dnd_modules`の上に、次のHubLモジュールタグをコピーして貼り付けます。
```hubl theme={null}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
```
このHubLタグでは、新しいモジュールが相対ファイルパスで参照されます。このモジュールを`dnd_section`の他の2つのモジュールと均等な割合で収めるには、モジュールの`width`と`offset`で、幅とオフセットをそれぞれ指定します。
* HubSpotのCMSでは[12列のグリッドシステム](https://developers.hubspot.com/docs#columns)を使用しているため、このモジュールを他の2つと均等な割合で配置するには、`dnd_section`の各モジュールを更新して幅を`4`に設定する必要があります。
* 次に、グループの最初の`dnd_module`（`testimonial`）のオフセットを`0`に設定して、このモジュールが最初に配置されるようにします。
* 2つ目の`dnd_module`（`linked_image`）のオフセットを`4`に設定して、2番目に配置されるようにします。
* 3つ目の`dnd_module`（`rich_text`）のオフセットを`8`に設定して、3番目に配置されるようにします。
各`dnd_module`の`offset`と`width`を設定した後のコードは、次のようになります。
```hubl theme={null}
{% 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="Provide more details here.
Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.
"
offset=8,
width=4
%}
{% end_dnd_module %}
{% end_dnd_section %}
```
モジュールをドラッグ＆ドロップ領域に追加する場合、モジュールタグに固有名は不要です。ただし、モジュールをドラッグ＆ドロップ領域外のHTMLファイルに追加する場合は、モジュールに固有名を割り当てる必要があります。また、次のように少々異なる構文を使用します。
`{% module "testimonial_one" path="../modules/Testimonial.module" %}`
[テンプレートでモジュールを使用する方法](/cms/reference/modules/using-modules-in-templates)について詳細をご確認ください。
## HubSpotで変更をプレビューする
* 保存された作業を自動的に追跡する`watch`コマンドを実行中の状態にしていない場合は`hs watch `を実行します。以降の一連のステップを進めるに当たり、必ずこのコマンドを実行してください。
* HubSpotアカウントで、デザインマネージャーを開きます（［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］）。
* デザインマネージャーの左のサイドバーで、**home.html**ファイルを選択します。
* 右上の［プレビュー］をクリックし、［表示オプションを使用したライブプレビュー］を選択して、新しいウィンドウでテンプレートのプレビューを開きます。
* 新しいタブでテンプレートプレビューを表示すると、新しく追加したTestimonialモジュールが含まれているはずです。
## テンプレート内のモジュールをカスタマイズする
ホームページテンプレートに工夫を加えるには、次の手順に従います。
* コードエディターに戻り、`home.html`ファイルを開きます。
* Testimonialモジュールタグに、以下のパラメーターを追加します。
```hubl theme={null}
{% 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 %}
```
上記のパラメーターは、3つのフィールドに当初割り当てたデフォルト値よりも優先されます。各パラメーターでは、先ほど各フィールドに割り当てたHubL変数名が使用されています。
* `customer_name` このパラメーターは、`Mary`という名前を顧客名フィールドに渡し、元の値である`Sally`をオーバーライドします。
* `profile_pic`: このパラメーターは、2つのプロパティーを含むオブジェクトです。
* `src`プロパティーでは`get_asset_url` HubL関数を使用して、新しいプロフィール写真のURLを取得します。画像のファイルパスは、作業ディレクトリーを基準とした相対パスであることにご注意ください。まず、この画像を`images`フォルダー内のローカル テーマ ファイルに追加する必要があります。この画像は、完成した[プロジェクトファイル](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images)を格納する`images`フォルダー内にあります。
* `alt`プロパティーでは、画像の代替テキストを割り当てます。
* `testimonial`: このパラメーターは、評価コメントのフィールドに新しいテキストを渡します。
あるいは、HubLブロック構文をリッチ テキスト フィールドで使用して、HTMLまたはテキストの大きなブロックを次のように記述することもできます。
```hubl theme={null}
{% 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 %}
```
[モジュールブロック構文](/cms/reference/modules/using-modules-in-templates)の詳細をご確認ください。
ターミナルで`watch`コマンドが実行中であれば、保存した変更がHubSpotに送信されます。その後デザインマネージャーに戻り、テンプレートをプレビューできます。
## テンプレートにさらに2つのTestimonialモジュールを追加する
このステップでは、前と同じ手順に従って、さらに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`フォルダー内のファイルの相対ファイルパスを追加します。この画像そのものは、完成した[プロジェクトファイル](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea)から取得できます。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`に設定します。
* 変更内容を保存します。
ターミナルで`watch`コマンドを実行中の状態にしている場合、デザインマネージャーに戻ると、テンプレートの変更内容をプレビューできます。現時点で、テンプレートのプレビューに3つ全てのTestimonialモジュールが含まれています。
最後のステップとして、`theme.json`ファイルを変更して、テーマを公開ページで使用できるようにします。
## テーマ名を変更する
テーマのデフォルトの名前を変更するには、`theme.json`ファイルで`name`フィールドと`label`フィールドを設定します。
```json theme={null}
// example theme.json
{
"name": "my_first_theme",
"label": "My first theme"
}
```
上記のコードを追加した後、変更を保存すると、`watch`コマンドによってHubSpotに変更が送信されます。
## 次のステップ
このチュートリアルでは、カスタムモジュールを作成して`home.html`テンプレートに追加し、オプションでテーマの名前をカスタマイズしました。これで、このテンプレートからページを作成して公開できるようになりました。
テーマに焦点を当てた同様のチュートリアルにご興味がありましたら、次のステップとして、こちらの[テーマ入門チュートリアル](/cms/start-building/building-blocks/themes/getting-started)をご参照ください。あるいは、HubSpotのナレッジベースで[ページの作成とカスタマイズ](https://knowledge.hubspot.com/ja/website-and-landing-pages/create-and-customize-pages)について詳細を確認することもできます。
モジュールの詳細については、以下のモジュールガイドをご確認ください。
* [モジュールの設定](/cms/reference/modules/configuration)
* [テンプレートでモジュールを使用する](/cms/reference/modules/using-modules-in-templates)
* [デフォルトのモジュール](/cms/reference/modules/default-modules)
## その他のチュートリアル
* [テーマを使ってみる](/cms/start-building/building-blocks/themes/getting-started)
* [サーバーレス関数を使ってみる](https://developers.hubspot.com/docs)
* [効率的な開発ワークフローの構築](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [アクセシビリティーについて](/cms/best-practices/improve-existing-sites/accessibility)
* [CMS HubでのJavaScriptフレームワークの使用方法](/cms/start-building/introduction/developer-environment/js-frameworks)
* [カスタムモジュールでウェブコンポーネントを使用する方法](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [モジュールをベースにコード ブロック ウェブ コンポーネントを作成する方法](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)