> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# HubSpot開発者ドキュメント

export const IntroCard = ({img, title, description, bullets = []}) => {
  return <div className="flex flex-col gap-6">
      <div className="w-full h-42 overflow-hidden rounded-xl">
          <img src={img} className="w-full h-full object-cover pointer-events-none" alt={title} />
        </div>
      <div className="flex flex-col gap-3">
        <h2 className="text-xl font-[2rem] text-gray-900 dark:text-gray-200 text-left">
          {title}
        </h2>
        <p className="text-gray-600 dark:text-gray-400 text-md text-left">
          {description}
        </p>
      </div>
      {bullets.length > 0 && <div className="px-3 w-fit">
          <ul className="list-disc list-inside space-y-1 text-sm text-gray-800 dark:text-gray-200 text-left">
            {bullets.map((bullet, index) => <li key={index}>{bullet}</li>)}
          </ul>
        </div>}
    </div>;
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center h-[36rem] sm:h-[30rem] sm:mt-0 md:mt-20 lg:mt-0 overflow-hidden page-header">
  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 2rem', maxWidth: '800px' }} className="mt-36 sm:mt-0">
    <div
      className="dark:text-[#f7f5ee] header-text"
      style={{
   fontWeight: '500',
   fontSize: '3.5rem',
   margin: '0 0 1rem 0',
   lineHeight: '1.1',
   fontFamily: 'HubSpot Serif'
  }}
    >
      コードで実現する生産性の進化
    </div>

    <div className="flex items-center justify-center pt-10" style={{ maxWidth: '600px', margin: '0 auto' }}>
      <button
        type="button"
        className="w-full flex items-center justify-start text-base leading-6 rounded-full py-4 px-6 text-gray-500 bg-white dark:bg-black border-2 border-[#B9CDBE] dark:border-[#B9CDBE] hover:border-gray-300 dark:hover:border-gray-500 transition-colors"
        id="home-search-entry"
        style={{
      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    }}
        onClick={openSearch}
      >
        <svg width="20" height="20" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
          <g clip-path="url(#clip0_8010_4440)">
            <path d="M3.69466 7.97223L4.35577 9.64445L6.02799 10.3056L4.35577 10.9667L3.69466 12.6389L3.03355 10.9667L1.36133 10.3056L3.03355 9.64445L3.69466 7.97223Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

            <path d="M8.75022 1.36111L9.85233 4.14789L12.6391 5.25L9.85233 6.35211L8.75022 9.13889L7.64811 6.35211L4.86133 5.25L7.64811 4.14789L8.75022 1.36111Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </g>

          <defs>
            <clipPath id="clip0_8010_4440">
              <rect width="14" height="14" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <span className="text-gray-600 dark:text-gray-300">検索または質問をする...</span>
      </button>
    </div>
  </div>
</div>

<div style={{ maxWidth:"80rem",margin:"1rem auto",padding:"0 2rem" }}>
  <div style={{ marginBottom:"4rem", textAlign: "center", paddingTop: "1rem" }}>
    <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 pb-10max-w-2xl header-subtitle" style={{ margin: "0 auto 2rem auto" }}>
      HubSpot開発者ドキュメントへようこそ。HubSpotでカスタムCRMとデータ駆動型ウェブサイト環境を構築します。以下の手順に従って作業を開始するか、作成するものに合わせてクイックスタートに直接移動してください。
    </p>

    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8" style={{ textAlign: "left" }}>
      <div className="mt-5 get-started-text">
        <Accordion title="始める" defaultOpen="true" icon="shapes">
          1. HubSpot CLIをグローバルにインストールする
          2. HubSpotアカウントをアップグレードする
          3. 作成を開始する
        </Accordion>
      </div>

      <div>
        <CodeGroup className="homepage-codegroup" style={{ textAlign: "left" }}>
          ```bash npm theme={null}
          npm install -g @hubspot/cli && hs init
          ```

          ```bash yarn theme={null}
          yarn global add @hubspot/cli && hs init
          ```

          ```bash pnpm theme={null}
          pnpm add -g @hubspot/cli && hs init
          ```

          ```bash ruby theme={null}
          gem install hubspot-cli && hs init
          ```
        </CodeGroup>

        <CodeGroup>
          ```bash Build your first project theme={null}
          hs get-started
          ```
        </CodeGroup>
      </div>
    </div>

    <div className="pt-5">
      <CardGroup cols={3} className="home-cards">
        <IntroCard
          img="https://mintlify-assets.b-cdn.net/hubspot/datain-light.svg"
          title="HubSpotへのデータの入出力"
          description="最新のAPIとデータツールを使用して、HubSpotへのデータ移行、およびHubSpotからのデータ移行が簡単に行えます。"
          href="https://developers.hubspot.com/docs/apps/developer-platform/build-apps/hubspot-cli"
          bullets={[
<a
key="import-api"
href="/api-reference/crm-imports-v3/guide"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
データのインポート/エクスポート</a>,
<a
key="custom-channels"
href="/api-reference/conversations-custom-channels-v3/guide"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
カスタムチャネル</a>,
<a
key="app-events"
href="/apps/developer-platform/add-features/app-events/overview"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
アプリイベント</a>,
<a
key="app-objects"
href="/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
アプリオブジェクト</a>
]}
        />

        <IntroCard
          title="HubSpotのデータを視覚化する"
          description="CRMカードなどのカスタムUI要素を追加して、HubSpot内のデータを表示します。"
          img="https://mintlify-assets.b-cdn.net/hubspot/visualize-light.svg"
          bullets={[
<a
key="custom-cards"
href="/apps/developer-platform/add-features/ui-extensibility/app-cards/overview"
className="text-gray-900 dark:text-white"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
onClick={(e) => e.stopPropagation()}>
カスタムカード</a>,
  <a
key="custom-quota"
href="/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
アプリホーム</a>,
<a
key="custom-quota"
href="/api-reference/crm-quotes-v3/guide"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
見積もりのカスタムテンプレート</a>,
<a
key="calling-extensions"
href="/api-reference/crm-calling-extensions-v3/guide"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
className="text-gray-900 dark:text-white"
onClick={(e) => e.stopPropagation()}>
カスタムコール拡張機能</a>
]}
        />

        <IntroCard
          title="HubSpotでのデータの操作"
          description="ビジネスに合わせて、アクションを自動化し、ワークフローをトリガーし、HubSpotロジックを拡張します。"
          img="https://mintlify-assets.b-cdn.net/hubspot/act-light.svg"
          bullets={[
<a
key="custom-workflow"
href="/api-reference/automation-actions-v4-v4/guide"
className="text-gray-900 dark:text-white"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
onClick={(e) => e.stopPropagation()}>
カスタムコーディングによるワークフロー</a>,
<a
key="action-builder"
href="/apps/developer-platform/add-features/custom-workflow-actions"
className="text-gray-900 dark:text-white"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
onClick={(e) => e.stopPropagation()}>
カスタムアクション作成ツール</a>,
<a
key="membership"
href="https://developers.hubspot.com/docs/cms/testing-staging-performance/memberships/overview"
className="text-gray-900 dark:text-white"
style={{
  fontWeight: 600,
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px',
  fontSize: '16px'
}}
onClick={(e) => e.stopPropagation()}>
制限付きのコンテンツ</a>,
<a
key="conversations-api"
href="/api-reference/conversations-conversations-inbox-&-messages-v3/guide"
className="text-gray-900 dark:text-white"
style={{
  fontWeight: 600,
  fontSize: '16px',
  textDecoration: 'underline',
  textDecorationColor: '#ff7a00',
  textUnderlineOffset: '3px'
}}
onClick={(e) => e.stopPropagation()}>
コミュニケーションAPI</a>
]}
        />
      </CardGroup>
    </div>
  </div>

  <div className="pb-20">
    <div style={{textAlign: "center", paddingTop: "1rem" }}>
      <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-5">
        関連コンテンツ
      </h2>
    </div>

    <div style={{ marginBottom:"6rem" }}>
      <CardGroup cols={3}>
        <Card title="始める" icon="rocket" href="https://developers.hubspot.com/docs/getting-started/overview">
          短時間で初めてのアプリまたはテンプレートを作成する
        </Card>

        <Card title="APIリファレンス" icon="code" href="/api-reference/overview">
          HubSpotのAPIを使用して連携する
        </Card>

        <Card title="変更ログ" icon="clock" href="https://developers.hubspot.com/changelog">
          新しい変更点とリリースを確認する
        </Card>

        <Card title="プラットフォームの概要" icon="building" href="https://developers.hubspot.com/docs/getting-started/overview">
          HubSpotの開発プラットフォームとツールについて理解を深める
        </Card>

        <Card title="HubSpotアカデミー" icon="graduation-cap" href="https://academy.hubspot.com/">
          教育コースを探す
        </Card>

        <Card title="サンプルアプリ" icon="code-branch" href="https://github.com/HubSpot/ui-extensions-examples/tree/main">
          CRMカスタマイズのコードサンプルを確認する
        </Card>
      </CardGroup>
    </div>
  </div>
</div>
