First

static/script.js

@@ -3,65 +3,109 @@
 "use strict"; // より厳格なエラーチェック
 
 // --- グローバル変数 ---
-let learningData = null;    // 学習データ (learning.html用)
+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 sideMenu = null;        // サイドメニュー要素
+let menuOverlay = null;     // メニューオーバーレイ要素
 
 // --- 共通関数 ---
 
 /**
- * 指定されたURLに遷移します。
+ * 指定されたURLに遷移します。遷移前にメニューを閉じます。
  * @param {string} url - 遷移先のURL
  */
 function navigateTo(url) {
-    window.location.href = url;
+    closeMenu(); // 遷移前にメニューを閉じる
+    // 少し遅延させてから遷移する（メニューが閉じるアニメーションを見せるため、任意）
+    setTimeout(() => {
+        window.location.href = url;
+    }, 100); // 100ミリ秒後に遷移
 }
 
 /**
- * メニューボタンがクリックされたときの処理（仮）
- * TODO: 実際のメニューUIを実装する
+ * サイドメニューを開きます。
  */
 function openMenu() {
-    console.log("Menu button clicked. Implement menu display logic here.");
-    alert("メニュー機能は未実装です。\nフッターのナビゲーションを使用してください。");
+    console.log("Opening menu...");
+    if (sideMenu && menuOverlay) {
+        sideMenu.classList.add('open');
+        menuOverlay.classList.add('open');
+        document.body.classList.add('menu-open'); // 背景スクロール禁止
+    } else {
+        console.error("Side menu or overlay element not found. Cannot open menu.");
+    }
+}
+
+/**
+ * サイドメニューを閉じます。
+ */
+function closeMenu() {
+    // console.log("Closing menu..."); // デバッグ時以外は不要かも
+    if (sideMenu && menuOverlay) {
+        sideMenu.classList.remove('open');
+        menuOverlay.classList.remove('open');
+        document.body.classList.remove('menu-open'); // 背景スクロール許可
+    }
+    // メニュー要素が見つからない場合のエラーログはここでは不要
 }
 
+
 /**
  * ローディングスピナーを表示/非表示します。
  * @param {boolean} show - trueで表示、falseで非表示
  * @param {string} buttonId - 操作対象のボタンID (input.html用)
  */
 function toggleLoading(show, buttonId = 'generate-button') {
-    const generateButton = document.getElementById(buttonId);
-    if (!generateButton) return;
+    const targetButton = document.getElementById(buttonId);
 
-    const spinner = generateButton.querySelector('.loading-spinner');
-    const buttonText = generateButton.querySelector('.button-text');
+    // input.html の generate-button の処理
+    if (targetButton && buttonId === 'generate-button') {
+        const spinner = targetButton.querySelector('.loading-spinner');
+        const buttonText = targetButton.querySelector('.button-text');
 
-    if (show) {
-        generateButton.disabled = true;
-        if (spinner) spinner.style.display = 'inline-block';
-        if (buttonText) buttonText.textContent = '生成中...';
-    } else {
-        generateButton.disabled = false;
-        if (spinner) spinner.style.display = 'none';
-        if (buttonText) buttonText.textContent = '生成する'; // 元のテキストに戻す
+        if (show) {
+            targetButton.disabled = true;
+            if (spinner) spinner.style.display = 'inline-block';
+            if (buttonText) buttonText.textContent = '生成中...';
+        } else {
+            targetButton.disabled = false;
+            if (spinner) spinner.style.display = 'none';
+            if (buttonText) buttonText.textContent = '生成する'; // 元のテキストに戻す
+        }
     }
 
-    // learning.html 用のローディング表示/非表示
+    // learning.html 用の汎用ローディング表示 (mode-indicatorなどを利用)
     const loadingIndicator = document.getElementById('mode-indicator');
     const cardElement = document.getElementById('learning-card');
     const paginationElement = document.querySelector('.pagination');
     const optionsArea = document.getElementById('options-area');
-
-    if (pathname === '/learning') { // learning.htmlの場合のみ
-        if (loadingIndicator) loadingIndicator.textContent = show ? '読み込み中...' : ''; // モード表示はdisplayCurrentItemで行う
-        if (loadingIndicator) loadingIndicator.classList.toggle('loading', show);
-        if (cardElement) cardElement.style.opacity = show ? '0.5' : '1';
-        if (paginationElement) paginationElement.style.display = show ? 'none' : 'flex';
-        if (optionsArea) optionsArea.style.display = show ? 'none' : 'block'; // 初期はblockだがdisplayCurrentItemで調整
+    const tapToShowElement = document.getElementById('tap-to-show'); // 追加
+
+    // 現在のパスがlearningページか確認
+    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 (optionsArea) optionsArea.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 に任せる
+        }
     }
 }
 
@@ -74,13 +118,19 @@ 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) { // メッセージがある場合のみコンソールにエラー表示
+            console.error(`Error element with ID "${elementId}" not found. Cannot display message: ${message}`);
+        }
     }
 }
 
 // --- 画面遷移用関数 ---
 function goToInput() {
-    navigateTo('/input'); // input.html はルートパスに割り当てる想定
+    navigateTo('/'); // input.html はルートパスを想定
 }
 
 function goToHistory() {
@@ -93,10 +143,12 @@ 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が見つかりません。履歴画面から再度お試しください。');
     }
 }
 
