Studio - APP

🛠️ プログラム作成 [修正モード]

ファイル名: .html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProVocab - 語源マスター版</title>
    <style>
        :root {
            --primary: #4a90e2;
            --secondary: #8e44ad; /* 語源用の色 */
            --bg: #f4f7f6;
            --card-bg: #ffffff;
            --text-main: #2c3e50;
        }
        body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--bg); margin: 0; padding-bottom: 90px; color: var(--text-main); }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        
        /* ナビゲーション */
        nav { position: fixed; bottom: 0; width: 100%; background: #fff; display: flex; border-top: 1px solid #ddd; z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
        nav button { flex: 1; padding: 15px; border: none; background: none; cursor: pointer; font-weight: bold; color: #999; font-size: 0.8rem; display: flex; flex-direction: column; align-items: center; }
        nav button.active { color: var(--primary); background: #f0f7ff; }

.mode-section { display: none; animation: fadeIn 0.3s; }
        .mode-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 検索 */
        .search-area { position: sticky; top: 0; background: var(--bg); padding: 10px 0; z-index: 100; }
        .search-box { display: flex; gap: 10px; }
        input { flex: 1; padding: 15px; border: 2px solid #ddd; border-radius: 12px; font-size: 16px; outline: none; transition: 0.2s; }
        input:focus { border-color: var(--primary); }
        
        /* カードデザイン */
        .card { background: var(--card-bg); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 15px; position: relative; border-left: 5px solid transparent; }
        .card.registered { border-left-color: var(--primary); }

.header-row { display: flex; justify-content: space-between; align-items: flex-start; }
        .word-info h3 { font-size: 1.6rem; margin: 0; color: var(--text-main); }
        .pronounce { font-size: 0.9rem; color: #888; font-weight: normal; }
        .emoji-big { font-size: 2.5rem; line-height: 1; }
        
        .tag { display: inline-block; background: #eee; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; margin: 5px 0; color: #555; font-weight: bold; }
        
        .meaning-box { margin: 10px 0; font-weight: bold; font-size: 1.1rem; }
        
        /* 語源スタイル */
        .etymology-box { background: #f3e5f5; border-radius: 8px; padding: 10px; margin: 10px 0; border-left: 4px solid var(--secondary); }
        .etymology-title { color: var(--secondary); font-size: 0.75rem; font-weight: bold; display: block; margin-bottom: 3px; }
        .etymology-text { font-size: 0.9rem; color: #4a235a; }

.example-box { font-style: italic; color: #666; background: #f9f9f9; padding: 10px; border-radius: 8px; font-size: 0.9rem; margin-top: 10px; }

.btn { padding: 12px; border: none; border-radius: 8px; cursor: pointer; background: var(--primary); color: white; font-weight: bold; width: 100%; margin-top: 10px; }
        .btn:disabled { background: #ccc; cursor: default; }
        .btn-del { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; width: auto; padding: 4px 10px; font-size: 0.8rem; position: absolute; top: 15px; right: 15px; }

/* 記憶カード */
        .flashcard-area { perspective: 1000px; height: 500px; margin-top: 10px; }
        .flashcard-inner { width: 100%; height: 100%; position: relative; transition: transform 0.5s; transform-style: preserve-3d; cursor: pointer; }
        .flashcard-inner.flipped { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 20px; background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; }
        .card-front { justify-content: center; align-items: center; text-align: center; }
        .card-back { transform: rotateY(180deg); overflow-y: auto; justify-content: flex-start; }

.mastery-controls { display: flex; gap: 8px; margin-top: 20px; visibility: hidden; }
        .m-btn { flex: 1; padding: 12px; border: none; border-radius: 30px; color: white; font-weight: bold; cursor: pointer; font-size: 0.9rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* 全リスト表示ボタン */
        .show-all-btn { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; width: 100%; margin-top: 10px; }
    </style>
</head>
<body>

<div class="container">
    <section id="search-mode" class="mode-section active">
        <div class="search-area">
            <h2 style="text-align:center; margin:0 0 10px 0;">🔍 辞書検索</h2>
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="単語を入力... (例: ex)" oninput="searchDict()">
            </div>
            <button class="show-all-btn" onclick="showAllDict()">または全単語リストを表示</button>
        </div>
        <div id="searchResult"></div>
    </section>

<section id="study-mode" class="mode-section">
        <h2 style="text-align:center;">📖 My単語帳</h2>
        <div id="studyList"></div>
    </section>

<section id="memorize-mode" class="mode-section">
        <h2 style="text-align:center;">🧠 暗記カード</h2>
        <div class="flashcard-area" onclick="flipCard()">
            <div class="flashcard-inner" id="cardInner">
                <div class="card-face card-front" id="cardFront">
                    <p>単語帳に登録してスタート！</p>
                </div>
                <div class="card-face card-back" id="cardBack"></div>
            </div>
        </div>
        <div class="mastery-controls" id="masteryControls">
            <button class="m-btn" style="background:#e74c3c;" onclick="setMastery(0, event)">❌ 忘</button>
            <button class="m-btn" style="background:#f39c12;" onclick="setMastery(1, event)">⚠️ 悩</button>
            <button class="m-btn" style="background:#2ecc71;" onclick="setMastery(2, event)">⭕ 覚</button>
        </div>
    </section>
</div>

let myWords = JSON.parse(localStorage.getItem('myWordsRoot')) || [];
    let currentIdx = 0;
    let isFlipped = false;

// 初期化：全リスト表示
    window.onload = function() {
        searchDict();
    };

// --- 検索・リスト表示機能 ---
    function searchDict() {
        const input = document.getElementById('searchInput').value.trim().toLowerCase();
        const resultDiv = document.getElementById('searchResult');
        resultDiv.innerHTML = "";

// 入力が空の場合は何も出さない（「全リスト表示」ボタンで出す仕様へ）
        if (input.length === 0) {
            resultDiv.innerHTML = `<p style="text-align:center; color:#888;">上の入力欄に単語の一部を入れてください。<br>または「全単語リストを表示」をタップ。</p>`;
            return;
        }

const matches = geminiDictionary.filter(d => 
            d.w.toLowerCase().startsWith(input) || 
            d.w.toLowerCase().includes(input) ||
            d.m.includes(input)
        );

renderList(matches, resultDiv);
    }

function showAllDict() {
        document.getElementById('searchInput').value = "";
        const resultDiv = document.getElementById('searchResult');
        renderList(geminiDictionary, resultDiv);
    }

function renderList(list, container) {
        if (list.length === 0) {
            container.innerHTML = `<p style="text-align:center; color:#999;">見つかりませんでした。<br>内蔵辞書(50語)に含まれていない可能性があります。</p>`;
            return;
        }

container.innerHTML = list.map(d => {
            const isReg = myWords.some(w => w.w === d.w);
            return `
                <div class="card ${isReg ? 'registered' : ''}">
                    <div class="header-row">
                        <div class="emoji-big">${d.em}</div>
                        <div class="word-info" style="flex:1; margin-left:15px;">
                            <h3>${d.w}</h3>
                            <span class="pronounce">${d.p}</span>
                            <div><span class="tag">${d.pos}</span></div>
                        </div>
                    </div>
                    <div class="meaning-box">${d.m}</div>
                    <div class="etymology-box">
                        <span class="etymology-title">🌱 語源・由来</span>
                        <span class="etymology-text">${d.ety}</span>
                    </div>
                    <div class="example-box">${d.ex}</div>
                    
                    <button class="btn" onclick="toggleRegister('${d.w}')" ${isReg ? 'disabled' : ''}>
                        ${isReg ? '✅ 単語帳に登録済み' : '単語帳に追加'}
                    </button>
                </div>
            `;
        }).join('');
    }

// --- 登録・削除 ---
    function toggleRegister(wordStr) {
        const existing = myWords.find(w => w.w === wordStr);
        if (existing) return; // 既に登録済み

function saveData() {
        localStorage.setItem('myWordsRoot', JSON.stringify(myWords));
    }

// --- 勉強モード ---
    function renderStudyList() {
        const listDiv = document.getElementById('studyList');
        if (myWords.length === 0) {
            listDiv.innerHTML = `<p style="text-align:center; margin-top:50px; color:#888;">単語帳は空です。<br>検索タブから単語を追加してください。</p>`;
            return;
        }

listDiv.innerHTML = myWords.map((w, idx) => `
            <div class="card">
                <button class="btn-del" onclick="deleteWord(${idx})">🗑️ 削除</button>
                <div class="header-row">
                    <div class="emoji-big" style="font-size:2rem;">${w.em}</div>
                    <div style="flex:1; margin-left:10px;">
                        <h3 style="font-size:1.4rem;">${w.w}</h3>
                        <span style="font-size:0.8rem; color:#888;">記憶度: ${getMasteryLabel(w.mastery)}</span>
                    </div>
                </div>
                <div class="meaning-box" style="font-size:1rem;">${w.m}</div>
                <div class="etymology-box" style="padding:5px 10px; font-size:0.85rem;">
                    <span style="color:var(--secondary);">🌱</span> ${w.ety}
                </div>
                <div class="example-box" style="font-size:0.8rem;">${w.ex}</div>
            </div>
        `).join('');
    }

function deleteWord(idx) {
        if(confirm("削除しますか？")) {
            myWords.splice(idx, 1);
            saveData();
            renderStudyList();
        }
    }

function getMasteryLabel(level) {
        return ['❌', '⚠️', '⭕'][level] || '⭕';
    }

// --- 記憶モード ---
    function startMemorize() {
        showCard(currentIdx);
    }

function showCard(idx) {
        const front = document.getElementById('cardFront');
        const back = document.getElementById('cardBack');
        const inner = document.getElementById('cardInner');
        const controls = document.getElementById('masteryControls');
        
        inner.classList.remove('flipped');
        isFlipped = false;
        controls.style.visibility = 'hidden';

if (myWords.length === 0) {
            front.innerHTML = "<p>単語を登録してください</p>";
            return;
        }

// 範囲チェック
        if (idx >= myWords.length) currentIdx = 0;

back.innerHTML = `
            <div style="display:flex; align-items:center; gap:10px; border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:10px; width:100%;">
                <span style="font-size:2rem;">${w.em}</span>
                <h2 style="margin:0;">${w.w}</h2>
            </div>
            <div class="meaning-box" style="color:#e74c3c;">${w.m}</div>
            <div class="etymology-box">
                <span class="etymology-title">🌱 語源で覚える</span>
                ${w.ety}
            </div>
            <div class="example-box">${w.ex}</div>
        `;
    }

function setMastery(level, e) {
        e.stopPropagation(); // カード反転を防ぐ
        myWords[currentIdx].mastery = level;
        saveData();
        
        // 次のカードへ
        currentIdx = (currentIdx + 1) % myWords.length;
        
        // カードを一度表に戻してから内容更新
        const inner = document.getElementById('cardInner');
        const controls = document.getElementById('masteryControls');
        controls.style.visibility = 'hidden';
        
        // 裏返った状態で中身を変えるとネタバレになるので、
        // 一瞬で表に戻すアニメーション処理（簡易的）
        inner.style.transition = "none";
        inner.classList.remove('flipped');
        isFlipped = false;
        
        setTimeout(() => {
            inner.style.transition = "transform 0.5s";
            showCard(currentIdx);
        }, 50);
    }

// --- モード切替 ---
    function changeMode(modeId) {
        document.querySelectorAll('.mode-section').forEach(s => s.classList.remove('active'));
        document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
        
        document.getElementById(modeId).classList.add('active');
        document.getElementById('nav-' + modeId.split('-')[0]).classList.add('active');
        
        if(modeId === 'study-mode') renderStudyList();
        if(modeId === 'memorize-mode') startMemorize();
    }
</script>

</body>
</html>

キャンセルして新規作成に戻る

📷 素材アップロード

🛠️ プログラム作成 [修正モード]

📂 APP の作品