タグアーカイブ 自動化

HubSpotとKinsta APIでWordPressサイト構築を自動化する方法

クライアントとの契約が成立してからWordPressサイトが用意されるまでの時間は、ビジネスの勢いを維持するために極めて重要だ。多くの制作会社にとって、新しいプロジェクトが始まるたびに手動でホスティング環境を整え、WordPressをインストールする作業は、付加価値を生まない繰り返し作業になりがちである。

Kinsta APIを活用すれば、こうした定型業務をプログラムで自動化できる。HubSpotのフォーム送信をトリガーにして、Node.jsのミドルウェア経由でKinsta APIを呼び出せば、顧客がサインアップした瞬間にサイト構築を開始することが可能だ。

本記事では、HubSpotとKinsta APIを連携させ、サイト構築のプロビジョニング（準備）を完全に自動化する仕組みを具体的に解説する。この自動化により、制作チームは手動のセットアップ作業から解放され、よりクリエイティブな業務に集中できるようになるだろう。

なぜサイト構築の自動化が制作会社にとって不可欠なのか

手動によるサイト構築は、クライアントとの関係において最も重要な「熱量」が高い時期に遅延を招く要因となる。新しい申し込みがあるたびに、担当者がホスティング管理画面にログインし、環境を作成してWordPressの設定を行い、ログイン情報を生成してクライアントに通知するという工程が必要だからだ。

手動作業がもたらすボトルネック

管理画面での操作自体はシンプルだが、担当者が他の業務に追われていたり、営業時間外であったりすると、数時間の遅れが発生する。この小さな遅延が積み重なることで、制作会社全体の生産性が低下し、クライアントへのレスポンスも遅れてしまう。自動化は、こうした人的リソースへの依存を排除する唯一の解決策だ。

Kinsta APIを活用したワークフローの効率化

デジタルエージェンシーのStraight out Digital（Sod）は、Kinsta APIを利用して独自の内部ツールを構築し、数百におよぶクライアントサイトの構築とメンテナンスを自動化している。Kinstaの著者Carlo Daniele氏によると、同社はAPIを介してプログラマティックに処理を実行することで、時間のかかる操作を極めてシンプルなものへと変貌させたという。

HubSpotとKinsta APIを接続することで、同様の成果が得られる。クライアントがサインアップフォームを送信すると、HubSpotがWebhook（ウェブフック）を送信する。これを受け取ったミドルウェアがKinsta APIを叩き、サイト作成を開始する。リード獲得から環境構築までのハンドオフが自動で行われるため、オンボーディングの工数を大幅に削減できるのだ。

HubSpotとKinsta APIを連携させるための準備

この仕組みを実現するためには、いくつかの前提条件が必要だ。まず、Kinstaのアカウント内に既存のサイトが少なくとも1つ存在している必要がある。これにより、APIへのアクセスが有効になる。また、Webhookワークフローが利用可能なHubSpotのプレミアムプランと、Node.js 18以降がインストールされた環境も必要だ。

APIキーと会社IDの取得

まずはKinstaの管理画面（MyKinsta）でAPIキーを生成する。「企業の設定」から「APIキー」を選択し、「APIキーを作成」をクリックする。キーの名前と有効期限を設定して生成されたキーは、一度しか表示されないため、安全な場所に保管しておく必要がある。

次に、APIリクエストに不可欠な「会社ID」を確認する。これはMyKinstaにログインしている際のURLから取得できる。これらの情報は、プロジェクトのルートにある .env ファイルに保存して管理するのが一般的だ。

環境変数の設定

APIキーや会社IDをコードに直接記述するのは、セキュリティ上のリスクが高い。そのため、環境変数として管理する。以下のような形式で設定を行う。

KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_here
WP_ADMIN_PASSWORD=your_secure_password

この設定により、Node.jsアプリケーションから安全に認証情報を読み取ることができるようになる。APIキーは「Bearerトークン」として、すべてのリクエストの Authorization ヘッダーに含まれることになる。

ステップ1：HubSpotのフォームとワークフローを構築する

自動化のトリガーとなるのは、HubSpotのフォーム送信だ。まずは、新規クライアントの情報を収集するためのフォームを作成する。少なくとも「名前」「メールアドレス」「会社名」の3つのフィールドを含める必要がある。これらの値が、後にKinsta APIに渡されるパラメータとなる。

Webhookアクションの追加

