First

static/script.js

@@ -3,11 +3,11 @@
 "use strict"; // より厳格なエラーチェック
 
 // --- グローバル変数 ---
-let learningData = null;    // 学習データ (learning.html用) - { title: '...', items: [...] } の形式を想定
-let currentItemIndex = 0;   // 現在表示中のアイテムインデックス (learning.html用)
-let currentMode = 'quiz';   // 現在のモード 'quiz' or 'summary' (learning.html用)
-let correctEffectTimeout;   // 正解エフェクト非表示用のタイマーID (learning.html用)
-let correctEffect = null;   // 正解エフェクト要素 (learning.html用)
+let learningData = null;    // 学習データ - { title: '...', items: [...] } の形式を想定
+let currentItemIndex = 0;   // 現在表示中のアイテムインデックス
+let currentMode = 'quiz';   // 現在のモード 'quiz' or 'summary'
+let correctEffectTimeout;   // 正解エフェクト非表示用のタイマーID
+let correctEffect = null;   // 正解エフェクト要素
 let sideMenu = null;        // サイドメニュー要素
 let menuOverlay = null;     // メニューオーバーレイ要素
 
@@ -19,10 +19,9 @@ let menuOverlay = null;     // メニューオーバーレイ要素
  */
 function navigateTo(url) {
     closeMenu(); // 遷移前にメニューを閉じる
-    // 少し遅延させてから遷移する（メニューが閉じるアニメーションを見せるため、任意）
     setTimeout(() => {
         window.location.href = url;
-    }, 100); // 100ミリ秒後に遷移
+    }, 100); // 少し遅延させて遷移
 }
 
 /**
@@ -33,7 +32,7 @@ function openMenu() {
     if (sideMenu && menuOverlay) {
         sideMenu.classList.add('open');
         menuOverlay.classList.add('open');
-        document.body.classList.add('menu-open'); // 背景スクロール禁止
+        document.body.classList.add('menu-open');
     } else {
         console.error("Side menu or overlay element not found. Cannot open menu.");
     }
@@ -43,13 +42,11 @@ function openMenu() {
  * サイドメニューを閉じます。
  */
 function closeMenu() {
-    // console.log("Closing menu..."); // デバッグ時以外は不要かも
     if (sideMenu && menuOverlay) {
         sideMenu.classList.remove('open');
         menuOverlay.classList.remove('open');
-        document.body.classList.remove('menu-open'); // 背景スクロール許可
+        document.body.classList.remove('menu-open');
     }
-    // メニュー要素が見つからない場合のエラーログはここでは不要
 }
 
 
