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

# Claude CodeにData Appを接続する

> Data Hubのカタログで固定のData Appを選び、生成されたインストールプロンプトでClaude CodeにMCPサーバーとして追加し、実際の呼び出しを検証する手順です。

このチュートリアルは、**使うData Appがすでに決まっている**方向けです。まずカタログでアプリを選んで試し、そのアプリのインストールプロンプトをコピーして、Claude Codeに固定のMCPサーバーとして追加します。

<Note>
  このページは「先にアプリを選び、次に接続する」パターンです。どのアプリを選ぶかまだ決まっておらず、先にMCPを接続してエージェントに検索させたい場合は、<a href="/docs/jp/datahub/quick-start/agent-connection/general" target="_blank" rel="noopener noreferrer">汎用接続：エージェント内でアプリを選ぶ</a>を使ってください。
</Note>

<Note>
  Claude CodeとCodexは同じData Hub MCPの機能を使います。違いは、各クライアントがMCP設定をどこに保存し、サーバーの状態をどう表示するかだけです。Data App自体は変わりません。
</Note>

## 完了後にできること

このチュートリアルを終えると、Claude Codeで直接データの要件を説明し、Data HubのData Appを呼び出して構造化データを取得できます。このページでは、単一のData Appと複数のData Appの接続方法の両方を説明します。

## 始める前に

次のものを用意してください。

* ログインできるOctoparseアカウント。
* インストールしてログイン済みのClaude Code。
* 明確で小規模なテスト目標（対象プラットフォーム、キーワード、件数など）。

<Warning>
  APIキーはアカウントの認証情報です。実際のキーをプロジェクトファイル、コードリポジトリ、公開スクリーンショット、グループチャットに絶対に含めないでください。Claude Codeが明示的に認証情報を求めた時だけ提供します。
</Warning>

## ステップ1：Data Appを選んで試す

まずブラウザでアプリの入出力を確認してから、Claude Codeを接続します。後で問題が起きた時、パラメータが誤っているのかサーバーの設定が不適切なのかをすぐに判断できます。

<Steps>
  <Step title="Octoparse Data Hubを開いてログインする">
    <a href="https://www.octoparse.jp/data-hub" target="_blank" rel="noopener noreferrer">Octoparse Data Hub</a>にアクセスし、右上のアカウント入口からログインします。
  </Step>

  <Step title="目的のData Appを選ぶ">
    検索やカテゴリで目的のアプリを探します。詳細ページで機能説明、必須パラメータ、返却フィールド、価格をよく読み、タスクに適しているか確認します。
  </Step>

  <Step title="オンラインで1回実行する">
    **今すぐ試す**をクリックし、ページの案内に従ってパラメータを入力します。初回は少量のデータだけを要求します。実行完了後、ステータス、返却件数、主要フィールドを確認します。
  </Step>
</Steps>

ブラウザでの実行で結果が得られない場合は、先にパラメータを調整するか、別のData Appに変更してください。ブラウザでの実行が成功してから、Claude Codeの接続に進みます。

## ステップ2：Claude Codeのインストールプロンプトをコピーする

Data Appの詳細ページで**連携**を開き、MCPを選んで**Copy install prompt**をクリックします。**Copy MCP URL**はサーバーアドレスだけを取得するもので、`claude mcp add`を手動で実行したい場合に使います。詳細ページのサイドバーにあるMCPリンクからも素早くアクセスできます。

<Tip>
  初回の接続では、Data Appを1つだけ選んでください。ツールが少ないほどClaude Codeが正しい機能を選びやすくなり、トラブルシューティングも簡単になります。
</Tip>

## ステップ3：OctoparseのAPIキーを作成する

<Steps>
  <Step title="APIキーページを開く">
    <a href="https://www.octoparse.jp/console/account-center/api-keys" target="_blank" rel="noopener noreferrer">Octoparseアカウントセンター</a>に移動し、新しいAPIキーを作成します。
  </Step>

  <Step title="APIキーを安全に保存する">
    キーの全文は通常、作成時に一度しか表示されません。信頼できるパスワードマネージャーに一時的に保存してください。プロジェクトディレクトリや共有ドキュメントには保存しないでください。
  </Step>
</Steps>

Data Appの詳細ページで生成される特定アプリ設定はAPIキーを使います。設定内の`Authorization: Bearer <API_KEY>`は、APIキーをヘッダーで渡す形式です。汎用接続はOAuthにも対応しています。2つのチュートリアルの設定スニペットを混在させないでください。

## ステップ4：Claude Codeにサーバーを追加する

<Steps>
  <Step title="インストールプロンプトをClaude Codeに送る">
    新しいClaude Codeセッションを開始し、コピーしたインストールプロンプト全文を貼り付けて送信します。Claude Codeはサーバーアドレスと設定要件を読み取り、必要に応じてAPIキーを求めます。
  </Step>

  <Step title="求められたらAPIキーを提供する">
    Claude Codeが明示的に求めた時だけキーを提供します。サーバーアドレスがアプリの現在の**連携**セクションのものであることを確認し、出所不明のアドレスは使わないでください。
  </Step>

  <Step title="ユーザースコープの設定を確認する">
    Claude Codeは通常、`claude mcp add`でユーザースコープにサーバー（デフォルト名は`octoparse_datahub`）を追加するため、すべてのプロジェクトで利用できます。代わりにプロジェクトスコープの`.mcp.json`ファイルを提案された場合は、キーがプロジェクトと一緒にコミットされないよう、ユーザースコープを求めてください。
  </Step>

  <Step title="サーバーを再読み込みする">
    ツールがすぐに表示されない場合は、Claude Codeで`/mcp`を実行してサーバーの状態を確認するか、新しいセッションを開始します。それでもサーバーがない場合は、Claude Codeを閉じて開き直します。
  </Step>
