HubSpotとKinsta APIでサイト作成を自動化する方法

新規クライアントとの契約からWordPressサイトの立ち上げまでのスピードは、制作会社にとって重要な指標のひとつです。Kinstaの専用コントロールパネル「MyKinsta」を使えば、WordPressサイトの作成や管理を簡単に行えますが、多数のクライアント案件を扱う制作会社では、こうした繰り返し発生するセットアップ作業を自動化したいことがよくあります。

Kinsta APIを利用すると、このプロセスを自動化することができます。この記事では、HubSpotのお問い合わせフォームとKinsta APIをNode.js製のミドルウェアアプリ経由で連携し、WordPressサイトを自動でプロビジョニングする方法をご紹介します。フォームが送信されると、ミドルウェアがデータを受け取り、Kinsta APIを呼び出して新規WordPressサイトを自動的に作成するようにします。

制作会社がサイトのプロビジョニングを自動化するメリット

サイトのセットアップを手作業で行うと、新規クライアントのオンボーディングに遅れが生じる可能性があります。新規契約後には、サーバー環境の構築、WordPressの設定、認証情報の発行、クライアントへの連絡など、さまざまな作業が発生します。

MyKinstaを使えばこれらの作業を効率的に進められますが、各工程が担当者の対応に依存している場合、どうしても待ち時間やボトルネックが発生しがちです。

Kinstaで数百ものクライアントサイトを管理する制作会社のStraight Out Digital（SOD）は、Kinsta APIを活用してプロビジョニングや保守作業を自動化する独自ツールを構築しています。新しいサイトごとに同じセットアップ手順を繰り返す代わりに、API経由でプロセスを自動実行することで、同社は「時間のかかる作業を大幅に効率化できた」と報告しています。

HubSpotとKinsta APIを連携すれば、同様のワークフローを構築できます。クライアントが登録フォームを送信すると、HubSpotからWebhookが送信され、ミドルウェアがコンタクト情報を受け取ってKinsta APIを呼び出し、サイト作成プロセスを開始します。

これにより、リード獲得からWordPress環境の作成までを自動化でき、新規クライアントのオンボーディングに伴う手作業を大幅に削減できます。

この手順で必要になるもの

これからご紹介する手順には、以下が必要になります。

• MyKinstaアカウント（既存のサイトが1つ以上あること。APIへのアクセスはサイト作成後に利用可能になります）
• クライアントの登録情報を取得するフォームを設定したHubSpotアカウント（Webhookワークフローは一部の有料プランでのみ利用可能）
• ローカル環境にインストールされたNode.js 18以降

Kinsta APIキーは、MyKinstaで生成できます。ログイン後、「企業の設定」＞「APIキー」に移動し、「APIキーを作成」をクリックします。

有効期限を設定し、キーに名前を付け「生成」をクリックして完了です。生成したAPIキーは一度しか表示されないため、安全な場所に必ず保管してください。

また、企業IDも必要になります。これはログインした状態でMyKinstaのURLから取得するか、APIキーがアクティブになったら/sitesエンドポイントにリクエストすることで取得可能です。

両方の値をプロジェクトのルートにある.envファイルに保存します。

KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_here

Kinsta APIを使ってHubSpotとKinstaを連携する方法

SlackとKinsta APIを連携する場合と同じように、HubSpotのフォーム送信をトリガーにWebhookを実行し、Node.jsアプリでコンタクトデータを受け取ってKinsta APIを呼び出すワークフローを構築できます。これにより、WordPressサイトを作成し、サイトが利用可能になるまでAPIでステータスを確認できます。

この連携は、HubSpotの設定、ミドルウェアのセットアップ、API認証、サイト作成、運用監視の5つのステップで構築します。

1. HubSpotフォームとワークフローの設定

HubSpotのダッシュボードで「マーケティング」＞「フォーム」に移動し、新規クライアントの登録情報を取得するフォームを作成、または既存のフォームを選択します。

フォームには少なくとも、名前、メールアドレス、会社名のフィールドを追加してください。これらの情報は、後ほどKinsta APIに渡すパラメータとして使用します。

フォームの準備ができたら、HubSpotのナビゲーションメニューから「自動化」＞「ワークフロー」と進み、右上の「ワークフローを作成」をクリックします。

「ゼロから作成」を選択すると、ワークフローエディターが開きます。トリガーをクリックし、登録トリガーとして「フォーム送信」を選択します。

次に「フォーム送信」ドロップダウンメニューからフォームを選択し、設定を完了します。これで訪問者がフォームを送信すると、HubSpotは送信者の情報をワークフローに登録します。 トリガーフォームを選択します。

