refactor: V1.x UI移植 - React+Tailwind SPA化

- V1.8.1のReact+Tailwind UIをv2.0.0配信モードに完全移植
- SPA構成に変更（index.htmlのみで全画面管理）
- 不要なHTMLファイル削除（quiz.html, result.html, ranking.html）
- apiClient.js: GAS API用に書き換え
- components.js: 配信モード専用Reactコンポーネント
- V1.xと統一されたリッチUI（ベージュ/ブラウン配色、フォント、アニメーション）

css/style.css

@@ -1,604 +1,65 @@
-/* ============================================
-   超天才クイズ v2.0.0 - Static Space CSS
-   ============================================ */
-
-/* Reset & Base */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-:root {
-    --primary: #4F46E5;
-    --primary-dark: #3730A3;
-    --secondary: #10B981;
-    --warning: #F59E0B;
-    --danger: #EF4444;
-    --success: #22C55E;
-    --bg: #F3F4F6;
-    --card-bg: #FFFFFF;
-    --text: #1F2937;
-    --text-light: #6B7280;
-    --border: #E5E7EB;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-body {
-    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-    min-height: 100vh;
-}
-
-.container {
-    max-width: 480px;
-    margin: 0 auto;
-    padding: 16px;
-}
-
-/* Header */
-header {
-    text-align: center;
-    padding: 24px 0;
-}
-
-header h1 {
-    font-size: 28px;
-    color: var(--primary);
-    margin-bottom: 4px;
-}
-
-header .subtitle {
-    color: var(--text-light);
-    font-size: 14px;
-}
-
-header .date {
-    color: var(--text-light);
-    font-size: 14px;
-}
-
-/* Card */
-.card {
-    background: var(--card-bg);
-    border-radius: 16px;
-    padding: 24px;
-    margin-bottom: 16px;
-    box-shadow: var(--shadow);
-}
-
-.card h2 {
-    font-size: 20px;
-    margin-bottom: 16px;
-    color: var(--primary);
-}
-
-.card h3 {
-    font-size: 16px;
-    margin-bottom: 12px;
-    color: var(--text);
-}
-
-/* Buttons */
-button {
-    cursor: pointer;
-    border: none;
-    border-radius: 8px;
-    padding: 12px 24px;
-    font-size: 16px;
-    font-weight: 600;
-    transition: all 0.2s;
-}
-
-.btn-primary {
-    background: var(--primary);
-    color: white;
-}
-
-.btn-primary:hover {
-    background: var(--primary-dark);
-}
-
-.btn-secondary {
-    background: var(--secondary);
-    color: white;
-}
-
-.btn-secondary:hover {
-    opacity: 0.9;
-}
-
-.btn-outline {
-    background: transparent;
-    border: 2px solid var(--border);
-    color: var(--text);
-}
-
-.btn-outline:hover {
-    background: var(--bg);
-}
-
-.btn-quiz {
-    background: var(--primary);
-    color: white;
-    padding: 8px 16px;
-    font-size: 14px;
-}
-
-/* Input */
-input[type="text"] {
-    width: 100%;
-    padding: 12px 16px;
-    font-size: 16px;
-    border: 2px solid var(--border);
-    border-radius: 8px;
-    margin-bottom: 12px;
-    transition: border-color 0.2s;
-}
-
-input[type="text"]:focus {
-    outline: none;
-    border-color: var(--primary);
-}
-
-/* Auth Section */
-#login-form {
-    text-align: center;
-}
-
-#login-form p {
-    margin-bottom: 16px;
-    color: var(--text-light);
-}
-
-#login-form .btn-primary {
-    width: 100%;
-}
-
-/* User Info */
-.user-info {
-    background: var(--bg);
-    padding: 16px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-}
-
-.user-info p {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 8px;
-}
-
-.user-info p:last-child {
-    margin-bottom: 0;
-}
-
-/* Quiz List */
-.quiz-list h3 {
-    margin-bottom: 16px;
-}
-
-.time-slot {
-    margin-bottom: 16px;
-}
-
-.time-slot h4 {
-    font-size: 14px;
-    color: var(--text-light);
-    margin-bottom: 8px;
-}
-
-.quiz-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px;
-    background: var(--bg);
-    border-radius: 8px;
-    margin-bottom: 8px;
-}
-
-.quiz-item .subject {
-    font-weight: 600;
-}
-
-/* Actions */
-.actions {
-    display: flex;
-    gap: 12px;
-    margin-top: 16px;
-}
-
-.actions button {
-    flex: 1;
-}
-
-/* Quiz Header */
-.quiz-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    background: var(--card-bg);
-    border-radius: 12px;
-    margin-bottom: 16px;
-    box-shadow: var(--shadow);
-}
-
-.header-left {
-    display: flex;
-    gap: 16px;
-}
-
-#subject-name {
-    font-weight: 600;
-    color: var(--primary);
-}
-
-#question-counter {
-    color: var(--text-light);
-}
-
-/* Timer */
-.timer {
-    background: var(--primary);
-    color: white;
-    padding: 8px 16px;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 18px;
-}
-
-.timer.warning {
-    background: var(--danger);
-    animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-
-/* Question Area */
-.question-area {
-    margin-bottom: 24px;
-}
-
-.difficulty-badge {
-    display: inline-block;
-    padding: 4px 12px;
-    background: var(--secondary);
-    color: white;
-    border-radius: 16px;
-    font-size: 12px;
-    margin-bottom: 12px;
-}
-
-.question-text {
-    font-size: 18px;
-    line-height: 1.8;
-}
-
-/* Answer Area */
-.answer-area {
-    margin-bottom: 24px;
-}
-
-.answer-area input {
-    margin-bottom: 12px;
-}
-
-.answer-area .btn-primary {
-    width: 100%;
-}
-
-/* Choices (4択選択肢) */
-.choices-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.choice-btn {
-    width: 100%;
-    padding: 16px 20px;
-    text-align: left;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 1.5;
-    background: var(--card-bg);
-    border: 2px solid var(--border);
-    border-radius: 12px;
-    color: var(--text);
-    transition: all 0.2s ease;
-}
-
-.choice-btn:hover {
-    background: var(--bg);
-    border-color: var(--primary);
-}
-
-.choice-btn.selected {
-    background: var(--primary);
-    border-color: var(--primary);
-    color: white;
-}
-
-.choice-btn:active {
-    transform: scale(0.98);
-}
-
-/* Navigation */
-.navigation {
-    display: flex;
-    gap: 12px;
-}
-
-.navigation button {
-    flex: 1;
-}
-
-/* Result Summary */
-.score-display {
-    text-align: center;
-    margin-bottom: 24px;
-}
-
-.score-circle {
-    display: inline-flex;
-    align-items: baseline;
-    font-size: 48px;
-    font-weight: 700;
-    color: var(--primary);
-}
-
-.score-divider {
-    font-size: 32px;
-    margin: 0 4px;
-    color: var(--text-light);
-}
-
-.score-total {
-    font-size: 32px;
-    color: var(--text-light);
-}
-
-.score-label {
-    color: var(--text-light);
-    margin-top: 8px;
-}
-
-/* Points Breakdown */
-.points-breakdown {
-    background: var(--bg);
-    padding: 16px;
-    border-radius: 8px;
-}
-
-.point-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 0;
-    border-bottom: 1px solid var(--border);
-}
-
-.point-row:last-child {
-    border-bottom: none;
-}
-
-.point-row.total {
-    font-weight: 700;
-    font-size: 18px;
-    color: var(--primary);
-}
-
-/* Answer Details */
-.answer-item {
-    padding: 16px;
-    margin-bottom: 12px;
-    border-radius: 8px;
-    border-left: 4px solid;
-}
-
-.answer-item.correct {
-    background: #ECFDF5;
-    border-color: var(--success);
-}
-
-.answer-item.incorrect {
-    background: #FEF2F2;
-    border-color: var(--danger);
-}
-
-.answer-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-}
-
-.status-icon {
-    font-size: 20px;
-    font-weight: 700;
-}
-
-.correct .status-icon {
-    color: var(--success);
-}
-
-.incorrect .status-icon {
-    color: var(--danger);
-}
-
-.question-number {
-    font-weight: 600;
-    color: var(--text-light);
-}
-
-.answer-content .question-text {
-    font-size: 14px;
-    margin-bottom: 8px;
-}
-
-.answer-comparison {
-    font-size: 14px;
-}
-
-.answer-comparison .label {
-    color: var(--text-light);
-    margin-right: 8px;
-}
-
-.your-answer,
-.correct-answer {
-    margin-bottom: 4px;
-}
-
-.correct-answer .value {
-    color: var(--success);
-    font-weight: 600;
-}
-
-/* Tabs */
-.tab-container {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 16px;
-    overflow-x: auto;
-    padding-bottom: 4px;
-}
-
-.tab {
-    flex: 1;
-    min-width: 60px;
-    padding: 8px 12px;
-    background: var(--card-bg);
-    border: 2px solid var(--border);
-    border-radius: 8px;
-    font-size: 14px;
-    white-space: nowrap;
-}
-
-.tab.active {
-    background: var(--primary);
-    color: white;
-    border-color: var(--primary);
-}
-
-/* Ranking List */
-.ranking-list {
-    list-style: none;
-}
-
-.ranking-item {
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    border-bottom: 1px solid var(--border);
-}
-
-.ranking-item:last-child {
-    border-bottom: none;
-}
-
-.ranking-item .rank {
-    width: 40px;
-    font-size: 18px;
-    font-weight: 700;
-    text-align: center;
-}
-
-.ranking-item .name {
-    flex: 1;
-    margin-left: 12px;
-}
-
-.ranking-item .points {
-    font-weight: 600;
-    color: var(--primary);
-}
-
-.ranking-item.rank-1 {
-    background: #FEF3C7;
-}
-
-.ranking-item.rank-2 {
-    background: #F3F4F6;
-}
-
-.ranking-item.rank-3 {
-    background: #FED7AA;
-}
-
-.ranking-item.is-me {
-    border: 2px solid var(--primary);
-    border-radius: 8px;
-}
-
-/* My Rank */
-#my-rank {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-    gap: 4px;
-}
-
-.rank-number {
-    font-size: 48px;
-    font-weight: 700;
-    color: var(--primary);
-}
-
-.rank-suffix {
-    font-size: 24px;
-    color: var(--text-light);
-}
-
-.rank-points {
-    margin-left: 16px;
-    font-size: 18px;
-    color: var(--text-light);
-}
-
-/* Utility */
-.hidden {
-    display: none !important;
-}
-
-.error {
-    color: var(--danger);
-    text-align: center;
-    padding: 8px;
-}
-
-.loading-text,
-.no-data {
-    text-align: center;
-    color: var(--text-light);
-    padding: 24px;
-}
-
-/* Footer */
-footer {
-    text-align: center;
-    padding: 24px;
-    color: var(--text-light);
-    font-size: 12px;
-}
-
-/* Responsive */
-@media (max-width: 360px) {
-    .container {
-        padding: 12px;
-    }
-
-    .card {
-        padding: 16px;
-    }
-
-    header h1 {
-        font-size: 24px;
-    }
-}
+/* カスタムスタイル（Tailwind拡張、アニメーション） */
+
+body {
+    background-color: #f9f8f4;
+    color: #5c504a;
+}
+
+/* ノイズテクスチャの適用 */
+.bg-texture::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
+    opacity: 0.6;
+}
+
+/* ふわっと表示 */
+.fade-in {
+    animation: fadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ゆっくり動く背景オーブ */
+.orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    z-index: -2;
+    animation: float 10s infinite ease-in-out;
+    opacity: 0.4;
+}
+
+@keyframes float {
+    0% {
+        transform: translate(0, 0);
+    }
+    50% {
+        transform: translate(10px, -15px);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+/* レーダーチャートのサイズ調整 */
+.chart-container {
+    position: relative;
+    height: 200px;
+    width: 100%;
+}

index.html

@@ -3,214 +3,68 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>超天才クイズ - 配信モード</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>超天才クイズ</h1>
-            <p class="subtitle">配信モード v2.0.0</p>
-        </header>
-
-        <main id="main-content">
-            <!-- ログイン/登録フォーム -->
-            <section id="auth-section" class="card">
-                <h2>ようこそ!</h2>
-
-                <div id="login-form">
-                    <p>お名前を入力してください</p>
-                    <input type="text" id="user-name" placeholder="お名前（ひらがな可）" maxlength="20">
-                    <button id="start-btn" class="btn-primary">はじめる</button>
-                </div>
-
-                <div id="loading" class="hidden">
-                    <p>ログイン中...</p>
-                </div>
-
-                <div id="error-message" class="error hidden"></div>
-            </section>
-
-            <!-- ログイン済み表示 -->
-            <section id="logged-in-section" class="card hidden">
-                <h2>こんにちは、<span id="display-name"></span>さん!</h2>
-
-                <div class="user-info">
-                    <p>クラス: <span id="user-class">天才のたまご</span></p>
-                    <p>今週のポイント: <span id="weekly-points">0</span>pt</p>
-                </div>
-
-                <div class="quiz-list" id="quiz-list">
-                    <h3>今日の配信</h3>
-                    <div id="available-quizzes">
-                        <!-- 配信問題リストがここに表示される -->
-                        <p class="loading-text">配信情報を取得中...</p>
-                    </div>
-                </div>
-
-                <div class="actions">
-                    <button id="ranking-btn" class="btn-secondary">ランキングを見る</button>
-                    <button id="logout-btn" class="btn-outline">ログアウト</button>
-                </div>
-            </section>
-        </main>
-
-        <footer>
-            <p>&copy; 2025 超天才クイズ</p>
-        </footer>
-    </div>
-
-    <script src="js/api.js"></script>
-    <script src="js/auth.js"></script>
+    <title>超天才クイズ - 配信モード v2.0.0</title>
+
+    <!-- React & ReactDOM -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <!-- Babel (for JSX) -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap" rel="stylesheet">
+
+    <!-- Tailwind Config -->
     <script>
-        // ページ読み込み時の処理
-        document.addEventListener('DOMContentLoaded', async () => {
-            // トークンチェック
-            const isLoggedIn = await Auth.checkLogin();
-
-            if (isLoggedIn) {
-                showLoggedInSection();
-            } else {
-                showAuthSection();
-            }
-        });
-
-        // ログインフォーム表示
-        function showAuthSection() {
-            document.getElementById('auth-section').classList.remove('hidden');
-            document.getElementById('logged-in-section').classList.add('hidden');
-        }
-
-        // ログイン済み表示
-        async function showLoggedInSection() {
-            document.getElementById('auth-section').classList.add('hidden');
-            document.getElementById('logged-in-section').classList.remove('hidden');
-
-            const user = Auth.getUser();
-            document.getElementById('display-name').textContent = user.name || 'ユーザー';
-
-            // プロフィール取得
-            try {
-                const profile = await API.getUserProfile(user.id);
-                if (profile.success && profile.profile) {
-                    document.getElementById('user-class').textContent =
-                        getClassName(profile.profile.current_class || 1);
-                    document.getElementById('weekly-points').textContent =
-                        profile.profile.weekly_points || 0;
-                }
-            } catch (e) {
-                console.error('Profile fetch error:', e);
-            }
-
-            // 今日の配信を取得
-            loadTodayQuizzes();
-        }
-
-        // クラス名取得
-        function getClassName(level) {
-            const classes = {
-                1: '天才のたまご',
-                2: '天才の見習い',
-                3: '天才かも',
-                4: 'もうすぐ天才',
-                5: '天才',
-                6: '超天才'
-            };
-            return classes[level] || '天才のたまご';
-        }
-
-        // 今日の配信を読み込み
-        async function loadTodayQuizzes() {
-            const container = document.getElementById('available-quizzes');
-
-            try {
-                // 今日の日付でクイズを取得（AMとPM）- 日本時間(UTC+9)基準
-                const now = new Date();
-                const jstTime = new Date(now.getTime() + 9 * 60 * 60 * 1000); // UTC+9
-                const today = jstTime.toISOString().split('T')[0];
-                console.log('[DEBUG] JST date:', today); // デバッグ用
-                const subjects = ['jp', 'math', 'sci', 'soc'];
-                const subjectNames = {
-                    jp: '国語',
-                    math: '算数',
-                    sci: '理科',
-                    soc: '社会'
-                };
-
-                let html = '';
-                for (const slot of ['AM', 'PM']) {
-                    html += `<div class="time-slot"><h4>${slot === 'AM' ? '午前' : '午後'}の問題</h4>`;
-
-                    for (const subject of (slot === 'AM' ? ['jp', 'math'] : ['sci', 'soc'])) {
-                        const quizId = `${today}-${slot}-${subject}`;
-                        html += `
-                            <div class="quiz-item">
-                                <span class="subject">${subjectNames[subject]}</span>
-                                <button class="btn-quiz" onclick="startQuiz('${quizId}')">
-                                    挑戦する
-                                </button>
-                            </div>
-                        `;
-                    }
-                    html += '</div>';
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'base-beige': '#f9f8f4',
+                        'accent-brown': '#5c504a',
+                        'soft-brown': '#9d918b',
+                        'gold': '#c5a065',
+                        'subject-jp': '#d68c8c',
+                        'subject-math': '#8badce',
+                        'subject-sci': '#96cbb2',
+                        'subject-soc': '#e3d296',
+                    },
+                    fontFamily: {
+                        'serif': ['"Shippori Mincho"', 'serif'],
+                        'sans': ['"Zen Maru Gothic"', 'sans-serif'],
+                    },
+                    boxShadow: {
+                        'soft': '0 20px 40px -10px rgba(92, 80, 74, 0.1)',
+                        'inner-light': 'inset 0 2px 4px 0 rgba(255, 255, 255, 0.5)',
+                        'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.05)',
+                    },
                 }
-
-                container.innerHTML = html;
-
-            } catch (e) {
-                container.innerHTML = '<p class="error">配信情報の取得に失敗しました</p>';
-                console.error('Quiz list error:', e);
             }
         }
+    </script>
 
-        // クイズ開始
-        function startQuiz(quizId) {
-            window.location.href = `quiz.html?d=${quizId}`;
-        }
-
-        // イベントリスナー
-        document.getElementById('start-btn').addEventListener('click', async () => {
-            const name = document.getElementById('user-name').value.trim();
-
-            if (!name) {
-                showError('お名前を入力してください');
-                return;
-            }
-
-            document.getElementById('login-form').classList.add('hidden');
-            document.getElementById('loading').classList.remove('hidden');
-
-            try {
-                const result = await Auth.login(name);
-                if (result.success) {
-                    showLoggedInSection();
-                } else {
-                    showError(result.error || 'ログインに失敗しました');
-                    document.getElementById('login-form').classList.remove('hidden');
-                    document.getElementById('loading').classList.add('hidden');
-                }
-            } catch (e) {
-                showError('エラーが発生しました');
-                document.getElementById('login-form').classList.remove('hidden');
-                document.getElementById('loading').classList.add('hidden');
-            }
-        });
-
-        document.getElementById('ranking-btn').addEventListener('click', () => {
-            window.location.href = 'ranking.html';
-        });
-
-        document.getElementById('logout-btn').addEventListener('click', () => {
-            Auth.logout();
-            showAuthSection();
-        });
-
-        function showError(message) {
-            const errorEl = document.getElementById('error-message');
-            errorEl.textContent = message;
-            errorEl.classList.remove('hidden');
-            setTimeout(() => errorEl.classList.add('hidden'), 3000);
-        }
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body class="bg-texture font-sans antialiased">
+    <div id="root"></div>
+
+    <!-- JavaScript Modules (順序重要) -->
+    <script src="js/config.js"></script>
+    <script src="js/sessionManager.js"></script>
+    <script src="js/apiClient.js"></script>
+
+    <!-- React Components (Babel必要) -->
+    <script type="text/babel" src="js/icons.js"></script>
+    <script type="text/babel" src="js/components.js"></script>
+
+    <!-- App Initialization -->
+    <script type="text/babel">
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
     </script>
 </body>
 </html>

js/api.js

@@ -1,190 +0,0 @@
-/**
- * 超天才クイズ v2.0.0 - API Client
- *
- * GAS APIとの通信を担当
- */
-
-const API = {
-    // GAS API URL（v2用デプロイメント @54 - 一括生成・検証パート追加）
-    BASE_URL: 'https://script.google.com/macros/s/AKfycbyo8CX6bDA4uP2sx-Jb1USt6l_615ACFYGpn4Bf_whpOZEhEKO6J8neHVjDunVGDnj8/exec',
-
-    /**
-     * GAS APIを呼び出し
-     *
-     * @param {string} action - アクション名
-     * @param {Object} params - パラメータ
-     * @returns {Promise<Object>} - APIレスポンス
-     */
-    async call(action, params = {}) {
-        const url = new URL(this.BASE_URL);
-        url.searchParams.set('action', action);
-
-        // パラメータを追加
-        for (const [key, value] of Object.entries(params)) {
-            if (value !== undefined && value !== null) {
-                url.searchParams.set(key, typeof value === 'object' ? JSON.stringify(value) : value);
-            }
-        }
-
-        try {
-            const response = await fetch(url.toString(), {
-                method: 'GET',
-                mode: 'cors'
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error: ${response.status}`);
-            }
-
-            return await response.json();
-        } catch (error) {
-            console.error('API call error:', error);
-            return { success: false, error: error.message };
-        }
-    },
-
-    /**
-     * POSTリクエスト（大きなデータ送信用）
-     *
-     * @param {string} action - アクション名
-     * @param {Object} data - 送信データ
-     * @returns {Promise<Object>} - APIレスポンス
-     */
-    async post(action, data = {}) {
-        try {
-            // text/plain を使用してプリフライト(OPTIONS)を回避
-            // GASはOPTIONSリクエストを処理できないため
-            const response = await fetch(this.BASE_URL, {
-                method: 'POST',
-                mode: 'cors',
-                headers: {
-                    'Content-Type': 'text/plain'
-                },
-                body: JSON.stringify({ action, ...data })
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error: ${response.status}`);
-            }
-
-            return await response.json();
-        } catch (error) {
-            console.error('API post error:', error);
-            return { success: false, error: error.message };
-        }
-    },
-
-    // ======================================
-    // 認証API
-    // ======================================
-
-    /**
-     * トークンを検証
-     *
-     * @param {string} token - トークン
-     * @returns {Promise<Object>} - { success, is_valid, user_id }
-     */
-    async verifyToken(token) {
-        return this.call('v2_verify_token', { token });
-    },
-
-    /**
-     * トークンを生成
-     *
-     * @param {string} userId - ユーザーID
-     * @returns {Promise<Object>} - { success, token, expires_at }
-     */
-    async generateToken(userId) {
-        return this.call('v2_generate_token', { user_id: userId });
-    },
-
-    /**
-     * ユーザー登録（v1のregister_userを流用）
-     *
-     * @param {string} name - ユーザー名
-     * @returns {Promise<Object>} - { success, user_id }
-     */
-    async registerUser(name) {
-        return this.call('register_user', { username: name });
-    },
-
-    // ======================================
-    // 配信API
-    // ======================================
-
-    /**
-     * 配信問題を取得
-     *
-     * @param {string} quizId - クイズID
-     * @param {string} userId - ユーザーID
-     * @returns {Promise<Object>} - { success, quiz, questions }
-     */
-    async getDeliveryQuiz(quizId, userId) {
-        return this.call('v2_get_delivery', { quiz_id: quizId, user_id: userId });
-    },
-
-    /**
-     * 回答を送信
-     *
-     * @param {string} userId - ユーザーID
-     * @param {string} quizId - クイズID
-     * @param {Array} answers - 回答リスト
-     * @param {number} timeRemaining - 残り時間（秒）
-     * @returns {Promise<Object>} - { success, result }
-     */
-    async submitDeliveryAnswers(userId, quizId, answers, timeRemaining) {
-        return this.post('v2_submit_delivery', {
-            user_id: userId,
-            quiz_id: quizId,
-            answers: answers,
-            time_remaining: timeRemaining
-        });
-    },
-
-    // ======================================
-    // ランキングAPI
-    // ======================================
-
-    /**
-     * ランキングを取得
-     *
-     * @param {string} date - 日付（YYYY-MM-DD）
-     * @param {string} type - ランキング種類（total/jp/math/sci/soc）
-     * @returns {Promise<Object>} - { success, rankings }
-     */
-    async getRanking(date, type) {
-        return this.call('v2_get_ranking', { date, type });
-    },
-
-    // ======================================
-    // ユーザーAPI
-    // ======================================
-
-    /**
-     * ユーザープロフィールを取得
-     *
-     * @param {string} userId - ユーザーID
-     * @returns {Promise<Object>} - { success, profile }
-     */
-    async getUserProfile(userId) {
-        return this.call('v2_get_user_profile', { user_id: userId });
-    },
-
-    // ======================================
-    // ステータスAPI
-    // ======================================
-
-    /**
-     * v2システム状態を確認
-     *
-     * @returns {Promise<Object>} - { success, status }
-     */
-    async checkStatus() {
-        return this.call('v2_check_status');
-    }
-};
-
-// デバッグ用
-if (typeof window !== 'undefined') {
-    window.API = API;
-}

js/apiClient.js

@@ -0,0 +1,251 @@
+// --- APIクライアント（v2.0.0 配信モード用） ---
+const ApiClient = {
+    /**
+     * GAS API呼び出し（GET形式）
+     * @param {string} action - アクション名
+     * @param {Object} params - パラメータ
+     * @param {string} operationName - 操作名（ログ用）
+     * @returns {Promise<Object>} APIレスポンス
+     */
+    async _callApi(action, params, operationName) {
+        console.log(`[ApiClient] ${operationName} - Request:`, { action, params });
+
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), API_CONFIG.TIMEOUT);
+
+            const url = new URL(API_CONFIG.BASE_URL);
+            url.searchParams.set('action', action);
+
+            // パラメータを追加
+            for (const [key, value] of Object.entries(params)) {
+                if (value !== undefined && value !== null) {
+                    url.searchParams.set(key, typeof value === 'object' ? JSON.stringify(value) : value);
+                }
+            }
+
+            const response = await fetch(url.toString(), {
+                method: 'GET',
+                mode: 'cors',
+                signal: controller.signal
+            });
+
+            clearTimeout(timeoutId);
+
+            if (!response.ok) {
+                console.error(`[ApiClient] ${operationName} - HTTP Error:`, response.status);
+                return {
+                    success: false,
+                    error: { code: 'HTTP_ERROR', message: `HTTPエラー: ${response.status}` }
+                };
+            }
+
+            const result = await response.json();
+            console.log(`[ApiClient] ${operationName} - Response:`, result);
+
+            // GAS形式の変換
+            if (result.status === 'success') {
+                return { success: true, data: result.data || result, ...result };
+            } else if (result.status === 'error') {
+                return { success: false, error: { message: result.message || 'APIエラー' } };
+            }
+
+            return result;
+
+        } catch (error) {
+            console.error(`[ApiClient] ${operationName} - Error:`, error);
+
+            let errorMessage = 'APIとの通信に失敗しました';
+            if (error.name === 'AbortError') {
+                errorMessage = '通信がタイムアウトしました';
+            }
+
+            return {
+                success: false,
+                error: { code: 'NETWORK_ERROR', message: errorMessage }
+            };
+        }
+    },
+
+    /**
+     * GAS API呼び出し（POST形式 - 大きなデータ送信用）
+     * @param {string} action - アクション名
+     * @param {Object} data - 送信データ
+     * @param {string} operationName - 操作名（ログ用）
+     * @returns {Promise<Object>} APIレスポンス
+     */
+    async _postApi(action, data, operationName) {
+        console.log(`[ApiClient] ${operationName} - POST Request:`, { action, data });
+
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), API_CONFIG.TIMEOUT);
+
+            // text/plainでプリフライト回避（GASはOPTIONS未対応）
+            const response = await fetch(API_CONFIG.BASE_URL, {
+                method: 'POST',
+                mode: 'cors',
+                headers: { 'Content-Type': 'text/plain' },
+                body: JSON.stringify({ action, ...data }),
+                signal: controller.signal
+            });
+
+            clearTimeout(timeoutId);
+
+            if (!response.ok) {
+                console.error(`[ApiClient] ${operationName} - HTTP Error:`, response.status);
+                return {
+                    success: false,
+                    error: { code: 'HTTP_ERROR', message: `HTTPエラー: ${response.status}` }
+                };
+            }
+
+            const result = await response.json();
+            console.log(`[ApiClient] ${operationName} - Response:`, result);
+
+            return result;
+
+        } catch (error) {
+            console.error(`[ApiClient] ${operationName} - Error:`, error);
+            return {
+                success: false,
+                error: { code: 'NETWORK_ERROR', message: 'APIとの通信に失敗しました' }
+            };
+        }
+    },
+
+    // ======================================
+    // 認証API
+    // ======================================
+
+    /**
+     * ユーザー登録
+     * @param {string} username - ユーザー名
+     * @param {string} password - パスワード（v2では未使用、互換性維持）
+     * @param {string} inviteCode - 招待コード（v2では未使用、互換性維持）
+     * @returns {Promise<Object>}
+     */
+    async registerUser(username, password = '', inviteCode = '') {
+        const result = await this._callApi('register_user', { username }, 'registerUser');
+
+        if (result.success || result.status === 'success') {
+            // v2形式に統一
+            return {
+                success: true,
+                data: {
+                    user_id: result.user_id || result.data?.user_id,
+                    username: username
+                }
+            };
+        }
+        return result;
+    },
+
+    /**
+     * ログイン（v2ではregisterUserと同じ - 簡易認証）
+     * @param {string} username - ユーザー名
+     * @param {string} password - パスワード（v2では未使用）
+     * @returns {Promise<Object>}
+     */
+    async login(username, password = '') {
+        // v2は簡易認証なのでregisterUserを流用
+        return this.registerUser(username, password);
+    },
+
+    // ======================================
+    // 配信API（v2専用）
+    // ======================================
+
+    /**
+     * 今日の配信クイズ一覧を取得
+     * @param {string} userId - ユーザーID
+     * @returns {Promise<Object>}
+     */
+    async getTodayQuizzes(userId) {
+        return this._callApi('v2_get_today_quizzes', { user_id: userId }, 'getTodayQuizzes');
+    },
+
+    /**
+     * 配信クイズを取得
+     * @param {string} quizId - クイズID
+     * @param {string} userId - ユーザーID
+     * @returns {Promise<Object>}
+     */
+    async getDeliveryQuiz(quizId, userId) {
+        return this._callApi('v2_get_delivery', { quiz_id: quizId, user_id: userId }, 'getDeliveryQuiz');
+    },
+
+    /**
+     * 回答を送信
+     * @param {string} userId - ユーザーID
+     * @param {string} quizId - クイズID
+     * @param {Array} answers - 回答リスト
+     * @param {number} timeRemaining - 残り時間（秒）
+     * @returns {Promise<Object>}
+     */
+    async submitDeliveryAnswers(userId, quizId, answers, timeRemaining) {
+        return this._postApi('v2_submit_delivery', {
+            user_id: userId,
+            quiz_id: quizId,
+            answers: answers,
+            time_remaining: timeRemaining
+        }, 'submitDeliveryAnswers');
+    },
+
+    // ======================================
+    // ランキングAPI
+    // ======================================
+
+    /**
+     * ランキングを取得
+     * @param {string} date - 日付（YYYY-MM-DD）
+     * @param {string} type - ランキング種類（total/jp/math/sci/soc）
+     * @returns {Promise<Object>}
+     */
+    async getRanking(date, type = 'total') {
+        return this._callApi('v2_get_ranking', { date, type }, 'getRanking');
+    },
+
+    // ======================================
+    // ユーザーAPI
+    // ======================================
+
+    /**
+     * ユーザープロフィールを取得
+     * @param {string} userId - ユーザーID
+     * @returns {Promise<Object>}
+     */
+    async getUserProfile(userId) {
+        return this._callApi('v2_get_user_profile', { user_id: userId }, 'getUserProfile');
+    },
+
+    /**
+     * トークン検証
+     * @param {string} token - トークン
+     * @returns {Promise<Object>}
+     */
+    async verifyToken(token) {
+        return this._callApi('v2_verify_token', { token }, 'verifyToken');
+    },
+
+    /**
+     * トークン生成
+     * @param {string} userId - ユーザーID
+     * @returns {Promise<Object>}
+     */
+    async generateToken(userId) {
+        return this._callApi('v2_generate_token', { user_id: userId }, 'generateToken');
+    },
+
+    // ======================================
+    // システムAPI
+    // ======================================
+
+    /**
+     * v2システム状態確認
+     * @returns {Promise<Object>}
+     */
+    async checkStatus() {
+        return this._callApi('v2_check_status', {}, 'checkStatus');
+    }
+};

