HubSpot CMSボイラープレート

Last updated:

HubSpot CMSボイラープレート(英語)を出発点として利用すれば、開発者はCMS Hub上でウェブサイトを短時間で稼働できるだけでなく、HubSpot CMSプラットフォームで適用できるベストプラクティスを理解できます。ボイラープレートはオープンソースのGitHubプロジェクトです。誰でも変更を提案したり、フォークして用途に合わせてカスタマイズしたりできます。CMS Hubをこれから利用する場合、ボイラープレートを出発点に新しいプロジェクトを開始するには、CMS Hub上での開発手順を説明しているクイック スタート ガイド(英語)に従ってください。

開発にHubSpot CMSボイラープレートを使用する理由

HubSpot CMSボイラープレートは、HubSpotによって作成され、積極的に更新が行われています。HubSpotはこのボイラープレートを作成する際に、開発者が最良のウェブサイト構築手法を確立する上で実践してきた数々のベストプラクティスを導入し、HutSpot CMSでのウェブサイトの構築に適用してきました。その結果、簡潔でパフォーマンスに優れ、柔軟な変更も可能なウェブサイトを開発者が構築できるようになり、開発時間も大幅に短縮されています。ボイラープレートでは、フォーム、メニューモジュール、基底クラスといった、HubSpot関連のアセットに対する包括的なCSSも提供されます。ボイラープレートが実装されたデモ環境は、https://boilerplate.hubspotcms.com/(英語)でご覧になれます。

HubSpot CMSボイラープレートの使い方

ローカル開発環境でボイラープレートを使用するには、CMS Hub上でのウェブサイト開発スタートガイド(英語)の手順に従って簡単に行えます。

HubSpot CMSボイラープレートの構成

開発者はローカル開発ツールを使用してボイラープレートを操作することも、デザインマネージャーで直接作業することもできます。ボイラープレートでは、全てのアセットを相対パスで参照するため、あらゆるプロジェクトへの調整も容易です。相対パスで参照することから、HubSpotプラットフォーム上のどのアカウント間でもボイラープレートを移植できます。下のスクリーンショットは、ボイラープレートのアセットのフォルダー構造を示しています。ボイラープレートのアセットは複数のディレクトリーとしてまとめられるので、アセットがどこにあるのかを簡単に識別できます。

HubSpot CMSボイラープレートのフォルダー構造

HubSpot CMSボイラープレートの基礎となるテンプレート構造は、[templates]>[layouts]フォルダーに格納されている共通のベーステンプレート(英語)を中心に展開します。つまり、このベーステンプレートで{% extends %}タグを使用して、メインコンテンツの{% block body %}ブロックを参照します。extendタグとブロックの使用例は、templatesディレクトリーに格納されているいずれかのhtmlファイル(英語)で確認できます。ブロックと拡張の詳細をご確認ください。

このようにCMSシステムでの開発では、ベーステンプレート(メイン/親テンプレートとも呼ばれます)にサイト上のコンテンツを構成する主要な共通要素を含める方法が一般的です。共通の構成要素は通常、ウェブサイトに設定されている<head>要素に含まれる項目です。項目の例としては、共通メタプロパティー(タイトル、メタディスクリプションなど)、ファビコンのリンク、CSSのリンク、サードパーティーのスクリプトなどがあります。

<!doctype html> <html lang="{{ html_lang }}" {{ html_lang_dir }}> <head> <meta charset="utf-8"> <title>{{ page_meta.html_title }}</title> {% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %} <meta name="description" content="{{ page_meta.meta_description }}"> {{ require_css(get_asset_url("../../css/layout.css")) }} {{ require_css(get_asset_url("../../css/main.css")) }} {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }} {{ require_js(get_asset_url("../../js/main.js")) }} {{ standard_header_includes }} </head> <body> <div class="body-wrapper {{ builtin_body_classes }}"> {% block header %} {% global_partial path="../partials/header.html" %} {% endblock header %} {% block body %} <!-- Nothing to see here --> {% endblock body %} {% global_partial path="../partials/footer.html" %} </div> {{ standard_footer_includes }} </body> </html>

このベースレイアウト内には、ヘッダーやフッターなどのグローバルパーシャルも含まれるため、これらのパーシャルのコードを専用のファイルに保持してモジュール方式で開発できます。さらに、これらはグローバルパーシャルなので、制作担当者もグローバル コンテンツ エディターを使って簡単に編集できます。

ボイラープレートに含まれるアセットの詳細については、GitHubのボイラープレートのwiki(英語)を参照してください。

jQuery

HubSpotテーマボイラープレートは、jQueryがなくても機能します。古いHubSpotアカウントでは、既定でjQueryが読み込まれます。新しいHubSpotアカウントでは、jQueryは既定で無効になっています。

従来、HubSpotスクリプトの正常な動作にはjQueryが必要で、そのためドメイン全体の設定があり、互換性が確保されていました。現在のHubSpotスクリプトにjQueryは使用されていません。jQueryが必須ではないため、開発者はソース管理にも使用できるライブラリーを適切な方法で組み込むことができます。新しいウェブサイトの場合は、jQuery設定を無効にすることをお勧めします。 

既存のウェブサイトがあるドメインのjQueryを無効にした場合、jQueryに依存しているランディングページまたは既存のウェブページが機能しなくなる恐れがあることに注意してください。

新しいウェブサイトでjQueryを使用する場合は、最新バージョンのjQueryを使用することをお勧めします。これには次の2つの簡単な方法があります。

  • 最新バージョンのjQueryをデベロッパー ファイル システムにアップロードし、require_jsを使用することで、jQueryを必要に応じて読み込みます。
  • 信頼できるCDNを採用し、require_jsを使用することで、jQueryを必要に応じて読み込みます。

関連コンテンツ


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。