@@ -109,96 +161,118 @@ function goToLearning(contentId) {
 async function handleGenerateSubmit() {
     const urlInput = document.getElementById('youtube-url');
     const youtubeUrl = urlInput.value.trim();
-    displayErrorMessage(''); // 前のエラーメッセージをクリア
+    const errorMsgElementId = 'error-message'; // エラーメッセージ表示用ID
+    displayErrorMessage('', errorMsgElementId); // 前のエラーメッセージをクリア
 
     if (!youtubeUrl) {
-        displayErrorMessage('YouTubeリンクを入力してください。');
-        return false;
+        displayErrorMessage('YouTubeリンクを入力してください。', errorMsgElementId);
+        return false; // 送信中断
     }
 
-    // 簡単なURL形式チェック
+    // 簡単なURL形式チェックと YouTube ドメイン検証
     try {
-        const urlObj = new URL(youtubeUrl);
-        if (!['www.youtube.com', 'youtube.com', 'youtu.be'].includes(urlObj.hostname)) {
-            throw new Error('Invalid hostname');
+        const urlObj = new URL(youtubeUrl); // URLオブジェクト生成試行
+        const validHostnames = ['www.youtube.com', 'youtube.com', 'youtu.be'];
+        if (!validHostnames.includes(urlObj.hostname)) {
+            throw new Error('Invalid hostname'); // YouTube以外のドメイン
         }
-        // youtu.be/XXX または youtube.com/watch?v=XXX の形式を期待
-        if (urlObj.hostname === 'youtu.be' && !urlObj.pathname.substring(1)) {
-             throw new Error('Missing video ID for youtu.be');
+        // さらに詳細なパスチェック（例）
+        if (urlObj.hostname === 'youtu.be' && urlObj.pathname.length <= 1) {
+            throw new Error('Missing video ID for youtu.be'); // youtu.be/ の後にIDがない
         }
-        if (urlObj.hostname.includes('youtube.com') && urlObj.pathname === '/watch' && !urlObj.searchParams.get('v')) {
-            throw new Error('Missing video ID for youtube.com/watch');
+        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.hostname.includes('youtube.com') && urlObj.pathname.startsWith('/shorts/') && !urlObj.pathname.substring(8)) {
-             throw new Error('Missing video ID for youtube.com/shorts');
-         }
-
     } catch (e) {
-         displayErrorMessage('有効なYouTube動画リンクを入力してください。(例: https://www.youtube.com/watch?v=...)');
-         return false;
+        // URLパースエラーまたは上記バリデーションエラー
+        console.warn("Invalid URL format:", e.message);
+        displayErrorMessage('有効なYouTube動画のリンクを入力してください。(例: https://www.youtube.com/watch?v=...)', errorMsgElementId);
+        return false; // 送信中断
     }
 
 
     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を返すことを期待
+                'Accept': 'application/json', // サーバーからのJSON応答を期待
             },
-            body: JSON.stringify({ url: youtubeUrl }),
+            body: JSON.stringify({ url: youtubeUrl }), // URLをJSON形式で送信
         });
 
-        const result = await response.json();
+        // レスポンスボディを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('サーバーからの応答形式が予期せぬ形式です。');
+             }
+        }
 