js/auth.js

@@ -1,180 +0,0 @@
-/**
- * 超天才クイズ v2.0.0 - 認証モジュール
- *
- * トークン管理とログイン処理を担当
- */
-
-const Auth = {
-    // localStorage キー
-    STORAGE_KEY: 'cho_tensai_v2_user',
-
-    /**
-     * ログイン状態をチェック
-     *
-     * @returns {Promise<boolean>} - ログイン済みかどうか
-     */
-    async checkLogin() {
-        const userData = this.getUser();
-
-        if (!userData || !userData.token) {
-            return false;
-        }
-
-        // トークンの有効期限をローカルでチェック
-        if (userData.tokenExpiresAt) {
-            const expiresAt = new Date(userData.tokenExpiresAt);
-            if (new Date() > expiresAt) {
-                this.logout();
-                return false;
-            }
-        }
-
-        // サーバーでトークン検証（オプション）
-        try {
-            const result = await API.verifyToken(userData.token);
-            if (result.success && result.is_valid) {
-                return true;
-            } else {
-                this.logout();
-                return false;
-            }
-        } catch (e) {
-            // オフライン時はローカルのトークンを信頼
-            console.warn('Token verification failed, using local data');
-            return true;
-        }
-    },
-
-    /**
-     * ログイン処理
-     *
-     * @param {string} name - ユーザー名
-     * @returns {Promise<Object>} - { success, user }
-     */
-    async login(name) {
-        try {
-            // まずユーザー登録（既存ユーザーの場合はuser_id取得）
-            const registerResult = await API.registerUser(name);
-
-            // GASレスポンス形式: { status: "success", data: { user_id: "..." } }
-            if (registerResult.status !== 'success') {
-                return { success: false, error: registerResult.message || '登録に失敗しました' };
-            }
-
-            const userId = registerResult.data.user_id;
-
-            // トークンを生成
-            const tokenResult = await API.generateToken(userId);
-
-            if (!tokenResult.success) {
-                return { success: false, error: tokenResult.error || 'トークン生成に失敗しました' };
-            }
-
-            // ユーザー情報を保存
-            const userData = {
-                id: userId,
-                name: name,
-                token: tokenResult.token,
-                tokenExpiresAt: tokenResult.expires_at,
-                loginAt: new Date().toISOString()
-            };
-
-            this.saveUser(userData);
-
-            return { success: true, user: userData };
-
-        } catch (error) {
-            console.error('Login error:', error);
-            return { success: false, error: error.message };
-        }
-    },
-
-    /**
-     * URLパラメータのトークンを検証して保存
-     *
-     * @param {string} token - URLから取得したトークン
-     * @returns {Promise<boolean>} - 成功したかどうか
-     */
-    async verifyAndSaveToken(token) {
-        try {
-            const result = await API.verifyToken(token);
-
-            if (result.success && result.is_valid) {
-                // プロフィールを取得してユーザー名を得る
-                const profileResult = await API.getUserProfile(result.user_id);
-
-                const userData = {
-                    id: result.user_id,
-                    name: profileResult.success ? (profileResult.profile?.display_name || 'ユーザー') : 'ユーザー',
-                    token: token,
-                    tokenExpiresAt: null, // サーバー側で管理
-                    loginAt: new Date().toISOString()
-                };
-
-                this.saveUser(userData);
-                return true;
-            }
-
-            return false;
-
-        } catch (error) {
-            console.error('Token verification error:', error);
-            return false;
-        }
-    },
-
-    /**
-     * ログアウト
-     */
-    logout() {
-        localStorage.removeItem(this.STORAGE_KEY);
-    },
-
-    /**
-     * ユーザー情報を取得
-     *
-     * @returns {Object|null} - ユーザー情報
-     */
-    getUser() {
-        try {
-            const data = localStorage.getItem(this.STORAGE_KEY);
-            return data ? JSON.parse(data) : null;
-        } catch (e) {
-            return null;
-        }
-    },
-
-    /**
-     * ユーザー情報を保存
-     *
-     * @param {Object} userData - ユーザー情報
-     */
-    saveUser(userData) {
-        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(userData));
-    },
-
-    /**
-     * トークンを取得
-     *
-     * @returns {string|null} - トークン
-     */
-    getToken() {
-        const user = this.getUser();
-        return user ? user.token : null;
-    },
-
-    /**
-     * ユーザーIDを取得
-     *
-     * @returns {string|null} - ユーザーID
-     */
-    getUserId() {
-        const user = this.getUser();
-        return user ? user.id : null;
-    }
-};
-
-// デバッグ用
-if (typeof window !== 'undefined') {
-    window.Auth = Auth;
-}