トリガーを設定すると、ワークフローキャンバスに新しいアクションが表示されます。「データオペレーション」＞「Webhookを送信」をクリックし、メソッドに「POST」を選択して、ひとまず仮のURLを入力します。Node.jsアプリをデプロイしたら、このURLを実際のエンドポイントURLに更新してください。

ワークフローが実行されると、HubSpotはWebhook URLにJSONペイロードを送信します。このペイロードには送信者情報のプロパティが含まれ、フォームの入力値はHubSpot内部のプロパティ名で格納されます。各フィールドの内部名は、HubSpotの「設定」＞「プロパティ」から対象のプロパティを開き、詳細パネルで確認できます。

2. ミドルウェアエンドポイントを構築する

HubSpotでは、送信者情報がフォームを送信した際にWebhookを送信できますが、Kinsta APIと直接連携することはできません。そこで、HubSpotから送信されたデータを受け取り、必要なコンタクト情報を抽出・整形してKinsta APIに渡すミドルウェアを用意します。

Express.jsは、こうしたHTTPサーバーを手軽に構築できる軽量なNode.js向けウェブフレームワークです。リクエストの受信やルーティングの設定、リクエストボディへのアクセスなどを最小限の設定で実現できます。まずは新規Node.jsプロジェクトを作成し、Express.jsをインストールします。

npm init -y
npm install express dotenv

expressはサーバーとルーティング機能を提供し、dotenvは.envファイルに定義された環境変数をprocess.envに読み込む役割を担います。これにより、APIキーや企業IDをアプリケーションから実行時に参照できるようになります。

サーバーのコードはapp.jsファイルに記述します。このファイルでは、Expressアプリケーションを初期化し、受信したリクエストボディをJSONとして解析する設定を行います。また、HubSpotから送信されるPOSTリクエストを受け取るルートを定義し、ローカルポートでサーバーを起動します。

なお、この例ではNode.js 18以降に標準搭載されているfetch APIを利用することを前提としています。

// app.js
const express = require('express');
require('dotenv').config();

const app = express();
app.use(express.json());

const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};

app.post('/new-site', async (req, res) => {

    const event = Array.isArray(req.body) ? req.body[0] : req.body;

    const displayName = event?.properties?.company;
    const adminEmail = event?.properties?.email;

    if (!displayName || !adminEmail) {
        return res.status(400).json({ message: 'Missing required fields' });
    }

    // Kinsta API call goes here
    res.status(200).json({ message: 'Received' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

app.use(express.json())は、受信したリクエストボディをJSONとして解析するようExpressに指示する設定です。これを追加しない場合、req.bodyはundefinedになります。

このルートでは、Webhookのペイロードからコンタクト情報を取得し、会社名と管理者のメールアドレスを抽出します。その後、両方の値が存在することを確認してから処理を続行します。

オプショナルチェーン演算子（?.）は、ペイロードの構造が想定と異なる場合に備えるためのものです。存在しないプロパティにアクセスしてエラーを発生させる代わりに、安全にundefinedを返します。

3. Kinsta APIで認証する

Kinsta APIはBearerトークン認証を採用しています。すべてのAPIリクエストには、AuthorizationヘッダーにAPIキーを含める必要があります。Kinsta APIはこのキーを使ってアカウントを識別し、実行可能な操作を判断します。

app.jsの先頭にあるrequire('dotenv').config()は、アプリケーションの起動時に.envファイルを読み込むための設定です。これにより、process.env.KINSTA_API_KEYから実際のAPIキーを参照できるようになります。

dotenvの設定に続いて、app.jsの先頭付近でAPIのベースURLとリクエストヘッダーを定数として定義します。

const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};

ヘッダーを定数として定義しておくことで、アプリケーション全体で一貫した設定を利用できるほか、APIキーの更新も容易になります。APIキーを変更する際は、.envファイルの値を更新してサーバーを再起動するだけで済み、コード内の該当箇所を探して修正する必要はありません。

なお、企業IDはAuthorizationヘッダーには含めません。代わりに、サイト作成時のリクエストボディ内で指定します。

4. Kinsta API経由でWordPressサイトを作成する

認証の設定が完了したら、Kinsta APIを使ってWordPressサイトを作成できます。Kinsta APIの/sitesエンドポイントは、作成するサイトの情報を含むPOSTリクエストを受け取り、サイトのプロビジョニングを開始します。APIはサイトの作成完了を待ってから応答するのではなく、処理状況を追跡するための参照情報をすぐに返します。そのため、サイト作成の進行状況は後続のAPIリクエストで確認できます。

new-siteルート内にあるプレースホルダーのコメントを、以下のコードに置き換えてください。

const response = await fetch(`${KinstaAPIUrl}/sites`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
        company: process.env.KINSTA_COMPANY_ID,
        display_name: displayName,
        region: 'us-central1',
        install_mode: 'new',
        admin_email: adminEmail,
        admin_password: process.env.WP_ADMIN_PASSWORD,
        admin_user: 'admin',
        site_title: displayName
    })
});

