テンプレート

テンプレートは再利用可能なページラッパーまたはEメールラッパーです。通常はテンプレートによってモジュールやパーシャルがレイアウトに配置されます。テーマには、テンプレートまたはテンプレートのグループを含めることができます。この場合、スタイルと設定がテーマから継承されるので、外観の統一感を確保できます。ウェブサイトまたはEメール全体で使用するスタイルシート、JavaScriptファイル、およびその他のアセットへの参照は、テンプレートに追加します。HubSpot上のページ、ランディングページ、ブログ、システムページ、Eメールでは、いずれもテンプレートを使用します。制作担当者はページまたはEメールを作成するときに、まずテンプレートを選択し、そのテンプレートにコンテンツを追加します。 

テンプレートはデベロッパー ファイル システムに格納されます。これは、デザインマネージャーのファインダー内に表示されるのと同じファイルシステムです。ファイルシステム上のテンプレートには、コマンド ライン インターフェイス(CLI)を使用してアクセスできます。開発者のファイルシステムとファイルマネージャーを混同しないように注意してください。ファイルマネージャーは、制作担当者がHubSpot上で画像、動画、PDFなどのアセットを保管する際に使用されるツールです。こうした分離により、開発者は制作担当者が誤ってファイルを移動または削除して何かを破損することを心配することなく、開発用のファイルを安全な場所に保管できます。

HTML + HubLとドラッグ&ドロップ方式のテンプレート

テンプレートを作成するには、ローカル開発用CLIを使ってテンプレートをHubSpotにアップロードするか、デザインマネージャー内で直接作成します。

ローカル開発用CLIでのテンプレート作成

CLIを使用してテンプレートを作成する場合、まずCLIをインストールして構成する必要があります。その後、以下のコマンドを使用してテンプレートを作成できます。

Shell script
hs create template <name> [dest]
hs create template parameters
パラメーター説明
name

作成するテンプレートのカスタム名。

dest

テンプレートの保存先にするディレクトリーへのローカルパス。この引数の指定は任意です。省略した場合、既定で現在の作業ディレクトリーが使用されます。

テンプレートを作成すると、そのアセットがローカルで作成されます。デベロッパー ファイル システムにアセットを反映してテンプレート選択画面に表示するためには、まずアセットをアカウントにアップロードする必要があります。watchコマンドを使用して、現在の作業ディレクトリーと子ディレクトリー内の新しいファイルおよび既存のファイルの編集内容を自動的にアップロードすることも可能です。

デザインマネージャーでのテンプレート作成

デザインマネージャーでは、テンプレート、レイアウト、モジュール、JavaScript、CSSなどの本番アセットが格納されているのと同じ、デベロッパー ファイル システムを使用します。 

新しいテンプレートを作成するには、[マーケティング]>[ファイルとテンプレート]>[デザインツール]に移動します。これがデザインマネージャーです。ファインダー(左端のペイン)で、[ファイル]>[新規ファイル]をクリックします。

image4

「HTML&HubL]または[ドラッグ&ドロップ]を選択します。

画面上の指示に従ってテンプレートのタイプを選択します。

テンプレートタイプ

テンプレートはさまざまなコンテンツに使用できます。HTML+HubLテンプレートでは、シンプルなコメントアノテーションを使ってテンプレートのタイプを指定できます。ドラッグ&ドロップ デザイン マネージャー テンプレートでは、作成時にのみ、テンプレートのタイプを設定します。後でタイプを変更する場合は、HTML+HubLへの変換が必要になります。ドラッグ&ドロップ テンプレートではテンプレートのアノテーションを使用しません。

ブログ

ブログテンプレートの構造は、標準ページテンプレートと似ています。大きな違いは、コンテンツ設定ではブログテンプレートを選択できますが、ページテンプレートは選択できない点です。ブログテンプレートには、実際にはブログ リスト ページとブログ記事の詳細ページという2つの形式があります。1つのブログテンプレートで、リストページと詳細ページの両方のレイアウトを扱うこともできますが、別個のテンプレートに分けるのが一般的です。リストページ詳細ページでは、どちらも同じtemplateTypeを使用します。唯一の違いは、テンプレートタブのウェブサイト設定で選択する設定です。ブログテンプレートを作成する方法を参照してください。以下のtemplateTypeを指定して作成したテンプレートは、ユーザーがウェブページを作成するときにテンプレート作成画面に表示されません。ブログの作成方法を参照してください。

HTML
templateType: blog

Eメール

