app-of-search

website↓ https://ayoyai.github.io/app-of-search/ <!DOCTYPE html>

検索履歴クイズアプリ

🔍 検索履歴クイズアプリ

Gemini AIを使用した高機能な検索エンジンと、検索履歴から自動生成されるクイズ機能を備えたWebアプリケーションです。

✨ 特徴

🤖 AI検索機能: Gemini APIを使用した高精度な検索と要約（300文字以内）
📚 検索履歴管理: 過去の検索結果を自動保存・管理（最大20件）
🎯 AIクイズ生成: 検索履歴から自動生成される4択問題
🎨 モダンデザイン: レスポンシブ対応のモダンUI
🔒 セキュア: APIキーはクライアントサイドでのみ使用

🚀 デモ

ライブデモを見る

🛠️ 技術仕様

フロントエンド: HTML5, CSS3, JavaScript (ES6+)
AI API: Google Gemini API
ホスティング: GitHub Pages対応
デザイン: モダンCSS（グラデーション、ガラスモーフィズム）
レスポンシブ: モバイル・タブレット対応

📋 機能一覧

🔍 検索機能

Gemini APIを使用したAI検索
300文字以内の要約自動生成
文字数カウント表示
検索結果の全文表示

📖 履歴管理

検索履歴の自動保存
日時付きで最大20件まで保存
モーダルウィンドウでの詳細表示
履歴からの再検索

🎯 クイズ機能

AIによる高品質な4択問題生成
検索キーワードを60文字で説明する問題文
関連性のあるフェイク選択肢
詳細な解説付き

🚀 セットアップ

1. リポジトリのクローン

git clone https://github.com/yourusername/search-quiz-app.git
cd search-quiz-app

2. Gemini APIキーの取得

Google AI Studioにアクセス
Googleアカウントでログイン
「Create API Key」をクリック
生成されたAPIキーをコピー

3. GitHub Pagesの設定

GitHubリポジトリの「Settings」タブに移動
左サイドバーの「Pages」をクリック
Source で「Deploy from a branch」を選択
Branch で「main」を選択
「Save」をクリック

4. アプリの使用

デプロイされたURLにアクセス
APIキーを入力
検索を開始！

💡 使用方法

基本的な使い方

APIキーの設定
- 検索タブでGemini APIキーを入力
- APIキーはブラウザセッション中のみ保存
検索の実行
- 検索バーにキーワードを入力
- AIが300文字以内で要約を生成
- 検索履歴に自動保存
履歴の確認
- 履歴タブで過去の検索を一覧表示
- 項目をクリックで詳細をモーダル表示
クイズに挑戦
- クイズタブで自動生成された問題に挑戦
- 検索キーワードを当てる4択問題
- 正解後に詳しい解説を表示

高度な機能

全文表示: 履歴から検索結果の全文を確認可能
文字数管理: 300文字制限で読みやすい要約
問題生成: 検索キーワードを自然な文章で説明
教育的価値: 学習に適した解説付きクイズ

🔒 セキュリティ

APIキーの保護

✅ クライアントサイドでのみ使用
✅ GitHub上にAPIキーは保存されない
✅ セッション終了時に自動削除
✅ パスワード形式での入力

安全な使用のために

個人のAPIキーのみ使用
公共の端末では使用後にブラウザを閉じる
APIキーの共有は避ける

📊 API使用制限

Gemini API（無料プラン）の制限:

リクエスト数: 60回/分
文字数: 32,000文字/リクエスト
レスポンス: 8,192文字まで

詳細はGemini API料金を参照してください。

🙏 謝辞

Google Gemini AI - AI検索機能を提供
GitHub Pages - 無料ホスティング

📈 更新履歴

v1.0.0 (2024-07-27)

初回リリース
Gemini API検索機能
検索履歴管理
AIクイズ生成機能
レスポンシブデザイン