StudySnap 技術仕様書 - Google Vision API・OpenAI GPT-4.1-nano対応

プロジェクト概要

StudySnap とは

StudySnapは、問題用紙を撮影するだけでAIが瞬時に解答サンプルを提供する革新的な学習支援Webアプリケーションです。Google Vision APIによる高精度OCR機能とOpenAI GPT-4.1-nanoによる解答生成を組み合わせ、学習者の効率的な問題解決をサポートします。

主要機能

📸 画像認識OCR

Google Vision APIを使用した高精度な文字認識機能。数式、日本語、英語の混在テキストを正確に読み取り。

🧠 AI解答生成

OpenAI GPT-4.1-nanoによる高品質な解答サンプル生成。論理的思考プロセスを含む詳細な説明付き。

✏️ テキスト編集

OCR結果の確認・修正機能。誤認識された文字を手動で修正して精度を向上。

📱 モバイル最適化

スマートフォンでの使用を前提とした3段階UI設計。直感的な操作フローを実現。

技術スタック概要

カテゴリ	技術・サービス	バージョン/仕様
フロントエンド	HTML5, CSS3, JavaScript (ES6+)	ネイティブ実装
バックエンド	PHP	8.0+
OCR	Google Vision API	v1
AI	OpenAI GPT-4.1-nano	最新モデル
デザイン	ガラスモーフィズム	CSS backdrop-filter

システムアーキテクチャ

全体構成

StudySnapは、フロントエンドSPA（Single Page Application）とバックエンドPHP APIで構成されるモダンなWebアプリケーションです。外部APIとしてGoogle Vision APIとOpenAI APIを統合しています。

ユーザー
画像アップロード

フロントエンド
JavaScript

PHP API
process_ocr.php

Google Vision API
OCR処理

PHP API
process_chatgpt.php

OpenAI API
解答生成

ファイル構成

ai_ocr/
├── index.php              # メインアプリケーション
├── process_ocr.php        # OCR処理エンドポイント
├── process_chatgpt.php    # AI解析エンドポイント
├── uploads/               # 一時ファイル保存
└── spec.html             # 技術仕様書
            

データフロー

画像アップロード: ユーザーが問題用紙を撮影・選択
OCR処理: Google Vision APIで画像からテキストを抽出
テキスト編集: ユーザーがOCR結果を確認・修正
AI解析: OpenAI GPT-4.1-nanoで解答サンプルを生成
結果表示: 生成された解答をユーザーに表示

API統合仕様

Google Vision API

OCR機能 (TEXT_DETECTION)

エンドポイント: https://vision.googleapis.com/v1/images:annotate

機能: 画像から日本語・英語・数式を含むテキストを高精度で抽出

料金: $0.0015/画像 (月間1,000枚まで無料)

制限事項: ドメイン制限によるセキュリティ確保

OpenAI API

GPT-4.1-nano チャット補完

エンドポイント: https://api.openai.com/v1/chat/completions

モデル: gpt-4.1-nano (高速・低コスト)

機能: 問題文から論理的な解答サンプルを生成

特徴: 日本語での自然な解答生成、数学・理科・国語対応

エラーハンドリング

HTTPステータスコード監視
cURLエラー処理
API固有エラーメッセージ処理
タイムアウト処理
ユーザーフレンドリーなエラー表示

UI/UX設計

デザインコンセプト

「白く透明感のあるモバイルフレンドリーデザイン」をコンセプトに、ガラスモーフィズムスタイルを採用。学習者が集中しやすい清潔で現代的なインターフェースを実現。

3段階UI設計

Step 1
📸 画像選択

Step 2
✏️ テキスト編集

Step 3
🧠 解答表示

Step 1: 画像選択

ドラッグ&ドロップ対応のアップロード領域
画像プレビュー機能
JPG, PNG, GIF形式サポート
ローディングアニメーション

Step 2: テキスト編集

OCR結果の自動表示
リサイズ可能なテキストエリア
リアルタイム文字数カウント
戻るボタンで前ステップへ

Step 3: 解答表示

AI生成解答の整形表示
長文対応のスクロール機能
新しい問題ボタン
戻るボタンで編集可能

レスポンシブデザイン

デバイス	ブレークポイント	主な調整
デスクトップ	481px以上	最大幅450px、横並びボタン
スマートフォン	480px以下	縦並びボタン、余白調整
小型スマートフォン	360px以下	さらなる余白圧縮、テキストサイズ調整

アニメーション仕様

ページ遷移: fadeIn/fadeOut (0.3s ease)
ボタンホバー: translateY(-2px) + box-shadow
プログレスバー: width transition (0.3s ease)
ローディング: CSS spin animation
タッチ操作: scale(0.98) on active

セキュリティ仕様

セキュリティ対策

🔒 アクセス制御

適切な認証・認可システムによる不正アクセス防止

🛡️ API管理

セキュアなAPIキー管理とアクセス制限

🧹 ファイル自動削除

処理完了後の一時ファイル自動削除によるストレージクリーンアップ

⚡ 入力検証

ファイルタイプ・サイズ制限、XSS対策のエスケープ処理

データ保護

一時処理: アップロードされた画像は処理後に自動削除
データ永続化なし: ユーザーデータの長期保存は行わない
プライバシー保護: 処理内容の第三者への共有なし

⚠️ セキュリティ注意事項

本アプリケーションは教育目的での使用を前提としています。機密情報や個人情報を含む文書の処理は推奨されません。

パフォーマンス仕様

速度最適化

処理	想定時間	最適化手法
画像アップロード	即座	Base64エンコーディング、プレビュー表示
OCR処理	2-5秒	Google Vision API高速処理、ローディング表示
AI解答生成	3-8秒	GPT-4.1-nano軽量モデル、ストリーミング非対応
UI遷移	0.3秒	CSS transitionによるスムーズアニメーション

コスト効率

Google Vision API

料金: $0.0015/画像

無料枠: 月間1,000件

予想コスト: 月額$15-50 (月間10,000-33,000件想定)

OpenAI GPT-4.1-nano

特徴: 高速・低コストモデル

用途: 短文解答生成に最適

コスト優位性: GPT-4oより大幅に安価

モバイル最適化

軽量設計: 外部ライブラリ依存なし、ネイティブJavaScript
画像圧縮: アップロード前の自動リサイズ（実装予定）
キャッシュ戦略: CSS/JSのインライン化によるリクエスト削減
Touch操作: ネイティブアプリライクなタッチレスポンス

将来の拡張予定

🔄 結果キャッシュ

同一問題の重複処理回避によるコスト削減

📱 PWA対応

オフライン機能、ホーム画面追加対応

🎯 画像最適化

WebP対応、自動リサイズ機能

📊 使用状況分析

Google Analytics連携によるUX改善

開発情報

開発: IKACHI.ORG

最終更新: 2025年8月31日

バージョン: 1.0.0

ライセンス: プロプライエタリ

技術サポート

本技術仕様書に関するご質問やサポートが必要な場合は、IKACHI.ORGまでお問い合わせください。