First

static/script.js

@@ -51,7 +51,7 @@ function closeMenu() {
 
 
 /**
- * ローディングスピナーを表示/非表示します。
+ * ローディングスピナーを表示/非表示します。 learning.html の要素表示/非表示も制御します。
  * @param {boolean} show - trueで表示、falseで非表示
  * @param {string} buttonId - 操作対象のボタンID (input.html用)
  */
@@ -76,27 +76,32 @@ function toggleLoading(show, buttonId = 'generate-button') {
     // learning.html 用の汎用ローディング表示
     const loadingIndicator = document.getElementById('mode-indicator');
     const cardElement = document.getElementById('learning-card');
-    const paginationElement = document.querySelector('.pagination');
+    const paginationElement = document.querySelector('.pagination'); // pagination要素を取得
     const optionsArea = document.getElementById('options-area');
     const tapToShowElement = document.getElementById('tap-to-show');
 
     const currentPathname = window.location.pathname;
     if (currentPathname.endsWith('/learning') || currentPathname.endsWith('/learning.html')) {
         if (show) {
+            // ローディング開始時の処理
             if (loadingIndicator) {
                 loadingIndicator.textContent = '読み込み中...';
                 loadingIndicator.classList.add('loading');
             }
             if (cardElement) cardElement.style.opacity = '0.5';
-            if (paginationElement) paginationElement.style.display = 'none';
+            if (paginationElement) paginationElement.style.display = 'none'; // ★ 非表示にする
             if (optionsArea) optionsArea.style.display = 'none';
             if (tapToShowElement) tapToShowElement.style.display = 'none';
         } else {
+            // ローディング終了時の処理
             if (loadingIndicator) {
                  loadingIndicator.classList.remove('loading');
+                 // モード表示は displayCurrentItem で更新される
             }
             if (cardElement) cardElement.style.opacity = '1';
-            // 他の要素の表示は displayCurrentItem に任せる
+            // ★★★ ローディング終了時にページネーションを再表示 ★★★
+            if (paginationElement) paginationElement.style.display = 'flex'; // CSSでのdisplay値 (通常flex) に戻す
+            // optionsArea と tapToShowElement の表示は displayCurrentItem で適切に制御される
         }
     }
 }
@@ -189,8 +194,7 @@ async function handleGenerateSubmit() {
             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) {
             console.log("Generation successful, navigating to learning page with ID:", result.data.id);
             goToLearning(result.data.id);
@@ -228,7 +232,7 @@ async function initializeLearningScreen() {
         return;
     }
     console.log('Content ID:', contentId);
-    toggleLoading(true);
+    toggleLoading(true); // ★ ローディング開始 (ここでpaginationが消える)
 
     try {
         const response = await fetch(`/api/learning/${contentId}`);
@@ -241,7 +245,7 @@ async function initializeLearningScreen() {
             throw new Error(errorMessage);
         }
 
-        // ★★★ サーバーからの応答がオブジェクト {success: ..., data: {...}} であると想定 ★★★
+        // サーバーからの応答がオブジェクト {success: ..., data: {...}} であると想定
         const result = await response.json();
         console.log('Fetched data object:', result);
 
@@ -251,7 +255,7 @@ async function initializeLearningScreen() {
             throw new Error('サーバーから受け取ったデータの形式が正しくありません。');
         }
 
-        // ★★★ learningData を構築 (title と items を data から取得) ★★★
+        // learningData を構築 (title と items を data から取得)
         learningData = {
             title: result.data.title || `学習セット (${contentId})`, // data.title があればそれを使う
             items: result.data.items // data.items を使う
@@ -277,9 +281,11 @@ async function initializeLearningScreen() {
     } catch (error) {
         console.error('Error initializing learning screen:', error);
         const message = (error instanceof SyntaxError) ? `サーバー応答の解析エラー: ${error.message}` : `読み込みエラー: ${error.message}`;
-        displayLearningError(message);
+        displayLearningError(message); // エラー表示関数内で toggleLoading(false) が呼ばれる
     } finally {
-        toggleLoading(false);
+        // ★ 成功時も失敗時もここでローディングを終了させる
+        // displayLearningError内で呼ばれる場合もあるが、成功時はここで確実に呼ぶ
+        toggleLoading(false); // ★ ローディング終了 (ここでpaginationが再表示される)
     }
 }
 
@@ -299,12 +305,12 @@ function displayCurrentItem() {
 
     if (!cardElement || !cardTextElement || !answerTextElement || !tapToShowElement || !optionsArea || !modeIndicator) {
         console.error("One or more required learning elements are missing.");
-        displayLearningError("画面表示に必要な要素が見つかりません。");
+        displayLearningError("画面表示に必要な要素が見つかりません。"); // エラー表示内でtoggleLoading(false)される
         return;
     }
     if (!learningData || !learningData.items || currentItemIndex < 0 || currentItemIndex >= learningData.items.length) {
         console.error('Invalid learning data or index:', learningData, currentItemIndex);
-        displayLearningError('表示する学習データが見つかりません。');
+        displayLearningError('表示する学習データが見つかりません。'); // エラー表示内でtoggleLoading(false)される
         return;
     }
 
@@ -319,15 +325,15 @@ function displayCurrentItem() {
     optionsArea.style.display = 'none';
     modeIndicator.classList.remove('loading');
 
-    // ★★★ サーバーレスポンスのキーに合わせて item.text を使用 (変更なし) ★★★
-    if (item.type === 'question' && item.text && item.answer) { // questionではなくtextキーで問題文を取得
+    // サーバーレスポンスのキーに合わせて item.text を使用
+    if (item.type === 'question' && item.text && item.answer) {
         currentMode = 'quiz';
         modeIndicator.textContent = 'クイズモード';
         cardTextElement.textContent = item.text; // 問題文
         answerTextElement.textContent = `答え: ${item.answer}`;
 
         if (item.options && Array.isArray(item.options) && item.options.length > 0) {
-            optionsArea.style.display = 'block';
+            optionsArea.style.display = 'block'; // ★ 表示
             item.options.forEach(option => {
                 const button = document.createElement('button');
                 button.classList.add('option-button');
@@ -335,10 +341,10 @@ function displayCurrentItem() {
                 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'; // ★ 選択肢なくても解答表示は可能
         }
         cardElement.onclick = () => revealAnswer();
         tapToShowElement.onclick = () => revealAnswer();
@@ -348,20 +354,20 @@ function displayCurrentItem() {
         modeIndicator.textContent = '要約モード';
         cardTextElement.innerHTML = item.text.replace(/\n/g, '<br>');
         cardElement.onclick = null;
-        tapToShowElement.style.display = 'none';
-        optionsArea.style.display = 'none';
+        tapToShowElement.style.display = 'none'; // ★ 非表示
+        optionsArea.style.display = 'none'; // ★ 非表示
 
     } else {
         console.warn('Unknown or invalid item type/data:', item);
         currentMode = 'unknown';
         modeIndicator.textContent = 'データエラー';
-        cardTextElement.textContent = `[不正なデータ形式] ${item.text || 'この項目を表示できません。'}`; // item.textを表示試行
+        cardTextElement.textContent = `[不正なデータ形式] ${item.text || 'この項目を表示できません。'}`;
         cardElement.onclick = null;
-        tapToShowElement.style.display = 'none';
-        optionsArea.style.display = 'none';
+        tapToShowElement.style.display = 'none'; // ★ 非表示
+        optionsArea.style.display = 'none'; // ★ 非表示
     }
 
-    updatePagination();
+    updatePagination(); // ★ ページネーションの表示/非表示ではなく、内容とボタン状態を更新
 }
 
 /**
@@ -402,8 +408,8 @@ function revealAnswer(selectedOption = null) {
 
     if (answerTextElement && answerTextElement.style.display === 'block') return; // 表示済み
 
-    if (answerTextElement) answerTextElement.style.display = 'block';
-    if (tapToShowElement) tapToShowElement.style.display = 'none';
+    if (answerTextElement) answerTextElement.style.display = 'block'; // ★ 表示
+    if (tapToShowElement) tapToShowElement.style.display = 'none'; // ★ 非表示
     if (cardElement) cardElement.onclick = null;
 
     if (optionsArea) {
@@ -427,7 +433,7 @@ function revealAnswer(selectedOption = null) {
 function goToNext() {
     if (learningData && learningData.items && currentItemIndex < learningData.items.length - 1) {
         currentItemIndex++;
-        displayCurrentItem();
+        displayCurrentItem(); // displayCurrentItem内で要素の表示/非表示が制御される
     } else {
         console.log("Already at the last item or no data.");
         if (learningData && learningData.items && currentItemIndex === learningData.items.length - 1) {
@@ -442,7 +448,7 @@ function goToNext() {
 function goToPrev() {
     if (learningData && learningData.items && currentItemIndex > 0) {
         currentItemIndex--;
-        displayCurrentItem();
+        displayCurrentItem(); // displayCurrentItem内で要素の表示/非表示が制御される
     } else {
         console.log("Already at the first item or no data.");
     }
@@ -460,6 +466,8 @@ function updatePagination() {
          console.warn("Pagination elements not found.");
          return;
     }
+    // ★ ページネーション要素自体の表示/非表示は toggleLoading で行う
+    // ここでは内容とボタンの状態のみ更新
     if (learningData && learningData.items && learningData.items.length > 0) {
         const totalItems = learningData.items.length;
         pageInfo.textContent = `${currentItemIndex + 1} / ${totalItems}`;
@@ -490,13 +498,15 @@ function displayLearningError(message) {
         cardElement.innerHTML = `<p class="main-text error-text">${message}</p>`; // CSSでスタイル調整用クラス追加
         cardElement.onclick = null;
     }
+    // エラー時はページネーション等も非表示にする
     if (paginationElement) paginationElement.style.display = 'none';
     if (optionsArea) {
         optionsArea.innerHTML = '';
         optionsArea.style.display = 'none';
     }
     if (tapToShow) tapToShow.style.display = 'none';
-     toggleLoading(false); // エラー時はローディング解除
+    // ★ エラー表示関数内でも toggleLoading(false) を呼ぶことを確認（重複しても問題ない）
+    toggleLoading(false);
 }
 
 /**
@@ -578,7 +588,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (pathname.endsWith('/learning') || pathname.endsWith('/learning.html')) {
         correctEffect = document.getElementById('correct-effect');
         if (!correctEffect) console.warn("Correct effect element not found.");
-        initializeLearningScreen();
+        initializeLearningScreen(); // ★ initializeLearningScreen を呼ぶ
     }
 
     // inputページ固有の初期化
@@ -635,5 +645,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 // --- デバッグ用グローバル公開 ---
-// 本番環境では削除推奨
 
+// --- END OF FILE script.js ---