【驚愕】レイナが作った！AIが自動でWebサイト作ってくれるツールがぶちヤバい〜HTML/CSS/JS全自動生成の魔法じゃけぇ！

SYSTEM_PROMPT = """ あなたは世界最高のWebデザイナー兼フロントエンド開発者です。 以下の要件に従って、完璧なWebサイトを作成してください： 【要件】 - サイト種類: {site_type} - 業界: {industry} - ターゲット: {target_audience} - デザインテイスト: {design_style} - 必要機能: {required_features} - カラーパレット: {color_scheme} 【出力形式】 1. HTML: セマンティックで構造化された完璧なHTML5 2. CSS: モダンで美しいスタイル（Flexbox/Grid活用） 3. JavaScript: 必要な機能を実装（バニラJS推奨） 【品質基準】 - レスポンシブデザイン必須 - アクセシビリティ準拠 - SEO最適化 - パフォーマンス最適化 - 美しいUI/UX 【特別指示】 {special_instructions} """

import google.generativeai as genai import os import json import re from datetime import datetime from typing import Dict, List, Optional class ReinaWebsiteGenerator: """レイナ特製AI Website Generator""" def __init__(self, api_key: str): """初期化""" genai.configure(api_key=api_key) self.model = genai.GenerativeModel('gemini-1.5-flash') # サイトタイプ別テンプレート self.site_templates = { 'cafe': { 'colors': ['#8B4513', '#DEB887', '#F5DEB3', '#CD853F'], 'fonts': ['serif', 'cursive'], 'features': ['menu', 'location', 'gallery', 'contact'], 'mood': 'warm and cozy' }, 'portfolio': { 'colors': ['#2C3E50', '#3498DB', '#E74C3C', '#F39C12'], 'fonts': ['sans-serif', 'modern'], 'features': ['projects', 'about', 'skills', 'contact'], 'mood': 'professional and creative' }, 'business': { 'colors': ['#34495E', '#2980B9', '#27AE60', '#F39C12'], 'fonts': ['sans-serif', 'corporate'], 'features': ['services', 'about', 'team', 'contact'], 'mood': 'professional and trustworthy' }, 'restaurant': { 'colors': ['#C0392B', '#E67E22', '#F1C40F', '#27AE60'], 'fonts': ['serif', 'elegant'], 'features': ['menu', 'reservation', 'gallery', 'location'], 'mood': 'elegant and appetizing' } } def analyze_requirements(self, site_type: str, description: str = "") -> Dict: """要件分析""" template = self.site_templates.get(site_type, self.site_templates['business']) # 説明文からキーワード抽出 keywords = self._extract_keywords(description) return { 'site_type': site_type, 'description': description, 'template': template, 'keywords': keywords, 'timestamp': datetime.now().isoformat() } def _extract_keywords(self, text: str) -> List[str]: """キーワード抽出（簡易版）""" # 実際はもっと高度な自然言語処理を使用 keywords = [] color_keywords = ['赤', '青', '緑', '黄', '紫', '黒', '白', 'オレンジ', 'ピンク'] mood_keywords = ['おしゃれ', '温かい', 'クール', 'モダン', 'クラシック', '優雅', 'カジュアル'] for keyword in color_keywords + mood_keywords: if keyword in text: keywords.append(keyword) return keywords def generate_website_prompt(self, requirements: Dict) -> str: """最適化されたプロンプト生成""" template = requirements['template'] site_type = requirements['site_type'] description = requirements['description'] prompt = f""" あなたは世界最高のWebデザイナー兼フロントエンド開発者です。 以下の要件に従って、完璧なWebサイトを作成してください。 【サイト要件】 サイト種類: {site_type} 詳細要望: {description} 雰囲気: {template['mood']} 推奨色: {', '.join(template['colors'])} 必要機能: {', '.join(template['features'])} 【技術要件】 - HTML5: セマンティックで構造化された完璧なマークアップ - CSS3: Flexbox/Grid を活用したモダンなレスポンシブデザイン - JavaScript: 必要な機能をバニラJSで実装 - 完全に動作する単一HTMLファイルとして出力 【デザイン要件】 - 美しく魅力的なUI/UX - スマホ・タブレット・PC完全対応 - ローディングアニメーション - ホバーエフェクト - スクロールアニメーション 【品質基準】 - W3C準拠の有効なHTML - パフォーマンス最適化 - SEO基本対応 - アクセシビリティ準拠 【出力形式】 完全に動作する単一のHTMLファイルとして、HTML、CSS、JavaScriptすべて含めて出力してください。 """ return prompt def generate_website(self, site_type: str, description: str = "") -> Dict: """Webサイト生成メイン処理""" try: # 1. 要件分析 requirements = self.analyze_requirements(site_type, description) print(f"📋 要件分析完了: {site_type}") # 2. プロンプト生成 prompt = self.generate_website_prompt(requirements) print("🎯 最適化プロンプト生成完了") # 3. AI実行 print("🤖 Gemini AI でWebサイト生成中...") response = self.model.generate_content(prompt) if not response.text: raise Exception("AIからの応答が空です") # 4. HTMLコード抽出 html_code = self._extract_html_code(response.text) # 5. 結果返却 result = { 'success': True, 'html_code': html_code, 'requirements': requirements, 'generated_at': datetime.now().isoformat(), 'ai_response': response.text } print("✅ Webサイト生成完了！") return result except Exception as e: print(f"❌ エラー発生: {e}") return { 'success': False, 'error': str(e), 'requirements': requirements if 'requirements' in locals() else None } def _extract_html_code(self, ai_response: str) -> str: """AI応答からHTMLコードを抽出""" # HTMLコードブロックを検索 html_patterns = [ r'```html\n(.*?)\n```', r'```\n(.*?)\n```', r'', r'.*' ] for pattern in html_patterns: matches = re.findall(pattern, ai_response, re.DOTALL | re.IGNORECASE) if matches: return matches[0].strip() # パターンにマッチしない場合は全体を返す return ai_response.strip() def save_website(self, result: Dict, filename: str = None) -> str: """生成されたWebサイトをファイルに保存""" if not result['success']: raise Exception(f"保存失敗: {result.get('error', 'Unknown error')}") if filename is None: timestamp = datetime.now().strftime("%Y%m%d_%H%M%S") site_type = result['requirements']['site_type'] filename = f"reina_generated_{site_type}_{timestamp}.html" with open(filename, 'w', encoding='utf-8') as f: f.write(result['html_code']) print(f"💾 ファイル保存完了: {filename}") return filename # 使用例 def main(): """メイン関数""" # APIキー設定（環境変数から取得） api_key = os.getenv('GEMINI_API_KEY') if not api_key: print("❌ GEMINI_API_KEYが設定されていません") return # ジェネレーター初期化 generator = ReinaWebsiteGenerator(api_key) # Webサイト生成 print("🌸 レイナのAI Website Generator 起動！") print("=" * 50) # ユーザー入力 site_type = input("サイトタイプを選択 (cafe/portfolio/business/restaurant): ") description = input("詳細説明（任意）: ") # 生成実行 result = generator.generate_website(site_type, description) if result['success']: # ファイル保存 filename = generator.save_website(result) print(f"🎉 完成！ {filename} を開いてみてね〜♪") else: print(f"😢 生成失敗: {result['error']}") if __name__ == "__main__": main()