-        if (response.ok && result.success && result.data && result.data.id) {
-            // 成功したら学習画面へ遷移
-            // alert('生成に成功しました！学習画面に移動します。'); // すぐ遷移するので不要かも
+
+        // ★★★ サーバーが返す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 {
-            // 失敗したらエラーメッセージ表示
-            console.error('Generation failed:', result);
-            // サーバーからのメッセージがあれば表示、なければ汎用メッセージ
-            const serverMessage = result.message || (result.error ? result.error.message : null);
-            displayErrorMessage(serverMessage || '生成中に不明なエラーが発生しました。');
+            // 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})`); // それ以外の場合
+            displayErrorMessage(serverMessage, errorMsgElementId);
         }
 
     } catch (error) {
+        // fetch自体が失敗した場合（ネットワークエラーなど）または上記のthrow new Error
         console.error('Error during generation request:', error);
-        // ネットワークエラーか、JSONパースエラーか
-        if (error instanceof SyntaxError) {
-             displayErrorMessage('サーバーからの応答形式が不正です。');
-        } else if (error instanceof TypeError) {
-            displayErrorMessage('通信エラーが発生しました。ネットワーク接続を確認してください。');
-        }
-         else {
-            displayErrorMessage(`通信エラーが発生しました: ${error.message}`);
+        // ユーザーフレンドリーなメッセージ表示
+        if (error.message.includes('Failed to fetch')) {
+             displayErrorMessage('サーバーに接続できませんでした。ネットワーク接続を確認してください。', errorMsgElementId);
+        } else {
+            displayErrorMessage(`エラーが発生しました: ${error.message}`, errorMsgElementId);
         }
     } finally {
-        toggleLoading(false, 'generate-button'); // ローディング終了
+        toggleLoading(false, 'generate-button'); // ローディング終了（成功・失敗問わず）
     }
 
-    return false; // prevent default form submission
+    return false; // formのデフォルト送信を常にキャンセル
 }
 
 
 // --- learning.html 用の処理 ---
 
 /**
- * learning.html の初期化
+ * learning.html の初期化: コンテンツデータを取得し、最初のアイテムを表示
  */
 async function initializeLearningScreen() {
     console.log('Initializing Learning Screen...');
     const params = new URLSearchParams(window.location.search);
     const contentId = params.get('id');
 
-    // ★★★ 正解エフェクト要素を取得 ★★★
-    correctEffect = document.getElementById('correct-effect');
+    // 正解エフェクト要素はDOMContentLoadedで取得済みのはず
 
     if (!contentId) {
-        displayLearningError('コンテンツIDが指定されていません。');
+        displayLearningError('学習コンテンツのIDが見つかりません。');
         return;
     }
     console.log('Content ID:', contentId);
@@ -209,61 +283,68 @@ async function initializeLearningScreen() {
         const response = await fetch(`/api/learning/${contentId}`);
         if (!response.ok) {
             // エラーレスポンスがJSON形式でない場合も考慮
-            let errorMessage = `サーバーからのデータ取得に失敗しました (${response.status})`;
+            let errorMessage = `サーバーからのデータ取得に失敗 (${response.status})`;
             try {
                 const errorData = await response.json();
                 errorMessage = errorData.message || errorMessage;
             } catch (e) {
-                // JSONパース失敗時はそのままのエラーメッセージを使う
+                console.warn('Failed to parse error response as JSON.');
             }
             throw new Error(errorMessage);
         }
 
-        const result = await response.json();
-        console.log('Fetched data:', result);
+        // ★★★ サーバーからの応答が配列であると想定して処理 ★★★
+        const itemsArray = await response.json();
+        console.log('Fetched data (items array):', itemsArray);
 
-        if (result.success && result.data) {
-            learningData = result.data; // グローバル変数に格納
-            if (!learningData.items || !Array.isArray(learningData.items) || learningData.items.length === 0) {
-                 throw new Error('学習データが見つからないか、形式が正しくありません。');
-            }
-            // タイトルを設定
-            const titleElement = document.getElementById('learning-title');
-            if (titleElement) {
-                titleElement.textContent = learningData.title || '学習コンテンツ';
-            }
+        // 配列であるか、空でないかをチェック
+        if (!Array.isArray(itemsArray)) {
+            throw new Error('サーバーからのデータ形式が不正です (配列ではありません)。');
+        }
+        if (itemsArray.length === 0) {
+             throw new Error('学習データが見つかりませんでした (空の配列)。');
+        }
 
-            // 最初のアイテムを表示
-            currentItemIndex = 0;
-            displayCurrentItem();
+        // learningData オブジェクトを構築
+        learningData = {
+            title: `学習セット (${contentId})`, // タイトルは固定文字列またはcontentIdから生成
+            items: itemsArray // 取得した配列を items プロパティに設定
+        };
 
+        // タイトルを設定 (learningData.title を使用)
+        const titleElement = document.getElementById('learning-title');
+        if (titleElement) {
+            titleElement.textContent = learningData.title || '学習セット'; // デフォルトタイトル
         } else {
-            throw new Error(result.message || '学習データの読み込みに失敗し��した。');
+            console.warn("Title element ('learning-title') not found.");
         }
 
+        // 最初のアイテムを表示
+        currentItemIndex = 0;
+        displayCurrentItem();
+
     } catch (error) {
+        // fetchエラーまたは上記のthrow new Error
         console.error('Error initializing learning screen:', error);
-        displayLearningError(`読み込みエラー: ${error.message}`);
+        // JSONパースエラーの場合のメッセージを改善
+        if (error instanceof SyntaxError) {
+             displayLearningError(`サーバー応答の解析エラー: ${error.message}`);
+        } else {
+             displayLearningError(`読み込みエラー: ${error.message}`);
+        }
     } finally {
         toggleLoading(false); // ローディング表示終了
     }
 }
 
 /**
- * 現在の学習アイテムをカードに表示
+ * 現在の学習アイテムをカードに表示 (クイズ or 要約)
  */
 function displayCurrentItem() {
-    // ★★★ 最初にエフェクトを隠し、タイマーもクリア ★★★
-    hideCorrectEffect();
-    clearTimeout(correctEffectTimeout);
+    hideCorrectEffect(); // 前のエフェクトを隠す
+    clearTimeout(correctEffectTimeout); // タイマーもクリア
 
-    if (!learningData || !learningData.items || currentItemIndex < 0 || currentItemIndex >= learningData.items.length) {
-        console.error('Invalid learning data or index');
-        displayLearningError('学習データを表示できません。');
-        return;
-    }
-
-    const item = learningData.items[currentItemIndex];
+    // 要素取得 (毎回取得する方が確実)
     const cardElement = document.getElementById('learning-card');
     const cardTextElement = document.getElementById('card-text');
     const answerTextElement = document.getElementById('answer-text');
@@ -271,188 +352,242 @@ function displayCurrentItem() {
     const optionsArea = document.getElementById('options-area');
     const modeIndicator = document.getElementById('mode-indicator');
 
-    // リセット
-    cardTextElement.innerHTML = '';
+    // 要素が存在しない場合はエラーを出して終了
+    if (!cardElement || !cardTextElement || !answerTextElement || !tapToShowElement || !optionsArea || !modeIndicator) {
+        console.error("One or more required learning elements are missing from the DOM.");
+        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でリセット
     answerTextElement.style.display = 'none';
+    answerTextElement.textContent = ''; // 内容もクリア
     tapToShowElement.style.display = 'none';
-    optionsArea.innerHTML = '';
-    optionsArea.style.display = 'none'; // デフォルトは非表示
+    optionsArea.innerHTML = ''; // 選択肢エリアクリア
+    optionsArea.style.display = 'none'; // 一旦非表示
     modeIndicator.classList.remove('loading'); // ローディングクラス除去
 
-    if (item.type === 'question' && item.question && item.answer) { // question と answer が存在するかチェック
+    // itemタイプに基づいて表示を分岐
+    // ★★★ 問題文のキーを 'text' に修正 ★★★
+    if (item.type === 'question' && item.text && item.answer) { // `item.question` -> `item.text` に変更
         currentMode = 'quiz';
         modeIndicator.textContent = 'クイズモード';
-        cardTextElement.textContent = item.question; // question プロパティを使用
-        answerTextElement.textContent = `答え: ${item.answer}`; // 答えを事前に設定（非表示）
-        tapToShowElement.style.display = 'block'; // タップして表示を表示
+        // ★★★ 問題文には item.text を使用 ★★★
+        cardTextElement.textContent = item.text; // 問題文はtextContentで安全に設定
+        answerTextElement.textContent = `答え: ${item.answer}`; // 答えは事前に設定（非表示）
 
         // 選択肢ボタンを生成
         if (item.options && Array.isArray(item.options) && item.options.length > 0) {
             optionsArea.style.display = 'block'; // 選択肢があれば表示
-            // 選択肢をシャッフルする場合（任意）
-            // const shuffledOptions = [...item.options].sort(() => Math.random() - 0.5);
             const optionsToDisplay = item.options; // シャッフルしない場合
 
             optionsToDisplay.forEach(option => {
                 const button = document.createElement('button');
                 button.classList.add('option-button');
                 button.textContent = option;
-                // ★★★ 選択肢クリック時の動作を変更 ★★★
-                button.onclick = () => handleOptionClick(option); // クリックされた選択肢を渡す
+                // クリックしたら handleOptionClick を呼ぶ
+                button.onclick = () => handleOptionClick(option);
                 optionsArea.appendChild(button);
             });
+            tapToShowElement.style.display = 'block'; // 選択肢がある場合もタップ表示は有効
         } else {
-             console.warn(`Item ${currentItemIndex} is a question but has no options.`);
-             // 選択肢がないクイズの場合の表示（例：自由記述？）
-             tapToShowElement.style.display = 'block'; // 答え表示はできるようにしておく
+             // 選択肢がないクイズの場合
+             console.warn(`Quiz item ${currentItemIndex} has no options.`);
+             tapToShowElement.style.display = 'block'; // 答え表示は可能にする
         }
-        // カード自体のクリックでも解答表示できるようにする
-        cardElement.onclick = revealAnswer;
-        tapToShowElement.onclick = revealAnswer;
+        // カード自体 or タップ表示テキストのクリックで解答表示
+        cardElement.onclick = () => revealAnswer(); // 引数なしで呼び出し
+        tapToShowElement.onclick = () => revealAnswer(); // 引数なしで呼び出し
 
-    } else if (item.type === 'summary' && item.text) { // summary と text が存在するかチェック
+    } else if (item.type === 'summary' && item.text) {
         currentMode = 'summary';
         modeIndicator.textContent = '要約モード';
-        // 改行を<br>に変換し、安全にHTMLとして設定（XSS対策のためtextContent推奨だが、改行表示のためにinnerHTMLを使用）
-        // サニタイズが必要な場合はライブラリ(DOMPurifyなど)を使うこと
+        // 改行(\n)を<br>に置換して表示 (innerHTMLを使うので注意)
         cardTextElement.innerHTML = item.text.replace(/\n/g, '<br>');
 
-        // 要約モードでは答えも選択肢も不要、カードクリックも不要
+        // 要約モードではクリックイベント不要
         cardElement.onclick = null;
         tapToShowElement.style.display = 'none';
+        optionsArea.style.display = 'none'; // 念のため
+
     } else {
-        console.warn('Unknown or invalid item type:', item.type, item);
-        modeIndicator.textContent = '不明なデータ';
-        cardTextElement.textContent = `[データ形式エラー] ${item.text || item.question || '内容なし'}`;
-        cardElement.onclick = null; // クリック動作無効
+        // 不明なタイプまたは必要なデータ (text や answer) が欠けている場合
+        console.warn('Unknown or invalid item type/data:', item);
+        currentMode = 'unknown';
+        modeIndicator.textContent = 'データエラー';
+        // ★★★ `item.text` を表示試行するように変更 ★★★
+        cardTextElement.textContent = `[不正なデータ形式] ${item.text || 'この項目を表示できません。'}`;
+        cardElement.onclick = null;
         tapToShowElement.style.display = 'none';
+        optionsArea.style.display = 'none';
     }
 
-    updatePagination();
+    updatePagination(); // ページネーション表示を更新
 }
 
-// ★★★ 選択肢クリック時の処理を追加 ★★★
+/**
+ * クイズの選択肢がクリックされたときの処理
+ * @param {string} selectedOption - ユーザーが選択した選択肢のテキスト
+ */
 function handleOptionClick(selectedOption) {
-    if (currentMode !== 'quiz') return; // クイズモード以外では何もしない
+    // ★★★ 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;
+     }
+
+    // ★★★ learningData.items から現在のアイテムを取得 ★★★
     const currentItem = learningData.items[currentItemIndex];
     const correctAnswer = currentItem.answer;
     const isCorrect = selectedOption === correctAnswer;
 
-    // --- 正解だった場合の処理 ---
     if (isCorrect) {
-        console.log("正解！");
-        showCorrectEffect(); // ★★★ 正解エフェクトを表示 ★★★
+        console.log("Correct!");
+        showCorrectEffect(); // ★★★ 正解エフェクト表示 ★★★
     } else {
-        console.log("不正解...");
-        // 不正解時のエフェクトなどが必要ならここに追加
+        console.log("Incorrect...");
+        // 不正解時のフィードバック（例: ボタンを赤くするなど）はrevealAnswerで行う
     }
 
-    // 選択肢ボタンの状態更新と解答表示
-    revealAnswer(selectedOption); // 選んだ選択肢を渡してスタイルを設定
+    // 選択された選択肢を引数に渡して、解答表示とボタンの状態更新を行う
+    revealAnswer(selectedOption);
 }
 
 
 /**
- * クイズの解答を表示する（選択肢クリックまたはカードタップ時）
- * @param {string|null} selectedOption - ユーザーが選択した選択肢 (選択肢クリック時のみ渡される)
+ * クイズの解答を表示し、選択肢ボタンの状態を更新する
+ * @param {string|null} [selectedOption=null] - ユーザーが選択した選択肢。nullの場合はカードタップ等による表示。
  */
 function revealAnswer(selectedOption = null) {
-    // クイズモードの場合のみ動作
-    if (currentMode === 'quiz') {
-        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');
-
-        // 既に表示済みなら何もしない（二重実行防止）
-        if (answerTextElement && answerTextElement.style.display === 'block') {
-            return;
-        }
+     // ★★★ 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'); // カード要素も取得
 
+    // 既に表示済みなら何もしない
+    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 && learningData.items[currentItemIndex]) {
-             const correctAnswer = learningData.items[currentItemIndex].answer;
-             const buttons = optionsArea.getElementsByTagName('button');
-             for (let btn of buttons) {
-                btn.disabled = true; // すべてのボタンを無効化
-                btn.onclick = null; // クリックイベントも削除
-
-                if (btn.textContent === correctAnswer) {
-                    btn.classList.add('correct'); // 正解ボタン
-                } else if (btn.textContent === selectedOption) {
-                    btn.classList.add('incorrect'); // 選択された不正解ボタン
-                } else {
-                    btn.classList.add('other-disabled'); // 選ばれなかった他の選択肢
-                }
+    // 選択肢ボタンがあれば状態を更新
+    if (optionsArea) {
+         // ★★★ learningData.items から現在のアイテムを取得 ★★★
+        const correctAnswer = learningData.items[currentItemIndex].answer;
+        const buttons = optionsArea.querySelectorAll('.option-button'); // querySelectorAll推奨
+
+        buttons.forEach(button => {
+            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'); // 他の選択肢用のスタイル
             }
-        }
+        });
     }
 }
 
 
 /**
- * 次のアイテムへ移動
+ * 次の学習アイテムへ移動
  */
 function goToNext() {
-    if (learningData && currentItemIndex < learningData.items.length - 1) {
+    // ★★★ 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("学習セットが完了しました！");
+        }
     }
 }
 
 /**
- * 前のアイテムへ移動
+ * 前の学習アイテムへ移動
  */
 function goToPrev() {
-    if (learningData && currentItemIndex > 0) {
+    // ★★★ learningData.items の存在もチェック ★★★
+    if (learningData && learningData.items && currentItemIndex > 0) {
         currentItemIndex--;
-        displayCurrentItem();
+        displayCurrentItem(); // 前のアイテムを表示
+    } else {
+        console.log("Already at the first item or no data.");
     }
 }
 
 /**
- * ページネーション表示を更新
+ * ページネーション（ページ番号とボタンの状態）を更新
  */
 function updatePagination() {
     const pageInfo = document.getElementById('page-info');
     const prevButton = document.getElementById('prev-button');
     const nextButton = document.getElementById('next-button');
 
-    if (pageInfo && prevButton && nextButton && learningData && learningData.items) {
+    // 要素の存在チェック
+    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;
-        // totalItemsが0の場合のエラーを防ぐ
-        if (totalItems > 0) {
-            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;
-        }
+        pageInfo.textContent = `${currentItemIndex + 1} / ${totalItems}`;
+        // ボタンの有効/無効を設定
+        prevButton.disabled = currentItemIndex === 0;
+        nextButton.disabled = currentItemIndex === totalItems - 1;
     } else {
-         // 要素がないかデータがない場合
-         if(pageInfo) pageInfo.textContent = '- / -';
-         if(prevButton) prevButton.disabled = true;
-         if(nextButton) nextButton.disabled = true;
+        // データがない場合や空の場合
+        pageInfo.textContent = '0 / 0';
+        prevButton.disabled = true;
+        nextButton.disabled = true;
     }
 }
 
 /**
- * learning.html でエラーを表示
+ * learning.html でエラーが発生した場合の表示処理
+ * @param {string} message - 表示するエラーメッセージ
  */
 function displayLearningError(message) {
     const cardElement = document.getElementById('learning-card');
@@ -462,177 +597,240 @@ 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 (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.onclick = null; // クリックイベント解除
     }
-    if (paginationElement) paginationElement.style.display = 'none';
-    if (optionsArea) optionsArea.innerHTML = ''; // オプションクリア
-    if (optionsArea) optionsArea.style.display = 'none';
-    if (tapToShow) tapToShow.style.display = 'none';
+    if (paginationElement) paginationElement.style.display = 'none'; // ページネーション非表示
+    if (optionsArea) {
+        optionsArea.innerHTML = ''; // 選択肢クリア
+        optionsArea.style.display = 'none';
+    }
+    if (tapToShow) tapToShow.style.display = 'none'; // タップ表示も隠す
+
+     // エラー時はローディング表示も確実に解除
+     toggleLoading(false);
 }
 
-// --- ★★★ 正解エフェクト表示関数を追加 ★★★ ---
+/**
+ * 正解時に「〇」エフェクトを表示する
+ */
 function showCorrectEffect() {
     if (correctEffect) {
-        // 既存のタイムアウトがあればクリア
-        clearTimeout(correctEffectTimeout);
-
-        correctEffect.classList.add('show'); // 表示用クラスを追加
+        clearTimeout(correctEffectTimeout); // 既存のタイマーをクリア
+        correctEffect.classList.add('show'); // 表示クラスを追加
 
-        // 1秒後 (1000ms) に非表示処理を開始
+        // 指定時間後 (例: 1秒) に非表示処理を開始
         correctEffectTimeout = setTimeout(() => {
             hideCorrectEffect();
-        }, 1000); // 表示時間はここで調整 (ミリ秒)
+        }, 1000); // 表示時間 (ミリ秒)
+    } else {
+        console.warn("Correct effect element not found.");
     }
 }
 
-// --- ★★★ 正解エフェクト非表示関数を追加 ★★★ ---
+/**
+ * 正解エフェクトを非表示にする
+ */
 function hideCorrectEffect() {
     if (correctEffect && correctEffect.classList.contains('show')) {
-        correctEffect.classList.remove('show');
-        // アニメーション完了後に display: none に戻したい場合は transitionend イベントを使う
-        // correctEffect.addEventListener('transitionend', () => {
-        //     correctEffect.style.display = 'none';
-        // }, { once: true }); // 一度だけ実行
-        // ただし、クラスの付け外しだけで opacity と transform を制御する方がシンプル
+        correctEffect.classList.remove('show'); // 表示クラスを削除
     }
+    // タイマーもクリアしておく（手動で非表示にする場合など）
+    clearTimeout(correctEffectTimeout);
 }
 
 
 // --- settings.html 用の処理 ---
 
 /**
- * トグルスイッチの変更ハンドラ
+ * トグルスイッチの状態が変更されたときの処理
+ * @param {HTMLInputElement} checkbox - 変更されたチェックボックス要素
+ * @param {string} type - トグルの種類 ('dark', 'notification' など)
  */
 function handleToggleChange(checkbox, type) {
-    console.log(`Toggle changed for ${type}: ${checkbox.checked}`);
+    const isChecked = checkbox.checked;
+    console.log(`Toggle changed for ${type}: ${isChecked}`);
+
     if (type === 'dark') {
-        document.body.classList.toggle('dark-mode', checkbox.checked);
+        // ダークモードの切り替え
+        document.body.classList.toggle('dark-mode', isChecked);
+        // 設定をlocalStorageに保存 (エラーハンドリング付き)
         try {
-            localStorage.setItem('darkModeEnabled', checkbox.checked);
+            localStorage.setItem('darkModeEnabled', isChecked);
+            console.log(`Dark mode preference saved: ${isChecked}`);
         } catch (e) {
-            console.warn('Could not save dark mode preference to localStorage.');
+            console.warn('Could not save dark mode preference to localStorage:', e);
+            // ユーザーに通知する (任意)
+            // alert('ダークモード設定の保存に失敗しました。');
         }
+    } else if (type === 'notification') {
+        // 通知設定の切り替え (未実装)
+        console.log("Notification setting toggled:", isChecked);
+        alert(`通知設定は現在未実装です。(設定: ${isChecked ? 'ON' : 'OFF'})`);
+        // ここに通知設定のAPI呼び出しなどを実装
     }
-    // 他のトグル（例: プッシュ通知）の処理もここに追加
+    // 他のトグルスイッチの処理もここに追加
 }
 
 /**
- * ログアウトボタンの処理
+ * ログアウトボタンがクリックされたときの処理
  */
 function handleLogout() {
-    console.log("Logout clicked");
-    // TODO: 実際のログアウト処理（API呼び出し、セッションクリアなど）
-    alert("ログアウトしました。(機能は未実装)");
-    // 必要であればログイン画面などに遷移
-    // navigateTo('/login');
-    // 例として入力画面に戻る
-     goToInput();
+    console.log("Logout button clicked");
+    // TODO: 実際のログアウト処理を実装
+    // - サーバーAPIへのログアウト要求
+    // - ローカルストレージやセッションストレージの認証情報クリア
+    // - など
+
+    // 仮の動作: アラート表示と入力画面への遷移
+    alert("ログアウトしました。(この機能は現在開発中です)");
+    // navigateTo 内でメニューが閉じる
+    goToInput();
 }
 
 /**
- * ダークモード設定を読み込んで適用する
+ * ローカルストレージからダークモード設定を読み込み、bodyに適用する
  */
 function applyDarkModePreference() {
      try {
+        // localStorageから 'darkModeEnabled' の値を取得し、'true' かどうかで判定
         const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
         document.body.classList.toggle('dark-mode', darkModeEnabled);
-        // 設定画面のトグルスイッチの状態も合わせる
-        // DOMContentLoaded より前に実行される場合があるので、
-        // settings.htmlの初期化時にスイッチの状態を更新する方が確実
+        console.log(`Applied dark mode preference from localStorage: ${darkModeEnabled}`);
     } catch (e) {
-        console.warn('Could not load dark mode preference from localStorage.');
+        console.warn('Could not load or apply dark mode preference from localStorage:', e);
+        // ここでエラーが発生しても処理は続行する
     }
 }
 
 
 // --- ページの初期化処理 ---
-const pathname = window.location.pathname; // グローバルスコープで取得
+const pathname = window.location.pathname; // 現在のパスをグローバルスコープで取得
 
-// ダークモード設定を最初に適用 (FOUC対策)
+// ★★★ 最初にダークモード設定を適用 (FOUC: Flash of Unstyled Content 対策) ★★★
 applyDarkModePreference();
 
+// ★★★ DOMContentLoaded イベントリスナー: DOM構築完了後に実行 ★★★
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOM fully loaded and parsed. 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 (pathname === '/' || pathname === '/input' || pathname === '/input.html') { // input.html のパスパターンを考慮
+    // learning.html の場合のみ正解エフェクト要素を取得し、初期化関数を呼ぶ
+    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ページ専用の初期化
+    }
+
+    // input.html の初期化処理
+    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();
+                 event.preventDefault(); // デフォルトの送信をキャンセル
+                 handleGenerateSubmit(); // カスタム送信処理を呼び出し
             });
