Gemini × Rork で iOS/Android アプリを AI 生成する — プロンプトひとつでアプリ開発を加速する

取り組みの背景 — Gemini × Rork でアプリ開発はどう変わるか

「アプリを作りたいけれど、コードが書けない」「アイデアはあるが、開発に時間がかかりすぎる」。そんな悩みを抱えるすべての人に、Gemini と Rork の組み合わせは大きな可能性を開きます。

Rork は、自然言語プロンプトから iOS および Android アプリを自動生成する AI ファーストのアプリ開発プラットフォームです。React Native をベースとしており、生成されたコードはそのままApp Store や Google Play へ提出できる品質を目指して設計されています。

そして Gemini API は、テキスト・画像・音声など多様なモダリティを扱える Google の最先端 AI モデルです。Rork が「アプリの外枠（UI・ナビゲーション・画面遷移）」を生成する一方、Gemini はアプリ内の「インテリジェントな機能」— チャットボット、画像解析、多言語対応、コンテンツ要約など — を担います。

ここでは以下の内容を学べます:

• Rork の基本概念とアプリ生成の仕組み
• Gemini API を Rork プロジェクトに統合する方法
• 実際のアプリ生成から公開までの流れ
• よくあるエラーと対処法
• 応用的な活用パターン

コーディング経験がなくても取り組める内容ですので、ぜひ最後まで読んでみてください。

Rork とは？ — AI が React Native コードを生成するプラットフォーム

Rork（rork.app）は、2024年後半から急速に注目を集めるAIアプリ開発ツールです。Expo と React Native をベースに、自然言語で画面の構成や機能を説明するだけで、実際に動くコードを自動生成します。

Rork の主な特徴

• プロンプトベースの開発: 「ユーザーがタスクを追加できるToDoアプリ」と書くだけで、画面・コンポーネント・ナビゲーションが自動生成される
• リアルタイムプレビュー: 生成されたアプリはブラウザ上でそのまま確認可能
• Expo Go 連携: スマートフォンの Expo Go アプリでデバイス上のプレビューも可能
• コードの透明性: 生成されたコードはすべて閲覧・編集できるため、AIに依存しすぎない学習も可能
• デプロイ支援: App Store / Google Play への提出に必要な設定ファイルも自動生成

Rork が向いているケース

個人開発者・スタートアップのプロトタイプ制作・副業でのアプリ開発・Gemini などの AI 機能を組み込んだアプリのMVP（最小実行可能製品）作成に特に適しています。

Gemini × Rork の組み合わせがもたらすメリット

Rork 単体でもアプリの骨格は作れますが、Gemini API を組み合わせることで、アプリに「頭脳」を追加できます。

できることの例

• チャット機能: Gemini のマルチターン会話機能でアプリ内 AI アシスタントを実装
• 画像解析: ユーザーが撮影した写真を Gemini に送り、内容を分析・説明
• テキスト要約: 長い記事やドキュメントをワンタップで要約
• 多言語対応: Gemini の翻訳能力でアプリを自動的に多言語化
• パーソナライズド推薦: ユーザーの行動履歴をもとに Gemini がコンテンツを推薦

セットアップ — Gemini API キーの取得と Rork への統合

Step 1: Gemini API キーを取得する

1. Google AI Studio にアクセスし、Google アカウントでログイン
2. 左メニューの「API Keys」をクリック
3. 「Create API Key」でプロジェクトを選択し、APIキーを生成
4. 生成されたキーをコピーして安全な場所に保存

⚠️ APIキーは絶対にソースコードに直接書かない。
環境変数（.env）または Rork のシークレット管理機能を使うこと。

無料枠（Free Tier）では Gemini 3.1 Flash を1日あたり最大500リクエスト使用できるため、プロトタイプ開発には十分です。

Step 2: Rork でプロジェクトを作成する

1. rork.app でアカウントを作成
2. ダッシュボードから「New App」をクリック
3. アプリの説明をテキストで入力（例: 「ユーザーが写真を撮って、AIが料理名とカロリーを教えてくれるアプリ」）
4. Rork が React Native のコードを自動生成

Step 3: Gemini API を Rork プロジェクトに追加する

Rork のチャット画面（プロンプト入力欄）で以下のように指示します:

Gemini APIを使ったAI機能を追加してください。
APIキーは環境変数 EXPO_PUBLIC_GEMINI_API_KEY から読み込むようにしてください。
ユーザーが入力したテキストをGemini 3.1 Flash に送信し、
レスポンスを画面に表示するシンプルなチャット機能を実装してください。

Rork は上記の指示をもとに、@google/generative-ai パッケージの統合コードを自動生成します。

ステップバイステップ: 実際にアプリを作ってみる

ここでは「AI 料理アシスタントアプリ」を例に、Gemini × Rork の開発フローを体験してみましょう。

プロジェクト初期化

Rork のプロンプト欄に以下を入力します:

料理アシスタントアプリを作ってください。
- ホーム画面: 料理の名前を入力するテキストフィールドと「レシピを取得」ボタン
- Gemini APIを使って、入力された料理のレシピと必要な材料を表示する
- シンプルで見やすいUIにしてください
- ダークモード対応

