>_tech-draft
Vercelのアイコン
Vercel
動画公開日
タイトル

▲ Community Session: How HubSpot uses Vercel

再生時間

32分 31秒

HubSpotとVercelで連携！開発者が知るべき統合の全貌と実践例

Vercelプラットフォーム(21)API Integration(11)Authentication(5)Development Workflow(32)Developer Tools Integration(3)Web開発(37)

ポイント

  • •HubSpot開発者向けに、HubSpotとVercelを連携させることでビジネスアプリケーションの可能性が広がることを紹介します。
  • •HubSpotアプリのフロントエンドとVercelのバックエンドをHubSpot.fetchで連携させ、「Bring Your Own Backend」を実現する仕組みを解説。
  • •これによりHubSpotのCRM機能とVercelの柔軟なホスティングを組み合わせ、拡張性の高いカスタムアプリ開発の知見が得られます。

HubSpotとVercelで連携！開発者が知るべき統合の全貌と実践例開発者の皆様、こんにちは！

この記事では、HubSpotの強力な開発プラットフォームと、Vercelの高速なホスティング・バックエンドサービスを組み合わせることで、どのような可能性が広がるのかを詳しくご紹介します。特に、HubSpotのDevRelチームがVercelをどのように活用しているかの具体例を交えながら解説します。

はじめに: HubSpotとVercelの強力な連携を探る

Vercelのコミュニティライブストリームにて、HubSpotのDevRel（Developer Relations）チームより、HubSpotとVercelの連携に関する貴重な情報が共有されました。本記事では、このライブストリームの内容に基づき、以下の点について掘り下げていきます。

  • HubSpotとは何か？
  • HubSpot DevRelチームの役割
  • HubSpotとVercelを連携する方法
  • HubSpot DevRelチームがVercelを利用しているプロジェクトの具体例

もしHubSpotを使った経験がある方も、これから使い始める方も、この連携がもたらすメリットについて理解を深めていただけるでしょう。

HubSpotとは？ビジネスを加速するスマートCRM

まず、HubSpotについて基本的な部分から見ていきましょう。HubSpotは、ビジネス向けのスマートなCRM（Customer Relationship Management：顧客関係管理）プラットフォームです。マーケティング、セールス、サービスに関する幅広いソフトウェアスイートを提供し、これらのツールを統合することで、顧客との関係構築とビジネス成長を支援します。

統合開発プラットフォーム

HubSpotの中核にあるのは、各種連携を構築するための統合開発プラットフォームです。このプラットフォーム上で開発者が活躍できるよう支援するのが、私たちDevRelチームの主な役割です。

  • プロジェクト管理: 開発者が作成するすべての作業は、HubSpotプロジェクト内で管理されます。
  • アプリケーションの種類: 開発プラットフォームでは、主に以下の2種類のアプリケーションを構築できます。
    • 内部静的アプリケーション: HubSpotアカウント内で使用されるアプリケーション。
    • 外部OAuthアプリケーション: 外部のサービスと連携し、OAuth（Open Authorization：異なるサービス間でユーザー認証情報を共有するための標準的なプロトコル）フローを通じてユーザー認証を行うアプリケーションです。このタイプのアプリは、HubSpotのマーケットプレイスに公開し、HubSpotユーザーがダウンロードして利用できます。

具体的な利用例

例えば、もしVercelが自社のサービスとHubSpotを連携させたい場合、HubSpotマーケットプレイスにアプリケーションを公開することができます。これにより、HubSpotユーザーはHubSpotアカウント内でVercelのメトリクスを確認できるようになります。これは、両プラットフォーム間のデータ共有と可視性を大幅に向上させるものです。

開発者向け機能

HubSpotは開発者向けに、専用の開発概要ページを提供しています。ここから、進行中のプロジェクトをすべて確認でき、API利用状況などのモニタリングツールも利用可能です。これにより、開発者は自身の作業に集中し、効率的にプロジェクトを進めることができます。

HubSpot DevRelチームの役割とコミュニティへの貢献

HubSpotのDevRelチームは、開発者やマネージャーからなる学際的なグループです。私たちのミッションは、HubSpotのエコシステムにおいて開発者が成功を収めるのを支援することです。具体的な活動は多岐にわたります。

  • ソリューション構築: 開発者が直面する課題を解決するソリューションを構築します。
  • ベストプラクティスの共有: HubSpotプラットフォームを活用するための最良の方法やヒントを提供します。
  • 連携機能の作成: 他のサービスとの連携を容易にする統合機能を作成します。
  • イベントの開催: 今回のようなライブイベントや、自社チャンネルでのイベントを開催します。
  • フィードバックの収集: 外部の開発者からのフィードバックを収集し、新機能の構築やローンチに際して製品改善に役立てます。

私たちは、以下の4つの主要なカテゴリで開発者を支援しています。

1. 学習とリソース

開発者がHubSpotの知識を深めるための多様なリソースを提供します。

  • 開発者向けドキュメント: 詳細なAPIリファレンスやガイド。
  • ブログ: 技術的な知見や最新情報を発信。
  • YouTubeチャンネル: チュートリアル動画や解説コンテンツ。
  • 各種チュートリアル: GitHubなど、様々なプラットフォームで実践的な学習資料を提供。

2. コミュニティとつながり

開発者同士、またはHubSpotチームとの交流の場を提供します。

  • 開発者向けSlack: 質問や情報交換ができるコミュニティチャット。
  • フォーラム: 開発者が質問を投稿し、回答を得られる掲示板形式のサポート。
  • 対面イベント: 年間を通じて、オフラインでの交流イベントも開催。