フォームが完成したら、HubSpotの「自動化」メニューからワークフローを作成する。登録トリガーとして「フォーム送信」を選択し、作成したフォームを指定する。これにより、誰かがフォームを送信するたびにワークフローが起動するようになる。

次に、実行するアクションとして「Webhookを送信」を選択する。メソッドは POST に設定し、送信先のURLには後述するNode.jsアプリの公開エンドポイントを入力する。HubSpotはこのURLに対して、コンタクト情報を含むJSONペイロードを送信する仕組みだ。

ステップ2：Node.jsによるミドルウェアの実装

HubSpotはKinsta APIと直接通信することはできない。そのため、両者の橋渡し役となる「ミドルウェア」が必要になる。ここでは軽量なWebフレームワークであるExpress.jsを使用して、HTTPサーバーを構築する。

Express.jsでのサーバー構築

Node.jsプロジェクトを初期化し、必要なパッケージをインストールする。dotenv は環境変数の読み込みに、express はサーバー構築に使用する。Node.js 18以降であれば、標準の fetch 関数が使えるため、HTTPクライアントを別途導入する必要はない。

// 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) => {
    // HubSpotからのデータを受け取る処理
    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: '必須項目が不足しています' });
    }

    // Kinsta APIの呼び出しへ続く
});

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

Kinsta APIへのリクエスト送信

ミドルウェアがHubSpotからデータを受け取ったら、次にKinsta APIの /sites エンドポイントに対して POST リクエストを送信する。このリクエストには、サイト名、リージョン、管理者メールアドレスなどの情報を含める。

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();

ここで重要なのは、Kinsta APIはサイト作成を「非同期」で行うという点だ。リクエストが成功すると 200 ではなく 202 Accepted ステータスが返される。レスポンスには operation_id が含まれており、これを使って処理の進捗を追跡することになる。

ステップ3：非同期処理のステータス監視

サイト作成のリクエストを送っただけでは、いつサイトが完成したのかがわからない。そのため、定期的にAPIに問い合わせを行う「ポーリング」という手法を用いる。Kinsta APIの /operations/{operation_id} エンドポイントを呼び出すことで、現在のステータスを確認できる。

ポーリングによる進捗確認

以下のような関数を作成し、30秒間隔でステータスを確認する。ステータスが completed になれば、サイトの構築は完了だ。Kinsta APIには「リソース作成エンドポイントは1分間に5回まで」という制限があるため、30秒間隔のポーリングは制限内で安全に動作する設定といえる。

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('サイトの準備が完了しました：', result);
        }
    }, 30000);
};

この仕組みを導入することで、ミドルウェアはサイト作成の成功を見届けることができる。完了後にSlackへ通知を送ったり、クライアントに自動で「準備完了」のメールを送信したりといった、さらなる自動化の拡張も容易になる。

独自の分析：自動化がビジネスに与える付加価値

今回の自動化連携は、単なる「時短」以上の価値を制作会社にもたらす。筆者の分析によれば、最も大きなメリットは「Time to Value（価値提供までの時間）」の短縮だ。クライアントがサービスに申し込んだ直後に、すでに自分のサイトが立ち上がっているという体験は、プロフェッショナルな印象を強く植え付ける。

また、この仕組みは「人為的ミスの削減」にも寄与する。手動設定では、管理者パスワードの控え忘れや、リージョンの選択ミス、プラグインの入れ忘れなどが起こり得る。API経由であれば、WooCommerceやYoast SEOなどの必須プラグインを事前に指定してインストールすることも可能だ。これにより、すべてのプロジェクトで一定の品質が担保された環境を、瞬時に提供できる。

さらに、このミドルウェアを拡張すれば、ステージング環境の自動作成や、ドメインの自動割り当てまで一気通貫で行えるようになる。Kinsta APIを「自社のサービスの一部」として組み込むことで、競合他社にはない圧倒的なスピード感を武器にできるはずだ。

この記事のポイント

• Kinsta APIを活用すれば、WordPressサイトの作成、管理、監視をプログラムで制御できる。
• HubSpotのワークフローとWebhookを組み合わせることで、顧客の申し込みを直接サイト構築に繋げられる。
• Node.jsのミドルウェアは、HubSpotとKinsta APIの間でデータを変換し、認証を管理する重要な役割を果たす。
• サイト作成は非同期処理のため、operation_idを用いたポーリングによって完了を確認する実装が必要だ。
• 自動化により、制作会社は手動のセットアップ工数を削減し、クライアントに迅速な価値提供が可能になる。

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp