Rork × AI：Claude と Gemini を組み合わせてアプリ開発を加速する方法

はじめに

Rork はアプリのUI・ロジックをAIで生成するツールですが、作ったアプリの中に「もう一段階」のAIを組み込むと、プロダクトとしての価値は一気に跳ね上がります。

今回は、Rork で構築したアプリに Anthropic の Claude API や Google の Gemini API を統合し、AI 機能を持つプロダクトを個人開発で完成させるまでの実践的な手順をまとめます。

なぜ Rork × AI なのか

Rork の強みはフロントエンドの生成速度にあります。数分でスクリーンを作り、コンポーネントを配置し、ナビゲーションを繋げる。しかし「賢さ」はアプリ自体に内蔵されているわけではありません。

そこに Claude や Gemini を掛け合わせると:

• Rork が担うこと: UIの生成・画面遷移・ローカル状態管理
• AI API が担うこと: テキスト理解・文章生成・画像分析・パーソナライゼーション

この分業が、個人開発者が「本格的なAIアプリ」を最速でリリースするための鉄板パターンです。

Claude API を組み込む

API キーの取得

Anthropic のサイト（https://console.anthropic.com）でアカウントを作成し、API キーを発行します。無料枠でも試せますが、本番リリースを考えるなら最初から有料プランを想定しておくのが無難です。

Rork のコードに API 呼び出しを追加する

Rork で生成されたコードは React Native / Expo ベースです。fetch または axios を使った API 呼び出しはそのまま使えます。

const callClaude = async (userMessage: string): Promise<string> => {
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY!,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-opus-4-6',
      max_tokens: 1024,
      messages: [{ role: 'user', content: userMessage }],
    }),
  });
 
  const data = await response.json();
  return data.content[0].text;
};

.env ファイルに EXPO_PUBLIC_ANTHROPIC_API_KEY=sk-ant-... を書いておけば、Expo 環境から安全に参照できます。

使いどころの例

• 日記アプリ: ユーザーが書いた日記を送ると Claude が感情を読み取りフィードバックを返す
• 学習アプリ: 問題の答えが合っているか、どこが間違っているかを説明してもらう
• ショッピングアプリ: 欲しいものを自然言語で入力すると商品リストを提案

Gemini API を組み込む

使い分けのポイント

Claude と Gemini はどちらも高性能ですが、特性の違いがあります。

| 比較軸 | Claude | Gemini | |--------|--------|--------| | 長文処理 | 非常に強い | 強い | | 画像理解 | Claude 3以降で対応 | マルチモーダルが得意 | | 日本語精度 | 高い | 高い | | コスト感 | やや高め | 無料枠が広い |

画像を扱うアプリなら Gemini の方がコスパが良い場面が多いです。

実装例（画像分析）

const analyzeImageWithGemini = async (base64Image: string): Promise<string> => {
  const response = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${process.env.EXPO_PUBLIC_GEMINI_API_KEY}`,
    {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        contents: [{
          parts: [
            { text: 'この画像について詳しく説明してください。' },
            { inline_data: { mime_type: 'image/jpeg', data: base64Image } },
          ],
        }],
      }),
    }
  );
 
  const data = await response.json();
  return data.candidates[0].content.parts[0].text;
};

Rork で expo-image-picker を使ったUIを作り、選んだ写真を上記関数に渡すだけで、AI による画像解説機能が完成します。

セキュリティ上の注意点

Expo アプリに直接 API キーを埋め込むのはリスクがあります。逆コンパイルすれば見えてしまうからです。

本番リリースを考える場合は:

1. バックエンドプロキシを挟む: Cloudflare Workers や Vercel Edge Functions に API コールを移す
2. レートリミットをかける: ユーザーごとの呼び出し上限を設ける
3. 環境変数はサーバー側に: クライアントに API キーを渡さない

開発・プロトタイプ段階では EXPO_PUBLIC_ 環境変数でも問題ありませんが、ストア公開前には必ず上記対応をしてください。

ユーザー体験の設計

AI API の呼び出しは数秒かかることがあります。Rork で作ったUIに「考え中...」のスケルトンやローディングスピナーを入れるだけで、体験が大きく変わります。

const [isLoading, setIsLoading] = useState(false);
const [result, setResult] = useState('');
 
const handleSubmit = async () => {
  setIsLoading(true);
  const response = await callClaude(inputText);
  setResult(response);
  setIsLoading(false);
};

Rork のチャットで「ローディング中はスケルトンUIを表示して」と指示すれば、このロジックに合わせた見た目を自動生成してくれます。

個人開発でのマネタイズ展望

AI APIのコストは無視できませんが、サブスクリプション課金との相性が非常に良いです。

• 無料プラン: 月10回まで AI 機能を使用可能
• Pro プラン: 月額 980 円で無制限

このモデルなら、収益がコストを上回るラインを計算しやすく、個人開発でも持続可能です。App Store の In-App Purchase は Rork のコード生成でも実装できます。

まとめ

Rork と Claude・Gemini を組み合わせると、個人開発者でも本格的な AI ネイティブアプリを市場に出せます。

ポイントをまとめると:

• Rork でUIを高速生成 → AI APIで「賢さ」を追加
• 画像系は Gemini、テキスト深掘りは Claude が得意
• 本番環境ではバックエンドプロキシ必須
• ローディングUIを丁寧に作るだけで体験が大きく変わる

小さく作って早く出す。その原則に、AI の力を乗せるのが 2026 年の個人開発の勝ちパターンです。