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

> 高度なユーザーインターフェイスを備えた Web アプリやモバイルアプリをすばやく構築し、複雑なタスクを自動化して、AI をインテグレーションできます。すべてをデータで支援します。

# Retool を ClickHouse に接続する

export const PartnerBadge = () => {
  return <div className="PartnerBadge">
            <div className="PartnerBadgeIcon">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="12.5 9.5 10 12 6 11 2.5 8.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                    <polyline points="4.54 4.41 8 3.5 11.46 4.41" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                    <path d="M2.15,3.78 L0.55,6.95 A0.5,0.5 0,0,0 0.77,7.62 L2.5,8.5 L4.54,4.41 L2.82,3.55 A0.5,0.5 0,0,0 2.15,3.78 Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                    <path d="M13.5,8.5 L15.23,7.62 A0.5,0.5 0,0,0 15.45,6.95 L13.85,3.78 A0.5,0.5 0,0,0 13.18,3.55 L11.46,4.41 Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                    <path d="M11.5,4.5 L9,4.5 L6.15,7.27 A0.5,0.5 0,0,0 6.24,8.05 C7.33,8.74 8.81,8.72 10,7.5 L12.5,9.5 L13.5,8.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                    <polyline points="7.75 13.5 5.15 12.85 3.5 11.67" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" />
                </svg>
            </div>
            パートナーインテグレーション
        </div>;
};

export const Image = ({img, alt, size = "lg", background}) => {
  const normalizedSize = ["sm", "md", "lg"].includes(size) ? size : "lg";
  const backgroundColor = background === "white" ? "white" : background === "black" ? "rgb(31 31 28)" : undefined;
  return <div className={`ch-image-${normalizedSize}`}>
      <Frame>
        <img src={img} alt={alt} style={{
    backgroundColor
  }} />
      </Frame>
    </div>;
};

<PartnerBadge />

<Steps>
  <Step title="接続の詳細を収集する" id="1-gather-your-connection-details">
    HTTP(S) で ClickHouse に接続するには、次の情報が必要です。

    | Parameter(s) | Description |
    | - | - |
    | `HOST` and `PORT` | 通常、TLS を使用する場合のポートは 8443、TLS を使用しない場合は 8123 です。 |
    | `DATABASE NAME` | デフォルトでは `default` という名前のデータベースがあります。接続先のデータベース名を使用してください。 |
    | `USERNAME` and `PASSWORD` | デフォルトのユーザー名は `default` です。用途に応じたユーザー名を使用してください。 |

    ClickHouse Cloud サービスの詳細は、ClickHouse Cloud コンソールで確認できます。
    サービスを選択し、**Connect** をクリックします。

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/EDr8ydtGBgFPOQea/images/_snippets/cloud-connect-button.webp?fit=max&auto=format&n=EDr8ydtGBgFPOQea&q=85&s=97d6a020a443f1b365b017488b39d0c8" alt="ClickHouse Cloud サービスの接続ボタン" width="998" height="932" data-path="images/_snippets/cloud-connect-button.webp" />
      </Frame>
    </div>

    **HTTPS** を選択します。接続情報は `curl` コマンドの例として表示されます。

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/EDr8ydtGBgFPOQea/images/_snippets/connection-details-https.webp?fit=max&auto=format&n=EDr8ydtGBgFPOQea&q=85&s=80369fc90cd1ac3108fe455f2426c19a" alt="ClickHouse Cloud HTTPS 接続情報" width="1320" height="1184" data-path="images/_snippets/connection-details-https.webp" />
      </Frame>
    </div>

    セルフマネージド ClickHouse を使用している場合、接続情報は ClickHouse 管理者によって設定されます。
  </Step>

  <Step title="ClickHouse リソースを作成する" id="2-create-a-clickhouse-resource">
    Retool アカウントにログインし、*Resources* タブに移動します。次に、「Create New」->「Resource」を選択します。

    <Image img="https://mintcdn.com/private-7c7dfe99/6s0zAeps_NYZmK2e/images/integrations/tools/data-integration/retool/retool_01.webp?fit=max&auto=format&n=6s0zAeps_NYZmK2e&q=85&s=ed34ddfe4447cad699a936e3a36c93c0" size="lg" border alt="新しいリソースの作成" width="1843" height="908" data-path="images/integrations/tools/data-integration/retool/retool_01.webp" />

    <br />

    使用可能なコネクタの一覧から「JDBC」を選択します。

    <Image img="https://mintcdn.com/private-7c7dfe99/6s0zAeps_NYZmK2e/images/integrations/tools/data-integration/retool/retool_02.webp?fit=max&auto=format&n=6s0zAeps_NYZmK2e&q=85&s=6097acbba8929453d7331456edcea140" size="lg" border alt="JDBC コネクタの選択" width="1478" height="490" data-path="images/integrations/tools/data-integration/retool/retool_02.webp" />

    <br />

    セットアップウィザードで、「Driver name」に `com.clickhouse.jdbc.ClickHouseDriver` が選択されていることを確認します。

    <Image img="https://mintcdn.com/private-7c7dfe99/6s0zAeps_NYZmK2e/images/integrations/tools/data-integration/retool/retool_03.webp?fit=max&auto=format&n=6s0zAeps_NYZmK2e&q=85&s=2337f7bac3d54563a89056b2178c268c" size="lg" border alt="適切なドライバーの選択" width="1475" height="1011" data-path="images/integrations/tools/data-integration/retool/retool_03.webp" />

    <br />

    次の形式で ClickHouse の認証情報を入力します。`jdbc:clickhouse://HOST:PORT/DATABASE?user=USERNAME&password=PASSWORD`
    インスタンスで SSL が必要な場合、または ClickHouse Cloud を使用している場合は、接続文字列に `&ssl=true` を追加して、`jdbc:clickhouse://HOST:PORT/DATABASE?user=USERNAME&password=PASSWORD&ssl=true` のようにします。

    <Image img="https://mintcdn.com/private-7c7dfe99/6s0zAeps_NYZmK2e/images/integrations/tools/data-integration/retool/retool_04.webp?fit=max&auto=format&n=6s0zAeps_NYZmK2e&q=85&s=152fd831d32a0c47bbaf8a2432cb4e54" size="lg" border alt="認証情報の指定" width="1475" height="923" data-path="images/integrations/tools/data-integration/retool/retool_04.webp" />

    <br />

    その後、接続をテストします。

    <Image img="https://mintcdn.com/private-7c7dfe99/6s0zAeps_NYZmK2e/images/integrations/tools/data-integration/retool/retool_05.webp?fit=max&auto=format&n=6s0zAeps_NYZmK2e&q=85&s=7be77a552d567b407c135fd4ee869dcf" size="lg" border alt="接続のテスト" width="1475" height="1008" data-path="images/integrations/tools/data-integration/retool/retool_05.webp" />

    <br />

    これで、ClickHouse リソースを使用してアプリの操作を進められるようになります。
  </Step>
</Steps>
