Hubspot CMS Hub

Hubspot Academyの「HubSpot CMS for Developers II: Best Practices」を受講して、certificateを取得した。

読了時間 約7分

Hubspot Academy の「HubSpot CMS for Developers II: Best Practices」を受講して、certificate を取得したので、この講座で学んだことを簡単に記事にまとめておこうと思います。 この講座では Hubspot CMS Hub のテーマ開発する上で大切なトピックを大きく 3 つに分けて説明しています。

  1. Web Accessibility（ウェブ・アクセシビリティ）
  2. ページ読込速度の最適化（Web Performance Optimization）
  3. Hubspot CMS Hub の「テーマ」「セクション」「モジュール」について

1. Web Accessibility（ウェブ・アクセシビリティ）

Webアクセシビリティ

それではまず「Web Accessibility（ウェブ・アクセシビリティ）」について簡略に以下に要点を忘れないようにピックアップしていきます。

「Web Accessibility（ウェブ・アクセシビリティ）」についてはインターネットで検索すれば詳しい記事が出てきますので、ここでは Hubspot CMS テーマ構築する上で必要な「ウェブアクセシビリティの改善方法」について概要を記しておきます。

まず制作したサイトの「ウェブアクセシビリティ」に問題があるかどうかチェックするためにテストを行います。「ウェブアクセシビリティ」をテストするためには 2 つの方法があります。

1. Automated Testing 自動テスト（Chrome 開発者ツール「axe Dev Tools」などを使用）

2. Manual Testing 手動テスト

ウェブアクセシビリティについて気をつけるポイント

  • カラーコントラストを意識する。
  • 画像に適切な alt テキストを使う。
  • 適切な見出し階層でマークアップする。
  • HTML セマンティック要素（<header>, <main>, <aside>, <article>, <footer>など）に沿ったマークアップをする。
  • Form にちゃんと label があるかどうか確認する。また sr-only クラスを使って label を非表示にすることも考慮する。
  • skip to content link を追加する。

■ Manual Testing 手動テスト

  • タブキーを使って実際のページに「アクセシビリティのエラー」がないかどうか調査する。
  • 「スクリーンリーダー」（Mac だと Voice Over）を使ってのテスト

2. ページ読込速度の最適化（Web Performance Optimization）

ページ読み込み速度最適化

ページ読込速度最適化をする際に以下の 3 つの要素それぞれの改善を目標とする。

  • 「loading performance（ローディング・パフォーマンス）」
  • 「Rendering performance（レンダリング・パフォーマンス）」
  • 「Time to Interactive（タイム・トゥ・インタラクティブ）」

「loading performance（ローディング・パフォーマンス）」

「loading performance（ローディング・パフォーマンス）」というのは、サーバーがサイトの全てのファイルをブラウザーに送るのにどのくらい時間を要するかの指標です。

「Rendering performance（レンダリング・パフォーマンス）」

「Rendering performance（レンダリング・パフォーマンス）」というのは、ブラウザがサイトのファイルを読み込み、最終的にピクセル単位でページに描画されるまでに要する時間のことを指します。

「Time to Interactive（タイム・トゥ・インタラクティブ）」

「Time to Interactive（タイム・トゥ・インタラクティブ）」というのは、ページが完全にインラクティブになるまでに要する時間のことです。

Critical Rendering Path について

以下 Critical Rendering Path を分かりやすく説明する図解

Critical Rendering Path Critical Rendering Path を図解で分かりやすく説明している。

ページ読込速度最適化する上での主なエリア

  1. 画像
  2. 動画・ビデオ
  3. JavaScript
  4. CSS

1. 画像

  • Tinypng などを使って画像を圧縮する。
  • webp などの次世代型画像形式を使う。

2. 動画

  • ビットレートを小さくする
  • フレームレートを下げる
  • 圧縮率の高いコーデックに変換する
  • カバー画像だけ表示させて、youtube にリンクを飛ばす。

👇  参考記事 https://fastest.jp/blog/video-compression/

3. JavaScript

JavaScript は「paser-blocking」であり、「render-blocking」である。

Paser-blocking について