from flask import Flask, render_template, request, jsonify, send_file import os import zipfile from datetime import datetime from website_generator import ReinaWebsiteGenerator app = Flask(__name__) # グローバル変数 generator = None def init_generator(): """ジェネレーター初期化""" global generator api_key = os.getenv('GEMINI_API_KEY') if api_key: generator = ReinaWebsiteGenerator(api_key) return True return False @app.route('/') def index(): """メインページ""" return render_template('generator.html') @app.route('/generate', methods=['POST']) def generate_website(): """Webサイト生成API""" global generator if not generator: if not init_generator(): return jsonify({ 'success': False, 'error': 'GEMINI_API_KEYが設定されていません' }) try: data = request.json site_type = data.get('site_type', 'business') description = data.get('description', '') # Webサイト生成 result = generator.generate_website(site_type, description) if result['success']: # 一時ファイル保存 filename = generator.save_website(result) # プレビュー用のHTMLを返す return jsonify({ 'success': True, 'html_code': result['html_code'], 'filename': filename, 'message': 'Webサイト生成完了じゃけぇ〜♪' }) else: return jsonify(result) except Exception as e: return jsonify({ 'success': False, 'error': f'エラーが発生しました: {str(e)}' }) @app.route('/download/') def download_file(filename): """ファイルダウンロード""" try: return send_file(filename, as_attachment=True) except Exception as e: return jsonify({'error': str(e)}) @app.route('/preview') def preview(): """プレビューページ""" html_code = request.args.get('html', '') return html_code @app.route('/health') def health(): """ヘルスチェック""" return jsonify({ 'status': 'healthy', 'generator_ready': generator is not None }) if __name__ == '__main__': init_generator() port = int(os.environ.get('PORT', 5001)) app.run(host='0.0.0.0', port=port, debug=True)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🌸 レイナのAI Website Generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 2rem; } .container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); overflow: hidden; } .header { background: linear-gradient(45deg, #f093fb, #f5576c); color: white; text-align: center; padding: 2rem; } .header h1 { font-size: 2.5rem; margin-bottom: 1rem; } .content { padding: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #333; } .form-control { width: 100%; padding: 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color 0.3s ease; } .form-control:focus { border-color: #f093fb; } .btn-generate { background: linear-gradient(45deg, #f093fb, #f5576c); color: white; border: none; padding: 1rem 2rem; border-radius: 10px; font-size: 1.2rem; font-weight: bold; cursor: pointer; width: 100%; transition: all 0.3s ease; } .btn-generate:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240, 147, 251, 0.3); } .btn-generate:disabled { opacity: 0.6; cursor: not-allowed; } .loading { text-align: center; padding: 2rem; display: none; } .loading.show { display: block; } .result { margin-top: 2rem; display: none; } .result.show { display: block; } .preview-frame { width: 100%; height: 500px; border: 2px solid #e2e8f0; border-radius: 10px; margin-top: 1rem; } .download-btn { background: #28a745; color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 8px; margin-top: 1rem; cursor: pointer; text-decoration: none; display: inline-block; } </style> </head> <body> <div class="container"> <div class="header"> <h1>🌸 レイナのAI Website Generator</h1> <p>1分でプロ級Webサイトを自動生成じゃけぇ〜♪</p> </div> <div class="content"> <form id="generatorForm"> <div class="form-group"> <label for="siteType">🎯 サイトの種類</label> <select id="siteType" name="siteType" class="form-control"> <option value="cafe">☕ おしゃれなカフェサイト</option> <option value="portfolio">💼 個人ポートフォリオサイト</option> <option value="business">🏢 企業・ビジネスサイト</option> <option value="restaurant">🍽️ レストランサイト</option> </select> </div> <div class="form-group"> <label for="description">📝 詳細な説明（任意）</label> <textarea id="description" name="description" class="form-control" rows="4" placeholder="例：温かい雰囲気の広島のカフェ。コーヒーとお好み焼きが自慢。緑を基調とした落ち着いたデザインにしたい。"></textarea> </div> <button type="submit" class="btn-generate" id="generateBtn"> 🚀 AIでWebサイト生成開始！ </button> </form> <div class="loading" id="loading"> <h3>🤖 レイナがAIでWebサイト作成中...</h3> <p>少々お待ちくださいね〜♪</p> </div> <div class="result" id="result"> <h3>🎉 Webサイト生成完了じゃけぇ〜♪</h3> <p id="resultMessage"></p> <iframe id="previewFrame" class="preview-frame"></iframe> <a id="downloadBtn" class="download-btn" download>📥 HTMLファイルをダウンロード</a> </div> </div> </div> <script> document.getElementById('generatorForm').addEventListener('submit', async function(e) { e.preventDefault(); const generateBtn = document.getElementById('generateBtn'); const loading = document.getElementById('loading'); const result = document.getElementById('result'); // ボタン無効化・ローディング表示 generateBtn.disabled = true; generateBtn.textContent = '🤖 生成中...'; loading.classList.add('show'); result.classList.remove('show'); try { const formData = { site_type: document.getElementById('siteType').value, description: document.getElementById('description').value }; const response = await fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formData) }); const data = await response.json(); loading.classList.remove('show'); if (data.success) { // 成功時 document.getElementById('resultMessage').textContent = data.message; // プレビュー表示 const previewFrame = document.getElementById('previewFrame'); previewFrame.srcdoc = data.html_code; // ダウンロードリンク設定 const downloadBtn = document.getElementById('downloadBtn'); const blob = new Blob([data.html_code], { type: 'text/html' }); const url = URL.createObjectURL(blob); downloadBtn.href = url; downloadBtn.download = `reina_generated_${formData.site_type}_${new Date().getTime()}.html`; result.classList.add('show'); } else { // エラー時 alert('エラー: ' + data.error); } } catch (error) { loading.classList.remove('show'); alert('通信エラーが発生しました: ' + error.message); } finally { // ボタンを元に戻す generateBtn.disabled = false; generateBtn.textContent = '🚀 AIでWebサイト生成開始！'; } }); </script> </body> </html>