Eメールテンプレートは、Eメールツールで使用します。Eメールテンプレートはさまざまなメールクライアントで表示されること、そして到達率を担保するためのベストプラクティスに従わなければならないことから、さまざまな厳しい条件に対応する必要があります。HTML+HubLとデザインマネージャーのドラッグ&ドロップEメールテンプレートにはいずれも、作成時に基本コンポーネントが取り込まれます。以下のtemplateTypeを指定して作成したテンプレートは、Eメールを作成するときにだけテンプレート選択画面に表示されます。

CAN-SPAMに準拠するためには、Eメールテンプレートに必要な必須の変数を含める必要があります。

Eメールテンプレートには、特殊なクラス名またはデータ属性を設定して<style>要素に追加されるinline-cssに対する機能も組み込まれています。EメールにおけるCSSのインライン化は、さまざまなEメールクライアントにわたる対応を強化するために行います。利用者の多いEメールクライアントのほとんどが埋め込みCSSに対応(英語)していますが、受信者によっては例外的なEメールクライアントを使用している場合もあります。受信者を考慮して適切に判断してください。

Eメールテンプレートの作成に関する詳細を参照してください。

HTML
templateType: email

ページ

ページテンプレートは最も自由度の高いテンプレートタイプです。任意のウェブページまたはランディングページとして使用できます。ページレイアウトに事前に取り込まれるコンポーネントはありません。コード ページ テンプレートには、わずかなマークアップ(メタ情報に提案されるHubLタグ、タイトル、必須のヘッダー/フッターインクルードなど)が事前に取り込まれます。ページテンプレートを使用するページには通常、次の要素が含まれますが、これらに限定されません。

HTML
templateType: page

システムページ

システム ページ テンプレートは、特定の用途を示す内部フラグがあります。システムタブのコンテンツ設定で、指定された用途に対応するテンプレートを選択できます。

エラーページ

コンテンツ設定では、エラーページを404ページまたは500ページとして設定できます。どちらのテンプレートも同じtemplateTypeを使用します。以下のtemplateTypeを指定して作成したテンプレートは、ユーザーがウェブページを作成するときにテンプレート作成画面に表示されません。

HTML
templateType: error_page

Eメール配信設定ページ

Eメール配信設定ページ。ユーザーがオプトインまたはオプトアウトできる、すべての利用可能なサブスクリプションタイプのリストが表示されます。{% email_subscriptions "email_subscriptions"  %} HubLタグを含める必要があります。cms-theme-boilerplateの配信設定テンプレートを参照してください

HTML
templateType: email_subscription_preferences_page

Eメールバックアップ配信解除

Eメール配信解除ページのシステムテンプレート。{% email_simple_subscription "email_simple_subscription" %} HubLタグを含める必要があります。cms-theme-boilerplateのEメール バックアップ配信解除テンプレートを参照してください

HTML
templateType: email_backup_unsubscribe_page

Eメール配信解除確認

Eメール配信解除確認ページのシステムテンプレート。{{ unsubscribe_link_all }}変数によって生成されたURLにユーザーが移動すると、ここにリダイレクトされます。cms-theme-boilerplateの配信登録確認テンプレートを参照してください

HTML
templateType: email_subscriptions_confirmation_page

パスワード入力

パスワード入力テンプレートは、ブランド化されたページを生成します。制作担当者はこのページにパスワードを入力するよう促すメッセージを表示し、訪問者がパスワードを入力しなければページのコンテンツを閲覧できないようにすることができます。パスワード入力テンプレートを設定するには、コンテンツ設定を使用します。HubSpotパスワードで保護されたページの作成方法を参照してください。ボイラープレートでの保護されたページのパスワード入力を参照してください。

HTML
templateType: password_prompt_page

検索結果ページ

組み込みCMSサイト検索リスト機能のシステムテンプレート。ボイラープレートでの検索結果ページテンプレートを参照してください。

HTML
templateType: search_results_page

アクセス権設定

アクセス権設定(メンバーシップ)機能を使用できるHubSpotアカウントでは、CRMの特定のリストに含まれるユーザーだけがアクセスできるページをサイト上に作成できます。これにより、サイト訪問者はログイン資格情報が設定されたアカウントを保持できるようになります。これらのテンプレートを使用して、ページの外観を制御できます。

メンバーシップテンプレートとして設定できるのはHTML+HubLテンプレートのみです。

アクセス権設定のログイン

これは、アクセス権設定機能でアクセスが制御されたコンテンツにユーザーがアクセスしようとすると表示される、ログインページです。通常、ここには{% member_login "member_login" %}モジュールを含めます。ボイラープレートでのメンバーシップ ログイン テンプレートの例を参照してください。

HTML
templateType: membership_login_page

アクセス権設定の登録

