テンプレートの概要
テンプレートは、HubSpotのページ、Eメール、テーマのレイアウトを定義します。テンプレートはモジュールとパーシャルで構成され、スタイルシートやJavaScriptファイルなどのアセットを参照できます。テンプレートの作成には、HubSpot CLI（英語）またはHubSpotのデザインマネージャーを使用できます。制作担当者がページまたはEメールを作成するときに最初に選ぶのが、テンプレートです。
ここではテンプレートの作成方法、テンプレートの種類、テンプレートに含まれる内容について説明します。
テンプレートは、HubSpot上で、またはCLIを使用して作成できます。
CLIを使用してテンプレートを作成する場合、まずCLIをインストールして設定（英語）する必要があります。この作業が完了したら、次のコマンドを実行してテンプレートを作成します。
| Parameter | Description |
|---|---|
name
| 作成するテンプレートのカスタム名。 |
dest
| このテンプレートの保存場所にするディレクトリーのローカルパス。この引数は必須ではありません。この引数を省略すると、既定で現在の作業ディレクトリーになります。 |
ウェブサイトページやブログ記事など、さまざまなタイプのコンテンツ向けのテンプレートを作成できます。HTML＋HubLテンプレートでは、ファイルの先頭部分にアノテーションを追加してテンプレートのタイプを指定します。ビジュアル レイアウト エディター上で作成するドラッグ＆ドロップテンプレートの場合は、作成時にのみテンプレートを選択できます。
さまざまなタイプのテンプレートと、各タイプを指定するためのアノテーションについて、以下で説明します。
注：制作担当者は、テンプレートに「dnd_area」タグが含まれているかどうかに応じて、ページまたはEメールのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。
- ビジュアル レイアウト エディター上で作成したドラッグ＆ドロップテンプレートは、「dnd_area」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
- 「dnd_area」タグを含むコードテンプレートは、「dnd_area」タグを含むコードテンプレートとのみ入れ替えることできます。
- 「dnd_area」タグを含まないコードテンプレートは、「dnd_area」タグを含まない他のコードテンプレートとのみ入れ替えることできます。
ブログ リスト テンプレートは、ブログのURLにアクセスしたユーザーに対して表示されるテンプレートです。このテンプレートは通常、ブログの全記事の要約、タイトル、キービジュアルを一覧形式で表示するために使用します。また、このテンプレートでは通常、古い記事を辿るためのページ番号も示します。
ブログ記事テンプレートは、ブログの各記事を表示するときにユーザーに対して表示されるテンプレートです。このテンプレートでは通常、記事全体の内容を表示します。
1つのブログテンプレートで、リストページと詳細ページの両方のレイアウトを扱うこともできます。ただし、別個のテンプレートに分けるのが一般的です。統合テンプレートは、ブログ設定内のリストとブログ記事の両方に、選択可能なテンプレートとして表示されます。記事専用またはリスト専用のテンプレートを作成する場合は、blog_postまたはblog_listingを使用する必要があります。
開発の簡素化や制作担当者の操作を求める場合は、統合テンプレートではなく、templateTypesにblog_postとblog_listingを個別に使用することをお勧めします。
Eメールテンプレートは、Eメールツールで使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達率を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。HTML+HubLとデザインマネージャーのドラッグ＆ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下のtemplateTypeを指定して作成したテンプレートは、Eメールを作成するときにだけテンプレート選択画面に表示されます。
CAN-SPAMに準拠するためには、Eメールテンプレートに必要な必須の変数を含める必要があります。
Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して<style>要素に追加されるinline-cssに対する機能も組み込まれています。EメールにおけるCSSのインライン化は、さまざまなEメールクライアントにわたる対応を強化するために行います。利用者の多いEメールクライアントのほとんどが埋め込みCSSに対応していますが、受信者によっては例外的なEメールクライアントを使用している場合もあります。受信者を考慮して適切に判断してください。
システム ページ テンプレートは、特定の用途を示す内部フラグがあります。システムタブのコンテンツ設定で、指定された用途に対応するテンプレートを選択できます。
Eメール配信設定ページ。ユーザーがオプトインまたはオプトアウトできる、全ての利用可能なサブスクリプションタイプのリストが表示されます。{% email_subscriptions "email_subscriptions" %} HubLタグを含める必要があります。cms-theme-boilerplateの配信設定テンプレートを参照してください。
Eメール配信解除ページのシステムテンプレート。{% email_simple_subscription "email_simple_subscription" %} HubLタグを含める必要があります。cms-theme-boilerplateのEメールバックアップ配信解除テンプレートを参照してください。
Eメール配信解除確認ページのシステムテンプレート。{{ unsubscribe_link_all }}変数によって生成されたURLにユーザーが移動すると、ここにリダイレクトされます。cms-theme-boilerplateの配信登録確認テンプレートを参照してください。
パスワード入力テンプレートは、ブランド化されたページを生成します。制作担当者はこのページにパスワードを入力するよう促すメッセージを表示し、訪問者がパスワードを入力しなければページのコンテンツを閲覧できないようにすることができます。パスワード入力テンプレートを設定するには、コンテンツ設定を使用します。HubSpotパスワードで保護されたページの作成方法を参照してください。ボイラープレートでの保護されたページのパスワード入力を参照してください。
組み込みCMSサイト検索リスト機能のシステムテンプレート。ボイラープレートでの検索結果ページテンプレートを参照してください。
アクセス権設定（メンバーシップ）機能（CMS Hub Enterprise）を使用できるHubSpotアカウントでは、CRMの特定のリストに含まれるユーザーだけがアクセスできるページをサイト上に作成できます。これにより、サイト訪問者はログイン資格情報が設定されたアカウントを保持できるようになります。これらのテンプレートを使用して、ページの外観を制御できます。
メンバーシップテンプレートとして設定できるのはHTML+HubLテンプレートのみです。
これは、アクセス権設定機能でアクセスが制御されたコンテンツにユーザーがアクセスしようとすると表示される、ログインページです。通常、ここには{% member_login "member_login" %}モジュールを含めます。ボイラープレートでのメンバーシップ ログイン テンプレートの例を参照してください。
これは、ユーザー登録ページです。このページでユーザーはアカウントを作成して、このリストに含まれるユーザーがアクセスできるコンテンツを閲覧できるようになります。通常、ここには{% member_register "member_register" %} HubLタグを含めます。ボイラープレートでのメンバーシップ登録テンプレートの例を参照してください。
これは、パスワード リセット ページです。このページで、ユーザーは新しいパスワードを設定できます。通常、ここには{% password_reset "password_reset" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット テンプレートの例を参照してください。
これは、パスワードのリセットをリクエストするページです。パスワードリセットEメールをリクエストするフォームが表示されます。通常、ここには{% password_reset_request "password_reset_request" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット リクエスト テンプレートの例を参照してください。
テンプレートを更新した後は必ず、テンプレートが想定どおりに表示され、機能することを確認してください。HubSpotのデザインマネージャーには、モジュールとテンプレートをプレビューするためのツールが用意されています。テンプレートをプレビューするには、デザインマネージャーでテンプレートを開き、上部のバーにある［プレビュー］をクリックします。
ほとんどのテンプレートのプレビューは、既定の状態で表示されます。既定の状態とは、テンプレートからウェブサイトのページを作成し、編集されていない状態の表示です。テンプレートには、［表示オプションを使用したライブプレビュー］と［表示オプションを使用せずにプレビュー］の2つのプレビューモードがあります。
［表示オプションを使用したライブプレビュー］では、iFrame内にページが表示され、応答性のテストツールや、ドメインのスタイルシートによるテンプレートへの影響確認ツールを使用できます。
ブログテンプレートは、テンプレートの実際の動作確認にブログリストとブログ投稿が必要になる点が他とは異なります。ブログのプレビューでは、既存のブログを選択して、そのコンテンツをプレビューに取り込むことができます。その上で、ブログテンプレートのリストページまたは詳細ページを選択して表示できます。
視覚的に微調整するだけであれば、テンプレートのプレビューを使用してプレビューするだけで十分です。ドラッグ＆ドロップエリアを変更する場合、モジュールに設定されている既定のパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用してウェブサイトのページ、ブログ、ブログ記事、またはEメールを作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。
コンテンツステージング、下書きプレビュー、または開発者用サンドボックスアカウントを使用すると、ページが一般公開されて表示されることを心配せずにページを確認できます。
CMSテンプレートには、特定のJavaScriptファイルとCSSファイルが関連付けられます。一部のファイルは自動的にインクルードされて削除できませんが、他のファイルは任意にインクルードできます。CMSコンテンツにスタイルシートが関連付けられる順序については、こちらの記事をご覧ください。
任意でjQueryをHubSpotテンプレートのheadタグにインクルードできます。インクルードした場合、standard_header_includes HubL変数の一部としてレンダリングされます。
［設定］>［ウェブサイト］>［ページ］で、jQueryのバージョンを1.11.x、バージョン1.7.1に変更したり、jQueryを完全に無効にしたりできます。古いブラウザーとの後方互換性を維持するためにjQuery移行スクリプトをインクルードすることもできます。ページのパフォーマンス向上を目的に、jQueryをフッターに移動することも可能です。jQueryを移動すると、jQueryに依存しているJavaScripが機能しなくなることがあります。サイトをテストするには、ウェブサイト上の特に重要なページを表示して、URLの末尾に?hsMoveJQueryToFooter=Trueを追加し、何も不具合が発生しないことを確かめてください。
HubSpot機能には以前、jQueryが必要であったことから、従来はjQueryが既定でインクルードでされていました。CMS Hubには、jQueryは必須ではありません。jQueryの機能の大半には、同等の最新かつ簡素なJavaScriptがあるので、こちらを使用することをお勧めします。jQueryを使用する必要がある場合は、設定で既定のバージョンを無効にし、</body>タグの前に最新バージョンが読み込まれるようにすることをお勧めします。
サイトでjQueryを削除しても問題が発生しないかどうかをテストするには、サイト上の操作可能な要素が特に多く含まれている複数のページを表示し、URLの末尾に?hsNoJQuery=trueを追加します。
layout.css（旧称required_base.css）は、HubSpotのレスポンシブグリッドをスタイル設定するファイルです。このファイルは常に自動的にドラッグ＆ドロップテンプレートに組み込まれます。カスタム コード テンプレートに既定で組み込まれることはありません。開発者がコード化されたHTML+HubLテンプレートでdnd_areaタグを使用している場合、layout.cssファイルを組み込む必要はありませんが、このファイルをCMSテーマボイラープレートに組み込んでおくと、素早く簡単に稼働を開始できます。
このファイルにはレスポンシブグリッドCSSに加え、さまざまなビューポートで要素を表示または非表示にするために使用できるクラスが含まれています。このファイルの内容はこちらで確認できます。
HubSpotトラッキングコードは常にHubSpotテンプレートに自動的に追加されます（Eメールテンプレートを除く）。これはstandard_footer_includes HubL変数を使用して組み込まれます。トラッキングコードはyour_HubID.js（例：158015.js）という名前のアナリティクスJavaScriptファイルを読み込みます。このトラッキングコードは、HubSpotのGDPR機能に直接統合されます。
貴重なご意見をありがとうございました。