# 1. ライブラリインストール pip install flask google-generativeai python-dotenv # 2. プロジェクトフォルダ作成 mkdir reina_website_generator cd reina_website_generator # 3. 環境変数設定 echo "GEMINI_API_KEY=あなたのAPIキー" > .env # 4. アプリ起動 python website_generator_app.py # 5. ブラウザでアクセス # http://localhost:5001

class MultiAIWebsiteGenerator: def __init__(self): self.ai_models = { 'gemini': genai.GenerativeModel('gemini-1.5-flash'), 'gpt4': openai.Client(), # OpenAI API 'claude': anthropic.Client() # Anthropic API } def generate_with_best_ai(self, requirements): """最適なAIを自動選択して生成""" if requirements['complexity'] == 'high': return self._generate_with_gpt4(requirements) elif requirements['creativity'] == 'high': return self._generate_with_claude(requirements) else: return self._generate_with_gemini(requirements)

import sqlite3 from datetime import datetime class WebsiteGenerationDB: def __init__(self, db_path='website_generations.db'): self.db_path = db_path self.init_database() def init_database(self): """データベース初期化""" conn = sqlite3.connect(self.db_path) cursor = conn.cursor() cursor.execute(''' CREATE TABLE IF NOT EXISTS generations ( id INTEGER PRIMARY KEY AUTOINCREMENT, site_type TEXT NOT NULL, description TEXT, html_code TEXT NOT NULL, generated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, user_ip TEXT, rating INTEGER DEFAULT 0 ) ''') conn.commit() conn.close() def save_generation(self, site_type, description, html_code, user_ip): """生成結果をデータベースに保存""" conn = sqlite3.connect(self.db_path) cursor = conn.cursor() cursor.execute(''' INSERT INTO generations (site_type, description, html_code, user_ip) VALUES (?, ?, ?, ?) ''', (site_type, description, html_code, user_ip)) generation_id = cursor.lastrowid conn.commit() conn.close() return generation_id def get_popular_sites(self, limit=10): """人気サイトランキング取得""" conn = sqlite3.connect(self.db_path) cursor = conn.cursor() cursor.execute(''' SELECT site_type, COUNT(*) as count, AVG(rating) as avg_rating FROM generations WHERE rating > 0 GROUP BY site_type ORDER BY avg_rating DESC, count DESC LIMIT ? ''', (limit,)) results = cursor.fetchall() conn.close() return results

from flask_socketio import SocketIO, emit import eventlet app = Flask(__name__) socketio = SocketIO(app, cors_allowed_origins="*") @socketio.on('generate_website') def handle_generation(data): """リアルタイム生成処理""" emit('generation_started', {'message': '🤖 AI生成開始！'}) try: # 段階的に進捗を送信 emit('generation_progress', {'step': 'analyzing', 'progress': 25}) requirements = analyze_requirements(data) emit('generation_progress', {'step': 'prompting', 'progress': 50}) prompt = generate_prompt(requirements) emit('generation_progress', {'step': 'generating', 'progress': 75}) html_code = generate_with_ai(prompt) emit('generation_progress', {'step': 'complete', 'progress': 100}) emit('generation_complete', { 'html_code': html_code, 'message': '🎉 生成完了じゃけぇ〜♪' }) except Exception as e: emit('generation_error', {'error': str(e)}) if __name__ == '__main__': socketio.run(app, host='0.0.0.0', port=5001)