モジュールを使い始める
このチュートリアルでは、HubSpot CMSボイラープレートテーマを使用してモジュールを作成し、このモジュールをテーマの一部としてテンプレートやページで使用する方法を説明します。このチュートリアルに従って作業を進めると、テキストフィールド、画像フィールド、リッチ テキスト フィールドを含むTestimonial(お客様の声)モジュールが完成します。
このチュートリアルを開始する前に、次の作業を行ってください。
- CMS Hub開発者用サンドボックスをセットアップします。既存のアカウントを使用することもできますが、サンドボックスを使用すると、メインアカウントのアセットに影響を与えることなく開発できます。
- HubSpotのローカル開発ツールの利用に必要なNode.jsをインストールします。バージョン10以降がサポートされています。
今すぐ始めるには、完成したプロジェクトファイルをプレビューできます。ボイラープレートテーマのコードは時間の経過とともに変化する可能性があるため、チュートリアル中に開発者が作成または編集する必要がある特に重要なファイルのみが含まれています。以下のようなファイルです。
- Testimonial.module:チュートリアルで作成されるカスタムモジュールを構成するファイルを含むフォルダー。
- homepage.html:編集してカスタムモジュールを含めるテンプレート。
- images:モジュール内で使用するプロフィール写真が入ったフォルダー。
このチュートリアルでは、ローカル環境でモジュールを開発します。コマンド ライン インターフェイスからHubSpotを利用するには、HubSpot CLIをインストールし、アカウントへのアクセスを設定する必要があります。
- ターミナルで次のコマンドを実行して、CLIをグローバルにインストールします。CLIを現在のディレクトリーにのみインストールする場合は、
npm install @hubspot/cli
を実行します。
- テーマファイルの保存先とするディレクトリーで、HubSpotアカウントを認証し、CLIを介してアカウントを操作できるようにします。
- Enterキーを押して、ブラウザーでパーソナル アクセス キーのページを開きます。
- デプロイ先にするアカウントを選択してから、[このアカウントで続行]をクリックします。アカウントのパーソナル アクセス キーのページにリダイレクトされます。
- 「パーソナル アクセス キー」の横にある[表示]をクリックしてキーを表示します。次に[コピー]をクリックして、キーをクリップボードにコピーします。
- コピーしたキーをターミナルに貼り付け、Enterキーを押します。
- 他と重複しないアカウント名を入力します。この名前は自分の区別用で、コマンドを実行する際にも使用します。次にEnterキーを押して、ローカル開発ツールをアカウントに接続します。
hubspot.config.yml
ファイルが作成されたことを通知する成功メッセージが表示されます。
- 以下のコマンドを実行して、
my-theme
という名前の新しいテーマを作成します。このコマンドを実行すると、ボイラープレートアセットを格納するmy-theme
という名前のフォルダーが作業ディレクトリー内に作成されます。
- ファイルをアカウントにアップロードします。
Parameter | Description |
---|---|
<src>
| 現在の作業ディレクトリーを基準としたローカルファイルの相対パス。 |
<destination>
| HubSpotアカウント内のアップロード先とするパス。新しいフォルダーにすることができます。 |
hs upload my-theme my-new-theme
を実行すると、コンピューター内のmy-theme
フォルダーがHubSpot内のmy-new-theme
フォルダーにアップロードされます。既定では、hubspot.config.yml
ファイル内に指定した既定のアカウントにアップロードされます。ただし、コマンドに--account=<accountNameOrId>
フラグを追加して、アカウントを指定することもできます。例:hs upload --portal=mainProd
詳細については、CLIコマンドリファレンスをご確認ください。
ローカル環境内でCMSボイラープレートを使用して、テーマの新しいモジュールを作成します。
- HubSpotアカウントにログインし、[マーケティング]>[ファイルとテンプレート]>[デザインツール]に移動してデザインマネージャーを開きます。
- デザインマネージャーの左のサイドバーで、アップロードしたテーマフォルダーを開きます。
- テーマフォルダー内にあるモジュールフォルダーを開きます。
- このフォルダー内に新しいモジュールを作成するために、画面左上の[ファイル]>[新規ファイル]をクリックします。
- ダイアログボックスで、ドロップダウンメニューをクリックし、[モジュール]を選択してから[次へ]をクリックします。
- [ページ]チェックボックスをオンにして、モジュールをウェブサイトとランディングページで使用できるようにします。
- モジュールの名前として「Testimonial」(お客様の声)と入力してから、[作成]をクリックします。
次は、以下の3つのフィールドをモジュールに追加します。
- 評価コメントを寄せてくれた顧客の名前を保存するテキストフィールド。
- 顧客のプロフィール写真を保存する画像フィールド。
- 顧客からの評価コメントを保存するリッチ テキスト フィールド。
顧客名を入力するテキストフィールドを追加する
- モジュールエディターの右のサイドバーで、[フィールドの追加]ドロップダウンメニューをクリックし、[テキスト]を選択します。
- 右のサイドバーで、右上にある鉛筆アイコンをクリックし、フィールドに名前を付けます。このチュートリアルでは、「Customer Name」(顧客名)と入力します。これにより、HubL変数名が「customer_name」に変わります。
- [既定のテキスト]を「Sally」に設定します。
- 右側のサイドバーの階層リンクアイコンをクリックして、メインモジュールのメニューに戻ります。
顧客のプロフィール写真を設定する画像フィールドを追加する
- 同じ方法で他のフィールドを追加します。今回は、[画像]フィールドタイプを選択します。
- 画像フィールドに「Profile Picture」(プロフィール写真)というラベルを付け、[HubL変数名]を「profile_pic」にします。
- [既定の画像]では、完成したプロジェクトファイルが格納されている「images」フォルダー内にあるSallyのプロフィール写真を選択します。
- [代替テキスト]を「Customer Profile Picture」(サリーのプロフィール写真)に設定します。
Sallyからの評価を入力するリッチ テキスト フィールドを追加する
- 同じ方法で他のフィールドを追加します。今回は、[リッチテキスト]フィールドタイプを選択します。
- リッチ テキスト フィールドに「Testimonial」(お客様の声)というラベルを付けます。
- [既定のリッチテキスト]ボックスをクリックし、「I've had nothing but wonderful experiences with this company.」(本当に素晴らしいサービスでした)と入力します。
モジュールの複数のフィールドにデータを追加しました。ただし、現時点ではこのモジュールに、そのデータをレンダリングするためのHTMLが含まれていません。モジュールエディターでは、この状態を反映してmodule.html
セクションが空になっています。
次は、フィールドのデータを表示するためのHubLをmodule.html
に追加します。
これまでに作成したフィールドのデータを表示するために、次のHubLをmodule.html
ペインに追加します。
上記のHubLトークンでは、各フィールドのデータにアクセスするためにドット表記を使用しています。この例ではモジュールのフィールドからデータを取得する必要があるため、各トークンをmodule
で始めて、その後にフィールドのHubL変数名を続けています。上記の3行目にあるprofile_pic
トークンに示されているように、ドット表記を使用すると、特定のフィールドにアクセスできるだけでなく、そのフィールドの特定のプロパティーにアクセスできます。
- HubLをモジュールに追加した後、画面右上の[プレビュー]をクリックして、現時点でモジュールがどのように表示されるかを確認します。
- 確認し終わったら、右上にある[変更を公開]をクリックします。
HubSpot内でモジュールを作成して公開したので、次はCLIを使用してモジュールをローカル環境に取り込みます。こうすることで、モジュールの内容をローカル環境で表示し、さらに変更を加えることができます。
モジュールをローカル環境で表示するには、まず、モジュールをローカルテーマに取り込む必要があります。
- ターミナルで、コマンド
hs fetch <hs_src> <destination>
を実行します。<hs_src>
は、HubSpot内でのモジュールのファイルパスです。ファイルパスを取得するには、デザインマネージャーの左のサイドバーでモジュールを右クリックし、[パスをコピー]を選択します。<destination>
は、テーマが置かれているローカルディレクトリーのパスです。これを省略した場合は既定で、コマンドによって現在の作業ディレクトリーが使用されます。
例えば、該当するディレクトリーが既にカレント作業ディレクトリーになっている場合、fetchコマンドは次のようになります。
使い慣れたコードエディター上で、HubSpotアカウントから取り込んだモジュールのフォルダーに進みます。モジュールフォルダーには、次の5つのファイルがあります。
Parameter | Description |
---|---|
fields.json
| モジュールのフィールドが含まれているJSONオブジェクト。 |
meta.json
| モジュールに関するメタ情報が含まれているJSONオブジェクト。 |
module.css
| モジュールのスタイルを設定するCSSファイル。 |
module.html
| モジュール用のHTMLおよびHubL。 |
module.js
| モジュール用のJavaScript。 |
モジュールのファイル構造、特にfields.json
ファイルとmeta.json
ファイルに関する詳細情報のドキュメントをご覧ください。このチュートリアルではfields.json
、module.css
、module.html
の3つのファイルに焦点を当て、それらがどのように生成され、デザインマネージャーとモジュールエディターの間でダウンロード/アップロードされるかを説明します。
モジュールのfields.json
ファイルを開きます。このファイルには次のようなJSONオブジェクトが含まれています(一部のid
番号、画像フィールドのsrc
属性、また場合によってはフィールドの順序などを除く)。
次のフィールドの値は、ステップ3で追加した値と一致します。
name
:フィールドの名前。label
:フィールドのラベル。default
:フィールドの既定値。
module.html
ファイルには、先ほどHubL+HTMLモジュールエディターで記述したHubLとHTMLが含まれています。
このコードに工夫を加えて、CSSでスタイル設定できるよう、次のコードをコピーして、ファイルに貼り付けます。
module.css
ファイルは、現時点では空の状態になっています。スタイルを追加するには、次のコードをコピーし、ファイルに貼り付けます。
コードの追加後、ファイルを保存します。
ローカル環境での変更を保存したら、その変更内容をHubSpotアカウントにプッシュします。
- ターミナルを開き、正しいディレクトリー上で作業していることを確かめます。
- 保存時に変更がHubSpotに適用されるように、
hs watch <src> <destination>
コマンドを実行します。
- HubSpotアカウントで、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- 左側のサイドバーで、作成したテーマに進み、moduleフォルダーを開いてTestimonialモジュールを選択します。
- モジュールを開き、
module.html
ペインとmodule.css
ペインに変更が反映されていることを確認します。 - 右上にある[プレビュー]をクリックします。新しいタブが開き、モジュールのプレビューが表示されます。
ここまでのチュートリアルでは、次のような作業を行いました。
- HubSpotでモジュールを作成しました。
- モジュールをローカル環境に取り込みました。
- ローカルの開発ツールを使用してHubL+HTMLおよびCSSを変更しました。
このチュートリアルの次のパートでは、テンプレート内のモジュールの使い方を説明します。
簡単な定義で説明するなら、モジュールとはHubSpotのテンプレートとページの編集可能な領域です。HubSpotではデザインマネージャーを使ってモジュールをテンプレートに挿入できますが、ここではHubLを使用して、モジュールをローカル環境内のテンプレートに追加します。
- コードエディターで、
templates
フォルダーを開き、home.html
ファイルを開きます。 home.html
ファイル内の28行目付近から始まる最後のdnd_section
に移動します。ここでは、このセクションに新しいモジュールを追加します。dnd_section
内の他のdnd_module
の上に、次のHubLモジュールタグをコピーして貼り付けます。
このHubLタグでは、新しいモジュールが相対ファイルパスで参照されます。このモジュールをdnd_section
の他の2つのモジュールと均等な割合で収めるには、モジュールのwidth
とoffset
で、幅とオフセットをそれぞれ指定します。
- 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_module
のoffset
とwidth
を設定した後のコードは、次のようになります。
モジュールをドラッグ&ドロップ領域に追加する場合、モジュールタグに固有名は不要です。ただし、モジュールをドラッグ&ドロップ領域外のHTMLファイルに追加する場合は、モジュールに固有名を割り当てる必要があります。また、次のように少々異なる構文を使用します。
{% module "testimonial_one" path="../modules/Testimonial.module" %}
テンプレートでモジュールを使用する方法について詳細をご確認ください。
- 保存された作業を自動的に追跡するwatchコマンドを実行中の状態にしていない場合はhs watch <src> <dest>を実行します。以降の一連のステップを進めるにあたって、必ずこのコマンドを実行してください。
- HubSpotアカウントで、デザインマネージャーを開きます([マーケティング]>[ファイルとテンプレート]>[デザインツール])。
- デザインマネージャーの左のサイドバーで、home.htmlファイルを選択します。
- 右上の[プレビュー]をクリックし、[表示オプションを使用したライブプレビュー]を選択して、新しいウィンドウでテンプレートのプレビューを開きます。
- 新しいタブでテンプレートプレビューを表示すると、新しく追加したTestimonialモジュールが含まれているはずです。
ホームページテンプレートに工夫を加えるには、次の手順に従います。
- コードエディターに戻り、
home.html
ファイルを開きます。 - Testimonialモジュールタグに、以下のパラメーターを追加します。
上記のパラメーターは、3つのフィールドに当初割り当てた既定値よりも優先されます。各パラメーターでは、先ほど各フィールドに割り当てたHubL変数名が使用されています。
customer_name
:このパラメーターは、名前Mary
を顧客名フィールドに渡し、元の値Sally
を上書きします。profile_pic
:このパラメーターは、2つのプロパティーを含むオブジェクトです。src
プロパティーではget_asset_url
HubL関数を使用して、新しいプロフィール写真のURLを取得します。画像のファイルパスは、作業ディレクトリーを基準とした相対パスであることにご注意ください。まず、この画像をimages
フォルダー内のローカル テーマ ファイルに追加する必要があります。この画像は、完成したプロジェクトファイルを格納するimages
フォルダー内にあります。alt
プロパティーでは、画像の代替テキストを割り当てます。
testimonial
:このパラメーターは、評価コメントのフィールドに新しいテキストを渡します。
あるいは、HubLブロック構文をリッチ テキスト フィールドで使用して、HTMLまたはテキストの大きなブロックを次のように記述することもできます。
モジュールブロック構文の詳細をご確認ください。
ターミナルでwatchコマンドが実行中であれば、保存した変更がHubSpotに送信されます。その後デザインマネージャーに戻り、テンプレートをプレビューできます。
このステップでは、前と同じ手順に従って、さらに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!
(製品を使い始めてから、ビジネスがほぼ3倍に拡大しました。今すぐ始めてみてください) - Erinの写真として、
images
フォルダー内のファイルの相対ファイルパスを追加します。Erinの画像に、Erin Profile Picture
(Erinのプロフィール写真)と設定したalt
属性を指定します。 - 間隔を均等に維持するには、
offset
を8
に、width
を4
に設定します。
- 顧客の名前は
- 変更内容を保存します。
ターミナルでwatch
コマンドを実行中の状態にしている場合、デザインマネージャーに戻ると、テンプレートの変更内容をプレビューできます。現時点で、テンプレートのプレビューに3つ全てのTestimonialモジュールが含まれています。
最後のステップとして、theme.json
ファイルを変更して、テーマを公開ページで使用できるようにします。
テーマの既定の名前を変更するには、theme.json
ファイルでname
およびlabel
フィールドを設定します。
上記のコードを追加した後、変更を保存すると、watch
コマンドによってHubSpotに変更が送信されます。
このチュートリアルでは、カスタムモジュールを作成してhome.html
テンプレートに追加し、オプションでテーマの名前をカスタマイズしました。これで、このテンプレートからページを作成して公開できるようになりました。
テーマに焦点を当てた同様のチュートリアルにご興味がある場合、次のステップとして、こちらのテーマ入門チュートリアル(英語)をご覧ください。あるいは、HubSpotのナレッジベースでページの作成とカスタマイズについて詳細を確認することもできます。
モジュールの詳細については、次のモジュールガイドでご確認ください。
貴重なご意見をありがとうございました。