+        } else {
+            console.warn("Generate form ('generate-form') not found.");
         }
-         // input.html 専用の初期化があればここに追加
-         // 例: URLパラメータから初期値を設定するなど
+         // 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);
              }
          }
-
-    } else if (pathname === '/learning' || pathname === '/learning.html') {
-        initializeLearningScreen();
-    } else if (pathname === '/history' || pathname === '/history.html') {
-        // history.html の初期化（動的にリストを生成する場合など）
-        console.log("History page loaded.");
-        // loadHistoryData(); // 仮の関数呼び出し
-    } else if (pathname === '/settings' || pathname === '/settings.html') {
-        // settings.html の初期化
-        console.log("Settings page loaded.");
+    }
+    // history.html の初期化処理 (必要なら)
+    else if (pathname.endsWith('/history') || pathname.endsWith('/history.html')) {
+        console.log("Initializing History page...");
+        // 例: loadHistoryData(); // 履歴データを読み込んで表示する関数
+    }
+    // settings.html の初期化処理
+    else if (pathname.endsWith('/settings') || pathname.endsWith('/settings.html')) {
+        console.log("Initializing Settings page...");
         // ダークモードトグルの状態をlocalStorageに合わせて更新
         try {
             const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
-            const toggle = document.querySelector('input[onchange*="handleToggleChange"][onchange*="dark"]');
+            // 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.');
+             console.warn('Could not set dark mode toggle state on settings page:', e);
         }
     }
 
