/* ============================================================== ひらがな・カタカナ かきかたマスター ＋ ことばあつめ -------------------------------------------------------------- 小学１年生のための、ひらがな・カタカナ反復練習＋単語収集アプリ ＜たのしさUPの追加機能＞ - 音声よみあげ（タップで読んでくれる） - マスコット「ひよこさん」のおうえん - 連続学習日数のストリーク 🔥 - レベル（しょうごう）と バッジ図鑑 🎖 - きょうの もじ（デイリーチャレンジ） 先生がカスタマイズしたい場合は、下の "// ★カスタマイズポイント" と書かれた箇所を中心に書き換えてみてください。 ============================================================== */ const { useState, useEffect, useRef, useCallback, useMemo } = React; /* ────────────────────────────────────────────────────────────── 1. データ定数 ────────────────────────────────────────────────────────────── */ // ★カスタマイズポイント: 50音表 const HIRA_TABLE = [ 'あ','い','う','え','お', 'か','き','く','け','こ', 'さ','し','す','せ','そ', 'た','ち','つ','て','と', 'な','に','ぬ','ね','の', 'は','ひ','ふ','へ','ほ', 'ま','み','む','め','も', 'や','' ,'ゆ','' ,'よ', 'ら','り','る','れ','ろ', 'わ','' ,'' ,'' ,'を', 'ん','' ,'' ,'' ,'' ]; const KATA_TABLE = [ 'ア','イ','ウ','エ','オ', 'カ','キ','ク','ケ','コ', 'サ','シ','ス','セ','ソ', 'タ','チ','ツ','テ','ト', 'ナ','ニ','ヌ','ネ','ノ', 'ハ','ヒ','フ','ヘ','ホ', 'マ','ミ','ム','メ','モ', 'ヤ','' ,'ユ','' ,'ヨ', 'ラ','リ','ル','レ','ロ', 'ワ','' ,'' ,'' ,'ヲ', 'ン','' ,'' ,'' ,'' ]; const HIRA_LIST = HIRA_TABLE.filter(c => c); const KATA_LIST = KATA_TABLE.filter(c => c); // ★カスタマイズポイント: 濁音・半濁音・拗音／促音（小書き）の表 const HIRA_DAKUON_TABLE = [ 'が','ぎ','ぐ','げ','ご', 'ざ','じ','ず','ぜ','ぞ', 'だ','ぢ','づ','で','ど', 'ば','び','ぶ','べ','ぼ', ]; const HIRA_HANDAKUON_TABLE = [ 'ぱ','ぴ','ぷ','ぺ','ぽ', ]; // 拗音は「き」＋「ゃ」のように２文字で書くため、まずは小書き文字の書き方だけ練習する const HIRA_YOUON_TABLE = [ 'ゃ','ゅ','ょ','っ', ]; const KATA_DAKUON_TABLE = [ 'ガ','ギ','グ','ゲ','ゴ', 'ザ','ジ','ズ','ゼ','ゾ', 'ダ','ヂ','ヅ','デ','ド', 'バ','ビ','ブ','ベ','ボ', ]; const KATA_HANDAKUON_TABLE = [ 'パ','ピ','プ','ペ','ポ', ]; const KATA_YOUON_TABLE = [ 'ャ','ュ','ョ','ッ', ]; const HIRA_DAKUON_LIST = HIRA_DAKUON_TABLE.filter(c => c); const HIRA_HANDAKUON_LIST = HIRA_HANDAKUON_TABLE.filter(c => c); const HIRA_YOUON_LIST = HIRA_YOUON_TABLE.filter(c => c); const KATA_DAKUON_LIST = KATA_DAKUON_TABLE.filter(c => c); const KATA_HANDAKUON_LIST = KATA_HANDAKUON_TABLE.filter(c => c); const KATA_YOUON_LIST = KATA_YOUON_TABLE.filter(c => c); const HIRA_ALL_LIST = [...HIRA_LIST, ...HIRA_DAKUON_LIST, ...HIRA_HANDAKUON_LIST, ...HIRA_YOUON_LIST]; const KATA_ALL_LIST = [...KATA_LIST, ...KATA_DAKUON_LIST, ...KATA_HANDAKUON_LIST, ...KATA_YOUON_LIST]; // 文字のしゅるい（清音／濁音／半濁音／拗音・促音） const KANA_KINDS = [ { key: 'seion', label: 'せいおん', short: 'せいおん', icon: '🌸' }, { key: 'dakuon', label: 'だくおん', short: '゛', icon: '🌟' }, { key: 'handakuon', label: 'はんだくおん', short: '゜', icon: '⭐' }, { key: 'youon', label: 'ようおん・そくおん', short: 'ゃゅょっ', icon: '✨' }, ]; function getKanaTable(kanaMode, kanaKind) { if (kanaMode === 'katakana') { if (kanaKind === 'dakuon') return KATA_DAKUON_TABLE; if (kanaKind === 'handakuon') return KATA_HANDAKUON_TABLE; if (kanaKind === 'youon') return KATA_YOUON_TABLE; return KATA_TABLE; } if (kanaKind === 'dakuon') return HIRA_DAKUON_TABLE; if (kanaKind === 'handakuon') return HIRA_HANDAKUON_TABLE; if (kanaKind === 'youon') return HIRA_YOUON_TABLE; return HIRA_TABLE; } function getKanaList(kanaMode, kanaKind) { return getKanaTable(kanaMode, kanaKind).filter(c => c); } function getKindOfChar(c) { if (HIRA_DAKUON_LIST.includes(c) || KATA_DAKUON_LIST.includes(c)) return 'dakuon'; if (HIRA_HANDAKUON_LIST.includes(c) || KATA_HANDAKUON_LIST.includes(c)) return 'handakuon'; if (HIRA_YOUON_LIST.includes(c) || KATA_YOUON_LIST.includes(c)) return 'youon'; return 'seion'; } // ★カスタマイズポイント: 「ことばあつめ」のヒント const WORD_HINTS_HIRA = [ { w:'あめ', e:'🍬' }, { w:'いぬ', e:'🐶' }, { w:'うみ', e:'🌊' }, { w:'えき', e:'🚉' }, { w:'おに', e:'👹' }, { w:'かに', e:'🦀' }, { w:'きく', e:'🌼' }, { w:'くも', e:'☁️' }, { w:'こま', e:'🪀' }, { w:'さくら', e:'🌸' }, { w:'すいか', e:'🍉' }, { w:'そら', e:'🌌' }, { w:'たこ', e:'🐙' }, { w:'つき', e:'🌙' }, { w:'にじ', e:'🌈' }, { w:'はな', e:'🌺' }, { w:'ふね', e:'🚢' }, { w:'ほし', e:'⭐' }, { w:'みず', e:'💧' }, { w:'もも', e:'🍑' }, { w:'やま', e:'⛰️' }, { w:'ゆき', e:'❄️' }, { w:'りんご', e:'🍎' }, { w:'れもん', e:'🍋' }, // 濁音 { w:'ぞう', e:'🐘' }, { w:'でんわ', e:'☎️' }, { w:'ぶどう', e:'🍇' }, { w:'かばん', e:'🎒' }, { w:'だんご', e:'🍡' }, { w:'べんとう', e:'🍱' }, // 半濁音 { w:'ぱんだ', e:'🐼' }, { w:'えんぴつ', e:'✏️' }, { w:'ぷりん', e:'🍮' }, { w:'たんぽぽ', e:'🌼' }, // 拗音・促音 { w:'ちょう', e:'🦋' }, { w:'きって', e:'📮' }, { w:'でんしゃ', e:'🚃' }, { w:'がっこう', e:'🏫' }, ]; const WORD_HINTS_KATA = [ { w:'アイス', e:'🍦' }, { w:'イルカ', e:'🐬' }, { w:'ウサギ', e:'🐰' }, { w:'エビ', e:'🦐' }, { w:'オムレツ', e:'🍳' }, { w:'カバ', e:'🦛' }, { w:'キリン', e:'🦒' }, { w:'クマ', e:'🐻' }, { w:'ケーキ', e:'🍰' }, { w:'コアラ', e:'🐨' }, { w:'サメ', e:'🦈' }, { w:'シマウマ', e:'🦓' }, { w:'スイカ', e:'🍉' }, { w:'タコ', e:'🐙' }, { w:'チーズ', e:'🧀' }, { w:'トマト', e:'🍅' }, { w:'ネコ', e:'🐱' }, { w:'ヘビ', e:'🐍' }, { w:'バナナ', e:'🍌' }, { w:'ライオン', e:'🦁' }, // 濁音 { w:'ゴリラ', e:'🦍' }, { w:'ダチョウ', e:'🐦' }, { w:'ブタ', e:'🐷' }, { w:'ゾウ', e:'🐘' }, // 半濁音 { w:'パンダ', e:'🐼' }, { w:'ピアノ', e:'🎹' }, { w:'プリン', e:'🍮' }, { w:'ペンギン', e:'🐧' }, // 拗音・促音 { w:'チョコ', e:'🍫' }, { w:'コップ', e:'🥤' }, { w:'ジャム', e:'🍓' }, ]; const EMOJI_CHOICES = ['😀','🍎','🐶','🐱','🌸','⭐','🌈','🍰','🚗','⚽','🎈','💧','🌙','☀️','🦋','🐟','🍓','🍙','🚀','🎵']; // コンピュータがしりとりで使う単語リスト（ひらがな） const SHIRITORI_CPU_WORDS = [ {w:'あり',e:'🐜'},{w:'あひる',e:'🦆'},{w:'あさ',e:'🌅'},{w:'あき',e:'🍂'},{w:'あかい',e:'❤️'}, {w:'いか',e:'🦑'},{w:'いちご',e:'🍓'},{w:'いえ',e:'🏠'},{w:'いし',e:'🪨'},{w:'いもうと',e:'👧'}, {w:'うし',e:'🐄'},{w:'うちわ',e:'🪭'},{w:'うさぎ',e:'🐰'},{w:'うた',e:'🎵'},{w:'うで',e:'💪'}, {w:'えき',e:'🚉'},{w:'えんぴつ',e:'✏️'},{w:'えほん',e:'📚'},{w:'えび',e:'🦐'},{w:'えいが',e:'🎬'}, {w:'おに',e:'👹'},{w:'おかし',e:'🍰'},{w:'おつき',e:'🌙'},{w:'おはな',e:'🌺'},{w:'おおかみ',e:'🐺'}, {w:'かに',e:'🦀'},{w:'かめ',e:'🐢'},{w:'かさ',e:'☂️'},{w:'かえる',e:'🐸'},{w:'かぜ',e:'💨'},{w:'かわ',e:'🏞️'}, {w:'きつね',e:'🦊'},{w:'きのこ',e:'🍄'},{w:'きりん',e:'🦒'},{w:'きく',e:'🌼'},{w:'きじ',e:'🐦'}, {w:'くじら',e:'🐋'},{w:'くり',e:'🌰'},{w:'くるま',e:'🚗'},{w:'くも',e:'☁️'},{w:'くさ',e:'🌿'}, {w:'けむり',e:'💨'},{w:'けいと',e:'🧶'},{w:'けが',e:'🩹'},{w:'けむし',e:'🐛'}, {w:'こうもり',e:'🦇'},{w:'こども',e:'👶'},{w:'こうえん',e:'🌳'},{w:'こおり',e:'🧊'},{w:'こま',e:'🪀'},{w:'こころ',e:'💗'}, {w:'さかな',e:'🐟'},{w:'さる',e:'🐒'},{w:'さんぽ',e:'🚶'},{w:'さくら',e:'🌸'},{w:'さとう',e:'🍬'},{w:'さむい',e:'🥶'}, {w:'しか',e:'🦌'},{w:'しろ',e:'🏰'},{w:'しお',e:'🧂'},{w:'したぎ',e:'👕'},{w:'しんかんせん',e:'🚄'}, {w:'すずめ',e:'🐦'},{w:'すみれ',e:'🌸'},{w:'すいか',e:'🍉'},{w:'すもう',e:'🤼'},{w:'すな',e:'🏖️'},{w:'すき',e:'❤️'}, {w:'せみ',e:'🦟'},{w:'せかい',e:'🌍'},{w:'せんせい',e:'👨‍🏫'},{w:'せっけん',e:'🧼'},{w:'せわ',e:'🫂'}, {w:'そら',e:'🌌'},{w:'そうじ',e:'🧹'},{w:'そと',e:'🌿'},{w:'そり',e:'🛷'},{w:'そば',e:'🍜'}, {w:'たこ',e:'🐙'},{w:'たぬき',e:'🦝'},{w:'たまご',e:'🥚'},{w:'たき',e:'💦'},{w:'たいよう',e:'☀️'},{w:'たか',e:'🦅'}, {w:'ちょう',e:'🦋'},{w:'ちきゅう',e:'🌍'},{w:'ちゃわん',e:'🍵'},{w:'ちから',e:'💪'}, {w:'つき',e:'🌙'},{w:'つる',e:'🦢'},{w:'つみき',e:'🧱'},{w:'つばさ',e:'🪶'},{w:'つち',e:'🌱'},{w:'つゆ',e:'💧'}, {w:'てんき',e:'⛅'},{w:'てがみ',e:'✉️'},{w:'てんとう',e:'🐞'},{w:'てつ',e:'⚙️'},{w:'てら',e:'⛩️'}, {w:'とり',e:'🐦'},{w:'とら',e:'🐯'},{w:'とまと',e:'🍅'},{w:'とうふ',e:'🫙'},{w:'とかげ',e:'🦎'},{w:'ともだち',e:'👫'}, {w:'なみ',e:'🌊'},{w:'なし',e:'🍐'},{w:'なつ',e:'☀️'},{w:'なまこ',e:'🦑'},{w:'なわ',e:'🪢'}, {w:'にじ',e:'🌈'},{w:'にわ',e:'🌿'},{w:'にんじん',e:'🥕'},{w:'にく',e:'🥩'},{w:'にわとり',e:'🐔'},{w:'にほん',e:'🎌'}, {w:'ぬの',e:'🧵'},{w:'ぬいぐるみ',e:'🧸'},{w:'ぬりえ',e:'🖍️'}, {w:'ねこ',e:'🐱'},{w:'ねずみ',e:'🐭'},{w:'ねんど',e:'🎨'},{w:'ねむい',e:'😴'}, {w:'のり',e:'🌿'},{w:'のはら',e:'🌾'},{w:'のこぎり',e:'🪚'},{w:'のみもの',e:'🥤'}, {w:'はな',e:'🌺'},{w:'はと',e:'🕊️'},{w:'はし',e:'🌉'},{w:'はる',e:'🌸'},{w:'はりねずみ',e:'🦔'},{w:'はやし',e:'🌲'}, {w:'ひよこ',e:'🐥'},{w:'ひつじ',e:'🐑'},{w:'ひこうき',e:'✈️'},{w:'ひかり',e:'💡'},{w:'ひまわり',e:'🌻'},{w:'ひみつ',e:'🤫'}, {w:'ふね',e:'🚢'},{w:'ふくろう',e:'🦉'},{w:'ふうせん',e:'🎈'},{w:'ふゆ',e:'❄️'},{w:'ふで',e:'🖌️'},{w:'ふじさん',e:'🗻'}, {w:'へび',e:'🐍'},{w:'へや',e:'🏠'},{w:'へいわ',e:'☮️'},{w:'へそ',e:'🫙'}, {w:'ほし',e:'⭐'},{w:'ほたる',e:'✨'},{w:'ほおずき',e:'🏮'},{w:'ほんや',e:'📚'},{w:'ほね',e:'🦴'}, {w:'まつ',e:'🌲'},{w:'まくら',e:'🛏️'},{w:'まめ',e:'🫘'},{w:'まち',e:'🏙️'},{w:'まいにち',e:'📅'},{w:'まぐろ',e:'🐟'}, {w:'みず',e:'💧'},{w:'みかん',e:'🍊'},{w:'みつばち',e:'🐝'},{w:'みち',e:'🛣️'},{w:'みそしる',e:'🍲'},{w:'みんな',e:'👥'}, {w:'むし',e:'🐛'},{w:'むらさき',e:'🔮'},{w:'むすび',e:'🍙'},{w:'むかし',e:'📜'},{w:'むぎ',e:'🌾'}, {w:'めだか',e:'🐟'},{w:'めがね',e:'👓'},{w:'めがみ',e:'👸'},{w:'めし',e:'🍚'},{w:'めいろ',e:'🗺️'}, {w:'もも',e:'🍑'},{w:'もり',e:'🌲'},{w:'もぐら',e:'🐭'},{w:'もち',e:'🍡'},{w:'もくば',e:'🎠'},{w:'もみじ',e:'🍁'}, {w:'やすみ',e:'😴'},{w:'やま',e:'⛰️'},{w:'やね',e:'🏠'},{w:'やかん',e:'🫖'},{w:'やど',e:'🏨'}, {w:'ゆき',e:'❄️'},{w:'ゆび',e:'☝️'},{w:'ゆうひ',e:'🌅'},{w:'ゆかた',e:'👘'},{w:'ゆめ',e:'💭'},{w:'ゆか',e:'🪵'}, {w:'よる',e:'🌙'},{w:'よこ',e:'↔️'},{w:'よつば',e:'🍀'},{w:'よみもの',e:'📖'}, {w:'らいおん',e:'🦁'},{w:'らっこ',e:'🦦'},{w:'らくだ',e:'🐪'},{w:'らくがき',e:'🖍️'}, {w:'りんご',e:'🍎'},{w:'りす',e:'🐿️'},{w:'りゅう',e:'🐉'},{w:'りか',e:'🔬'}, {w:'るすばん',e:'🔐'},{w:'るりいろ',e:'💙'}, {w:'れもん',e:'🍋'},{w:'れんこん',e:'🥗'},{w:'れっしゃ',e:'🚂'},{w:'れいぞうこ',e:'🧊'},{w:'れんしゅう',e:'✏️'}, {w:'ろうそく',e:'🕯️'},{w:'ろば',e:'🫏'},{w:'ろけっと',e:'🚀'},{w:'ろうか',e:'🏫'}, {w:'わに',e:'🐊'},{w:'わかめ',e:'🌿'},{w:'わたあめ',e:'🍭'},{w:'わかば',e:'🌱'},{w:'わらい',e:'😄'},{w:'わすれもの',e:'🎒'}, ]; // ★カスタマイズポイント: レベル（しょうごう） const LEVELS = [ { min: 0, title: 'みならい', icon: '🌱', color: 'bg-emerald-100 text-emerald-700 border-emerald-300' }, { min: 5, title: 'がんばりや', icon: '🌷', color: 'bg-rose-100 text-rose-700 border-rose-300' }, { min: 15, title: 'もじチャレンジャー', icon: '🌟', color: 'bg-amber-100 text-amber-700 border-amber-300' }, { min: 30, title: 'もじはかせ', icon: '📖', color: 'bg-sky-100 text-sky-700 border-sky-300' }, { min: 50, title: 'もじマスター', icon: '👑', color: 'bg-violet-100 text-violet-700 border-violet-300' }, { min: 80, title: 'もじキング', icon: '🏆', color: 'bg-yellow-100 text-yellow-700 border-yellow-300' }, { min: 92, title: 'でんせつの もじびと', icon: '🐉', color: 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300' }, ]; function getCurrentLevel(masteredCount) { return [...LEVELS].reverse().find(l => masteredCount >= l.min) || LEVELS[0]; } // ★カスタマイズポイント: バッジ（ごほうびシール） const BADGES = [ { id: 'first', title: 'はじめの いっぽ', icon: '🌱', desc: 'はじめての じを マスター', check: ({m,w,s}) => m.length >= 1 }, { id: 'hira5', title: 'ひらがな ５じ', icon: '🌷', desc: 'ひらがなを ５じ おぼえた', check: ({m}) => m.filter(c => HIRA_LIST.includes(c)).length >= 5 }, { id: 'hira23', title: 'ひらがな はんぶん', icon: '🌸', desc: 'ひらがなを ２３じ おぼえた', check: ({m}) => m.filter(c => HIRA_LIST.includes(c)).length >= 23 }, { id: 'hiraAll', title: 'ひらがな かんぺき', icon: '🌻', desc: 'ひらがなを ぜんぶ おぼえた', check: ({m}) => HIRA_LIST.every(c => m.includes(c)) }, { id: 'kata5', title: 'カタカナ ５じ', icon: '⭐', desc: 'カタカナを ５じ おぼえた', check: ({m}) => m.filter(c => KATA_LIST.includes(c)).length >= 5 }, { id: 'kata23', title: 'カタカナ はんぶん', icon: '✨', desc: 'カタカナを ２３じ おぼえた', check: ({m}) => m.filter(c => KATA_LIST.includes(c)).length >= 23 }, { id: 'kataAll', title: 'カタカナ かんぺき', icon: '🎀', desc: 'カタカナを ぜんぶ おぼえた', check: ({m}) => KATA_LIST.every(c => m.includes(c)) }, { id: 'word5', title: 'ことば あつめ びと', icon: '🍎', desc: 'ことばを ５こ あつめた', check: ({w}) => w.length >= 5 }, { id: 'word20', title: 'ことば コレクター', icon: '🍰', desc: 'ことばを ２０こ あつめた', check: ({w}) => w.length >= 20 }, { id: 'word50', title: 'ことば はかせ', icon: '👑', desc: 'ことばを ５０こ あつめた', check: ({w}) => w.length >= 50 }, { id: 'streak3', title: '３にち つづけた', icon: '🔥', desc: '３にち れんぞくで れんしゅう', check: ({s}) => s >= 3 }, { id: 'streak7', title: '１しゅうかん', icon: '🚀', desc: '７にち れんぞくで れんしゅう', check: ({s}) => s >= 7 }, { id: 'allKana', title: 'もじキング！', icon: '🏆', desc: 'ひらがな・カタカナ ぜんぶ', check: ({m}) => HIRA_LIST.every(c => m.includes(c)) && KATA_LIST.every(c => m.includes(c)) }, ]; // LocalStorage キー const KEY_MASTERED = 'kkm_v2_mastered'; // 旧データ（マイグレーション用） const KEY_PROGRESS = 'kkm_v3_progress'; // ★新：文字ごとの学習ステージ const KEY_WORDS = 'kkm_v2_words'; const KEY_COUNT = 'kkm_v2_count'; const KEY_STREAK = 'kkm_v2_streak'; // { count, lastDate } const KEY_BADGES = 'kkm_v2_badges'; // 取得済みバッジID const KEY_VOICE = 'kkm_v2_voice'; // 音声よみあげON/OFF /* ────────────────────────────────────────────────────────────── 学習ステージ（あたらしい設計） ────────────────────────────────────────────────────────────── */ // 0: 未学習 // 1: 書き順アニメをみた // 2: なぞり書きを TRACE_REQUIRED 回 こなした // 3: ガイドなしで FREE_REQUIRED 回 れんぞくでせいかい（ほぼマスター） // 4: その文字を使ったことばを 1つ以上あつめた（完全マスター 💮） const TRACE_REQUIRED = 2; const FREE_REQUIRED = 3; const STAGE_INFO = [ { key: 0, icon: '🔒', label: 'みがくぜん', color: 'text-slate-400' }, { key: 1, icon: '📺', label: 'かきじゅん', color: 'text-sky-500' }, { key: 2, icon: '✏️', label: 'なぞりがき', color: 'text-emerald-500' }, { key: 3, icon: '✒️', label: 'じぶんでかく', color: 'text-violet-500' }, { key: 4, icon: '💮', label: 'かんぺき', color: 'text-amber-500' }, ]; function newStageObj(stage=0) { return { stage, traced: 0, free: 0, freeStreak: 0, sawAnime: false }; } function getStage(progress, char) { return progress?.[char]?.stage ?? 0; } function getMasteredList(progress) { return Object.keys(progress || {}).filter(c => progress[c].stage >= 4); } function getUsableInWordsList(progress) { // ステージ3以上の文字は「ことばあつめ」に使える（ことばを使うことでステージ4に到達できる） return Object.keys(progress || {}).filter(c => progress[c].stage >= 3); } function loadInitialProgress() { try { const r = localStorage.getItem(KEY_PROGRESS); if (r != null) return JSON.parse(r); // 旧 mastered からの移行（既存ユーザーの進捗を維持） const old = JSON.parse(localStorage.getItem(KEY_MASTERED) || '[]'); const initial = {}; old.forEach(c => { initial[c] = { stage: 4, traced: TRACE_REQUIRED, free: FREE_REQUIRED, freeStreak: FREE_REQUIRED, sawAnime: true }; }); return initial; } catch { return {}; } } /* ────────────────────────────────────────────────────────────── 2. 音と演出 ────────────────────────────────────────────────────────────── */ let audioCtx = null; let voiceEnabled = true; // 音声OFFのときは効果音もすべて止める function initAudio() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } function playTone(freq, type, duration, vol = 0.1) { if (!voiceEnabled || !audioCtx) return; try { const o = audioCtx.createOscillator(), g = audioCtx.createGain(); o.type = type; o.frequency.setValueAtTime(freq, audioCtx.currentTime); g.gain.setValueAtTime(vol, audioCtx.currentTime); g.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration); o.connect(g); g.connect(audioCtx.destination); o.start(); o.stop(audioCtx.currentTime + duration); } catch (e) {} } const playPingPong = () => { initAudio(); playTone(659.25, 'sine', 0.15, 0.1); setTimeout(() => playTone(880, 'sine', 0.3, 0.1), 100); }; const playBuzzer = () => { initAudio(); playTone(150, 'square', 0.2, 0.05); }; const playFanfare = () => { initAudio(); [523.25, 659.25, 783.99, 1046.5].forEach((f, i) => setTimeout(() => playTone(f, 'sine', 0.4, 0.15), i*150)); }; const playPickup = () => { initAudio(); playTone(880, 'sine', 0.1); setTimeout(() => playTone(1108, 'sine', 0.15), 80); }; const playBadge = () => { initAudio(); [659.25, 783.99, 987.77, 1318.5].forEach((f, i) => setTimeout(() => playTone(f, 'triangle', 0.3, 0.12), i*120)); }; // 音声よみあげ（Web Speech API） let cachedJaVoice = null; function getJaVoice() { if (cachedJaVoice) return cachedJaVoice; if (!window.speechSynthesis) return null; const voices = speechSynthesis.getVoices(); cachedJaVoice = voices.find(v => v.lang && v.lang.startsWith('ja')) || null; return cachedJaVoice; } function speakText(text, enabled = true) { if (!enabled || !voiceEnabled || !text || !window.speechSynthesis) return; try { speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(text); u.lang = 'ja-JP'; u.rate = 0.9; u.pitch = 1.1; const v = getJaVoice(); if (v) u.voice = v; speechSynthesis.speak(u); } catch (e) {} } function burstConfetti() { const canvas = document.getElementById('confettiCanvas'); if (!canvas) return; const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#fde68a','#fca5a5','#bae6fd','#a7f3d0','#c7d2fe','#fbcfe8']; const particles = Array.from({ length: 80 }, () => ({ x: canvas.width/2, y: canvas.height/2, r: Math.random()*8+4, dx: Math.random()*12-6, dy: Math.random()*-12-4, color: colors[Math.floor(Math.random()*colors.length)], tilt: Math.random()*0.07+0.05, ang: 0 })); function render() { ctx.clearRect(0,0,canvas.width,canvas.height); let active = 0; particles.forEach(p => { p.ang += p.tilt; p.y += (Math.cos(p.ang)+1+p.r/2)/2; p.x += Math.sin(p.ang)*2 + p.dx; p.dy += 0.15; p.y += p.dy; if (p.y <= canvas.height) active++; ctx.beginPath(); ctx.lineWidth = p.r; ctx.strokeStyle = p.color; ctx.moveTo(p.x+p.r, p.y); ctx.lineTo(p.x, p.y+p.r); ctx.stroke(); }); if (active > 0) requestAnimationFrame(render); } render(); } /* ────────────────────────────────────────────────────────────── 3. KanjiVG ────────────────────────────────────────────────────────────── */ const kanjiPathsCache = {}; async function fetchKanjiVG(char) { if (kanjiPathsCache[char]) return kanjiPathsCache[char]; const hex = char.charCodeAt(0).toString(16).padStart(5, '0'); const url = `https://cdn.jsdelivr.net/gh/KanjiVG/kanjivg@master/kanji/${hex}.svg`; try { const res = await fetch(url); if (!res.ok) throw new Error(); const text = await res.text(); const doc = new DOMParser().parseFromString(text, 'image/svg+xml'); const paths = Array.from(doc.querySelectorAll('path')).map(p => p.getAttribute('d')).filter(Boolean); kanjiPathsCache[char] = paths; return paths; } catch (e) { return null; } } /* ────────────────────────────────────────────────────────────── 3.5. 採点ロジック（独自） 1年生でも納得感のあるフィードバックを返すために、ピクセル一致では なく「筆跡そのもの」の幾何的特徴で採点する。 呼び出し側で画数（ストローク数）が一致していることを保証してから 呼ぶこと（画数違反は採点せず、別途やり直しフローを起こす）。 観点と配点： ・かきじゅん 30点（始点の位置 + 向きベクトル） ・マスの つかいかた 30点（マスを4等分した部屋の使い方） ・せんの こうさ 20点（必要な交差ペアの有無） ・おおきさ・いち 20点（バウンディングボックスの大きさ・中心） 戻り値：{ total, breakdown:[{key,label,score,max,status,advice}], comment, passed } ────────────────────────────────────────────────────────────── */ // SVG パス文字列を N 点にサンプリングして [{x,y}] in [0..1] で返す function sampleSvgPath(d, n) { if (!d) return []; const svgNS = 'http://www.w3.org/2000/svg'; const svg = document.createElementNS(svgNS, 'svg'); const p = document.createElementNS(svgNS, 'path'); p.setAttribute('d', d); svg.appendChild(p); document.body.appendChild(svg); const len = p.getTotalLength(); const pts = []; if (len > 0 && n >= 2) { for (let i = 0; i < n; i++) { const t = (i / (n - 1)) * len; const pt = p.getPointAtLength(t); pts.push({ x: pt.x / 109, y: pt.y / 109 }); } } document.body.removeChild(svg); return pts; } // 近すぎる点を間引く（ノイズと計算量を減らす） function simplifyPoints(pts) { if (!pts || pts.length === 0) return []; const out = [pts[0]]; for (let i = 1; i < pts.length; i++) { const prev = out[out.length - 1]; if (Math.hypot(pts[i].x - prev.x, pts[i].y - prev.y) > 0.005) out.push(pts[i]); } if (out.length === 1 && pts.length > 1) out.push(pts[pts.length - 1]); return out; } // マスを4等分した部屋番号（0:TL, 1:TR, 2:BL, 3:BR） function quadrantOf(p) { return (p.x >= 0.5 ? 1 : 0) | (p.y >= 0.5 ? 2 : 0); } // 線の長さで重み付けした「部屋ごとの存在割合」を返す（合計1） // 「点が部屋にあるか」だけでなく「どれだけ書いているか」で測るので、 // 真ん中に小さく書いて4部屋を通過しただけ、では満点にならない。 function roomDensity(polys) { const bins = [0, 0, 0, 0]; let total = 0; for (const poly of polys) { for (let i = 1; i < poly.length; i++) { const a = poly[i - 1], b = poly[i]; const len = Math.hypot(b.x - a.x, b.y - a.y); if (len === 0) continue; const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }; bins[quadrantOf(mid)] += len; total += len; } } if (total === 0) return bins; return bins.map(v => v / total); } // 2線分の交差判定（端点接触は除外） function segmentsCross(a1, a2, b1, b2) { const sgn = (v) => v > 1e-9 ? 1 : v < -1e-9 ? -1 : 0; const o = (p, q, r) => sgn((q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x)); const o1 = o(a1, a2, b1), o2 = o(a1, a2, b2); const o3 = o(b1, b2, a1), o4 = o(b1, b2, a2); return o1 !== 0 && o2 !== 0 && o3 !== 0 && o4 !== 0 && o1 !== o2 && o3 !== o4; } function polylinesCross(p, q) { for (let i = 0; i < p.length - 1; i++) { for (let j = 0; j < q.length - 1; j++) { if (segmentsCross(p[i], p[i+1], q[j], q[j+1])) return true; } } return false; } function crossPairSet(polys) { const pairs = new Set(); for (let i = 0; i < polys.length; i++) { for (let j = i + 1; j < polys.length; j++) { if (polylinesCross(polys[i], polys[j])) pairs.add(`${i},${j}`); } } return pairs; } // 観点①-a：かきじゅん（純粋な順番のみ）（0..1） // ユーザーの i 番目の画の始点が、お手本の「i 番目の画の始点」に最も近いかを判定。 // 順番が正しい限り、書き始めの位置が多少ズレても満点。 function evalStrokeSequence(usrPolys, tplPolys) { const n = Math.min(usrPolys.length, tplPolys.length); if (n === 0) return 0; const tplStarts = tplPolys.map(t => (t && t.length > 0) ? t[0] : null); let sum = 0, cnt = 0; for (let i = 0; i < n; i++) { const u = usrPolys[i]; const tStart = tplStarts[i]; if (!u || u.length === 0 || !tStart) continue; const us = u[0]; const correctDist = Math.hypot(us.x - tStart.x, us.y - tStart.y); let bestDist = Infinity; for (const ts of tplStarts) { if (!ts) continue; const d = Math.hypot(us.x - ts.x, us.y - ts.y); if (d < bestDist) bestDist = d; } if (correctDist <= bestDist + 1e-6) { // 正しい順番（i 番目のお手本始点が最近傍） sum += 1.0; } else { // 他の画のほうが近い：相対距離で部分点 sum += (bestDist + 0.02) / (correctDist + 0.02); } cnt++; } return cnt === 0 ? 0 : sum / cnt; } // 観点①-b：はじめと むき（0..1） // 画ごとの「書き始めの位置」と「向き」がお手本と合っているかを評価。 function evalStrokeStartAndDir(usrPolys, tplPolys) { const n = Math.min(usrPolys.length, tplPolys.length); if (n === 0) return 0; let sum = 0, cnt = 0; for (let i = 0; i < n; i++) { const u = usrPolys[i], t = tplPolys[i]; if (u.length < 2 || t.length < 2) continue; const us = u[0], ue = u[u.length - 1]; const ts = t[0], te = t[t.length - 1]; // 始点距離：0.22（マスの 1/4 強）以上ズレたら 0 点 const ds = Math.hypot(us.x - ts.x, us.y - ts.y); const posScore = Math.max(0, 1 - ds / 0.22); // 向きベクトルの cos 類似度を [0..1] にマップ（逆向きで 0） const uvx = ue.x - us.x, uvy = ue.y - us.y; const tvx = te.x - ts.x, tvy = te.y - ts.y; const ul = Math.hypot(uvx, uvy), tl = Math.hypot(tvx, tvy); let dirScore = 0.5; if (ul > 0.01 && tl > 0.01) { const cos = (uvx * tvx + uvy * tvy) / (ul * tl); dirScore = Math.max(0, cos); } // 位置と向きを乗算で結合（位置が大きく外れた画は向きが合っていても部分点止まり） const per = dirScore * (0.25 + 0.75 * posScore); sum += per; cnt++; } return cnt === 0 ? 0 : sum / cnt; } // 観点②：部屋の使い方（0..1） // 線長で重み付けした 4部屋の分布を、お手本とユーザーで比較する（TVD ベース）。 // 「ちょこっと部屋を横切る」では満点にならず、各部屋にどれだけ書いている // かで採点される。 function evalRooms(usrPolys, tplPolys) { const dt = roomDensity(tplPolys); const du = roomDensity(usrPolys); const ts = dt.reduce((a, b) => a + b, 0); const us = du.reduce((a, b) => a + b, 0); if (ts === 0 && us === 0) return 1; if (ts === 0 || us === 0) return 0; // 全変動距離（TVD）：0=完全一致、1=完全に違う分布 let tvd = 0; for (let i = 0; i < 4; i++) tvd += Math.abs(dt[i] - du[i]); tvd = tvd / 2; // 厳しめに：TVD=0.3 で半分くらいの点になるよう指数で曲げる return Math.max(0, Math.pow(1 - tvd, 1.4)); } // 観点③：線の交差（0..1） function evalCrossings(usrPolys, tplPolys) { const t = crossPairSet(tplPolys); const u = crossPairSet(usrPolys); if (t.size === 0 && u.size === 0) return 1; let inter = 0; for (const k of u) if (t.has(k)) inter++; if (t.size === 0) { // 不要な交差を作ってしまった → 1本あたり 30% 減点（最低 0） return Math.max(0, 1 - u.size * 0.3); } const precision = u.size === 0 ? 0 : inter / u.size; const recall = inter / t.size; if (precision + recall === 0) return 0; return (2 * precision * recall) / (precision + recall); } // 観点④：おおきさ・いち（0..1） // サイズと中心ズレを「相乗平均」で結合する（どちらかが破綻したら全体が落ちる）。 function evalBalance(usrPolys) { let xmin = 1, xmax = 0, ymin = 1, ymax = 0, n = 0; for (const poly of usrPolys) for (const p of poly) { if (p.x < xmin) xmin = p.x; if (p.x > xmax) xmax = p.x; if (p.y < ymin) ymin = p.y; if (p.y > ymax) ymax = p.y; n++; } if (n === 0) return 0; const w = xmax - xmin, h = ymax - ymin; // 一辺 0.65〜0.95 が満点。小さすぎは二次関数で大きく減点 const sizeOk = (v) => { if (v >= 0.65 && v <= 0.95) return 1; if (v < 0.65) { const r = v / 0.65; return Math.max(0, r * r); } return Math.max(0, 1 - (v - 0.95) / 0.05); }; const sizeScore = (sizeOk(w) + sizeOk(h)) / 2; const cx = (xmin + xmax) / 2, cy = (ymin + ymax) / 2; const cd = Math.hypot(cx - 0.5, cy - 0.5); // 中心からのズレ 0.18 以上で 0 点 const centerScore = Math.max(0, 1 - cd / 0.18); return Math.sqrt(sizeScore * centerScore); } function adviceFor(key, raw) { const good = raw >= 0.85, ok = raw >= 0.6; if (good) return 'ばっちり！'; switch (key) { case 'order': return ok ? 'もうすこし じゅんばんを たしかめてね' : 'かきじゅんを みなおして もう いっかい！'; case 'startdir': return ok ? 'はじめの ばしょと むきを みなおそう' : 'はじめの ばしょと えんぴつの むきに きをつけてね'; case 'rooms': return ok ? 'マスを もうちょっと ひろく つかおう' : 'すみずみまで つかえる ように しよう'; case 'crossings': return ok ? 'せんの かさなる ところを ていねいに' : 'せんを ちゃんと かさねて かこう'; case 'balance': return ok ? 'まんなかに かくと きれいだよ' : 'マスの まんなかに おおきく かこう'; } return ''; } // 自力書きの採点：ユーザー筆跡（画ごとの点列）とお手本パスを比較 // userStrokes: [{ points: [{x,y in 0..1}, ...] }, ...] // templatePaths: KanjiVG の 文字列の配列 function scoreHandwriting(userStrokes, templatePaths) { if (!userStrokes || !templatePaths || templatePaths.length === 0) return null; const tplPolys = templatePaths.map(d => sampleSvgPath(d, 24)); const usrPolys = userStrokes.map(s => simplifyPoints(s.points || [])); const items = [ { key: 'order', label: 'かきじゅん', max: 15, raw: evalStrokeSequence(usrPolys, tplPolys) }, { key: 'startdir', label: 'はじめと むき', max: 15, raw: evalStrokeStartAndDir(usrPolys, tplPolys) }, { key: 'rooms', label: 'マスの つかいかた', max: 30, raw: evalRooms(usrPolys, tplPolys) }, { key: 'crossings', label: 'せんの こうさ', max: 20, raw: evalCrossings(usrPolys, tplPolys) }, { key: 'balance', label: 'おおきさ・いち', max: 20, raw: evalBalance(usrPolys) }, ]; const breakdown = items.map(it => ({ key: it.key, label: it.label, max: it.max, score: Math.round(it.raw * it.max), status: it.raw >= 0.85 ? 'good' : it.raw >= 0.6 ? 'ok' : 'bad', advice: adviceFor(it.key, it.raw), })); const total = breakdown.reduce((s, b) => s + b.score, 0); const comment = total >= 90 ? 'すばらしい！' : total >= 70 ? 'じょうず！' : total >= 50 ? 'いい かんじ！' : 'もう いっかい！'; return { total, breakdown, comment, passed: total >= 60 }; } function getStartEndPoints(pathStr) { const svgNS = 'http://www.w3.org/2000/svg'; const svg = document.createElementNS(svgNS, 'svg'); const p = document.createElementNS(svgNS, 'path'); p.setAttribute('d', pathStr); svg.appendChild(p); document.body.appendChild(svg); const len = p.getTotalLength(); const s = p.getPointAtLength(0), e = p.getPointAtLength(len); document.body.removeChild(svg); return { s: { x: s.x/109, y: s.y/109 }, e: { x: e.x/109, y: e.y/109 } }; } /* ────────────────────────────────────────────────────────────── 4. カスタムフック ────────────────────────────────────────────────────────────── */ function useLocalStorage(key, initial) { const [val, setVal] = useState(() => { try { const r = localStorage.getItem(key); return r != null ? JSON.parse(r) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} }, [key, val]); return [val, setVal]; } // 連続学習日数（ストリーク） function useStreak() { const [state, setState] = useLocalStorage(KEY_STREAK, { count: 0, lastDate: null }); // アプリ起動時に今日の日付をチェック useEffect(() => { const today = new Date().toDateString(); if (state.lastDate === today) return; // 今日もう更新済み const y = new Date(); y.setDate(y.getDate() - 1); const yesterday = y.toDateString(); let newCount; if (state.lastDate === yesterday) newCount = (state.count || 0) + 1; else newCount = 1; setState({ count: newCount, lastDate: today }); // eslint-disable-next-line }, []); return state.count || 0; } // きょうの もじ（毎日変わるデイリーチャレンジ） // 清音をまずは優先し、すべてマスターしたら濁音・半濁音・拗音にひろがる function useDailyChallenge(kanaMode, mastered) { return useMemo(() => { const seion = kanaMode === 'katakana' ? KATA_LIST : HIRA_LIST; const all = kanaMode === 'katakana' ? KATA_ALL_LIST : HIRA_ALL_LIST; const seionUnmastered = seion.filter(c => !mastered.includes(c)); const allUnmastered = all.filter(c => !mastered.includes(c)); const pool = seionUnmastered.length > 0 ? seionUnmastered : (allUnmastered.length > 0 ? allUnmastered : all); // 今日の日付をシードに（同じ日は同じ文字） const today = new Date(); const seed = today.getFullYear()*10000 + (today.getMonth()+1)*100 + today.getDate(); const idx = seed % pool.length; return pool[idx]; }, [kanaMode, mastered]); } // 取得済みバッジ管理 function useAchievements({ mastered, words, streak, earned, setEarned, onNew }) { useEffect(() => { const ctx = { m: mastered, w: words, s: streak }; const nowEarned = BADGES.filter(b => b.check(ctx)).map(b => b.id); const fresh = nowEarned.filter(id => !earned.includes(id)); if (fresh.length > 0) { setEarned(nowEarned); fresh.forEach(id => onNew && onNew(BADGES.find(b => b.id === id))); } // eslint-disable-next-line }, [mastered, words, streak]); } /* ────────────────────────────────────────────────────────────── 5. アイコン（lucide風） ────────────────────────────────────────────────────────────── */ const SvgIcon = ({ size=20, className='', children }) => ( {children} ); const IconPencil = (p) => ; const IconBook = (p) => ; const IconSparkle = (p) => ; const IconRotate = (p) => ; const IconX = (p) => ; const IconPlay = (p) => ; const IconPlus = (p) => ; const IconTrash = (p) => ; const IconBulb = (p) => ; const IconStar = (p) => ; const IconCheck = (p) => ; const IconSettings = (p) => ; const IconVolume = (p) => ; const IconVolumeX = (p) => ; const IconFlame = (p) => ; const IconTrophy = (p) => ; const IconCalendar = (p) => ; /* ────────────────────────────────────────────────────────────── 6. ── ひよこさんが応援 ────────────────────────────────────────────────────────────── */ function Mascot({ message, mood = 'happy', size = 'normal' }) { // mood: happy / cheer / wow / sad const face = { happy: '🐤', cheer: '🐥', wow: '🌟🐤', sad: '🐣' }[mood] || '🐤'; const wrap = size === 'small' ? 'text-2xl' : 'text-4xl md:text-5xl'; const anim = mood === 'wow' ? 'kkm-sparkle' : mood === 'cheer' ? 'animate-bounce' : 'kkm-float'; return (
{face}
{message && (
{message} ✨
)}
); } /* ────────────────────────────────────────────────────────────── 7. / ────────────────────────────────────────────────────────────── */ function LevelBadge({ masteredCount, onClick }) { const lv = getCurrentLevel(masteredCount); return ( ); } function StreakBadge({ streak }) { if (streak <= 0) return null; return (
🔥 {streak}にち
); } /* ────────────────────────────────────────────────────────────── 8.
────────────────────────────────────────────────────────────── */ function Header({ view, setView, mastered, onReset, onOpenBadges, streak, voiceOn, setVoiceOn, earnedCount }) { return ( ); } /* ────────────────────────────────────────────────────────────── 9.