</Steps>

## ステップ5：最初の実際の呼び出しを行う

プラットフォーム、絞り込み条件、件数を含めて、明確で具体的な自然言語で要求を伝えます。例：

```text theme={null} theme={null}
先ほど接続したData Hubツールを使って、次の3社のリードに業種、従業員数、本社所在地を補完してください：Sansan、freee、SmartHR。
```

<Steps>
  <Step title="Claude Codeがサーバーを呼び出したことを確認する">
    会話内のツール呼び出しを確認します。Data Hubのツール呼び出しが表示されて初めて、Claude Codeが実際にData Appにアクセスしたと言えます。
  </Step>

  <Step title="データ結果を確認する">
    件数、主要フィールド、内容が期待どおりか確認します。説明文だけが返ってきた場合は、「先ほど接続したData Hubツールを呼び出してください」と明示的に指示します。
  </Step>
</Steps>

## オプション：Claude Codeに複数のData Appを使わせる

1つのワークフローで本当に複数の機能が必要な場合は、複数のData Appを1つのMCP接続にまとめるカスタムツールセットを作成します。

<Steps>
  <Step title="オープンプラットフォームのMCP接続を開く">
    Data Hubからオープンプラットフォームを開き、**MCP接続**をクリックして、カスタムツールセットのセクションを開きます。
  </Step>

  <Step title="必要なData Appを追加する">
    現在のフローに本当に必要なアプリだけを選びます。ツールが多すぎると、Claude Codeが誤ったツールを選ぶ可能性が高まります。
  </Step>

  <Step title="複数アプリのインストールプロンプトをコピーする">
    ツールセットを保存し、ページが現在生成しているインストールプロンプト全文をコピーします。
  </Step>

  <Step title="Claude Codeに送って再読み込みする">
    複数アプリのインストールプロンプトをClaude Codeに送り、案内に従ってサーバーを更新して再読み込みします。その後、まずClaude Codeに利用可能な機能を一覧させ、選んだアプリを1つずつテストします。
  </Step>
</Steps>

## よくある質問

<AccordionGroup>
  <Accordion title="サーバーは追加されたが、ツールが表示されない">
    `/mcp`を実行してサーバーが接続されているか確認し、新しいセッションを開始するかClaude Codeを再起動します。それでも表示されない場合は、`claude mcp list`を実行し、サーバーアドレスとヘッダーをインストールプロンプトと比較してください。
  </Accordion>

  <Accordion title="未認証またはAPIキーが無効と表示される">
    キーに欠けた文字、スペース、改行がなく、まだ有効であることを確認します。このページでは特定アプリページで生成されたAPIキー設定を使います。OAuthが必要な場合は、汎用接続ページで生成された設定を使ってください。
  </Accordion>

  <Accordion title="Claude Codeがツールを呼び出さず、テキストで回答した">
    要求に「先ほど接続したData Hubツールを使ってください」と明記し、アプリが対応するパラメータを指定します。まずClaude Codeに利用可能なツールを一覧させ、サーバーが読み込まれているか確認する方法もあります。
  </Accordion>

  <Accordion title="ブラウザでは結果が出るが、Claude Codeの呼び出しは失敗する">
    ブラウザで成功したパラメータと比較し、サーバーアドレス、APIキー、パラメータ形式を1つずつ確認し、`/mcp`に表示されるエラーを読みます。初回の検証ではリクエスト範囲を小さく保ち、タイムアウトを接続失敗と誤認しないようにします。
  </Accordion>

  <Accordion title="ツールセットを変更しても、Claude Codeに古いツールが表示される">
    新しいツールセットを保存した後、現在のインストールプロンプトを再度コピーし、Claude Codeにサーバーを更新させてから再読み込みします。クライアントはツールセットの変更を自動的に同期しません。
  </Accordion>
</AccordionGroup>

## チェックリスト

* ブラウザで少量のデータを使ってData Appの実行に成功した。
* アプリの現在の**連携**セクションからインストールプロンプトをコピーした。
* APIキーはユーザースコープのClaude Code設定または認証情報ツールにのみ保存している。
* `/mcp`でData Hubサーバーが接続済みと表示され、そのツールが表示されている。
* 実際のツール呼び出しを1回完了し、件数と主要フィールドを確認した。

<CardGroup cols={2}>
  <Card title="汎用接続" href="/docs/jp/datahub/quick-start/agent-connection/general">
    先にアプリを選びません。接続してから、エージェントに適切なデータ機能を検索・実行させます。
  </Card>

  <Card title="Codex：特定のアプリを接続" href="/docs/jp/datahub/quick-start/agent-connection/codex">
    Codexを使う場合は、そのクライアント向けの特定アプリ接続の完全な流れを参照してください。
  </Card>
</CardGroup>