-    // フッターナビゲーションのアクティブ状態設定
+    // フッターナビゲーションのアクティブ状態を更新
     updateFooterNavActiveState(pathname);
+
+    // ★★★ ページ読み込み時にメニューが意図せず開いた状態なら閉じる ★★★
+    // (特にブラウザの履歴操作などで発生することがあるため)
+    closeMenu();
 });
 
 
 /**
- * フッターナビゲーションのアクティブ状態を更新
+ * 現在のパスに基づいてフッターナビゲーションのアクティブ状態を更新
  */
  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'); // Reset all
+        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 ページの場合はどのフッターもアクティブにしない (任意)
-             else if ((currentPath.endsWith('/learning') || currentPath.endsWith('/learning.html'))) {
-                  // 何もしない（アクティブにならない）
-             }
+            // learning ページは通常フッターをアクティブにしない想定
         }
     });
+
+    // デバッグ用ログ
+    // console.log(`Footer nav active state updated for path "${currentPath}". Active button found: ${foundActive}`);
 }
 
 
-// デバッグ用に一部関数をグローバルスコープに公開（開発中のみ推奨）
-// 本番環境では削除またはコメントアウトすること
+// --- デバッグ用: 一部関数/変数をグローバルスコープに公開 ---
+// 注意: 本番環境では削除またはコメントアウトすることを強く推奨します
 window.debug = {
     navigateTo,
     goToInput,
@@ -640,18 +838,21 @@ window.debug = {
     goToSettings,
     goToLearning,
     openMenu,
+    closeMenu,
     handleGenerateSubmit,
     initializeLearningScreen,
-    handleOptionClick, // handleOptionClick を公開
+    handleOptionClick,
     revealAnswer,
     goToNext,
     goToPrev,
     handleToggleChange,
     handleLogout,
-    showCorrectEffect, // デバッグ用にエフェクト表示関数も公開
-    hideCorrectEffect, // デバッグ用にエフェクト非表示関数も公開
+    showCorrectEffect,
+    hideCorrectEffect,
     learningData,      // 現在の学習データ確認用
-    currentItemIndex   // 現在のインデックス確認用
+    currentItemIndex,  // 現在のインデックス確認用
+    sideMenu,          // メニュー要素確認用
+    menuOverlay        // オーバーレイ要素確認用
 };
 
 // --- END OF FILE script.js ---

static/style.css

@@ -597,4 +597,162 @@ body.dark-mode .toggle-switch input:checked + .slider { background-color: #58a6f
 /* ダークモードの正解エフェクトの色 */
 body.dark-mode .correct-effect { color: rgba(50, 220, 50, 0.85); }
 
-/* --- END OF FILE style.css --- */
+/* --- END OF FILE style.css --- */
+/* --- START OF FILE style.css (追記部分) --- */
+
+/* --- サイドメニュー --- */
+.side-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 250px; /* メニューの幅 */
+    height: 100%;
+    background-color: #ffffff; /* メニューの背景色 */
+    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+    transform: translateX(-100%); /* 初期状態は画面外（左側） */
+    transition: transform 0.3s ease-in-out;
+    z-index: 1100; /* オーバーレイより手前 */
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto; /* メニュー項目が多い場合にスクロール */
+}
+
+.side-menu.open {
+    transform: translateX(0); /* 表示状態 */
+}
+
+.side-menu h2 {
+    margin-top: 30px; /* 閉じるボタンとのスペース */
+    margin-bottom: 20px;
+    font-size: 20px;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+}
+
+.side-menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1;
+}
+
+.side-menu li {
+    margin-bottom: 5px;
+}
+
+.side-menu li button {
+    background: none;
+    border: none;
+    padding: 12px 10px;
+    width: 100%;
+    text-align: left;
+    font-size: 16px;
+    color: #333;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background-color 0.2s;
+    display: flex; /* アイコンとテキストのため */
+    align-items: center;
+}
+.side-menu li button:hover {
+    background-color: #f0f0f0;
+}
+.side-menu li button:active {
+    background-color: #e0e0e0;
+}
+
+.side-menu li hr {
+    border: none;
+    border-top: 1px solid #eee;
+    margin: 15px 0;
+}
+
+.side-menu .logout-menu-item {
+    color: red; /* ログアウトは赤字 */
+}
+.side-menu .logout-menu-item:hover {
+     background-color: rgba(255, 0, 0, 0.05);
+}
+
+
+.close-menu-btn {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    background: none;
+    border: none;
+    font-size: 30px;
+    font-weight: bold;
+    color: #888;
+    cursor: pointer;
+    padding: 5px;
+    line-height: 1;
+}
+.close-menu-btn:hover {
+    color: #333;
+}
+
+/* --- メニューオーバーレイ --- */
+.menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
+    opacity: 0;
+    visibility: hidden; /* 初期状態は非表示 */
+    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* visibilityは遅延させる */
+    z-index: 1050; /* サイドメニューより下、他コンテンツより上 */
+}
+
+.menu-overlay.open {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.3s ease-in-out, visibility 0s 0s; /* 表示時は遅延なし */
+}
+
+/* --- メニュー表示中に背景をスクロールさせない (任意) --- */
+body.menu-open {
+    overflow: hidden; /* bodyのスクロールを禁止 */
+}
+
+/* --- ダークモード用サイドメニュー (追記) --- */
+body.dark-mode .side-menu {
+    background-color: #2c2c2c; /* ダークモードの背景色 */
+    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
+}
+body.dark-mode .side-menu h2 {
+    color: #e0e0e0;
+    border-bottom-color: #444;
+}
+body.dark-mode .side-menu li button {
+    color: #e0e0e0;
+}
+body.dark-mode .side-menu li button:hover {
+    background-color: #3a3a3a;
+}
+body.dark-mode .side-menu li button:active {
+    background-color: #4a4a4a;
+}
+body.dark-mode .side-menu li hr {
+    border-top-color: #444;
+}
+body.dark-mode .close-menu-btn {
+    color: #aaa;
+}
+body.dark-mode .close-menu-btn:hover {
+    color: #e0e0e0;
+}
+body.dark-mode .side-menu .logout-menu-item {
+    color: #ff7f7f; /* ダークモードでの赤 */
+}
+body.dark-mode .side-menu .logout-menu-item:hover {
+     background-color: rgba(255, 80, 80, 0.1);
+}
+
+
+/* --- END OF FILE style.css (追記部分) --- */