3. 構築と開発ツール

開発者が高品質なアプリケーションを構築できるよう支援するツールを提供します。

  • アプリ品質評価 (Ecosystem Quality Team): マーケットプレイスに掲載されるアプリケーションがHubSpotの品質基準を満たしているかを確認するチームです。
  • サンプルアプリ: 開発の参考にできる具体的なアプリケーション例を提供。
  • Dev MCP (Marketplace Certified Partner): 新しく導入されたプログラムで、開発者がHubSpotのエンジニアと密接に連携し、優れた開発者向け製品を作ることを支援します。

4. ショーケースと成長

優れた開発プログラムを世に紹介し、その成長を支援します。

  • ケーススタディ: HubSpotを効果的に利用している開発者プログラムを取り上げ、紹介します。
  • マーケットプレイス認証: マーケットプレイスにアプリを公開する際に認証を受けることで、品質保証のマークが与えられ、信頼性が向上します。
  • GTM (Go-To-Market) 調整: 大規模なローンチの際、開発者向けに最適なマーケティング資料や戦略を策定するのを支援します。

Vercelをバックエンドとして活用: HubSpotアプリの可能性を広げる

HubSpot DevRelチームの活動の中でも特に注目すべきは、Vercelをバックエンドサービスとして活用する事例です。これは「Bring Your Own Backend（独自のバックエンドを持ち込む）」というコンセプトの主要なユースケースの一つです。

「Bring Your Own Backend」の概念

この連携モデルでは、HubSpotアプリがフロントエンドとして機能し、Vercelがバックエンドの役割を担います。具体的には、次のようになります。

  • HubSpotアプリ (フロントエンド): Reactで構築されたUIコンポーネントを含み、HubSpotアカウント内でユーザーインターフェースをレンダリングします。
  • Vercel (バックエンド): アプリケーションのビジネスロジックやデータ処理のためのコードをホストします。

連携の仕組み

HubSpotアプリからVercelバックエンドを呼び出す際、HubSpot.fetchという機能を使用します。このHubSpot.fetchを使って、開発者が作成したVercelのAPIエンドポイントにリクエストを送ります。

  1. HubSpot.fetchの呼び出し: HubSpotアプリのフロントエンドから、Vercel上にデプロイされたAPIエンドポイントに対してHTTPリクエストを送信します。
  2. データ処理: Vercelのバックエンドコードは、受信したリクエストを処理し、必要なデータの操作や計算を行います。
  3. レスポンスの返却: 処理結果をHubSpotアプリのフロントエンドに返します。フロントエンドはこのデータを受け取り、ユーザーインターフェースに反映させます。

この仕組みにより、HubSpotの強力なフロントエンドとVercelの柔軟でスケーラブルなバックエンドをシームレスに連携させることが可能になります。

実践例: LLMs.txtファイルジェネレーター

HubSpot DevRelチームが実際に構築した事例として、「LLMs.txtファイルジェネレーター」というHubSpotアプリがあります。これはVercelをバックエンドとして活用した典型的な例です。

ツールの概要

このLLMs.txtファイルジェネレーターは、以下の機能を提供します。

  • 入力: ウェブページまたはサイトマップのURLを受け取ります。
  • 処理: 指定されたURLのデータを解析し、LLMs.txtファイルを生成します。
  • LLMs.txtファイルとは？: AI検索クローラー（Large Language Modelsクローラー）向けに設計されたファイルです。通常のHTMLに含まれる余分な情報を排除し、情報をMarkdown形式で提供することで、AIがウェブコンテンツを迅速かつ効率的に読み取れるようにします。

技術的な仕組み

このアプリケーションでは、以下のようにHubSpotとVercelが連携しています。

  1. Vercel APIエンドポイントの呼び出し: HubSpotアプリのフロントエンドから、HubSpot.fetchを使用してVercel上にデプロイされたAPIエンドポイントを呼び出します。この呼び出しは、ウェブページやサイトマップのURLをVercelバックエンドに送信します。
  2. ファイル生成: Vercelバックエンドは、受け取ったURLからデータを取得し、それを解析してLLMs.txtファイルを生成します。
  3. HubSpotへのファイルアップロード: 生成されたLLMs.txtファイルは、HubSpot Files APIを通じてHubSpotアカウントにアップロードされます。

これにより、HubSpotユーザーは、複雑なバックエンド処理を意識することなく、HubSpotのインターフェースから簡単にLLMs.txtファイルを生成し、管理できるようになります。これは、Vercelが提供するAPIエンドポイントの柔軟性とHubSpotのプラットフォーム機能が融合した強力なソリューションと言えるでしょう。

まとめ: HubSpotとVercelで未来のアプリケーションを構築

HubSpotの統合開発プラットフォームとVercelを組み合わせることで、開発者は堅牢でスケーラブルなアプリケーションを効率的に構築できます。特に、「Bring Your Own Backend」のコンセプトは、HubSpotアプリの機能を無限に拡張する可能性を秘めています。

HubSpot DevRelチームが示すように、両プラットフォームを連携させることで、開発者はより柔軟に、そして迅速にビジネス価値の高いソリューションを提供できるようになります。この強力な組み合わせを活用し、ぜひ未来のアプリケーション開発に挑戦してみてください。

参考動画

https://www.youtube.com/watch?v=-2_wUtNl9j8