モジュールファイル
ページ、ブログ、見積もり(英語)のモジュールを作成する場合は、モジュールのコンテンツ、スタイル設定、機能を制御するための3つのフロントエンド関連ファイルがモジュール内にあります。
- module.html
- module.css
- module.js
Eメールモジュールは、module.cssとmodule.jsに対応していません。理由としては、EメールクライアントではJavaScriptがサポートされないことと、リンクされたCSSファイルのサポートが限られていることが挙げられます。
これらのファイルは、モジュールのインスタンスがページ上にある場合には、常にページ上にレンダリングされます。
特定のページ内に同じモジュールのインスタンスが複数ある場合、HubSpotによってそのモジュールのmodule.css
とmodule.js
が1回だけ読み込まれます。既定では、module.css
とmodule.js
が非同期的に読み込まれることはありませんが、モジュールのmeta.jsonにcss_render_options and js_render_optionsを含めることで、この動作を変更できます。
モジュールはデザインマネージャー内で作成するか、またはHubSpot CLIを使用してローカル環境で作成できます。モジュールファイルは、デザインマネージャー上ではマルチペインエディターに表示されます。
ローカルでモジュールを確認すると、ファイルはmodule-name.moduleフォルダーに格納されます。
モジュールの作成と管理にデザインマネージャーまたはCLIのいずれを使用するかは、チームの状況や好みに応じて決めます。効率的な開発者ワークフローの構築に記載されている推奨事項を参照してください。
module.htmlファイルはHTMLおよびHubLを対象としています。一般に、モジュールがページエディターまたはテンプレートファイルのどこに配置されているかに応じて、module.htmlファイルの内容がどこにレンダリングされるかが決まります。
このファイルは、モジュールがどこに配置されていても、ページ内でHubL includeと同じように動作します。module.htmlファイルからは、HubLを使ってモジュールのフィールド値にアクセスできます。
モジュールにCSSを追加するには、module.css
ファイルを使用します。
一般に、module.css
ではHubLのごく一部のサブセットのみがサポートされます。ただし、モジュールとリンクされたアセットとして画像を追加する場合にmodule_asset_url("my-image.png")
を使用できます。これにより、画像などのアセットをモジュール自体にパッケージ化できます。例:
ここでは、モジュール内のフィールドに基づいてモジュールが動的に変化するように、モジュールのCSSを設定する方法を説明します。
モジュールのフィールドに基づいてモジュールのスタイルに効果を与えるには、いくつかの方法があります。特定の用途に応じて最適な方法を選択してください。
特定のプロパティーを制作担当者が直接制御できる必要があり、クラスが適切でない場合は、require_css
ブロックにスタイルタグを使用する方法が最適です。
クラスを使用することなく制作担当者が特定のプロパティーを直接制御できるようにするには、require_css
タグ内にmodule.html
ファイルにスタイルを追加できます。例:
module.html
ではHubLをレンダリングできるので、モジュールフィールド値をCSS変数として使用できます。制作担当者がページエディター上でフィールドを更新すると、該当するCSSが更新されます。このようなブロックによって、<style>
タグがstandard_header_includes
ステートメント内のページの<head>
に移されます。
CSSをscope_css
タグで囲むことにより、CSSをモジュールインスタンスにのみ適用することもできます。例えば、上記のモジュールコードは次のように変更できます。
プロパティーの数が多くてコードが読みにくくなった場合は、require_css
ブロック手法への切り替えを検討してください。
require_css
は、module.htmlに追加することで、特定のモジュールまたはテンプレートの表示に特定のCSSファイルが必要なことをHubSpotに示すためのHubL関数です。cssファイルを指すリンクタグが、standard_header_includes
内でページの<head>
に追加されます。
require_css
関数では、特定のページ上のモジュールやテンプレートで同じCSSファイルが何回必要とされるかにかかわらず、そのCSSファイルが1回だけ読み込まれます。複数のモジュール間でスタイルが共有される可能性があっても、サイトの全ページで使われるメインのスタイルシートにCSSを直接追加することが望ましくない状況では、この方法が優れています。
require_css
もリンクによるCSSファイルも同じ目的で利用できますが、require_css
はフィールド値に基づく条件付きで使用できます。これにより、不要なコードの読み込みが防止されます。
JavaScriptをモジュールに追加するには、module.js
ファイルを使用します。
module.css
ファイルと同様にmodule.js
ファイルでもHubLはサポートされません。
モジュールにはいくつかの作成方法があり、フィールド値に基づくJavaScriptの動作が異なります。どの方法をどのような状況で使用するかを理解しておくことで、モジュールが使用される全てのページでパフォーマンス面でのメリットが得られます。
例えば、カスタム画像モジュールがあり、Lightboxで画像が開くように制作担当者が設定できる必要があるとします。制作担当者がこの設定を必要とするのは特定の画像のみで、全てのモジュールインスタンスとは限りません。
データ属性は、開発者が要素に追加するHTML 5標準のカスタム属性です。class="yourClassName"
と同じように、data-your-attribute="yourValue"
が全ての要素でサポートされます。
データ属性を使用すると、module.jsファイルでの処理用としてモジュールインスタンスのフィールド値を渡すことができます。
この値をmodule.jsファイル内で使用するには、モジュールの全てのインスタンスに対してループ処理を行う必要があります。モジュールに固有のクラス名をモジュールの最も外側にあるラッパー要素に追加することで、その名前を対象として各モジュールインスタンスをループ処理できます。
データ属性によって、module.js内で各モジュールインスタンスのフィールド値を取得できます。
JavaScriptテンプレートライブラリーや、Vue.jsまたはReact.jsなどのリアクティブフレームワークを使用する高度なケースでは、データの出力だけを自分で対応し、レンダリングはフレームワーク側で処理する方が望ましい場合があります。
この場合、テンプレートスクリプトからアクセス可能な変数を提供するには、require_js
ブロックで囲んだスクリプトタグを使用します。
この手法は、レンダリング元となる初期データセットを高度なアプリケーションに提供する際に役立ちます。これにより、データを取得するための最初のJavaScript呼び出しが不要になります。
require_js
は、特定のモジュールまたはテンプレートの正常な読み込みに特定のJavaScriptファイルが必要であることを、HubSpotに示すためのHubL関数です。この関数には、ファイルへのパスと、ファイルの追加先となる位置(“head”または“footer”)の2つの入力パラメーターがあります。
モジュール内では、require_js
をmodule.htmlにのみ追加できます。require_js
ステートメントで参照されるJavaScriptファイルは、ページ内のモジュールやテンプレートで何回必要とされるかにかかわらず、ページごとに1回だけ読み込まれます。これによりHTTPリクエスト数が減少し、コードの重複も防止できます。
これは次のような状況で役立ちます。
- 同じJavaScriptを必要とする複数のモジュールまたはテンプレートがある場合、
require_js
を使用することでモジュール間でスクリプトを共有できます。 - webpackのようなJavaScriptバンドラーを使用する場合、jsファイルを特定の1つの位置に出力する方が簡単なことがあります。
require_js
を使用すると、JavaScriptをモジュールに関連付けることができます。
require_js
もリンクによるJavaScriptファイルも同じ目的で利用できますが、require_js
にはフィールド値に基づく条件を付けることができます。これにより、不要なコードの読み込みが防止されます。さらに、必要な場合にはJavaScriptをheadに読み込む方法もあります。
JavaScriptはレンダリングの妨げになるので、require_js
がJavaScriptを配置する位置は既定でfooterになっています。パフォーマンスの最適化に関する詳細をご覧ください。
貴重なご意見をありがとうございました。