templates/history.html

@@ -86,6 +86,20 @@
                     <li class="list-item-empty">履歴はありません。</li>
                 {% endif %}
             </ul>
+             <!-- ★★★ ここからサイドメニューとオーバーレイを追加 ★★★ -->
+    <div id="menu-overlay" class="menu-overlay" onclick="closeMenu()"></div>
+    <nav id="side-menu" class="side-menu" aria-label="サイドメニュー">
+        <button class="close-menu-btn" onclick="closeMenu()" aria-label="メニューを閉じる">×</button>
+        <h2>メニュー</h2>
+        <ul>
+            <li><button onclick="goToInput()">➕ 入力</button></li>
+            <li><button onclick="goToHistory()">🕒 履歴</button></li>
+            <li><button onclick="goToSettings()">⚙️ 設定</button></li>
+            <!-- 他に必要なメニュー項目を追加 -->
+            <li><hr></li>
+            <li><button onclick="handleLogout()" class="logout-menu-item">ログアウト</button></li>
+        </ul>
+    </nav>
         </main>
         <!-- フッターナビゲーション -->
         <footer class="footer-nav">

templates/input.html

@@ -41,6 +41,20 @@
                 <span>(イメージ表示エリア)</span>
                 <!-- <img src="..." alt="動画サムネイル" style="display: none;"> -->
             </div>