@@ -65,7 +62,6 @@ function toggleLoading(show, buttonId = 'generate-button') {
     if (targetButton && buttonId === 'generate-button') {
         const spinner = targetButton.querySelector('.loading-spinner');
         const buttonText = targetButton.querySelector('.button-text');
-
         if (show) {
             targetButton.disabled = true;
             if (spinner) spinner.style.display = 'inline-block';
@@ -73,18 +69,17 @@ function toggleLoading(show, buttonId = 'generate-button') {
         } else {
             targetButton.disabled = false;
             if (spinner) spinner.style.display = 'none';
-            if (buttonText) buttonText.textContent = '生成する'; // 元のテキストに戻す
+            if (buttonText) buttonText.textContent = '生成する';
         }
     }
 
-    // learning.html 用の汎用ローディング表示 (mode-indicatorなどを利用)
+    // learning.html 用の汎用ローディング表示
     const loadingIndicator = document.getElementById('mode-indicator');
     const cardElement = document.getElementById('learning-card');
     const paginationElement = document.querySelector('.pagination');
     const optionsArea = document.getElementById('options-area');
-    const tapToShowElement = document.getElementById('tap-to-show'); // 追加
+    const tapToShowElement = document.getElementById('tap-to-show');
 
-    // 現在のパスがlearningページか確認
     const currentPathname = window.location.pathname;
     if (currentPathname.endsWith('/learning') || currentPathname.endsWith('/learning.html')) {
         if (show) {
@@ -95,16 +90,13 @@ function toggleLoading(show, buttonId = 'generate-button') {
             if (cardElement) cardElement.style.opacity = '0.5';
             if (paginationElement) paginationElement.style.display = 'none';
             if (optionsArea) optionsArea.style.display = 'none';
-            if (tapToShowElement) tapToShowElement.style.display = 'none'; // ローディング中は非表示
+            if (tapToShowElement) tapToShowElement.style.display = 'none';
         } else {
-             // ローディング終了時の表示は displayCurrentItem で制御されるため、
-             // ここではローディングインジケータのテキストクリア程度で良い
             if (loadingIndicator) {
-                 // loadingIndicator.textContent = ''; // displayCurrentItemでモードが表示される
                  loadingIndicator.classList.remove('loading');
             }
             if (cardElement) cardElement.style.opacity = '1';
-            // pagination, optionsArea, tapToShowElement の表示は displayCurrentItem に任せる
+            // 他の要素の表示は displayCurrentItem に任せる
         }
     }
 }
@@ -118,11 +110,9 @@ function displayErrorMessage(message, elementId = 'error-message') {
     const errorElement = document.getElementById(elementId);
     if (errorElement) {
         errorElement.textContent = message;
-        // メッセージがあれば表示、なければ非表示 (display: block/none)
         errorElement.style.display = message ? 'block' : 'none';
     } else {
-        // エラー表示要素自体が見つからない場合
-        if (message) { // メッセージがある場合のみコンソールにエラー表示
+        if (message) {
             console.error(`Error element with ID "${elementId}" not found. Cannot display message: ${message}`);
         }
     }
@@ -130,7 +120,7 @@ function displayErrorMessage(message, elementId = 'error-message') {
 
 // --- 画面遷移用関数 ---
 function goToInput() {
-    navigateTo('/'); // input.html はルートパスを想定
+    navigateTo('/');
 }
 
 function goToHistory() {
@@ -143,12 +133,10 @@ function goToSettings() {
 
 function goToLearning(contentId) {
     if (contentId) {
-        // navigateTo内でメニューは閉じられる
         navigateTo(`/learning?id=${encodeURIComponent(contentId)}`);
     } else {
         console.error('goToLearning requires a content ID.');
-        // ユーザーへのフィードバック
-        alert('学習コンテンツのIDが見つかりません。履歴画面から再度お試しください。');
+        alert('学習コンテンツのIDが見つかりません。');
     }
 }
 
@@ -161,101 +149,67 @@ function goToLearning(contentId) {
 async function handleGenerateSubmit() {
     const urlInput = document.getElementById('youtube-url');
     const youtubeUrl = urlInput.value.trim();
-    const errorMsgElementId = 'error-message'; // エラーメッセージ表示用ID
-    displayErrorMessage('', errorMsgElementId); // 前のエラーメッセージをクリア
+    const errorMsgElementId = 'error-message';
+    displayErrorMessage('', errorMsgElementId);
 
     if (!youtubeUrl) {
         displayErrorMessage('YouTubeリンクを入力してください。', errorMsgElementId);
-        return false; // 送信中断
+        return false;
     }
 
-    // 簡単なURL形式チェックと YouTube ドメイン検証
     try {
-        const urlObj = new URL(youtubeUrl); // URLオブジェクト生成試行
+        const urlObj = new URL(youtubeUrl);
         const validHostnames = ['www.youtube.com', 'youtube.com', 'youtu.be'];
-        if (!validHostnames.includes(urlObj.hostname)) {
-            throw new Error('Invalid hostname'); // YouTube以外のドメイン
-        }
-        // さらに詳細なパスチェック（例）
-        if (urlObj.hostname === 'youtu.be' && urlObj.pathname.length <= 1) {
-            throw new Error('Missing video ID for youtu.be'); // youtu.be/ の後にIDがない
-        }
+        if (!validHostnames.includes(urlObj.hostname)) throw new Error('Invalid hostname');
+        if (urlObj.hostname === 'youtu.be' && urlObj.pathname.length <= 1) throw new Error('Missing video ID for youtu.be');
         if (urlObj.hostname.includes('youtube.com')) {
-            if (urlObj.pathname === '/watch' && !urlObj.searchParams.has('v')) {
-                 throw new Error('Missing video ID parameter (v=...) for youtube.com/watch'); // vパラメータがない
-            }
-             if (urlObj.pathname.startsWith('/shorts/') && urlObj.pathname.length <= 8) {
-                  throw new Error('Missing video ID for youtube.com/shorts/'); // shorts/ の後にIDがない
-             }
-             // 他の有効な形式があれば追加 (例: /live/ など)
+            if (urlObj.pathname === '/watch' && !urlObj.searchParams.has('v')) throw new Error('Missing video ID parameter (v=...) for youtube.com/watch');
+            if (urlObj.pathname.startsWith('/shorts/') && urlObj.pathname.length <= 8) throw new Error('Missing video ID for youtube.com/shorts/');
         }
     } catch (e) {
-        // URLパースエラーまたは上記バリデーションエラー
         console.warn("Invalid URL format:", e.message);
         displayErrorMessage('有効なYouTube動画のリンクを入力してください。(例: https://www.youtube.com/watch?v=...)', errorMsgElementId);
-        return false; // 送信中断
+        return false;
     }
 
-
-    toggleLoading(true, 'generate-button'); // ローディング開始
+    toggleLoading(true, 'generate-button');
 
     try {
-        // APIエンドポイント '/api/generate' へPOSTリクエスト
         const response = await fetch('/api/generate', {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json', // サーバーからのJSON応答を期待
-            },
-            body: JSON.stringify({ url: youtubeUrl }), // URLをJSON形式で送信
+            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+            body: JSON.stringify({ url: youtubeUrl }),
         });
 
-        // レスポンスボディをJSONとしてパース試行
         let result;
         try {
             result = await response.json();
         } catch (jsonError) {
-             // JSONパース失敗
-             console.error('Failed to parse JSON response:', jsonError);
-             // サーバーエラーの可能性が高いが、レスポンスステータスも確認
-             if (!response.ok) {
-                  throw new Error(`サーバーエラー (${response.status})。応答形式が不正です。`);
-             } else {
-                  // 成功ステータスなのにJSONでない場合（通常はありえない）
-                  throw new Error('サーバーからの応答形式が予期せぬ形式です。');
-             }
+            console.error('Failed to parse JSON response:', jsonError);
+            throw new Error(response.ok ? 'サーバーからの応答形式が不正です。' : `サーバーエラー (${response.status})`);
         }
 
-
-        // ★★★ サーバーが返すJSON構造に合わせて修正 ★★★
-        // サーバーが { success: true, data: { id: '...' } } のような形式を返す想定
+        // ★★★ サーバーが返すJSON構造に合わせてチェック ★★★
+        // { success: true, data: { id: '...' } } を期待
         if (response.ok && result && typeof result === 'object' && result.success && result.data && result.data.id) {
-            // 生成成功: 取得したIDを使って学習画面へ遷移
             console.log("Generation successful, navigating to learning page with ID:", result.data.id);
             goToLearning(result.data.id);
         } else {
-            // APIがエラーを返した場合、または期待する構造でなかった場合
             console.error('Generation API call failed or returned unexpected structure:', result);
-            const serverMessage = (result && typeof result === 'object' && result.message) || // resultがオブジェクトでmessageがあればそれを表示
-                                  (result && typeof result === 'object' && result.error && result.error.message) || // error.messageがあればそれを表示
-                                  (response.ok ? '生成に失敗しました (不明な応答形式)。' : `サーバーエラー (${response.status})`); // それ以外の場合
+            const serverMessage = (result && typeof result === 'object' && result.message) ||
+                                  (result && typeof result === 'object' && result.error && result.error.message) ||
+                                  (response.ok ? '生成に失敗しました (不明な応答形式)。' : `サーバーエラー (${response.status})`);
             displayErrorMessage(serverMessage, errorMsgElementId);
         }
 
     } catch (error) {
-        // fetch自体が失敗した場合（ネットワークエラーなど）または上記のthrow new Error
         console.error('Error during generation request:', error);
-        // ユーザーフレンドリーなメッセージ表示
-        if (error.message.includes('Failed to fetch')) {
-             displayErrorMessage('サーバーに接続できませんでした。ネットワーク接続を確認してください。', errorMsgElementId);
-        } else {
-            displayErrorMessage(`エラーが発生しました: ${error.message}`, errorMsgElementId);
-        }
+        const userMessage = error.message.includes('Failed to fetch') ? 'サーバーに接続できませんでした。' : `エラー: ${error.message}`;
+        displayErrorMessage(userMessage, errorMsgElementId);
     } finally {
-        toggleLoading(false, 'generate-button'); // ローディング終了（成功・失敗問わず）
+        toggleLoading(false, 'generate-button');
     }
-
-    return false; // formのデフォルト送信を常にキャンセル
+    return false;
 }
 
 
@@ -269,52 +223,49 @@ async function initializeLearningScreen() {
     const params = new URLSearchParams(window.location.search);
     const contentId = params.get('id');
 
-    // 正解エフェクト要素はDOMContentLoadedで取得済みのはず
-
     if (!contentId) {
         displayLearningError('学習コンテンツのIDが見つかりません。');
         return;
     }
     console.log('Content ID:', contentId);
-
-    toggleLoading(true); // ローディング表示開始
+    toggleLoading(true);
 
     try {
         const response = await fetch(`/api/learning/${contentId}`);
         if (!response.ok) {
-            // エラーレスポンスがJSON形式でない場合も考慮
             let errorMessage = `サーバーからのデータ取得に失敗 (${response.status})`;
             try {
                 const errorData = await response.json();
                 errorMessage = errorData.message || errorMessage;
-            } catch (e) {
-                console.warn('Failed to parse error response as JSON.');
-            }
+            } catch (e) { console.warn('Failed to parse error response as JSON.'); }
             throw new Error(errorMessage);
         }
 
-        // ★★★ サーバーからの応答が配列であると想定して処理 ★★★
-        const itemsArray = await response.json();
-        console.log('Fetched data (items array):', itemsArray);
+        // ★★★ サーバーからの応答がオブジェクト {success: ..., data: {...}} であると想定 ★★★
+        const result = await response.json();
+        console.log('Fetched data object:', result);
 
-        // 配列であるか、空でないかをチェック
-        if (!Array.isArray(itemsArray)) {
-            throw new Error('サーバーからのデータ形式が不正です (配列ではありません)。');
-        }
-        if (itemsArray.length === 0) {
-             throw new Error('学習データが見つかりませんでした (空の配列)。');
+        // 応答の形式をチェック
+        if (!result || typeof result !== 'object' || !result.success || !result.data || !Array.isArray(result.data.items)) {
+            console.error('Invalid data structure received from server:', result);
+            throw new Error('サーバーから受け取ったデータの形式が正しくありません。');
         }
 
-        // learningData オブジェクトを構築
+        // ★★★ learningData を構築 (title と items を data から取得) ★★★
         learningData = {
-            title: `学習セット (${contentId})`, // タイトルは固定文字列またはcontentIdから生成
-            items: itemsArray // 取得した配列を items プロパティに設定
+            title: result.data.title || `学習セット (${contentId})`, // data.title があればそれを使う
+            items: result.data.items // data.items を使う
         };
 
-        // タイトルを設定 (learningData.title を使用)
+        // アイテム配列が空でないかチェック
+        if (learningData.items.length === 0) {
+             throw new Error('学習データが見つかりませんでした (アイテムが0件)。');
+        }
+
+        // タイトルを設定
         const titleElement = document.getElementById('learning-title');
         if (titleElement) {
-            titleElement.textContent = learningData.title || '学習セット'; // デフォルトタイトル
+            titleElement.textContent = learningData.title;
         } else {
             console.warn("Title element ('learning-title') not found.");
         }
@@ -324,16 +275,11 @@ async function initializeLearningScreen() {
         displayCurrentItem();
 
     } catch (error) {
-        // fetchエラーまたは上記のthrow new Error
         console.error('Error initializing learning screen:', error);
-        // JSONパースエラーの場合のメッセージを改善
-        if (error instanceof SyntaxError) {
-             displayLearningError(`サーバー応答の解析エラー: ${error.message}`);
-        } else {
-             displayLearningError(`読み込みエラー: ${error.message}`);
-        }
+        const message = (error instanceof SyntaxError) ? `サーバー応答の解析エラー: ${error.message}` : `読み込みエラー: ${error.message}`;
+        displayLearningError(message);
     } finally {
-        toggleLoading(false); // ローディング表示終了
+        toggleLoading(false);
     }
 }
 
@@ -341,10 +287,9 @@ async function initializeLearningScreen() {
  * 現在の学習アイテムをカードに表示 (クイズ or 要約)
  */
 function displayCurrentItem() {
-    hideCorrectEffect(); // 前のエフェクトを隠す
-    clearTimeout(correctEffectTimeout); // タイマーもクリア
+    hideCorrectEffect();
+    clearTimeout(correctEffectTimeout);
 
-    // 要素取得 (毎回取得する方が確実)
     const cardElement = document.getElementById('learning-card');
     const cardTextElement = document.getElementById('card-text');
     const answerTextElement = document.getElementById('answer-text');
@@ -352,88 +297,71 @@ function displayCurrentItem() {
     const optionsArea = document.getElementById('options-area');
     const modeIndicator = document.getElementById('mode-indicator');
 
-    // 要素が存在しない場合はエラーを出して終了
     if (!cardElement || !cardTextElement || !answerTextElement || !tapToShowElement || !optionsArea || !modeIndicator) {
-        console.error("One or more required learning elements are missing from the DOM.");
-        displayLearningError("画面の表示に必要な要素が見つかりません。");
+        console.error("One or more required learning elements are missing.");
+        displayLearningError("画面表示に必要な要素が見つかりません。");
         return;
     }
-
-    // データ存在チェック (learningData と learningData.items をチェック)
     if (!learningData || !learningData.items || currentItemIndex < 0 || currentItemIndex >= learningData.items.length) {
         console.error('Invalid learning data or index:', learningData, currentItemIndex);
         displayLearningError('表示する学習データが見つかりません。');
         return;
     }
 
-    // ★★★ learningData.items から現在のアイテムを取得 ★★★
     const item = learningData.items[currentItemIndex];
 
-    // 表示内容リセット
-    cardTextElement.innerHTML = ''; // textContentではなくinnerHTMLでリセット
+    // リセット
+    cardTextElement.innerHTML = '';
     answerTextElement.style.display = 'none';
-    answerTextElement.textContent = ''; // 内容もクリア
+    answerTextElement.textContent = '';
     tapToShowElement.style.display = 'none';
-    optionsArea.innerHTML = ''; // 選択肢エリアクリア
-    optionsArea.style.display = 'none'; // 一旦非表示
-    modeIndicator.classList.remove('loading'); // ローディングクラス除去
+    optionsArea.innerHTML = '';
+    optionsArea.style.display = 'none';
+    modeIndicator.classList.remove('loading');
 
-    // itemタイプに基づいて表示を分岐
-    // ★★★ 問題文のキーを 'text' に修正 ★★★
-    if (item.type === 'question' && item.text && item.answer) { // `item.question` -> `item.text` に変更
+    // ★★★ サーバーレスポンスのキーに合わせて item.text を使用 (変更なし) ★★★
+    if (item.type === 'question' && item.text && item.answer) { // questionではなくtextキーで問題文を取得
         currentMode = 'quiz';
         modeIndicator.textContent = 'クイズモード';
-        // ★★★ 問題文には item.text を使用 ★★★
-        cardTextElement.textContent = item.text; // 問題文はtextContentで安全に設定
-        answerTextElement.textContent = `答え: ${item.answer}`; // 答えは事前に設定（非表示）
+        cardTextElement.textContent = item.text; // 問題文
+        answerTextElement.textContent = `答え: ${item.answer}`;
 
-        // 選択肢ボタンを生成
         if (item.options && Array.isArray(item.options) && item.options.length > 0) {
-            optionsArea.style.display = 'block'; // 選択肢があれば表示
-            const optionsToDisplay = item.options; // シャッフルしない場合
-
-            optionsToDisplay.forEach(option => {
+            optionsArea.style.display = 'block';
+            item.options.forEach(option => {
                 const button = document.createElement('button');
                 button.classList.add('option-button');
                 button.textContent = option;
-                // クリックしたら handleOptionClick を呼ぶ
                 button.onclick = () => handleOptionClick(option);
                 optionsArea.appendChild(button);
             });
-            tapToShowElement.style.display = 'block'; // 選択肢がある場合もタップ表示は有効
+            tapToShowElement.style.display = 'block';
         } else {
-             // 選択肢がないクイズの場合
              console.warn(`Quiz item ${currentItemIndex} has no options.`);
-             tapToShowElement.style.display = 'block'; // 答え表示は可能にする
+             tapToShowElement.style.display = 'block'; // 選択肢なくても解答表示は可能
         }
-        // カード自体 or タップ表示テキストのクリックで解答表示
-        cardElement.onclick = () => revealAnswer(); // 引数なしで呼び出し
-        tapToShowElement.onclick = () => revealAnswer(); // 引数なしで呼び出し
+        cardElement.onclick = () => revealAnswer();
+        tapToShowElement.onclick = () => revealAnswer();
 
     } else if (item.type === 'summary' && item.text) {
         currentMode = 'summary';
         modeIndicator.textContent = '要約モード';
-        // 改行(\n)を<br>に置換して表示 (innerHTMLを使うので注意)
         cardTextElement.innerHTML = item.text.replace(/\n/g, '<br>');
-
-        // 要約モードではクリックイベント不要
         cardElement.onclick = null;
         tapToShowElement.style.display = 'none';
-        optionsArea.style.display = 'none'; // 念のため
+        optionsArea.style.display = 'none';
 
     } else {
-        // 不明なタイプまたは必要なデータ (text や answer) が欠けている場合
         console.warn('Unknown or invalid item type/data:', item);
         currentMode = 'unknown';
         modeIndicator.textContent = 'データエラー';
-        // ★★★ `item.text` を表示試行するように変更 ★★★
-        cardTextElement.textContent = `[不正なデータ形式] ${item.text || 'この項目を表示できません。'}`;
+        cardTextElement.textContent = `[不正なデータ形式] ${item.text || 'この項目を表示できません。'}`; // item.textを表示試行
         cardElement.onclick = null;
         tapToShowElement.style.display = 'none';
         optionsArea.style.display = 'none';
     }
 
-    updatePagination(); // ページネーション表示を更新
+    updatePagination();
 }
 
 /**
@@ -441,30 +369,21 @@ function displayCurrentItem() {
  * @param {string} selectedOption - ユーザーが選択した選択肢のテキスト
  */
 function handleOptionClick(selectedOption) {
-    // ★★★ learningData.items の存在もチェック ★★★
     if (currentMode !== 'quiz' || !learningData || !learningData.items || !learningData.items[currentItemIndex]) return;
 
-    // 解答表示がすでに行われていないかチェック（二重処理防止）
      const answerTextElement = document.getElementById('answer-text');
-     if (answerTextElement && answerTextElement.style.display === 'block') {
-         console.log('Answer already revealed, ignoring option click.');
-         return;
-     }
+     if (answerTextElement && answerTextElement.style.display === 'block') return; // 解答表示済み
 
-    // ★★★ learningData.items から現在のアイテムを取得 ★★★
     const currentItem = learningData.items[currentItemIndex];
     const correctAnswer = currentItem.answer;
     const isCorrect = selectedOption === correctAnswer;
 
     if (isCorrect) {
         console.log("Correct!");
-        showCorrectEffect(); // ★★★ 正解エフェクト表示 ★★★
+        showCorrectEffect();
     } else {
         console.log("Incorrect...");
-        // 不正解時のフィードバック（例: ボタンを赤くするなど）はrevealAnswerで行う
     }
-
-    // 選択された選択肢を引数に渡して、解答表示とボタンの状態更新を行う
     revealAnswer(selectedOption);
 }
 
@@ -474,53 +393,29 @@ function handleOptionClick(selectedOption) {
  * @param {string|null} [selectedOption=null] - ユーザーが選択した選択肢。nullの場合はカードタップ等による表示。
  */
 function revealAnswer(selectedOption = null) {
-     // ★★★ learningData.items の存在もチェック ★★★
     if (currentMode !== 'quiz' || !learningData || !learningData.items || !learningData.items[currentItemIndex]) return;
 
     const answerTextElement = document.getElementById('answer-text');
     const tapToShowElement = document.getElementById('tap-to-show');
     const optionsArea = document.getElementById('options-area');
-    const cardElement = document.getElementById('learning-card'); // カード要素も取得
+    const cardElement = document.getElementById('learning-card');
 
-    // 既に表示済みなら何もしない
-    if (answerTextElement && answerTextElement.style.display === 'block') {
-        return;
-    }
+    if (answerTextElement && answerTextElement.style.display === 'block') return; // 表示済み
 
-    // 解答テキストを表示
-    if (answerTextElement) {
-        answerTextElement.style.display = 'block';
-    }
-    // 「タップして表示」を隠す
-    if (tapToShowElement) {
-        tapToShowElement.style.display = 'none';
-    }
-    // カード自体のクリックイベントを無効化（解答表示後は不要）
-    if (cardElement) {
-         cardElement.onclick = null;
-    }
+    if (answerTextElement) answerTextElement.style.display = 'block';
+    if (tapToShowElement) tapToShowElement.style.display = 'none';
+    if (cardElement) cardElement.onclick = null;
 
-    // 選択肢ボタンがあれば状態を更新
     if (optionsArea) {
-         // ★★★ learningData.items から現在のアイテムを取得 ★★★
         const correctAnswer = learningData.items[currentItemIndex].answer;
-        const buttons = optionsArea.querySelectorAll('.option-button'); // querySelectorAll推奨
-
+        const buttons = optionsArea.querySelectorAll('.option-button');
         buttons.forEach(button => {
-            button.disabled = true; // 全てのボタンを無効化
-            button.onclick = null; // クリックイベント解除
-
+            button.disabled = true;
+            button.onclick = null;
             const buttonText = button.textContent;
-
-            if (buttonText === correctAnswer) {
-                button.classList.add('correct'); // 正解ボタンにクラス付与
-            } else if (buttonText === selectedOption) {
-                // 不正解で、かつユーザーが選択したボタン
-                button.classList.add('incorrect');
-            } else {
-                // 正解でもなく、ユーザーが選択したものでもないボタン
-                button.classList.add('other-disabled'); // 他の選択肢用のスタイル
-            }
+            if (buttonText === correctAnswer) button.classList.add('correct');
+            else if (buttonText === selectedOption) button.classList.add('incorrect');
+            else button.classList.add('other-disabled');
         });
     }
 }
@@ -530,13 +425,11 @@ function revealAnswer(selectedOption = null) {
  * 次の学習アイテムへ移動
  */
 function goToNext() {
-    // ★★★ learningData.items の存在もチェック ★★★
     if (learningData && learningData.items && currentItemIndex < learningData.items.length - 1) {
         currentItemIndex++;
-        displayCurrentItem(); // 次のアイテムを表示
+        displayCurrentItem();
     } else {
         console.log("Already at the last item or no data.");
-        // 最後のアイテムの場合、完了メッセージなどを表示しても良い
         if (learningData && learningData.items && currentItemIndex === learningData.items.length - 1) {
              alert("学習セットが完了しました！");
         }
@@ -547,10 +440,9 @@ function goToNext() {
  * 前の学習アイテムへ移動
  */
 function goToPrev() {
-    // ★★★ learningData.items の存在もチェック ★★★
     if (learningData && learningData.items && currentItemIndex > 0) {
         currentItemIndex--;
-        displayCurrentItem(); // 前のアイテムを表示
+        displayCurrentItem();
     } else {
         console.log("Already at the first item or no data.");
     }
@@ -564,21 +456,16 @@ function updatePagination() {
     const prevButton = document.getElementById('prev-button');
     const nextButton = document.getElementById('next-button');
 
-    // 要素の存在チェック
     if (!pageInfo || !prevButton || !nextButton) {
          console.warn("Pagination elements not found.");
          return;
     }
-
-    // ★★★ learningData.items の存在をチェック ★★★
     if (learningData && learningData.items && learningData.items.length > 0) {
         const totalItems = learningData.items.length;
         pageInfo.textContent = `${currentItemIndex + 1} / ${totalItems}`;
-        // ボタンの有効/無効を設定
         prevButton.disabled = currentItemIndex === 0;
         nextButton.disabled = currentItemIndex === totalItems - 1;
     } else {
-        // データがない場合や空の場合
         pageInfo.textContent = '0 / 0';
         prevButton.disabled = true;
         nextButton.disabled = true;
@@ -597,23 +484,19 @@ function displayLearningError(message) {
     const modeIndicator = document.getElementById('mode-indicator');
     const tapToShow = document.getElementById('tap-to-show');
 
-    // 各要素が存在すればエラー表示に切り替える
     if (titleElement) titleElement.textContent = 'エラー';
     if (modeIndicator) modeIndicator.textContent = 'エラー発生';
     if (cardElement) {
-        // カードの内容をエラーメッセージで置き換え
-        cardElement.innerHTML = `<p class="main-text" style="color: red; text-align: center; padding: 20px;">${message}</p>`;
-        cardElement.onclick = null; // クリックイベント解除
+        cardElement.innerHTML = `<p class="main-text error-text">${message}</p>`; // CSSでスタイル調整用クラス追加
+        cardElement.onclick = null;
     }
-    if (paginationElement) paginationElement.style.display = 'none'; // ページネーション非表示
+    if (paginationElement) paginationElement.style.display = 'none';
     if (optionsArea) {
-        optionsArea.innerHTML = ''; // 選択肢クリア
+        optionsArea.innerHTML = '';
         optionsArea.style.display = 'none';
     }
-    if (tapToShow) tapToShow.style.display = 'none'; // タップ表示も隠す
-
-     // エラー時はローディング表示も確実に解除
-     toggleLoading(false);
+    if (tapToShow) tapToShow.style.display = 'none';
+     toggleLoading(false); // エラー時はローディング解除
 }
 
 /**
@@ -621,16 +504,10 @@ function displayLearningError(message) {
  */
 function showCorrectEffect() {
     if (correctEffect) {
-        clearTimeout(correctEffectTimeout); // 既存のタイマーをクリア
-        correctEffect.classList.add('show'); // 表示クラスを追加
-
-        // 指定時間後 (例: 1秒) に非表示処理を開始
-        correctEffectTimeout = setTimeout(() => {
-            hideCorrectEffect();
-        }, 1000); // 表示時間 (ミリ秒)
-    } else {
-        console.warn("Correct effect element not found.");
-    }
+        clearTimeout(correctEffectTimeout);
+        correctEffect.classList.add('show');
+        correctEffectTimeout = setTimeout(() => { hideCorrectEffect(); }, 1000);
+    } else { console.warn("Correct effect element not found."); }
 }
 
 /**
@@ -638,9 +515,8 @@ function showCorrectEffect() {
  */
 function hideCorrectEffect() {
     if (correctEffect && correctEffect.classList.contains('show')) {
-        correctEffect.classList.remove('show'); // 表示クラスを削除
+        correctEffect.classList.remove('show');
     }
-    // タイマーもクリアしておく（手動で非表示にする場合など）
     clearTimeout(correctEffectTimeout);
 }
 
@@ -655,26 +531,14 @@ function hideCorrectEffect() {
 function handleToggleChange(checkbox, type) {
     const isChecked = checkbox.checked;
     console.log(`Toggle changed for ${type}: ${isChecked}`);
-
     if (type === 'dark') {
-        // ダークモードの切り替え
         document.body.classList.toggle('dark-mode', isChecked);
-        // 設定をlocalStorageに保存 (エラーハンドリング付き)
-        try {
-            localStorage.setItem('darkModeEnabled', isChecked);
-            console.log(`Dark mode preference saved: ${isChecked}`);
-        } catch (e) {
-            console.warn('Could not save dark mode preference to localStorage:', e);
-            // ユーザーに通知する (任意)
-            // alert('ダークモード設定の保存に失敗しました。');
-        }
+        try { localStorage.setItem('darkModeEnabled', isChecked); }
+        catch (e) { console.warn('Could not save dark mode preference:', e); }
     } else if (type === 'notification') {
-        // 通知設定の切り替え (未実装)
         console.log("Notification setting toggled:", isChecked);
-        alert(`通知設定は現在未実装です。(設定: ${isChecked ? 'ON' : 'OFF'})`);
-        // ここに通知設定のAPI呼び出しなどを実装
+        alert(`通知設定未実装 (設定: ${isChecked ? 'ON' : 'OFF'})`);
     }
-    // 他のトグルスイッチの処理もここに追加
 }
 
 /**
@@ -682,14 +546,8 @@ function handleToggleChange(checkbox, type) {
  */
 function handleLogout() {
     console.log("Logout button clicked");
-    // TODO: 実際のログアウト処理を実装
-    // - サーバーAPIへのログアウト要求
-    // - ローカルストレージやセッションストレージの認証情報クリア
-    // - など
-
-    // 仮の動作: アラート表示と入力画面への遷移
-    alert("ログアウトしました。(この機能は現在開発中です)");
-    // navigateTo 内でメニューが閉じる
+    // TODO: 実際のログアウト処理
+    alert("ログアウトしました。(開発中)");
     goToInput();
 }
 
@@ -698,97 +556,62 @@ function handleLogout() {
  */
 function applyDarkModePreference() {
      try {
-        // localStorageから 'darkModeEnabled' の値を取得し、'true' かどうかで判定
         const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
         document.body.classList.toggle('dark-mode', darkModeEnabled);
-        console.log(`Applied dark mode preference from localStorage: ${darkModeEnabled}`);
-    } catch (e) {
-        console.warn('Could not load or apply dark mode preference from localStorage:', e);
-        // ここでエラーが発生しても処理は続行する
-    }
+        // console.log(`Applied dark mode preference: ${darkModeEnabled}`);
+    } catch (e) { console.warn('Could not load/apply dark mode preference:', e); }
 }
 
 
 // --- ページの初期化処理 ---
-const pathname = window.location.pathname; // 現在のパスをグローバルスコープで取得
+const pathname = window.location.pathname;
+applyDarkModePreference(); // 最初に適用
 
-// ★★★ 最初にダークモード設定を適用 (FOUC: Flash of Unstyled Content 対策) ★★★
-applyDarkModePreference();
-
-// ★★★ DOMContentLoaded イベントリスナー: DOM構築完了後に実行 ★★★
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOM fully loaded and parsed. Path:', pathname);
+    console.log('DOM fully loaded. Path:', pathname);
 
-    // メニュー要素を取得してグローバル変数に格納
     sideMenu = document.getElementById('side-menu');
     menuOverlay = document.getElementById('menu-overlay');
-    if (!sideMenu || !menuOverlay) {
-         console.warn("Side menu or overlay element not found on this page.");
-    }
+    if (!sideMenu || !menuOverlay) console.warn("Menu elements not found.");
 
-    // learning.html の場合のみ正解エフェクト要素を取得し、初期化関数を呼ぶ
+    // learningページ固有の初期化
     if (pathname.endsWith('/learning') || pathname.endsWith('/learning.html')) {
         correctEffect = document.getElementById('correct-effect');
-        if (!correctEffect) {
-             console.warn("Correct effect element ('correct-effect') not found on learning page.");
-        }
-        initializeLearningScreen(); // learningページ専用の初期化
+        if (!correctEffect) console.warn("Correct effect element not found.");
+        initializeLearningScreen();
     }
 
-    // input.html の初期化処理
+    // inputページ固有の初期化
     if (pathname === '/' || pathname.endsWith('/input') || pathname.endsWith('/input.html')) {
         console.log("Initializing Input page...");
         const form = document.getElementById('generate-form');
-        if (form) {
-            // フォーム送信イベントにリスナーを設定
-            form.addEventListener('submit', (event) => {
-                 event.preventDefault(); // デフォルトの送信をキャンセル
-                 handleGenerateSubmit(); // カスタム送信処理を呼び出し
-            });
-        } else {
-            console.warn("Generate form ('generate-form') not found.");
+        if (form) form.addEventListener('submit', (e) => { e.preventDefault(); handleGenerateSubmit(); });
+        else console.warn("Generate form not found.");
+        const urlParams = new URLSearchParams(window.location.search);
+        const initialUrl = urlParams.get('url');
+        if (initialUrl) {
+            const urlInput = document.getElementById('youtube-url');
+            if (urlInput) urlInput.value = initialUrl;
         }
-         // URLパラメータから初期値を設定する例 (任意)
-         const urlParams = new URLSearchParams(window.location.search);
-         const initialUrl = urlParams.get('url');
-         if (initialUrl) {
-             const urlInput = document.getElementById('youtube-url');
-             if (urlInput) {
-                 urlInput.value = initialUrl;
-                 console.log("Set initial URL from query parameter:", initialUrl);
-             }
-         }
     }
-    // history.html の初期化処理 (必要なら)
+    // historyページ固有の初期化
     else if (pathname.endsWith('/history') || pathname.endsWith('/history.html')) {
         console.log("Initializing History page...");
-        // 例: loadHistoryData(); // 履歴データを読み込んで表示する関数
+        // loadHistoryData();
     }
-    // settings.html の初期化処理
+    // settingsページ固有の初期化
     else if (pathname.endsWith('/settings') || pathname.endsWith('/settings.html')) {
         console.log("Initializing Settings page...");
-        // ダークモードトグルの状態をlocalStorageに合わせて更新
-        try {
+        try { // ダークモードトグル状態設定
             const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
-            // type='dark' を持つトグルスイッチを探す
             const toggle = document.querySelector('input[type="checkbox"][onchange*="dark"]');
-            if (toggle) {
-                toggle.checked = darkModeEnabled;
-                console.log("Set dark mode toggle state to:", darkModeEnabled);
-            } else {
-                 console.warn("Dark mode toggle switch not found on settings page.");
-            }
-        } catch (e) {
-             console.warn('Could not set dark mode toggle state on settings page:', e);
-        }
+            if (toggle) toggle.checked = darkModeEnabled;
+            else console.warn("Dark mode toggle not found.");
+        } catch (e) { console.warn('Could not set dark mode toggle state:', e); }
     }
 
-    // フッターナビゲーションのアクティブ状態を更新
-    updateFooterNavActiveState(pathname);
-
-    // ★★★ ページ読み込み時にメニューが意図せず開いた状態なら閉じる ★★★
-    // (特にブラウザの履歴操作などで発生することがあるため)
-    closeMenu();
+    updateFooterNavActiveState(pathname); // フッターアクティブ状態更新
+    closeMenu(); // 念のためメニューを閉じる
 });
 
 
@@ -797,62 +620,20 @@ document.addEventListener('DOMContentLoaded', () => {
  */
  function updateFooterNavActiveState(currentPath) {
     const footerNav = document.querySelector('.footer-nav');
-    if (!footerNav) {
-        // フッターがないページなら何もしない
-        return;
-    }
-
+    if (!footerNav) return;
     const buttons = footerNav.querySelectorAll('button');
-    let foundActive = false; // アクティブなボタンが見つかったか
-
     buttons.forEach(button => {
-        button.classList.remove('active'); // まず全て非アクティブに
+        button.classList.remove('active');
         const onclickAttr = button.getAttribute('onclick');
         if (onclickAttr) {
-            // onclick属性の値から遷移先を判定
-            if ((currentPath === '/' || currentPath.endsWith('/input') || currentPath.endsWith('/input.html')) && onclickAttr.includes('goToInput')) {
-                button.classList.add('active');
-                foundActive = true;
-            } else if ((currentPath.endsWith('/history') || currentPath.endsWith('/history.html')) && onclickAttr.includes('goToHistory')) {
-                button.classList.add('active');
-                foundActive = true;
-            } else if ((currentPath.endsWith('/settings') || currentPath.endsWith('/settings.html')) && onclickAttr.includes('goToSettings')) {
-                button.classList.add('active');
-                foundActive = true;
-            }
-            // learning ページは通常フッターをアクティブにしない想定
+            if ((currentPath === '/' || currentPath.endsWith('/input') || currentPath.endsWith('/input.html')) && onclickAttr.includes('goToInput')) button.classList.add('active');
+            else if ((currentPath.endsWith('/history') || currentPath.endsWith('/history.html')) && onclickAttr.includes('goToHistory')) button.classList.add('active');
+            else if ((currentPath.endsWith('/settings') || currentPath.endsWith('/settings.html')) && onclickAttr.includes('goToSettings')) button.classList.add('active');
         }
     });
-
-    // デバッグ用ログ
-    // console.log(`Footer nav active state updated for path "${currentPath}". Active button found: ${foundActive}`);
 }
 
 
-// --- デバッグ用: 一部関数/変数をグローバルスコープに公開 ---
-// 注意: 本番環境では削除またはコメントアウトすることを強く推奨します
-window.debug = {
-    navigateTo,
-    goToInput,
-    goToHistory,
-    goToSettings,
-    goToLearning,
-    openMenu,
-    closeMenu,
-    handleGenerateSubmit,
-    initializeLearningScreen,
-    handleOptionClick,
-    revealAnswer,
-    goToNext,
-    goToPrev,
-    handleToggleChange,
-    handleLogout,
-    showCorrectEffect,
-    hideCorrectEffect,
-    learningData,      // 現在の学習データ確認用
-    currentItemIndex,  // 現在のインデックス確認用
-    sideMenu,          // メニュー要素確認用
-    menuOverlay        // オーバーレイ要素確認用
-};
-
-// --- END OF FILE script.js ---
+// --- デバッグ用グローバル公開 ---
+// 本番環境では削除推奨
+