JavaScript は、その記述された場所で実行されます。つまり HTML パーサー（ウェブブラウザが備えている、HTML を解読する機能）が JavaScript のソースコードに到達すると、DOM の構築を一時中断して、JavaScript エンジンに制御を渡します。JavaScript がその時点での DOM、CSSOM の変更などの処理を完了させると、中断された位置に戻り、DOM の構築を再開します。このようにパーサーの処理を中断させるリソースを、パーサーブロッキングリソース(Parser blocking resource) といいます。JavaScript の処理が大きくなるほど、中断される時間も大きくなり、外部の js ファイルを使用する場合、その読み込み時間も中断時間に含まれます。

👇 の記事を参考  https://zenn.dev/antez/articles/b6eb22cb228a49

★**「paser-blocking」「render-blocking」を解除するためには、Async や Defer を使う。 （async と defer の違いについては 👇 を参考）**

https://qiita.com/haruna-nagayoshi/items/71327d1e3e9fef187abf

★ Hubspot CMS Hub に実装する場合は、HubL 関数であるrequire_jsやrequrie_cssを使用する。

require_js

require_js のコード記述例

{{ require_js("http://example.com/path/to/head-file.js", "head") }}

<!-- you can add async or defer attributes to the tags that are added. -->
{{ require_js(get_asset_url("./path/to/file.js"), { position: "footer", async: true }) }}
{{ require_js(get_asset_url("./jquery-latest.js"), { position: "footer", defer:true }) }}```

![require_css](/images/require_css.png "require_css")

require_css のコード記述例

````{{ require_css("http://example.com/path/to/file.css") }}
{{ require_css(get_asset_url("/relative/path/to/file.css")) }}

<!-- you can tell the browser to load the file asynchronously -->
{{ require_css(get_asset_url("./style.css"), { async: true }) }}```

👇 HubL 関数のドキュメント

https://developers.hubspot.jp/docs/cms/hubl/functions

画像最適化の主な方法

  1. resize_image_urlを使ってカスタム画像サイズを生成する。 （👇 がresize_image_url関数の Hubspot 公式ドキュメント） https://developers.hubspot.jp/docs/cms/hubl/functions#resize-image-url

  2. image タグにsrcsetやsizes属性を付与する。

  3. loading 属性を**「lazy」**に設定する。

  4. widthとheight属性を付与する。

width と height 属性を設定することによって、

  • ブラウザーが画像のアスペクト比を計算できるようにする。
  • ページのレイアウトをする際に画像用のスペースを確保する。
  • Cumulative Layout Shift（累積レイアウトシフト数）を減らすことができる。 【CLS（Cumulative Layout Shift/累積レイアウトシフト数）については 👇 を参考】 https://web.dev/i18n/ja/cls/

JavaScript 最適化の主な方法

  1. 不要な script は削除する
  2. defer 属性を script に付与して、DOM 構築後に script が実行されるようにする。

3. 「Theme** テーマ」「Sections セクション」「Modules モジュール」について

Hubspot CMS Hub テーマの構造

Hubspot CMS Hubテーマの構造 Theme テーマのコンポーネントを分かりやすく図解している

Theme テーマの構造

CMS Hub テーマの構造を理解するために上の図解がとても分かりやすいです。 Hubspot のテーマというのは、大きく分けて**「Theme Fields テーマフィールド」「Templates テンプレート」**という 2 つの要素で成り立っています。

Template テンプレートの構造

そして「Templates テンプレート」は主に 👇 で成り立っている。

  • 「Global Partials グローバル・パーシャル」
  • 「Drag and Drop ドラッグ＆ドロップエリア 」
  • 「Sections セクション」
  • 「Modules モジュール」
  • 「Markup, CSS, JS」

Sections セクションの構造

セクションの中には「Modules モジュール」があります。

Modules モジュールの構造

モジュールの中には「Modules Fields モジュール・フィールド」と「Markup, CSS, JS」が入っています。

以上が Hubspot CMS Hub テーマの構造・成り立ちについての簡単な説明でした。次は「Modules モジュール」と「Section セクション」について見ていきましょう。

Modules モジュールについて

モジュールの簡単な定義 モジュールの簡単な定義

  • モジュールはセクションと違って、Atomic（「最小単位」）で成り立っている。
  • ページ幅がいっぱいに広がらない単一の要素に最適

Sections セクションについて

セクションについての簡単な定義

セクションについての簡単な定義

  • ページ単位エリアに最適
  • ページ幅いっぱいに広がるエリアの場合
  • 特定のレイアウトで連動する複数の最小単位要素（Atom = モジュール）で成り立っている場合

プロフィール概要

Yuya Sato

Design Engineer