+             <!-- ★★★ ここからサイドメニューとオーバーレイを追加 ★★★ -->
+    <div id="menu-overlay" class="menu-overlay" onclick="closeMenu()"></div>
+    <nav id="side-menu" class="side-menu" aria-label="サイドメニュー">
+        <button class="close-menu-btn" onclick="closeMenu()" aria-label="メニューを閉じる">×</button>
+        <h2>メニュー</h2>
+        <ul>
+            <li><button onclick="goToInput()">➕ 入力</button></li>
+            <li><button onclick="goToHistory()">🕒 履歴</button></li>
+            <li><button onclick="goToSettings()">⚙️ 設定</button></li>
+            <!-- 他に必要なメニュー項目を追加 -->
+            <li><hr></li>
+            <li><button onclick="handleLogout()" class="logout-menu-item">ログアウト</button></li>
+        </ul>
+    </nav>
         </main>
         <!-- フッターナビゲーションなどを追加する場合はここに -->
     </div>

templates/learning.html

@@ -38,6 +38,20 @@
                 <span id="page-info">? / ?</span> <!-- 初期表示 -->
                 <button id="next-button" aria-label="次へ" onclick="goToNext()">></button>
             </div>
+             <!-- ★★★ ここからサイドメニューとオーバーレイを追加 ★★★ -->
+    <div id="menu-overlay" class="menu-overlay" onclick="closeMenu()"></div>
+    <nav id="side-menu" class="side-menu" aria-label="サイドメニュー">
+        <button class="close-menu-btn" onclick="closeMenu()" aria-label="メニューを閉じる">×</button>
+        <h2>メニュー</h2>
+        <ul>
+            <li><button onclick="goToInput()">➕ 入力</button></li>
+            <li><button onclick="goToHistory()">🕒 履歴</button></li>
+            <li><button onclick="goToSettings()">⚙️ 設定</button></li>
+            <!-- 他に必要なメニュー項目を追加 -->
+            <li><hr></li>
+            <li><button onclick="handleLogout()" class="logout-menu-item">ログアウト</button></li>
+        </ul>
+    </nav>
         </main>
     </div>
 

templates/settings.html

@@ -77,6 +77,20 @@
                     </button>
                 </li>
             </ul>
+             <!-- ★★★ ここからサイドメニューとオーバーレイを追加 ★★★ -->
+    <div id="menu-overlay" class="menu-overlay" onclick="closeMenu()"></div>
+    <nav id="side-menu" class="side-menu" aria-label="サイドメニュー">
+        <button class="close-menu-btn" onclick="closeMenu()" aria-label="メニューを閉じる">×</button>
+        <h2>メニュー</h2>
+        <ul>
+            <li><button onclick="goToInput()">➕ 入力</button></li>
+            <li><button onclick="goToHistory()">🕒 履歴</button></li>
+            <li><button onclick="goToSettings()">⚙️ 設定</button></li>
+            <!-- 他に必要なメニュー項目を追加 -->
+            <li><hr></li>
+            <li><button onclick="handleLogout()" class="logout-menu-item">ログアウト</button></li>
+        </ul>
+    </nav>
         </main>
     </div>
     <script src="{{ url_for('static', filename='script.js') }}"></script>