js/components.js

@@ -0,0 +1,875 @@
+// --- v2.0.0 配信モード Reactコンポーネント ---
+const { useState, useEffect, useRef } = React;
+
+// ======================================
+// 1. ログイン画面
+// ======================================
+const LoginScreen = ({ onStart }) => {
+    const [mode, setMode] = useState('select'); // 'select' | 'login' | 'register'
+    const [name, setName] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordConfirm, setPasswordConfirm] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const handleLogin = async () => {
+        if (!name.trim()) {
+            setError('ユーザー名を入力してください');
+            return;
+        }
+        setError('');
+        setIsLoading(true);
+
+        try {
+            const result = await ApiClient.login(name.trim(), password);
+            console.log('[LoginScreen] ログイン結果:', result);
+
+            if (result.success) {
+                SessionManager.clearAll();
+                SessionManager.setUser(result.data);
+                onStart(name.trim());
+            } else {
+                setError(result.error?.message || 'ログインに失敗しました');
+            }
+        } catch (error) {
+            console.error('[LoginScreen] ログインエラー:', error);
+            setError('ログインに失敗しました');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleRegister = async () => {
+        if (!name.trim()) {
+            setError('ユーザー名を入力してください');
+            return;
+        }
+        setError('');
+        setIsLoading(true);
+
+        try {
+            const result = await ApiClient.registerUser(name.trim(), password);
+            console.log('[LoginScreen] ユーザー登録結果:', result);
+
+            if (result.success) {
+                SessionManager.clearAll();
+                SessionManager.setUser(result.data);
+                onStart(name.trim());
+            } else {
+                setError(result.error?.message || '登録に失敗しました');
+            }
+        } catch (error) {
+            console.error('[LoginScreen] 登録エラー:', error);
+            setError('登録に失敗しました');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex flex-col items-center justify-center p-6 fade-in relative overflow-hidden">
+            {/* 背景オーブ */}
+            <div className="orb w-64 h-64 bg-subject-soc top-10 -left-10 blur-3xl opacity-30"></div>
+            <div className="orb w-64 h-64 bg-subject-math bottom-10 -right-10 blur-3xl opacity-30" style={{animationDelay: '-5s'}}></div>
+
+            <div className="w-full max-w-sm bg-white/80 backdrop-blur-md rounded-[32px] shadow-glass p-10 text-center border border-white/60 relative">
+                <div className="relative z-10 flex flex-col items-center">
+                    <div className="mb-6 p-4 bg-gradient-to-br from-white to-gray-50 rounded-full shadow-inner-light">
+                        <Icons.Book className="w-16 h-16 text-gold" />
+                    </div>
+
+                    <h1 className="text-3xl font-serif font-bold text-accent-brown mb-3 tracking-widest">超天才クイズ</h1>
+                    <p className="text-xs text-soft-brown mb-2 font-serif tracking-widest">配信モード v2.0.0</p>
+                    <p className="text-xs text-soft-brown mb-10 font-serif tracking-widest leading-relaxed">
+                        毎日の問題に挑戦しよう
+                    </p>
+
+                    {/* モード選択 */}
+                    {mode === 'select' && (
+                        <div className="w-full space-y-4">
+                            <button
+                                onClick={() => setMode('login')}
+                                className="w-full py-4 rounded-full bg-accent-brown text-white font-serif tracking-wider shadow-lg hover:shadow-xl hover:bg-gold transform hover:-translate-y-0.5 transition-all duration-300 active:scale-95"
+                            >
+                                ログイン
+                            </button>
+                            <button
+                                onClick={() => setMode('register')}
+                                className="w-full py-4 rounded-full bg-white border-2 border-accent-brown text-accent-brown font-serif tracking-wider shadow-md hover:shadow-lg hover:bg-accent-brown hover:text-white transform hover:-translate-y-0.5 transition-all duration-300 active:scale-95"
+                            >
+                                新規登録
+                            </button>
+                        </div>
+                    )}
+
+                    {/* ログインモード */}
+                    {mode === 'login' && (
+                        <div className="w-full space-y-5">
+                            <div className="relative group">
+                                <label className="absolute -top-2.5 left-4 bg-white px-2 text-xs text-gold font-bold">ユーザー名</label>
+                                <input
+                                    type="text"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    placeholder="例: taro_yamada"
+                                    className="w-full bg-white border border-gray-200 rounded-xl px-5 py-4 focus:outline-none focus:border-gold/50 focus:ring-1 focus:ring-gold/50 transition-all text-accent-brown placeholder-gray-300 text-center font-serif text-lg shadow-sm"
+                                />
+                            </div>
+
+                            {error && (
+                                <p className="text-red-500 text-sm font-serif">{error}</p>
+                            )}
+
+                            <button
+                                onClick={handleLogin}
+                                disabled={isLoading}
+                                className="w-full py-4 rounded-full bg-accent-brown text-white font-serif tracking-wider shadow-lg hover:shadow-xl hover:bg-gold transform hover:-translate-y-0.5 transition-all duration-300 active:scale-95 flex items-center justify-center space-x-2 disabled:opacity-50"
+                            >
+                                {isLoading ? (
+                                    <span className="animate-spin">...</span>
+                                ) : (
+                                    <span>ログインする</span>
+                                )}
+                            </button>
+
+                            <button
+                                onClick={() => { setMode('select'); setError(''); }}
+                                className="w-full py-2 text-soft-brown text-sm hover:text-accent-brown transition-colors"
+                            >
+                                戻る
+                            </button>
+                        </div>
+                    )}
+
+                    {/* 新規登録モード */}
+                    {mode === 'register' && (
+                        <div className="w-full space-y-5">
+                            <div className="relative group">
+                                <label className="absolute -top-2.5 left-4 bg-white px-2 text-xs text-gold font-bold">ユーザー名</label>
+                                <input
+                                    type="text"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    placeholder="新しいユーザー名"
+                                    className="w-full bg-white border border-gray-200 rounded-xl px-5 py-4 focus:outline-none focus:border-gold/50 focus:ring-1 focus:ring-gold/50 transition-all text-accent-brown placeholder-gray-300 text-center font-serif text-lg shadow-sm"
+                                />
+                            </div>
+
+                            {error && (
+                                <p className="text-red-500 text-sm font-serif">{error}</p>
+                            )}
+
+                            <button
+                                onClick={handleRegister}
+                                disabled={isLoading}
+                                className="w-full py-4 rounded-full bg-accent-brown text-white font-serif tracking-wider shadow-lg hover:shadow-xl hover:bg-gold transform hover:-translate-y-0.5 transition-all duration-300 active:scale-95 flex items-center justify-center space-x-2 disabled:opacity-50"
+                            >
+                                {isLoading ? (
+                                    <span className="animate-spin">...</span>
+                                ) : (
+                                    <span>登録する</span>
+                                )}
+                            </button>
+
+                            <button
+                                onClick={() => { setMode('select'); setError(''); }}
+                                className="w-full py-2 text-soft-brown text-sm hover:text-accent-brown transition-colors"
+                            >
+                                戻る
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ======================================
+// 2. ホーム画面（配信クイズ一覧）
+// ======================================
+const HomeScreen = ({ onStartQuiz, onShowRanking, onLogout }) => {
+    const [quizzes, setQuizzes] = useState([]);
+    const [profile, setProfile] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    const user = SessionManager.getUser();
+
+    const subjectNames = {
+        jp: '国語',
+        math: '算数',
+        sci: '理科',
+        soc: '社会'
+    };
+
+    const subjectColors = {
+        jp: 'bg-subject-jp',
+        math: 'bg-subject-math',
+        sci: 'bg-subject-sci',
+        soc: 'bg-subject-soc'
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        setIsLoading(true);
+        try {
+            // プロフィール取得
+            const profileResult = await ApiClient.getUserProfile(user.user_id);
+            if (profileResult.success) {
+                setProfile(profileResult.profile || profileResult.data);
+            }
+
+            // 今日のクイズ一覧取得
+            const quizzesResult = await ApiClient.getTodayQuizzes(user.user_id);
+            if (quizzesResult.success) {
+                setQuizzes(quizzesResult.quizzes || []);
+            }
+        } catch (e) {
+            setError('データの読み込みに失敗しました');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const formatDate = () => {
+        const now = new Date();
+        const month = now.getMonth() + 1;
+        const day = now.getDate();
+        const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
+        return `${month}月${day}日（${weekdays[now.getDay()]}）`;
+    };
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p className="text-soft-brown font-serif">読み込み中...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen p-6 fade-in relative overflow-hidden">
+            {/* 背景オーブ */}
+            <div className="orb w-64 h-64 bg-subject-jp top-20 -right-20 blur-3xl opacity-20"></div>
+            <div className="orb w-64 h-64 bg-subject-sci bottom-20 -left-20 blur-3xl opacity-20" style={{animationDelay: '-3s'}}></div>
+
+            <div className="max-w-md mx-auto">
+                {/* ヘッダー */}
+                <div className="text-center mb-8">
+                    <p className="text-soft-brown text-sm font-serif">{formatDate()}</p>
+                    <h1 className="text-2xl font-serif font-bold text-accent-brown mt-2">今日のクイズ</h1>
+                </div>
+
+                {/* ユーザー情報 */}
+                <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-glass p-6 mb-6 border border-white/60">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-sm text-soft-brown">ようこそ</p>
+                            <p className="text-lg font-bold text-accent-brown">{user.username || user.user_id}</p>
+                        </div>
+                        <div className="text-right">
+                            <p className="text-sm text-soft-brown">累計ポイント</p>
+                            <p className="text-2xl font-bold text-gold">{profile?.total_points || 0}</p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* クイズ一覧 */}
+                <div className="space-y-4 mb-6">
+                    {quizzes.length === 0 ? (
+                        <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-glass p-8 text-center border border-white/60">
+                            <Icons.Book className="w-12 h-12 text-soft-brown mx-auto mb-4 opacity-50" />
+                            <p className="text-soft-brown font-serif">今日の配信はまだありません</p>
+                            <p className="text-xs text-soft-brown/60 mt-2">朝6:00と夕方15:00に配信されます</p>
+                        </div>
+                    ) : (
+                        quizzes.map((quiz, index) => (
+                            <div
+                                key={quiz.quiz_id || index}
+                                className="bg-white/80 backdrop-blur-md rounded-2xl shadow-glass p-6 border border-white/60"
+                            >
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-4">
+                                        <div className={`w-12 h-12 rounded-full ${subjectColors[quiz.subject] || 'bg-gray-200'} flex items-center justify-center`}>
+                                            <span className="text-white font-bold text-lg">
+                                                {subjectNames[quiz.subject]?.charAt(0) || '?'}
+                                            </span>
+                                        </div>
+                                        <div>
+                                            <p className="font-bold text-accent-brown">{subjectNames[quiz.subject] || quiz.subject}</p>
+                                            <p className="text-xs text-soft-brown">{quiz.time_slot === 'morning' ? '朝の配信' : '夕方の配信'}</p>
+                                        </div>
+                                    </div>
+                                    <button
+                                        onClick={() => onStartQuiz(quiz.quiz_id)}
+                                        className="px-6 py-2 rounded-full bg-accent-brown text-white text-sm font-serif hover:bg-gold transition-all shadow-md hover:shadow-lg active:scale-95"
+                                    >
+                                        挑戦する
+                                    </button>
+                                </div>
+                            </div>
+                        ))
+                    )}
+                </div>
+
+                {/* アクションボタン */}
+                <div className="space-y-3">
+                    <button
+                        onClick={onShowRanking}
+                        className="w-full py-4 rounded-2xl bg-white/80 backdrop-blur-md border border-white/60 text-accent-brown font-serif shadow-glass hover:bg-white/90 transition-all"
+                    >
+                        ランキングを見る
+                    </button>
+                    <button
+                        onClick={onLogout}
+                        className="w-full py-3 text-soft-brown text-sm hover:text-accent-brown transition-colors"
+                    >
+                        ログアウト
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ======================================
+// 3. クイズ画面（4択UI）
+// ======================================
+const QuizScreen = ({ quizId, onFinish }) => {
+    const [questions, setQuestions] = useState([]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [answers, setAnswers] = useState([]);
+    const [timeRemaining, setTimeRemaining] = useState(180); // 3分
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState('');
+    const [quizInfo, setQuizInfo] = useState(null);
+
+    const user = SessionManager.getUser();
+    const timerRef = useRef(null);
+
+    const subjectNames = {
+        jp: '国語',
+        math: '算数',
+        sci: '理科',
+        soc: '社会'
+    };
+
+    useEffect(() => {
+        loadQuiz();
+        return () => {
+            if (timerRef.current) clearInterval(timerRef.current);
+        };
+    }, []);
+
+    const loadQuiz = async () => {
+        try {
+            const result = await ApiClient.getDeliveryQuiz(quizId, user.user_id);
+            if (result.success) {
+                setQuestions(result.questions || []);
+                setQuizInfo(result.quiz);
+                setAnswers(new Array(result.questions.length).fill(null));
+                startTimer();
+            } else {
+                setError(result.error?.message || '問題の取得に失敗しました');
+            }
+        } catch (e) {
+            setError('エラーが発生しました');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const startTimer = () => {
+        timerRef.current = setInterval(() => {
+            setTimeRemaining(prev => {
+                if (prev <= 1) {
+                    clearInterval(timerRef.current);
+                    submitAllAnswers();
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+    };
+
+    const handleSelectAnswer = (choiceIndex) => {
+        const question = questions[currentIndex];
+        const selectedAnswer = question.choices[choiceIndex];
+
+        const newAnswers = [...answers];
+        newAnswers[currentIndex] = {
+            question_id: question.id || question.ID,
+            subject: question.subject || question.SUBJECT,
+            category: question.category || question.CATEGORY,
+            user_answer: selectedAnswer,
+            correct_answer: question.answer || question.ANSWER,
+            is_correct: normalizeAnswer(selectedAnswer) === normalizeAnswer(question.answer || question.ANSWER)
+        };
+        setAnswers(newAnswers);
+
+        // 次の問題へ or 採点
+        setTimeout(() => {
+            if (currentIndex >= questions.length - 1) {
+                submitAllAnswers(newAnswers);
+            } else {
+                setCurrentIndex(currentIndex + 1);
+            }
+        }, 300);
+    };
+
+    const normalizeAnswer = (answer) => {
+        if (!answer) return '';
+        return answer.toString()
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .replace(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
+            .replace(/[Ａ-Ｚａ-ｚ]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
+    };
+
+    const submitAllAnswers = async (finalAnswers = answers) => {
+        if (isSubmitting) return;
+        setIsSubmitting(true);
+
+        if (timerRef.current) clearInterval(timerRef.current);
+
+        try {
+            const result = await ApiClient.submitDeliveryAnswers(
+                user.user_id,
+                quizId,
+                finalAnswers.filter(a => a !== null),
+                timeRemaining
+            );
+
+            if (result.success) {
+                // 結果データをsessionStorageに保存
+                sessionStorage.setItem('quizResult', JSON.stringify({
+                    result: result.result,
+                    answers: finalAnswers,
+                    questions: questions
+                }));
+                onFinish(result);
+            } else {
+                setError(result.error?.message || '採点に失敗しました');
+            }
+        } catch (e) {
+            setError('エラーが発生しました');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const formatTime = (seconds) => {
+        const m = Math.floor(seconds / 60);
+        const s = seconds % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    };
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p className="text-soft-brown font-serif">問題を読み込み中...</p>
+            </div>
+        );
+    }
+
+    if (isSubmitting) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p className="text-soft-brown font-serif">採点中...</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="min-h-screen flex flex-col items-center justify-center p-6">
+                <p className="text-red-500 font-serif mb-4">{error}</p>
+                <button
+                    onClick={() => window.location.reload()}
+                    className="px-6 py-2 rounded-full bg-accent-brown text-white font-serif"
+                >
+                    再読み込み
+                </button>
+            </div>
+        );
+    }
+
+    const question = questions[currentIndex];
+
+    return (
+        <div className="min-h-screen p-6 fade-in relative overflow-hidden">
+            {/* ヘッダー */}
+            <div className="max-w-md mx-auto">
+                <div className="flex items-center justify-between mb-6">
+                    <div className="flex items-center space-x-4">
+                        <span className="px-4 py-1 rounded-full bg-white/80 text-accent-brown text-sm font-serif shadow-sm">
+                            {subjectNames[quizInfo?.subject] || ''}
+                        </span>
+                        <span className="text-soft-brown text-sm">
+                            {currentIndex + 1} / {questions.length}
+                        </span>
+                    </div>
+                    <div className={`px-4 py-2 rounded-full font-bold text-white shadow-md ${timeRemaining <= 60 ? 'bg-red-500 animate-pulse' : 'bg-accent-brown'}`}>
+                        {formatTime(timeRemaining)}
+                    </div>
+                </div>
+
+                {/* 問題カード */}
+                <div className="bg-white/90 backdrop-blur-md rounded-3xl shadow-glass p-8 mb-6 border border-white/60">
+                    <div className="mb-4">
+                        <span className="px-3 py-1 rounded-full bg-subject-sci/20 text-subject-sci text-xs font-serif">
+                            {question.difficulty || question.DIFFICULTY || '標準'}
+                        </span>
+                    </div>
+                    <p className="text-lg text-accent-brown leading-relaxed font-serif">
+                        {question.question || question.QUESTION}
+                    </p>
+                </div>
+
+                {/* 選択肢 */}
+                <div className="space-y-3">
+                    {(question.choices || []).map((choice, index) => (
+                        <button
+                            key={index}
+                            onClick={() => handleSelectAnswer(index)}
+                            className="w-full p-5 rounded-2xl bg-white/80 backdrop-blur-md border-2 border-white/60 text-left font-serif text-accent-brown shadow-glass hover:border-gold hover:bg-white transition-all active:scale-98"
+                        >
+                            <span className="inline-block w-8 h-8 rounded-full bg-soft-brown/20 text-center leading-8 mr-3 text-sm">
+                                {['A', 'B', 'C', 'D'][index]}
+                            </span>
+                            {choice}
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ======================================
+// 4. 結果画面
+// ======================================
+const ResultScreen = ({ onBackHome, onShowRanking }) => {
+    const [resultData, setResultData] = useState(null);
+
+    useEffect(() => {
+        const stored = sessionStorage.getItem('quizResult');
+        if (stored) {
+            setResultData(JSON.parse(stored));
+        }
+    }, []);
+
+    if (!resultData) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p className="text-soft-brown font-serif">結果データがありません</p>
+            </div>
+        );
+    }
+
+    const { result, answers, questions } = resultData;
+    const correctCount = answers.filter(a => a?.is_correct).length;
+    const totalCount = questions.length;
+    const percentage = Math.round((correctCount / totalCount) * 100);
+
+    return (
+        <div className="min-h-screen p-6 fade-in relative overflow-hidden">
+            <div className="orb w-64 h-64 bg-gold top-10 right-10 blur-3xl opacity-20"></div>
+
+            <div className="max-w-md mx-auto">
+                {/* スコア表示 */}
+                <div className="bg-white/90 backdrop-blur-md rounded-3xl shadow-glass p-8 mb-6 text-center border border-white/60">
+                    <h1 className="text-2xl font-serif font-bold text-accent-brown mb-6">結果発表</h1>
+
+                    <div className="mb-6">
+                        <div className="text-6xl font-bold text-gold mb-2">
+                            {correctCount}<span className="text-2xl text-soft-brown">/{totalCount}</span>
+                        </div>
+                        <p className="text-soft-brown font-serif">正解</p>
+                    </div>
+
+                    <div className="bg-base-beige rounded-2xl p-4 mb-6">
+                        <div className="flex justify-between items-center">
+                            <span className="text-soft-brown">獲得ポイント</span>
+                            <span className="text-2xl font-bold text-gold">{result?.points_earned || 0} pt</span>
+                        </div>
+                    </div>
+
+                    {/* 正解率バー */}
+                    <div className="mb-4">
+                        <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-gradient-to-r from-gold to-subject-soc rounded-full transition-all duration-1000"
+                                style={{ width: `${percentage}%` }}
+                            ></div>
+                        </div>
+                        <p className="text-sm text-soft-brown mt-2">正解率 {percentage}%</p>
+                    </div>
+                </div>
+
+                {/* 回答詳細 */}
+                <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-glass p-6 mb-6 border border-white/60">
+                    <h2 className="text-lg font-serif font-bold text-accent-brown mb-4">回答詳細</h2>
+                    <div className="space-y-3 max-h-64 overflow-y-auto">
+                        {answers.map((answer, index) => (
+                            <div
+                                key={index}
+                                className={`p-4 rounded-xl ${answer?.is_correct ? 'bg-green-50 border-l-4 border-green-400' : 'bg-red-50 border-l-4 border-red-400'}`}
+                            >
+                                <div className="flex items-center justify-between mb-2">
+                                    <span className="text-sm font-bold">問{index + 1}</span>
+                                    <span className={`text-sm ${answer?.is_correct ? 'text-green-600' : 'text-red-600'}`}>
+                                        {answer?.is_correct ? '正解' : '不正解'}
+                                    </span>
+                                </div>
+                                <p className="text-xs text-soft-brown mb-1">
+                                    あなたの回答: {answer?.user_answer || '未回答'}
+                                </p>
+                                {!answer?.is_correct && (
+                                    <p className="text-xs text-green-600">
+                                        正解: {answer?.correct_answer}
+                                    </p>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* アクションボタン */}
+                <div className="space-y-3">
+                    <button
+                        onClick={onShowRanking}
+                        className="w-full py-4 rounded-2xl bg-accent-brown text-white font-serif shadow-lg hover:bg-gold transition-all"
+                    >
+                        ランキングを見る
+                    </button>
+                    <button
+                        onClick={onBackHome}
+                        className="w-full py-4 rounded-2xl bg-white/80 backdrop-blur-md border border-white/60 text-accent-brown font-serif shadow-glass hover:bg-white/90 transition-all"
+                    >
+                        ホームに戻る
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ======================================
+// 5. ランキング画面
+// ======================================
+const RankingScreen = ({ onBack }) => {
+    const [rankings, setRankings] = useState([]);
+    const [selectedType, setSelectedType] = useState('total');
+    const [isLoading, setIsLoading] = useState(true);
+    const [myRank, setMyRank] = useState(null);
+
+    const user = SessionManager.getUser();
+
+    const types = [
+        { id: 'total', name: '総合' },
+        { id: 'jp', name: '国語' },
+        { id: 'math', name: '算数' },
+        { id: 'sci', name: '理科' },
+        { id: 'soc', name: '社会' }
+    ];
+
+    useEffect(() => {
+        loadRanking();
+    }, [selectedType]);
+
+    const loadRanking = async () => {
+        setIsLoading(true);
+        try {
+            const today = new Date().toISOString().split('T')[0];
+            const result = await ApiClient.getRanking(today, selectedType);
+            if (result.success) {
+                setRankings(result.rankings || []);
+                // 自分の順位を探す
+                const myData = result.rankings?.find(r => r.user_id === user.user_id);
+                setMyRank(myData);
+            }
+        } catch (e) {
+            console.error('ランキング取得エラー:', e);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const getRankStyle = (rank) => {
+        if (rank === 1) return 'bg-yellow-100 border-yellow-400';
+        if (rank === 2) return 'bg-gray-100 border-gray-400';
+        if (rank === 3) return 'bg-orange-100 border-orange-400';
+        return 'bg-white border-transparent';
+    };
+
+    return (
+        <div className="min-h-screen p-6 fade-in relative overflow-hidden">
+            <div className="orb w-64 h-64 bg-gold top-20 -left-20 blur-3xl opacity-20"></div>
+
+            <div className="max-w-md mx-auto">
+                {/* ヘッダー */}
+                <div className="flex items-center justify-between mb-6">
+                    <button
+                        onClick={onBack}
+                        className="p-2 rounded-full bg-white/80 text-accent-brown shadow-sm hover:bg-white transition-all"
+                    >
+                        ←
+                    </button>
+                    <h1 className="text-xl font-serif font-bold text-accent-brown">ランキング</h1>
+                    <div className="w-10"></div>
+                </div>
+
+                {/* タブ */}
+                <div className="flex space-x-2 mb-6 overflow-x-auto pb-2">
+                    {types.map(type => (
+                        <button
+                            key={type.id}
+                            onClick={() => setSelectedType(type.id)}
+                            className={`px-4 py-2 rounded-full text-sm font-serif whitespace-nowrap transition-all ${
+                                selectedType === type.id
+                                    ? 'bg-accent-brown text-white shadow-md'
+                                    : 'bg-white/80 text-soft-brown hover:bg-white'
+                            }`}
+                        >
+                            {type.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* 自分の順位 */}
+                {myRank && (
+                    <div className="bg-gold/20 backdrop-blur-md rounded-2xl p-6 mb-6 border border-gold/40">
+                        <p className="text-sm text-accent-brown mb-1">あなたの順位</p>
+                        <div className="flex items-baseline space-x-2">
+                            <span className="text-4xl font-bold text-gold">{myRank.rank || '-'}</span>
+                            <span className="text-soft-brown">位</span>
+                            <span className="ml-auto text-lg font-bold text-accent-brown">{myRank.points || 0} pt</span>
+                        </div>
+                    </div>
+                )}
+
+                {/* ランキングリスト */}
+                <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-glass border border-white/60 overflow-hidden">
+                    {isLoading ? (
+                        <div className="p-8 text-center">
+                            <p className="text-soft-brown">読み込み中...</p>
+                        </div>
+                    ) : rankings.length === 0 ? (
+                        <div className="p-8 text-center">
+                            <p className="text-soft-brown">まだデータがありません</p>
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-gray-100">
+                            {rankings.slice(0, 20).map((item, index) => (
+                                <div
+                                    key={item.user_id || index}
+                                    className={`flex items-center p-4 ${getRankStyle(item.rank)} ${item.user_id === user.user_id ? 'border-l-4 border-l-gold' : ''}`}
+                                >
+                                    <div className="w-10 text-center font-bold text-accent-brown">
+                                        {item.rank}
+                                    </div>
+                                    <div className="flex-1 ml-4">
+                                        <p className="font-serif text-accent-brown">{item.username || item.user_id}</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-bold text-gold">{item.points} pt</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ======================================
+// 6. メインアプリ
+// ======================================
+const App = () => {
+    const [screen, setScreen] = useState('login');
+    const [userName, setUserName] = useState('');
+    const [currentQuizId, setCurrentQuizId] = useState(null);
+
+    useEffect(() => {
+        // 既存ログインチェック
+        const user = SessionManager.getUser();
+        if (user) {
+            setUserName(user.username || user.user_id);
+            setScreen('home');
+        }
+
+        // URLパラメータからクイズIDを取得
+        const params = new URLSearchParams(window.location.search);
+        const quizId = params.get('d');
+        const token = params.get('t');
+
+        if (quizId) {
+            setCurrentQuizId(quizId);
+            if (user) {
+                setScreen('quiz');
+            }
+        }
+    }, []);
+
+    const handleStart = (name) => {
+        setUserName(name);
+        if (currentQuizId) {
+            setScreen('quiz');
+        } else {
+            setScreen('home');
+        }
+    };
+
+    const handleStartQuiz = (quizId) => {
+        setCurrentQuizId(quizId);
+        setScreen('quiz');
+    };
+
+    const handleQuizFinish = (result) => {
+        setScreen('result');
+    };
+
+    const handleLogout = () => {
+        SessionManager.clearAll();
+        setUserName('');
+        setScreen('login');
+    };
+
+    return (
+        <div className="min-h-screen bg-base-beige">
+            {screen === 'login' && (
+                <LoginScreen onStart={handleStart} />
+            )}
+            {screen === 'home' && (
+                <HomeScreen
+                    onStartQuiz={handleStartQuiz}
+                    onShowRanking={() => setScreen('ranking')}
+                    onLogout={handleLogout}
+                />
+            )}
+            {screen === 'quiz' && currentQuizId && (
+                <QuizScreen
+                    quizId={currentQuizId}
+                    onFinish={handleQuizFinish}
+                />
+            )}
+            {screen === 'result' && (
+                <ResultScreen
+                    onBackHome={() => { setCurrentQuizId(null); setScreen('home'); }}
+                    onShowRanking={() => setScreen('ranking')}
+                />
+            )}
+            {screen === 'ranking' && (
+                <RankingScreen onBack={() => setScreen('home')} />
+            )}
+        </div>
+    );
+};

js/config.js

@@ -0,0 +1,7 @@
+// --- API設定・定数 ---
+const API_CONFIG = {
+    // GAS API URL（v2用デプロイメント @54）
+    BASE_URL: 'https://script.google.com/macros/s/AKfycbyo8CX6bDA4uP2sx-Jb1USt6l_615ACFYGpn4Bf_whpOZEhEKO6J8neHVjDunVGDnj8/exec',
+    TIMEOUT: 300000,  // 300秒
+    USE_MOCK: false
+};

js/icons.js

@@ -0,0 +1,67 @@
+// --- アイコンコンポーネント (SVG) ---
+// 繊細な線画アイコンで高級感を出す
+const Icons = {
+    Book: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+        </svg>
+    ),
+    Pen: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
+            <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
+            <path d="M2 2l7.586 7.586"></path>
+            <circle cx="11" cy="11" r="2"></circle>
+        </svg>
+    ),
+    Flask: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <path d="M10 2v7.31"></path>
+            <path d="M14 2v7.31"></path>
+            <path d="M8.5 2h7"></path>
+            <path d="M14 9.3a6.5 6.5 0 1 1-4 0l4 0"></path>
+        </svg>
+    ),
+    Globe: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="2" y1="12" x2="22" y2="12"></line>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+        </svg>
+    ),
+    User: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+        </svg>
+    ),
+    Clock: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+    ),
+    Check: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+    ),
+    Sparkles: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" className={className}>
+            <path d="M12 2L9.5 9.5 2 12l7.5 2.5L12 22l2.5-7.5L22 12l-7.5-2.5z"></path>
+        </svg>
+    ),
+    ArrowLeft: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <line x1="19" y1="12" x2="5" y2="12"></line>
+            <polyline points="12 19 5 12 12 5"></polyline>
+        </svg>
+    ),
+    X: ({ className }) => (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+    )
+};

js/quiz.js

@@ -1,145 +0,0 @@
-/**
- * 超天才クイズ v2.0.0 - クイズユーティリティ
- *
- * クイズ関連のヘルパー関数
- */
-
-const QuizUtils = {
-    /**
-     * 回答を正規化（比較用）
-     *
-     * @param {string} answer - 回答文字列
-     * @returns {string} - 正規化された回答
-     */
-    normalizeAnswer(answer) {
-        if (!answer) return '';
-
-        return answer.toString()
-            // 小文字に変換
-            .toLowerCase()
-            // 空白を除去
-            .replace(/\s+/g, '')
-            // 全角数字を半角に
-            .replace(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
-            // 全角英字を半角に
-            .replace(/[Ａ-Ｚａ-ｚ]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
-            // 全角カッコを半角に
-            .replace(/（/g, '(')
-            .replace(/）/g, ')')
-            // ハイフン統一
-            .replace(/[ー－—]/g, '-');
-    },
-
-    /**
-     * 回答が正解かどうかを判定
-     *
-     * @param {string} userAnswer - ユーザーの回答
-     * @param {string} correctAnswer - 正解
-     * @returns {boolean} - 正解かどうか
-     */
-    isCorrect(userAnswer, correctAnswer) {
-        const normalizedUser = this.normalizeAnswer(userAnswer);
-        const normalizedCorrect = this.normalizeAnswer(correctAnswer);
-
-        // 完全一致
-        if (normalizedUser === normalizedCorrect) {
-            return true;
-        }
-
-        // 複数正解対応（「/」または「、」で区切られている場合）
-        const alternatives = correctAnswer.split(/[\/、,]/).map(a => this.normalizeAnswer(a.trim()));
-        if (alternatives.includes(normalizedUser)) {
-            return true;
-        }
-
-        return false;
-    },
-
-    /**
-     * ポイントを計算
-     *
-     * @param {number} correctCount - 正解数
-     * @param {number} totalCount - 問題数
-     * @param {number} timeRemaining - 残り時間（秒）
-     * @returns {Object} - { correctPoints, timeBonus, totalPoints }
-     */
-    calculatePoints(correctCount, totalCount, timeRemaining) {
-        const accuracy = totalCount > 0 ? correctCount / totalCount : 0;
-        const correctPoints = correctCount * 100;
-        const timeBonus = Math.floor((timeRemaining || 0) * accuracy);
-        const totalPoints = correctPoints + timeBonus;
-
-        return {
-            correctPoints,
-            timeBonus,
-            totalPoints,
-            accuracy: Math.round(accuracy * 100)
-        };
-    },
-
-    /**
-     * 時間を MM:SS 形式でフォーマット
-     *
-     * @param {number} seconds - 秒数
-     * @returns {string} - フォーマットされた時間
-     */
-    formatTime(seconds) {
-        const mins = Math.floor(seconds / 60);
-        const secs = seconds % 60;
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    },
-
-    /**
-     * 教科名を取得
-     *
-     * @param {string} subjectCode - 教科コード
-     * @returns {string} - 教科名
-     */
-    getSubjectName(subjectCode) {
-        const names = {
-            jp: '国語',
-            math: '算数',
-            sci: '理科',
-            soc: '社会'
-        };
-        return names[subjectCode] || subjectCode;
-    },
-
-    /**
-     * クラス名を取得
-     *
-     * @param {number} level - クラスレベル（1-6）
-     * @returns {string} - クラス名
-     */
-    getClassName(level) {
-        const classes = {
-            1: '天才のたまご',
-            2: '天才の見習い',
-            3: '天才かも',
-            4: 'もうすぐ天才',
-            5: '天才',
-            6: '超天才'
-        };
-        return classes[level] || '天才のたまご';
-    },
-
-    /**
-     * 難易度の色を取得
-     *
-     * @param {string} difficulty - 難易度
-     * @returns {string} - CSSカラークラス
-     */
-    getDifficultyColor(difficulty) {
-        const colors = {
-            '基本': 'success',
-            '標準': 'primary',
-            '応用': 'warning'
-        };
-        return colors[difficulty] || 'primary';
-    }
-};
-
-// デバッグ用
-if (typeof window !== 'undefined') {
-    window.QuizUtils = QuizUtils;
-}

js/sessionManager.js

@@ -0,0 +1,97 @@
+// --- セッション管理（localStorage） ---
+const SessionManager = {
+    // ユーザー情報
+    setUser(user) {
+        console.log('[SessionManager] setUser:', user);
+        localStorage.setItem('quiz_user', JSON.stringify(user));
+    },
+    getUser() {
+        const data = localStorage.getItem('quiz_user');
+        const user = data ? JSON.parse(data) : null;
+        console.log('[SessionManager] getUser:', user);
+        return user;
+    },
+    clearUser() {
+        console.log('[SessionManager] clearUser');
+        localStorage.removeItem('quiz_user');
+    },
+
+    // セッション情報
+    setSession(session) {
+        console.log('[SessionManager] setSession:', session);
+        localStorage.setItem('quiz_session', JSON.stringify(session));
+    },
+    getSession() {
+        const data = localStorage.getItem('quiz_session');
+        const session = data ? JSON.parse(data) : null;
+        console.log('[SessionManager] getSession:', session);
+        return session;
+    },
+    clearSession() {
+        console.log('[SessionManager] clearSession');
+        localStorage.removeItem('quiz_session');
+    },
+
+    // 解答データ
+    setAnswers(answers) {
+        console.log('[SessionManager] setAnswers:', answers.length, 'answers');
+        localStorage.setItem('quiz_answers', JSON.stringify(answers));
+    },
+    getAnswers() {
+        const data = localStorage.getItem('quiz_answers');
+        const answers = data ? JSON.parse(data) : [];
+        console.log('[SessionManager] getAnswers:', answers.length, 'answers');
+        return answers;
+    },
+    addAnswer(answer) {
+        console.log('[SessionManager] addAnswer:', answer);
+        const answers = this.getAnswers();
+        answers.push(answer);
+        this.setAnswers(answers);
+    },
+    clearAnswers() {
+        console.log('[SessionManager] clearAnswers');
+        localStorage.removeItem('quiz_answers');
+    },
+
+    // 問題データ
+    setQuestions(questions) {
+        console.log('[SessionManager] setQuestions:', questions.length, 'questions');
+        localStorage.setItem('quiz_questions', JSON.stringify(questions));
+    },
+    getQuestions() {
+        const data = localStorage.getItem('quiz_questions');
+        const questions = data ? JSON.parse(data) : [];
+        console.log('[SessionManager] getQuestions:', questions.length, 'questions');
+        return questions;
+    },
+    clearQuestions() {
+        console.log('[SessionManager] clearQuestions');
+        localStorage.removeItem('quiz_questions');
+    },
+
+    // v1.4.0: クイズ要約（今回のクイズ内容）
+    setQuizSummary(summary) {
+        console.log('[SessionManager] setQuizSummary:', summary);
+        localStorage.setItem('quiz_summary', summary);
+    },
+    getQuizSummary() {
+        const summary = localStorage.getItem('quiz_summary');
+        console.log('[SessionManager] getQuizSummary:', summary);
+        return summary;
+    },
+    clearQuizSummary() {
+        console.log('[SessionManager] clearQuizSummary');
+        localStorage.removeItem('quiz_summary');
+    },
+
+    // 全クリア
+    clearAll() {
+        console.log('[SessionManager] clearAll');
+        this.clearUser();
+        this.clearSession();
+        this.clearAnswers();
+        this.clearQuestions();
+        this.clearQuizSummary();
+    }
+};

quiz.html

@@ -1,344 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>クイズ - 超天才クイズ</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <div class="container">
-        <header class="quiz-header">
-            <div class="header-left">
-                <span id="subject-name">国語</span>
-                <span id="question-counter">1 / 10</span>
-            </div>
-            <div class="header-right">
-                <div class="timer" id="timer">
-                    <span id="timer-display">3:00</span>
-                </div>
-            </div>
-        </header>
-
-        <main id="main-content">
-            <!-- ローディング -->
-            <section id="loading-section" class="card">
-                <p>問題を読み込み中...</p>
-            </section>
-
-            <!-- クイズ画面 -->
-            <section id="quiz-section" class="card hidden">
-                <div class="question-area">
-                    <div class="difficulty-badge" id="difficulty">標準</div>
-                    <p class="question-text" id="question-text"></p>
-                </div>
-
-                <div class="answer-area">
-                    <!-- 4択選択肢 -->
-                    <div id="choices-container" class="choices-container">
-                        <button class="choice-btn" data-index="0"></button>
-                        <button class="choice-btn" data-index="1"></button>
-                        <button class="choice-btn" data-index="2"></button>
-                        <button class="choice-btn" data-index="3"></button>
-                    </div>
-                    <!-- フォールバック用テキスト入力（選択肢がない場合） -->
-                    <div id="text-input-container" class="hidden">
-                        <input type="text" id="answer-input" placeholder="答えを入力" autocomplete="off">
-                        <button id="submit-answer" class="btn-primary">回答する</button>
-                    </div>
-                </div>
-
-            </section>
-
-            <!-- 期限切れ/エラー -->
-            <section id="error-section" class="card hidden">
-                <h2>エラー</h2>
-                <p id="error-message"></p>
-                <button onclick="location.href='index.html'" class="btn-primary">トップに戻る</button>
-            </section>
-        </main>
-    </div>
-
-    <script src="js/api.js"></script>
-    <script src="js/auth.js"></script>
-    <script src="js/quiz.js"></script>
-    <script>
-        // クイズ状態
-        let quizState = {
-            quizId: null,
-            questions: [],
-            answers: [],
-            currentIndex: 0,
-            startTime: null,
-            timeRemaining: 180 // 3分 = 180秒
-        };
-
-        let timerInterval = null;
-
-        // ページ読み込み時
-        document.addEventListener('DOMContentLoaded', async () => {
-            // URLパラメータからquiz_idを取得
-            const params = new URLSearchParams(window.location.search);
-            const quizId = params.get('d');
-            const token = params.get('t');
-
-            // トークンがあれば認証
-            if (token) {
-                await Auth.verifyAndSaveToken(token);
-            }
-
-            // ログインチェック
-            const isLoggedIn = await Auth.checkLogin();
-            if (!isLoggedIn) {
-                window.location.href = 'index.html';
-                return;
-            }
-
-            if (!quizId) {
-                showError('配信IDが指定されていません');
-                return;
-            }
-
-            quizState.quizId = quizId;
-            await loadQuiz(quizId);
-        });
-
-        // クイズを読み込み
-        async function loadQuiz(quizId) {
-            try {
-                const user = Auth.getUser();
-                const result = await API.getDeliveryQuiz(quizId, user.id);
-
-                if (!result.success) {
-                    showError(result.error || '問題の取得に失敗しました');
-                    return;
-                }
-
-                quizState.questions = result.questions;
-                quizState.answers = new Array(result.questions.length).fill(null).map(() => ({
-                    answer: '',
-                    submitted: false
-                }));
-
-                // 教科名を設定
-                const subjectNames = { jp: '国語', math: '算数', sci: '理科', soc: '社会' };
-                document.getElementById('subject-name').textContent =
-                    subjectNames[result.quiz.subject] || result.quiz.subject;
-
-                // クイズ画面を表示
-                document.getElementById('loading-section').classList.add('hidden');
-                document.getElementById('quiz-section').classList.remove('hidden');
-
-                // タイマ���開始
-                quizState.startTime = Date.now();
-                startTimer();
-
-                // 選択肢ボタンのイベント設定
-                setupChoiceButtons();
-
-                // 最初の問題を表示
-                showQuestion(0);
-
-            } catch (e) {
-                showError('エラーが発生しました: ' + e.message);
-            }
-        }
-
-        // 問題を表示
-        function showQuestion(index) {
-            if (index < 0 || index >= quizState.questions.length) return;
-
-            quizState.currentIndex = index;
-            const question = quizState.questions[index];
-            const answer = quizState.answers[index];
-
-            // 問題テキスト
-            document.getElementById('question-text').textContent = question.question || question.QUESTION || '';
-            document.getElementById('difficulty').textContent = question.difficulty || question.DIFFICULTY || '標準';
-
-            // 選択肢がある場合は4択表示、なければテキスト入力
-            const choices = question.choices || [];
-            const choicesContainer = document.getElementById('choices-container');
-            const textInputContainer = document.getElementById('text-input-container');
-
-            if (choices.length >= 4) {
-                // 4択モード
-                choicesContainer.classList.remove('hidden');
-                textInputContainer.classList.add('hidden');
-
-                const buttons = choicesContainer.querySelectorAll('.choice-btn');
-                buttons.forEach((btn, i) => {
-                    btn.textContent = choices[i] || '';
-                    btn.classList.remove('selected');
-                    // 既に回答済みならハイライト
-                    if (answer.answer === choices[i]) {
-                        btn.classList.add('selected');
-                    }
-                });
-            } else {
-                // テキスト入力モード
-                choicesContainer.classList.add('hidden');
-                textInputContainer.classList.remove('hidden');
-                const input = document.getElementById('answer-input');
-                input.value = answer.answer || '';
-                input.focus();
-            }
-
-            // カウンター更新
-            document.getElementById('question-counter').textContent =
-                `${index + 1} / ${quizState.questions.length}`;
-        }
-
-        // 選択肢クリック処理
-        function setupChoiceButtons() {
-            const buttons = document.querySelectorAll('.choice-btn');
-            buttons.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const selectedAnswer = btn.textContent;
-                    quizState.answers[quizState.currentIndex].answer = selectedAnswer;
-
-                    // 選択状態を更新
-                    buttons.forEach(b => b.classList.remove('selected'));
-                    btn.classList.add('selected');
-
-                    // 最終問題なら自動的に採点へ、それ以外は次の問題へ
-                    if (quizState.currentIndex >= quizState.questions.length - 1) {
-                        // 最終問題：選択後に自動で採点へ移行
-                        setTimeout(() => submitAllAnswers(), 300);
-                    } else {
-                        // 次の問題へ
-                        setTimeout(() => showQuestion(quizState.currentIndex + 1), 300);
-                    }
-                });
-            });
-        }
-
-        // タイマー開始
-        function startTimer() {
-            updateTimerDisplay();
-
-            timerInterval = setInterval(() => {
-                quizState.timeRemaining--;
-                updateTimerDisplay();
-
-                if (quizState.timeRemaining <= 0) {
-                    clearInterval(timerInterval);
-                    submitAllAnswers();
-                }
-            }, 1000);
-        }
-
-        // タイマー表示更新
-        function updateTimerDisplay() {
-            const minutes = Math.floor(quizState.timeRemaining / 60);
-            const seconds = quizState.timeRemaining % 60;
-            const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-            document.getElementById('timer-display').textContent = display;
-
-            // 残り1分で警告色
-            if (quizState.timeRemaining <= 60) {
-                document.getElementById('timer').classList.add('warning');
-            }
-        }
-
-        // 回答を保存
-        function saveCurrentAnswer() {
-            const input = document.getElementById('answer-input');
-            quizState.answers[quizState.currentIndex].answer = input.value.trim();
-        }
-
-        // 全回答を送信
-        async function submitAllAnswers() {
-            clearInterval(timerInterval);
-
-            document.getElementById('quiz-section').classList.add('hidden');
-            document.getElementById('loading-section').classList.remove('hidden');
-            document.getElementById('loading-section').innerHTML = '<p>採点中...</p>';
-
-            try {
-                const user = Auth.getUser();
-
-                // 回答データを整形
-                const answers = quizState.questions.map((q, i) => {
-                    const userAnswer = quizState.answers[i].answer;
-                    const correctAnswer = q.answer || q.ANSWER || '';
-                    const isCorrect = normalizeAnswer(userAnswer) === normalizeAnswer(correctAnswer);
-
-                    return {
-                        question_id: q.id || q.ID,
-                        subject: q.subject || q.SUBJECT,
-                        category: q.category || q.CATEGORY,
-                        user_answer: userAnswer,
-                        correct_answer: correctAnswer,
-                        is_correct: isCorrect,
-                        time_spent: 0
-                    };
-                });
-
-                const result = await API.submitDeliveryAnswers(
-                    user.id,
-                    quizState.quizId,
-                    answers,
-                    quizState.timeRemaining
-                );
-
-                if (result.success) {
-                    // 結果ページへ（sessionStorageでデータを渡す）
-                    sessionStorage.setItem('quizResult', JSON.stringify({
-                        result: result.result,
-                        answers: answers,
-                        questions: quizState.questions
-                    }));
-                    window.location.href = 'result.html';
-                } else {
-                    showError(result.error || '採点に失敗しました');
-                }
-
-            } catch (e) {
-                showError('エラーが発生しました: ' + e.message);
-            }
-        }
-
-        // 回答を正規化
-        function normalizeAnswer(answer) {
-            if (!answer) return '';
-            return answer.toString()
-                .toLowerCase()
-                .replace(/\s+/g, '')
-                .replace(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
-                .replace(/[Ａ-Ｚａ-ｚ]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
-        }
-
-        // エラー表示
-        function showError(message) {
-            document.getElementById('loading-section').classList.add('hidden');
-            document.getElementById('quiz-section').classList.add('hidden');
-            document.getElementById('error-section').classList.remove('hidden');
-            document.getElementById('error-message').textContent = message;
-        }
-
-        // イベントリスナー（テキスト入力モード用）
-        document.getElementById('submit-answer').addEventListener('click', () => {
-            saveCurrentAnswer();
-            if (quizState.currentIndex >= quizState.questions.length - 1) {
-                // 最終問題：自動で採点へ移行
-                submitAllAnswers();
-            } else {
-                showQuestion(quizState.currentIndex + 1);
-            }
-        });
-
-        document.getElementById('answer-input').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                saveCurrentAnswer();
-                if (quizState.currentIndex >= quizState.questions.length - 1) {
-                    // 最終問題：自動で採点へ移行
-                    submitAllAnswers();
-                } else {
-                    showQuestion(quizState.currentIndex + 1);
-                }
-            }
-        });
-    </script>
-</body>
-</html>

ranking.html

@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ランキング - 超天才クイズ</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>ランキング</h1>
-            <p class="date" id="ranking-date"></p>
-        </header>
-
-        <main id="main-content">
-            <!-- タブ -->
-            <div class="tab-container">
-                <button class="tab active" data-type="total">総合</button>
-                <button class="tab" data-type="jp">国語</button>
-                <button class="tab" data-type="math">算数</button>
-                <button class="tab" data-type="sci">理科</button>
-                <button class="tab" data-type="soc">社会</button>
-            </div>
-
-            <!-- ランキング表示 -->
-            <section id="ranking-section" class="card">
-                <div id="ranking-list">
-                    <p class="loading-text">ランキングを読み込み中...</p>
-                </div>
-            </section>
-
-            <!-- 自分の順位 -->
-            <section id="my-rank-section" class="card hidden">
-                <h3>あなたの順位</h3>
-                <div id="my-rank">
-                    <span class="rank-number" id="my-rank-number">-</span>
-                    <span class="rank-suffix">位</span>
-                    <span class="rank-points" id="my-rank-points">0pt</span>
-                </div>
-            </section>
-
-            <!-- アクション -->
-            <section class="actions">
-                <button onclick="location.href='index.html'" class="btn-primary">
-                    トップに戻る
-                </button>
-            </section>
-        </main>
-
-        <footer>
-            <p>&copy; 2025 超天才クイズ</p>
-        </footer>
-    </div>
-
-    <script src="js/api.js"></script>
-    <script src="js/auth.js"></script>
-    <script>
-        let currentType = 'total';
-        let currentUser = null;
-
-        // ページ読み込み時
-        document.addEventListener('DOMContentLoaded', async () => {
-            // 今日の日付を表示
-            const today = new Date();
-            const dateStr = today.toLocaleDateString('ja-JP', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-            });
-            document.getElementById('ranking-date').textContent = dateStr;
-
-            // ユーザー情報取得
-            const isLoggedIn = await Auth.checkLogin();
-            if (isLoggedIn) {
-                currentUser = Auth.getUser();
-            }
-
-            // 初期ランキング読み込み
-            loadRanking('total');
-
-            // タブイベント
-            document.querySelectorAll('.tab').forEach(tab => {
-                tab.addEventListener('click', () => {
-                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                    tab.classList.add('active');
-                    loadRanking(tab.dataset.type);
-                });
-            });
-        });
-
-        // ランキング読み込み
-        async function loadRanking(type) {
-            currentType = type;
-            const container = document.getElementById('ranking-list');
-            container.innerHTML = '<p class="loading-text">読み込み中...</p>';
-
-            try {
-                const today = new Date().toISOString().split('T')[0];
-                const result = await API.getRanking(today, type);
-
-                if (!result.success) {
-                    container.innerHTML = '<p class="no-data">ランキングデータがありません</p>';
-                    return;
-                }
-
-                const rankings = result.rankings || [];
-
-                if (rankings.length === 0) {
-                    container.innerHTML = '<p class="no-data">まだ誰も参加していません</p>';
-                    document.getElementById('my-rank-section').classList.add('hidden');
-                    return;
-                }
-
-                let html = '<ol class="ranking-list">';
-                let myRank = null;
-
-                rankings.forEach((item, index) => {
-                    const rank = item.rank || index + 1;
-                    const isMe = currentUser && item.user_id === currentUser.id;
-
-                    if (isMe) myRank = item;
-
-                    const rankClass = rank <= 3 ? `rank-${rank}` : '';
-                    const meClass = isMe ? 'is-me' : '';
-
-                    html += `
-                        <li class="ranking-item ${rankClass} ${meClass}">
-                            <span class="rank">${getRankDisplay(rank)}</span>
-                            <span class="name">${escapeHtml(item.display_name || '名無し')}</span>
-                            <span class="points">${item.points}pt</span>
-                        </li>
-                    `;
-                });
-
-                html += '</ol>';
-                container.innerHTML = html;
-
-                // 自分の順位を表示
-                if (myRank) {
-                    document.getElementById('my-rank-section').classList.remove('hidden');
-                    document.getElementById('my-rank-number').textContent = myRank.rank;
-                    document.getElementById('my-rank-points').textContent = myRank.points + 'pt';
-                } else if (currentUser) {
-                    document.getElementById('my-rank-section').classList.remove('hidden');
-                    document.getElementById('my-rank-number').textContent = '-';
-                    document.getElementById('my-rank-points').textContent = '未参加';
-                } else {
-                    document.getElementById('my-rank-section').classList.add('hidden');
-                }
-
-            } catch (e) {
-                console.error('Ranking error:', e);
-                container.innerHTML = '<p class="error">ランキングの取得に失敗しました</p>';
-            }
-        }
-
-        // 順位表示
-        function getRankDisplay(rank) {
-            if (rank === 1) return '🥇';
-            if (rank === 2) return '🥈';
-            if (rank === 3) return '🥉';
-            return rank;
-        }
-
-        // HTMLエスケープ
-        function escapeHtml(text) {
-            if (!text) return '';
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-    </script>
-</body>
-</html>

result.html

@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>結果 - 超天才クイズ</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>結果発表</h1>
-        </header>
-
-        <main id="main-content">
-            <!-- 結果サマリー -->
-            <section id="result-summary" class="card">
-                <div class="score-display">
-                    <div class="score-circle">
-                        <span class="score-number" id="correct-count">0</span>
-                        <span class="score-divider">/</span>
-                        <span class="score-total" id="total-count">10</span>
-                    </div>
-                    <p class="score-label">正解</p>
-                </div>
-
-                <div class="points-breakdown">
-                    <div class="point-row">
-                        <span class="point-label">正答ポイント</span>
-                        <span class="point-value" id="correct-points">0</span>
-                    </div>
-                    <div class="point-row">
-                        <span class="point-label">時間ボーナス</span>
-                        <span class="point-value" id="time-bonus">0</span>
-                    </div>
-                    <div class="point-row total">
-                        <span class="point-label">合計ポイント</span>
-                        <span class="point-value" id="total-points">0</span>
-                    </div>
-                </div>
-            </section>
-
-            <!-- 回答詳細 -->
-            <section id="answer-details" class="card">
-                <h2>回答詳細</h2>
-                <div id="answer-list">
-                    <!-- 各問題の結果がここに表示される -->
-                </div>
-            </section>
-
-            <!-- アクション -->
-            <section class="actions">
-                <button onclick="location.href='ranking.html'" class="btn-secondary">
-                    ランキングを見る
-                </button>
-                <button onclick="location.href='index.html'" class="btn-primary">
-                    トップに戻る
-                </button>
-            </section>
-        </main>
-
-        <footer>
-            <p>&copy; 2025 超天才クイズ</p>
-        </footer>
-    </div>
-
-    <script>
-        // ページ読み込み時
-        document.addEventListener('DOMContentLoaded', () => {
-            // sessionStorageからデータを取得
-            const dataStr = sessionStorage.getItem('quizResult');
-
-            if (!dataStr) {
-                document.getElementById('main-content').innerHTML =
-                    '<p class="error">結果データがありません</p>' +
-                    '<button onclick="location.href=\'index.html\'" class="btn-primary">トップに戻る</button>';
-                return;
-            }
-
-            try {
-                const data = JSON.parse(dataStr);
-                displayResult(data);
-                // 表示後にデータをクリア（リロード対策）
-                // sessionStorage.removeItem('quizResult');
-            } catch (e) {
-                console.error('Parse error:', e);
-                document.getElementById('main-content').innerHTML =
-                    '<p class="error">結果の読み込みに失敗しました</p>' +
-                    '<button onclick="location.href=\'index.html\'" class="btn-primary">トップに戻る</button>';
-            }
-        });
-
-        // 結果を表示
-        function displayResult(data) {
-            const { result, answers, questions } = data;
-
-            // サマリー
-            document.getElementById('correct-count').textContent = result.correct_count;
-            document.getElementById('total-count').textContent = result.total_count;
-            document.getElementById('correct-points').textContent = result.correct_points + 'pt';
-            document.getElementById('time-bonus').textContent = '+' + result.time_bonus + 'pt';
-            document.getElementById('total-points').textContent = result.total_points + 'pt';
-
-            // 回答詳細
-            const listContainer = document.getElementById('answer-list');
-            let html = '';
-
-            answers.forEach((ans, i) => {
-                const question = questions[i];
-                const isCorrect = ans.is_correct;
-                const statusClass = isCorrect ? 'correct' : 'incorrect';
-                const statusIcon = isCorrect ? '○' : '×';
-
-                html += `
-                    <div class="answer-item ${statusClass}">
-                        <div class="answer-header">
-                            <span class="status-icon">${statusIcon}</span>
-                            <span class="question-number">問${i + 1}</span>
-                        </div>
-                        <div class="answer-content">
-                            <p class="question-text">${escapeHtml(question.question || question.QUESTION || '')}</p>
-                            <div class="answer-comparison">
-                                <div class="your-answer">
-                                    <span class="label">あなたの答え:</span>
-                                    <span class="value">${escapeHtml(ans.user_answer) || '(未回答)'}</span>
-                                </div>
-                                ${!isCorrect ? `
-                                <div class="correct-answer">
-                                    <span class="label">正解:</span>
-                                    <span class="value">${escapeHtml(ans.correct_answer)}</span>
-                                </div>
-                                ` : ''}
-                            </div>
-                        </div>
-                    </div>
-                `;
-            });
-
-            listContainer.innerHTML = html;
-        }
-
-        // HTMLエスケープ
-        function escapeHtml(text) {
-            if (!text) return '';
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-    </script>
-</body>
-</html>