数分で画面の骨格が生成されます。

Gemini API 呼び出しコードの確認

生成されたコードの中に、以下のような Gemini API 呼び出し部分が含まれているはずです:

// services/geminiService.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
 
const genAI = new GoogleGenerativeAI(
  process.env.EXPO_PUBLIC_GEMINI_API_KEY || ""
);
 
export async function getRecipe(dishName: string): Promise<string> {
  const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
 
  const prompt = `
    料理名: ${dishName}
 
    以下の形式でレシピを教えてください:
    1. 必要な材料（2人分）
    2. 調理手順（ステップごとに）
    3. 調理時間の目安
 
    日本語で回答してください。
  `;
 
  const result = await model.generateContent(prompt);
  const response = await result.response;
  return response.text();
}

この関数は、ユーザーが入力した料理名を受け取り、Gemini にレシピ生成を依頼します。

環境変数の設定

プロジェクトのルートに .env ファイルを作成し、以下を記入します:

EXPO_PUBLIC_GEMINI_API_KEY=YOUR_GEMINI_API_KEY

YOUR_GEMINI_API_KEY の部分を、Step 1 で取得した実際の API キーに置き換えてください。

プレビューで動作確認

Rork のプレビュー画面でアプリを起動し、「カルボナーラ」などの料理名を入力して「レシピを取得」ボタンをタップしてみましょう。Gemini が材料・手順・調理時間を返してくれるはずです。

AIシステム設計の考え方を深く学べる一冊です。

よくあるエラーと対処法

エラー 1: API_KEY_INVALID

原因: APIキーが正しく設定されていない 対処: .env ファイルに EXPO_PUBLIC_ プレフィックスが付いているか確認します。Expo では環境変数を公開するために、このプレフィックスが必須。

エラー 2: RESOURCE_EXHAUSTED (429)

原因: 無料枠のリクエスト数上限に達した 対処: Gemini API のダッシュボードで使用量を確認し、必要であれば有料プランへ移行します。または @google/generative-ai のリトライロジックを実装します。

// リトライ付きのAPI呼び出し
async function generateWithRetry(prompt: string, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const result = await model.generateContent(prompt);
      return result.response.text();
    } catch (error: any) {
      if (error.status === 429 && i < maxRetries - 1) {
        // 指数バックオフ: 1秒、2秒、4秒と待機
        await new Promise((r) => setTimeout(r, Math.pow(2, i) * 1000));
        continue;
      }
      throw error;
    }
  }
}

エラー 3: Rork でコードが正しく生成されない

原因: プロンプトが曖昧すぎる 対処: 機能・画面数・UIの構成を具体的に記述します。「シンプルなチャットアプリ」ではなく、「2画面構成（ホーム・チャット）で、ユーザーメッセージは右側、AIレスポンスは左側に表示するチャットアプリ」のように詳細に指定します。

応用: Gemini のマルチモーダル機能を活用する

Rork で画像入力機能を追加し、Gemini のビジョン機能と組み合わせることで、より高度なアプリが作れます。

画像解析機能の追加

Rork のプロンプトで以下を指示します:

カメラで撮影した写真をGemini Vision APIに送り、
写真の内容を日本語で説明するボタンを追加してください。
expo-image-pickerを使用してください。

生成されたコードの Gemini 呼び出し部分は次のようになります:

// 画像をBase64に変換してGeminiに送信
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
 
export async function analyzeImage(imageUri: string): Promise<string> {
  const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
 
  // 画像をBase64に変換
  const imageBase64 = await FileSystem.readAsStringAsync(imageUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
 
  const imagePart = {
    inlineData: {
      data: imageBase64,
      mimeType: "image/jpeg",
    },
  };
 
  const result = await model.generateContent([
    imagePart,
    "この画像に写っているものを日本語で説明してください。",
  ]);
 
  return result.response.text();
}

マルチモーダル機能をさらに深く活用したい方には、Gemini × Figma — モバイルアプリのプロトタイプを最速で作る方法 もあわせてご覧ください。UIデザインと AI 機能を組み合わせる高度な手法を解説しています。

まとめ

Gemini × Rork の組み合わせは、アプリ開発のハードルを大幅に下げてくれます。コーディングの経験が浅い方でも、アイデアをプロンプトに落とし込み、Gemini の AI 機能を組み込んだアプリを短時間で形にできます。

本記事で学んだ主なポイントをまとめます:

• Rork はプロンプトから React Native コードを生成する AI 開発プラットフォーム
• Gemini API を環境変数経由で安全に組み込むことで、チャット・画像解析・テキスト要約などのAI機能を追加できる
• 429 エラーなど API の制限に対しては、リトライロジックで対応する
• Rork × Gemini のマルチモーダル機能を活用すると、カメラ連携など高度な体験を作れる

さらに深い実装技術を知りたい方は Gemini 3.1 Pro のエージェンティック・コーディングを徹底解剖 をご覧ください。ARC-AGI-2 で77%の成功率を記録した Gemini 3.1 Pro の推論力を活かした高度なアプリ開発手法を解説しています。

Rork と Gemini を使って、あなただけのアプリ開発を始めてみましょう。

本記事の内容を