HubSpotはウェブサイトを作るための素晴らしいツールです。開発者は「モジュール」と呼ばれるカスタムパーツを作ることができます。マーケティングチームは、これらをドラッグ＆ドロップするだけで簡単にウェブページを作ることができます。
しかし、このようなモジュールをたくさん作るのはとても時間がかかります。開発者は何度も同じようなコードを書かなければならないため、とても退屈な作業になることがあります。長い設定ファイルを書き、HTMLを作成し、すべてのデバイスで正しく表示されるか確認しなければなりません。
現在、多くの開発者がChatGPTやGitHub CopilotなどのAIツールを使って、より早く作業を進めています。AIは完璧ではありません。すべてを代わりにやってくれるわけではありません。しかし、賢く使えば、退屈な作業時間を何時間も節約できます。
このガイドでは、HubSpotの開発者がAIを使ってモジュールをより早く作りながら、クリーンで使いやすいコードを保つ方法を説明します。
なぜHubSpotのモジュール作成にはそんなに時間がかかるのか？
HubSpotは非常に強力ですが、開発者は各モジュールに対して手作業で多くの設定を行わなければなりません。
1. fields.jsonファイルの作成
すべてのモジュールには fields.json というファイルが必要です。このファイルは、マーケティングチームにどのボタンやテキストボックスを表示するかをHubSpotに伝えます。シンプルなモジュールでも、以下のコードを入力する必要があります：
- テキストボックス (Text boxes)
- 画像アップローダー (Image uploaders)
- カラーピッカー (Color pickers)
- 繰り返しリスト (Repeating lists)
何十個ものモジュールに対してこのコードを入力するのは非常に時間がかかり、入力ミスもしやすくなります。
2. コードとロジックの作成
HubSpotはHubLと呼ばれるコーディング言語を使用します。開発者はHubLと通常のHTMLを混ぜてウェブページを機能させます。毎日同じような基本的なループや「もし〜なら（if）」の条件文を書かなければなりません。このような単純作業を繰り返すことで、より大きな問題を解決するための時間が奪われてしまいます。
3. 見た目を綺麗にする
基本的なコードが完成した後も、開発者はモジュールを綺麗に見せるためにCSSを書く必要があります。スマートフォンでテストしたり、目の不自由な人がスクリーンリーダーで簡単に使えるか確認したりしなければなりません。これらのステップが積み重なっていきます。
AIが開発者の作業を早くする方法
AIは、簡単な指示だけで完璧なHubSpotモジュールを自動で作ることはできません。しかし、退屈で繰り返しの多い入力作業を代わりに行ってくれる素晴らしいアシスタントになります。
設定ファイルの自動生成
AIの最も良い使い方の1つは、fields.json ファイルを書かせることです。必要なものを簡単な言葉でAIに伝えるだけです。例えば、「タイトル、写真、ボタンがある料金カード用の fields.json ファイルを作って」と言うことができます。
AIはすぐに最初のコードを打ち込んでくれます。正しくできているか確認する必要はありますが、大変な入力作業をすべて自分で行う手間が省けます。
基本的なコードの作成
AIは基本的なHubLコードに関してはかなり賢いです。毎日使うような以下のようなコードパターンを素早く書いてくれます：
- 画像を正しく表示するコード。
- 項目のリストを表示するループ。
- ユーザーが空のままにした場合にボックスを隠すルール。
基本的なレイアウトの生成
多くのウェブサイトは、機能のグリッド（表）や顧客レビューのリストなど、同じようなレイアウトを使用しています。真っ白なページから始める代わりに、AIに基本的なHTMLを書くように頼むことができます。その後、あなたが手を加えて特別なHubSpotコードを追加して機能させればよいのです。
答えをすぐに見つける
HubSpotにはたくさんのルールがあります。長い説明書を探し回る代わりに、開発者はAIに質問するだけで済みます。AIは簡単なまとめと、必要なコードの例を教えてくれます。
AIがまだ間違えるところ
AIを完全に信じてはいけません。そうすると、ウェブサイトが壊れてしまう可能性があります。AIがどこで混乱するのかを知っておく必要があります。
ルールをでっち上げる
時々、AIは勝手にルールを作ってしまいます。HubSpotがサポートしていないフィールドを使おうとしたり、プロパティのスペルを間違えたり、必要なIDを忘れたりすることがあります。開発者は常に、HubSpotの本当のルールとAIの作業を照らし合わせて確認する必要があります。
複雑なデータの処理
モジュールがデータベース（HubDBなど）から複雑なデータを引き出す必要がある場合、AIはよく混乱します。複雑なクエリやフィルターを書くのが苦手です。難しい処理については、人間の開発者の方がまだはるかに優れています。
実際のユーザー向けではない
AIはあなたのウェブサイト全体がどのように見えるかを知りません。エディター上でマーケティングチームにとって分かりにくいコードを書いてしまうかもしれません。モジュールを実際のウェブサイトに公開する前に、人間が必ず確認し、使いやすいかどうかをチェックする必要があります。
AIの最も良い使い方
賢い開発者はAIを便利なアシスタントとして使います。本当にうまく機能する、簡単でステップバイステップの作業手順を紹介します：
- 計画する： モジュールが何をする必要があるか、どんなフィールドが必要かを決めます。
- AIに基本を打ち込ませる： AIに基本的な
fields.json ファイルと最初のHTMLコードを書かせます。
- 手作業で間違いを直す： AIのコードを確認します。エラーを直し、HubSpotのデータを正しく繋ぎます。
- 完璧にする： スマートフォンやパソコンで綺麗に見えるように、独自のスタイルを追加します。
- テストする： HubSpotでモジュールを実際に使ってみて、誰にとっても使いやすいか確認します。
最後に
AIがHubSpot開発者の仕事を奪うことはありません。しかし、とても便利なツールです。退屈な入力作業や基本的な設定をAIに任せることで、開発者は毎週何時間もの時間を節約できます。
秘密は、AIが得意なことを理解し、自分がいつ介入して本当の仕事をすべきかを正確に知ることです。
HubSpotのモジュールをゼロから作るのは時間がかかります。Rapidを使えば、UIのスクリーンショットをアップロードするだけで、完全に本番環境ですぐに使えるHubSpotモジュール（fields.json、HubLバインディング、適切な構造付き）を60秒以内に作成できます。無料で試す →