これは、ユーザー登録ページです。このページでユーザーはアカウントを作成して、このリストに含まれるユーザーがアクセスできるコンテンツを閲覧できるようになります。通常、ここには{% member_register "member_register" %} HubLタグを含めます。ボイラープレートでのメンバーシップ登録テンプレートの例を参照してください。

HTML
templateType: membership_register_page

アクセス権設定のパスワードリセット

これは、パスワード リセット ページです。このページで、ユーザーは新しいパスワードを設定できます。通常、ここには{% password_reset "password_reset" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット テンプレートの例を参照してください。

HTML
templateType: membership_reset_page

アクセス権設定のリセットリクエスト

これは、パスワードのリセットをリクエストするページです。パスワードリセットEメールをリクエストするフォームが表示されます。通常、ここには{% password_reset_request "password_reset_request" %} HubLタグを含めます。ボイラープレートでのメンバーシップ パスワード リセット リクエスト テンプレートの例を参照してください。

HTML
templateType: membership_reset_request_page

テンプレートのプレビュー

テンプレートを更新した後は必ず、テンプレートが想定どおりに表示され、機能することを確認してください。HubSpotのデザインマネージャーには、モジュールとテンプレートをプレビューするためのツールが用意されています。テンプレートをプレビューするには、デザインマネージャーでテンプレートを開き、上部のバーにある[プレビュー]をクリックします。

image3-1

ほとんどのテンプレートのプレビューは、既定の状態で表示されます。既定の状態とは、テンプレートからウェブサイトのページを作成し、編集されていない状態の表示です。テンプレートには、[表示オプションを使用したライブプレビュー]と[表示オプションを使用せずにプレビュー]の2つのプレビューモードがあります。 

[表示オプションを使用したライブプレビュー]では、iFrame内にページが表示され、応答性のテストツールや、ドメインのスタイルシートによるテンプレートへの影響確認ツールを使用できます。

Live preview with display options shown

ブログテンプレートは、テンプレートの実際の動作確認にブログリストとブログ投稿が必要になる点が他とは異なります。ブログのプレビューでは、既存のブログを選択して、そのコンテンツをプレビューに取り込むことができます。その上で、ブログテンプレートのリストページまたは詳細ページを選択して表示できます。

Live preview with display options for blog

視覚的に微調整するだけであれば、テンプレートのプレビューを使用してプレビューするだけで十分です。ドラッグ&ドロップエリアを変更する場合、モジュールに設定されている既定のパラメーター値を変更する場合、またはその他に大きな変更を加える場合は、テンプレートを使用してウェブサイトのページ、ブログ、ブログ記事、またはEメールを作成するのが最適です。その上でモジュールのさまざまなフィールド値を試し、テンプレートが実際にどのように表示されるかをテストして、制作担当者にとって使いやすくなるように最適化できます。 

コンテンツステージング、下書きプレビュー、または開発者用サンドボックスアカウント(英語)を使用すると、ページが一般公開されて表示されることを心配せずにページを確認できます。

インクルードされるCMSファイル

CMSテンプレートには、特定のJavaScriptファイルとCSSファイルが関連付けられます。一部のファイルは自動的にインクルードされて削除できませんが、他のファイルは任意にインクルードできます。CMSコンテンツにスタイルシートが関連付けられる順序については、こちらの記事をご覧ください

jQuery

任意で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

layout.css(旧称required_base.css)は、HubSpotのレスポンシブグリッドをスタイル設定するファイルです。このファイルは常に自動的にドラッグ&ドロップテンプレートに組み込まれます。カスタム コード テンプレートに既定で組み込まれることはありません。開発者がコード化されたHTML+HubLテンプレートでdnd_areaタグを使用している場合、layout.cssファイルを組み込む必要はありませんが、このファイルをCMSテーマボイラープレートに組み込んでおくと、素早く簡単に稼働を開始できます。

このファイルにはレスポンシブグリッドCSSに加え、さまざまなビューポートで要素を表示または非表示にするために使用できるクラスが含まれています。このファイルの内容はこちらで確認できます。

HubSpotトラッキングコード

HubSpotトラッキングコード常にHubSpotテンプレートに自動的に追加されます。これはstandard_footer_includes HubL変数を使用して組み込まれます。トラッキングコードはyour_HubID.js(例:158015.js)という名前のアナリティクスJavaScriptファイルを読み込みます。このトラッキングコードは、HubSpotのGDPR機能に直接統合されます。


参考になりましたか? *
こちらのフォームには開発者向けドキュメントに関するご意見をお聞かせください。なお、HubSpot製品に関するご意見は、アイデアフォーラム(英語)にお寄せください。