const data = await response.json();

必須パラメータは、company、display_name、region、install_mode、admin_email、admin_password、admin_user、site_titleです。install_modeにnewを指定すると、新規のWordPressサイトが作成されます。regionには、利用するKinstaデータセンターのリージョンIDを指定します。

WooCommerceやYoast SEOをあらかじめインストールした状態でサイトを作成したい場合は、それぞれのオプションパラメータを利用できます。リクエストボディにwoocommerce: trueまたはwordpressseo: trueを追加すると、サイト作成時に該当プラグインが自動でインストールされます。これにより、必要なプラグインを含んだ状態でサイトをすぐに利用開始できます。

リクエストが正常に受理されると、APIは200ではなく202ステータスコードを返します。これは、リクエストが受け付けられ、処理キューに追加されたことを意味しますが、サイトの作成が完了したことを示すものではありません。Kinstaでのサイト作成は非同期で実行されるため、レスポンスには完成したサイト情報ではなくoperation_idが含まれます。このoperation_idを使用して、後続のAPIリクエストでサイト作成の進行状況を確認できます。

5. オペレーションのステータスを監視する

サイト作成は非同期で実行されるため、サイトが利用可能になったかどうかを確認するには、/operations/{operation_id}エンドポイントを定期的に呼び出す必要があります。APIは呼び出しのたびに、その時点でのオペレーションステータスを返します。ステータスがcompletedに変わると、レスポンスには新しいサイトの詳細情報が含まれます。

サイト作成時のレスポンスからoperation_idを取得し、ポーリング関数に渡します。

const pollOperation = (operationId) => {
    const interval = setInterval(async () => {
        const resp = await fetch(
            `${KinstaAPIUrl}/operations/${operationId}`,
            { method: 'GET', headers }
        );
        const result = await resp.json();

        if (result.status === 'completed') {
            clearInterval(interval);
            console.log('Site ready:', result);
        }
    }, 30000);
};

この関数は30秒ごとにステータスを確認します。Kinsta APIでは、1分あたり最大120リクエストまで実行できますが、サイト作成などのリソース作成系エンドポイントには1分あたり5リクエストという別の制限があります。30秒間隔でオペレーションエンドポイントをポーリングすることで、これらの制限を十分に下回りながら、適切な頻度で進行状況を確認できます。

また、サイト作成時のレスポンスからoperation_idを取得し、pollOperation()に渡す必要があります。app.postルートの最後に以下のコードを追加してください。

const operationId = data.operation_id；
pollOperation(operationId)；

オペレーションが完了すると、レスポンスには新しく作成されたサイトの詳細情報が含まれます。ローカル環境では、ターミナルでnode app.jsを実行して動作を確認できます。アプリケーションをデプロイした後は、HubSpotのワークフローで設定した仮のWebhook URLを、実際のエンドポイントURLに置き換えてください。

HubSpotとKinstaの連携は制作会社のオンボーディング自動化に便利

この連携を構築すると、クライアントがHubSpotの登録フォームを送信した時点で、新しいWordPress環境のプロビジョニングが自動的に開始されます。ミドルウェアがコンタクト情報を受け取り、Kinsta APIに渡し、サイトの準備が完了するまでオペレーションの状態を監視します。これにより、初期セットアップ作業を自動化しながら、サイト管理は引き続きMyKinstaから行うことができます。

HubSpotからミドルウェアにアクセスできるようにするには、アプリケーションを公開エンドポイントで利用できる環境にデプロイする必要があります。Sevalla（Kinsta製品）などのプラットフォームを利用すれば、このようなNode.jsアプリケーションを簡単にホスティングできます。アプリケーションの公開後は、HubSpotのワークフローで設定したWebhook URLをデプロイ済みのエンドポイントURLに更新してください。

KinstaのWordPress専用マネージドクラウドサーバーでは、MyKinstaでAPIキーを生成することで、すべてのアカウントでKinsta APIを利用できます。