HubSpot

HubSpotの独自言語HubLとは?コードの仕組みを解説します

HubSpot CMSは便利なツールですが、こんなことを思うことはありませんか? 「ここのデザインを変更したい!」 「ここに動的なモジュールを追加したい!」 HubSpotはHubLという専用のプログラミング言語を使うことで一から開発することができます。 今回は、HubSpot CMSの開発をHubLの基本的な仕組みについて紹介していきます。


HubSpot CMSは便利なツールですが、こんなことを思うことはありませんか?
「ここのデザインを変更したい!」
「ここに動的なモジュールを追加したい!」
HubSpotはHubLという専用のプログラミング言語を使うことで一から開発することができます。
今回は、HubSpot CMSの開発をHubLの基本的な仕組みについて紹介していきます。

HubSpotの他の機能についてはこちらで紹介しています。

 

HubSpot使用者必見|サービス連携と開発でHubSpotを使いこなそう!

 

HubLとは?

HubLとはHubSpot内の専用のプログラミング言語で、HubSpot Markup Languageを略してHubLと呼ばれています。

HubLはHubSpot CMSに使用されており、JinjaをベースにHubSpotがHubSpot CMSでより便利に使用できるようにカスタマイズしたプログラミング言語になります。

HubSpotのCMSについては以下の記事で詳しく紹介しています。

 

→HubSpotCMSとは?テーマを使ってマーケターもWebサイト作成ができます

 

 

HubLの仕組みを紹介

HubLは他の動的なウェブサイトを生成するときによく使われるテンプレート言語と同様の形式で、HTMLのコードの中にHubLのコードを埋め込むことができます。

HTMLにHubLのコードを埋め込むためには、指定のHubLのコードが開始・終了することを意味する区切り文字を挿入する必要があります。

主に使用されている区切り文字は以下の通りです。

 

 - 文
- 式
- コメント


最初の「 - 文」形式のコードでは、モジュールの作成、条件付きテンプレートロジックの定義、forループの構成、変数の定義などに使われています。

次の「 - 式」形式のコードでは、テンプレートに格納されている値を返します。この機能でHubSpotCMSではテンプレートを変更しても同じ内容のページを動的に表示することができます。

最後に区切り文字とは別で、「」形式のコードでは、「 - 文」形式の中で、リストに要素をapend(追加)したり、辞書の要素をupdate(追加)することができます。

 

 

HubSpot CMSで開発したい方へ

HubSpot CMSでテーマのデザインをそのまま使用せずに、一からテーマを作ろうとしている方、モジュールを開発してウェブサイトに新たな動的な機能を追加しようとしている方はHubLを使った開発が必要になります。

HubSpotの強みとして、デザインの大枠はテーマを使用することで瞬時に作成することができます。

しかし、細かいデザインの調整や機能の追加を行うためには、開発の知見が必要です。

HubLを使った開発を行うためには以下のサイトの手順に従って、環境構築を行う必要があります。

 

→Quick start guide to developing on the HubSpot CMS

 

HubSpot CMSのテーマを簡単にカスタマイズすることでウェブサイトを作る分にはマーケティング担当者が自分で作成することができるくらい簡単です。

しかし、機能やデザインを一から開発し追加するとなると、HubSpot専用のプログラミング言語を使った開発が必要になります。

上記の資料の内容を理解し、準備ができる方は、HubSpotが豊富なドキュメントを日本語&英語で揃えていますので、そちらを参考にしながら開発することも可能です。

 

開発の依頼は専門の開発会社へ

HubSpotでデザインを一から作成し、モジュール開発による動的な機能を追加したい方はHubSpotの開発会社へお問い合わせください。

株式会社NADJAでは知見が豊富な海外エンジニアを含めて開発を行っております。

以下のボタンよりお気軽にお問い合わせください。

 

早速問い合わせてみる

 

 

まとめ

HubSpot CMSの特徴として、既存のテーマを使ってコンテンツを差し替えるのはとても簡単にできます。

しかし、一から動的な機能やデザインの変更を行うには、HubSpotの専用のプログラミング言語(HubL)を理解し、コードを記述し開発を行う必要があります。

HubSpot CMSの基本的な機能と開発を組み合わせることで希望通りのウェブサイトが作れるようになります。

HubSpot CMSやHubSpotの開発についてお気軽にお問い合わせください。

Similar posts

メールマガジンに登録して最新の情報をゲットしよう。