AI Camera App Template

これは、撮影または選択した画像を AI で分析する機能を持つ、React Native (Expo) 製のモバイルアプリケーションテンプレートです。

主な機能

• カメラ撮影: expo-camera を利用したリアルタイムカメラ機能
• 画像選択: デバイスのライブラリから画像を選択
• AI による画像分析: Vercel AI SDK を経由して、マルチモーダル AI モデルが画像を分析し、説明を生成します

技術スタック

• React Native / Expo
• TypeScript
• Expo Router
• Vercel AI SDK
• NativeWind (for Tailwind CSS)
• Zod (for validation)

セットアップ

1. リポジトリをクローン:

   git clone <repository-url>
   cd camera-app-template

2. 依存関係をインストール:

   bun install

3. 環境変数を設定: .env.example をコピーして .env ファイルを作成し、お使いの AI サービスの API キーを設定してください。

   OPENAI_API_KEY="sk-..."
   # ANTHROPIC_API_KEY="sk-..."
   # GOOGLE_GENERATIVE_AI_API_KEY="..."

実行方法

# 開発サーバーを起動
bun start

# 起動後、表示されるメニューに従って操作
# 'i' -> iOS シミュレータで開く
# 'a' -> Android エミュレータで開く

プロジェクト構造

このプロジェクトは src ディレクトリベースの構造を採用しています：

src/
├── app/                    # Expo Router による画面定義
│   ├── _layout.tsx        # ルートレイアウト
│   ├── (tabs)/            # タブナビゲーション
│   └── analyze-image+api.ts # API エンドポイント
├── components/            # 再利用可能なコンポーネント
│   ├── ui/               # UI コンポーネント
│   └── useColorScheme.ts # カラースキーム管理
├── hooks/                # カスタムフック
│   └── useImageAnalysis.ts # 画像分析フック
├── types/                # TypeScript 型定義
│   └── index.ts
├── utils/                # ユーティリティ関数
│   └── aiService.ts      # AI サービス連携
└── constants/            # 定数定義
    └── Colors.ts

動作確認

アプリケーションがシミュレータで正常に起動したら、以下の手順で基本的な機能を確認できます：

シナリオ 1: 写真を撮影して分析する

1. 画面下部にあるシャッターボタンをタップ
2. 撮影された写真がプレビューとして表示される
3. 自動的に AI による分析が開始され、「分析中...」のようなインジケーターが表示される
4. AI が生成した画像の説明が画面に表示される

シナリオ 2: ライブラリから写真を選択して分析する

1. 画面の隅にあるライブラリアイコンをタップ
2. デバイスのフォトライブラリが開き、画像を選択
3. 選択された写真がプレビューとして表示される
4. 自動的に AI による分析が開始され、結果が表示される

トラブルシューティング

環境変数が読み込まれない場合

1. .envファイルがプロジェクトのルートディレクトリに存在することを確認
2. .envファイルの構文が正しいことを確認（引用符の使用など）
3. アプリを再起動して環境変数の変更を反映

APIキーが無効な場合

1. 使用するAIサービスのダッシュボードでAPIキーが有効であることを確認
2. APIキーに適切な権限が設定されていることを確認
3. 使用量制限に達していないことを確認