\n \n\n\n",[],[228,238],"d575e13e-f5ef-481a-b5c6-9878aac203f9","api.ts","3682dcd2-7de0-11f1-80e2-1607ee4eb77e",5,["D",1783853736579],"const KEY = \"vocab_token\";\n\nexport const getToken = (): string | null => localStorage.getItem(KEY);\nexport const setToken = (t: string | null): void => {\n if (t) localStorage.setItem(KEY, t);\n else localStorage.removeItem(KEY);\n};\n\nexport async function api(path: string, opts: RequestInit = {}): Promise {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n ...(opts.headers as Record || {}),\n };\n const t = getToken();\n if (t) headers.Authorization = `Bearer ${t}`;\n const res = await fetch(path, { ...opts, headers });\n let data: any = {};\n try {\n data = await res.json();\n } catch { /* non-JSON response */ }\n if (!res.ok) throw new Error(data.error || `エラーが発生しました (${res.status})`);\n return data;\n}\n",[],[228,245],"061dd3dd-dbdc-413a-9793-c6ad7999ad20","WordPicker.tsx","dce212ae-7e0e-11f1-8d9a-1607ee4eb77e",17,["D",1783873772549],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\n\nexport default function WordPicker(\n { fields, words, myWordIds, refresh }: {\n fields: any[];\n words: any[];\n myWordIds: number[];\n refresh: () => Promise;\n },\n) {\n const [q, setQ] = useState(\"\");\n const [busyId, setBusyId] = useState(null);\n const [error, setError] = useState(\"\");\n\n const my = new Set(myWordIds);\n const frontField = fields.find((f) => f.side === \"front\");\n const meaningField = fields.find((f) => f.name.includes(\"意味\") && !f.name.includes(\"例文\"));\n\n const label = (w: any) => (frontField ? w.data[String(frontField.id)] || \"\" : \"\");\n const sub = (w: any) => (meaningField ? w.data[String(meaningField.id)] || \"\" : \"\");\n\n const needle = q.trim().toLowerCase();\n const filtered = needle\n ? words.filter((w) => Object.values(w.data).some((v) => String(v).toLowerCase().includes(needle)))\n : words;\n\n const toggle = async (w: any) => {\n setBusyId(w.id);\n setError(\"\");\n try {\n if (my.has(w.id)) {\n await api(`/api/my-words/${w.id}`, { method: \"DELETE\" });\n } else {\n await api(\"/api/my-words\", { method: \"POST\", body: JSON.stringify({ wordId: w.id }) });\n }\n await refresh();\n } catch (e: any) {\n setError(e.message);\n } finally {\n setBusyId(null);\n }\n };\n\n return (\n

🗂 単語を選んでマイ単語帳を作る

\n マイ単語帳: {myWordIds.length} 語\n

\n\n {error &&

{error}

}\n\n setQ(e.target.value)}\n placeholder=\"検索（単語・意味など）\"\n className=\"border border-gray-200 rounded-xl px-4 py-2.5 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-300\"\n />\n\n

\n {filtered.length === 0 && (\n

該当する単語がありません

\n )}\n {filtered.map((w) => {\n const added = my.has(w.id);\n return (\n \n

{label(w)}

{sub(w)}

\n toggle(w)}\n disabled={busyId === w.id}\n className={`shrink-0 rounded-xl px-4 py-2 text-sm font-bold transition disabled:opacity-50 ${\n added\n ? \"bg-white border border-gray-200 text-gray-500 hover:bg-gray-50\"\n : \"bg-indigo-600 text-white hover:bg-indigo-700\"\n }`}\n >\n {busyId === w.id ? \"...\" : added ? \"✓ 追加済み\" : \"＋追加\"}\n \n

\n );\n })}\n

\n \n );\n}\n",[],[228,253],"f21049dc-92f1-4d50-a5ad-f9755c7beb3c","Login.tsx","4439f784-7de0-11f1-938d-1607ee4eb77e",8,["D",1783853759578],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, setToken } from \"./api.ts\";\n\nexport default function Login({ onLogin }: { onLogin: (user: any) => void }) {\n const [mode, setMode] = useState<\"login\" | \"register\">(\"login\");\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n const submit = async (e: any) => {\n e.preventDefault();\n setBusy(true);\n setError(\"\");\n try {\n const r = await api(mode === \"login\" ? \"/api/login\" : \"/api/register\", {\n method: \"POST\",\n body: JSON.stringify({ username, password }),\n });\n setToken(r.token);\n onLogin(r.user);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setBusy(false);\n }\n };\n\n return (\n

📖

発音単語帳

タップして発音を聞ける英単語カード

\n {error &&

{error}

}\n setUsername(e.target.value)}\n placeholder=\"ユーザー名\"\n autoComplete=\"username\"\n className=\"border border-gray-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-300\"\n />\n setPassword(e.target.value)}\n placeholder=\"パスワード（6文字以上）\"\n autoComplete={mode === \"login\" ? \"current-password\" : \"new-password\"}\n className=\"border border-gray-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-300\"\n />\n \n {busy ? \"処理中...\" : mode === \"login\" ? \"ログイン\" : \"新規登録\"}\n \n { setMode(mode === \"login\" ? \"register\" : \"login\"); setError(\"\"); }}\n className=\"text-sm text-indigo-500 hover:underline\"\n >\n {mode === \"login\" ? \"アカウントを作成する\" : \"ログイン画面へ戻る\"}\n \n \n

\n );\n}\n",[],[228,261],"f774106e-017b-45a6-81a1-5a450b38728f","FlashCards.tsx","5280c30e-7de0-11f1-bc93-1607ee4eb77e",20,["D",1783873824417],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { speak } from \"./speech.ts\";\n\ninterface Field {\n id: number;\n name: string;\n side: string;\n speak: number;\n sort_order: number;\n}\n\ninterface Word {\n id: number;\n data: Record;\n}\n\nexport default function FlashCards(\n { fields, words, onGoPick }: { fields: Field[]; words: Word[]; onGoPick?: () => void },\n) {\n const [index, setIndex] = useState(0);\n const [flipped, setFlipped] = useState(false);\n const [slide, setSlide] = useState(\"\");\n const start = useRef<{ x: number; y: number } | null>(null);\n const handled = useRef(false);\n const captured = useRef(false);\n const swiped = useRef(false);\n\n const frontFields = fields.filter((f) => f.side === \"front\");\n const backFields = fields.filter((f) => f.side !== \"front\");\n const n = words.length;\n\n if (!n) {\n return (\n

マイ単語帳はまだ空です。
単語一覧から学習したい単語を追加しましょう。

\n {onGoPick && (\n \n 🗂 単語を選ぶ\n \n )}\n

\n );\n }\n\n const i = ((index % n) + n) % n;\n const word = words[i];\n const val = (f: Field) => word.data[String(f.id)] ?? \"\";\n const frontText = frontFields.map(val).filter(Boolean).join(\", \");\n\n const go = (dir: number) => {\n setFlipped(false);\n setSlide(dir > 0 ? \"slide-next\" : \"slide-prev\");\n setIndex((p) => ((p + dir) % n + n) % n);\n };\n\n // Gesture handling: act as soon as the movement threshold is crossed\n // (during pointermove), instead of waiting for pointerup. The pointer is\n // captured once a drag starts so the gesture completes even when the\n // pointer leaves the card (mouse drag on PC) or crosses the speak button\n // / back face (touch on mobile).\n const onPointerDown = (e: any) => {\n start.current = { x: e.clientX, y: e.clientY };\n handled.current = false;\n captured.current = false;\n swiped.current = false;\n };\n\n const onPointerMove = (e: any) => {\n if (!start.current || handled.current) return;\n const dx = e.clientX - start.current.x;\n const dy = e.clientY - start.current.y;\n\n // Capture only after real movement so plain taps still deliver\n // normal click events to the card / speak buttons.\n if (!captured.current && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) {\n captured.current = true;\n try {\n e.currentTarget.setPointerCapture(e.pointerId);\n } catch { /* capture unsupported */ }\n }\n\n if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2) {\n handled.current = true;\n swiped.current = true;\n setFlipped((f) => !f);\n } else if (Math.abs(dy) > 50 && Math.abs(dy) > Math.abs(dx) * 1.2) {\n handled.current = true;\n swiped.current = true;\n go(dy < 0 ? 1 : -1);\n }\n };\n\n const onPointerEnd = (e: any) => {\n start.current = null;\n if (captured.current) {\n try {\n e.currentTarget.releasePointerCapture(e.pointerId);\n } catch { /* already released */ }\n captured.current = false;\n }\n };\n\n // Swallow the click that fires right after a swipe so it doesn't trigger speech\n const onClickCapture = (e: any) => {\n if (swiped.current) {\n e.stopPropagation();\n e.preventDefault();\n swiped.current = false;\n }\n };\n\n return (\n

{i + 1} / {n}

\n\n setSlide(\"\")}\n >\n \n {/* 表面 */}\n speak(frontText)}\n >\n {frontFields.map((f) => (\n

\n {val(f)}\n

\n ))}\n

🔊 タップで発音　⇄ 横スワイプでめくる

\n\n {/* 裏面 — overflow は hidden にする（スクロール可能領域があると\n モバイルブラウザがスワイプを横取りしてしまうため） */}\n

\n {backFields.map((f) => (\n

{f.name}

\n {f.speak ? (\n { e.stopPropagation(); speak(val(f)); }}\n >\n 🔊\n {val(f)}\n \n ) : (\n

\n {val(f)}\n

\n )}\n

\n ))}\n

\n \n \n\n

\n \n \n \n

↕ 上下スワイプで前後のカードへ

\n \n );\n}\n",[],[228,269],"a1f23d37-f29b-414b-b604-17ea6974c16b","App.tsx","672a889e-7de0-11f1-a514-1607ee4eb77e",18,["D",1783873794425],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, getToken, setToken } from \"./api.ts\";\nimport Login from \"./Login.tsx\";\nimport FlashCards from \"./FlashCards.tsx\";\nimport WordPicker from \"./WordPicker.tsx\";\nimport Admin from \"./Admin.tsx\";\n\nexport default function App() {\n const [user, setUser] = useState(null);\n const [checking, setChecking] = useState(true);\n const [view, setView] = useState<\"cards\" | \"pick\" | \"admin\">(\"cards\");\n const [data, setData] = useState(null);\n\n useEffect(() => {\n if (!getToken()) {\n setChecking(false);\n return;\n }\n api(\"/api/me\")\n .then((r) => setUser(r.user))\n .catch(() => setToken(null))\n .finally(() => setChecking(false));\n }, []);\n\n const refresh = useCallback(async () => {\n const d = await api(\"/api/data\");\n setData(d);\n }, []);\n\n useEffect(() => {\n if (user) refresh().catch((e) => console.error(e));\n }, [user, refresh]);\n\n const logout = async () => {\n try {\n await api(\"/api/logout\", { method: \"POST\" });\n } catch { /* session may already be gone */ }\n setToken(null);\n setUser(null);\n setData(null);\n setView(\"cards\");\n };\n\n if (checking) {\n return

読み込み中...

;\n }\n if (!user) return ;\n\n const tab = (active: boolean) =>\n `px-3 py-1.5 rounded-lg text-sm transition ${active ? \"bg-indigo-600 text-white font-bold\" : \"text-gray-600 hover:bg-indigo-50\"}`;\n\n const myIdSet = new Set(data?.myWordIds ?? []);\n const myWords = data ? data.words.filter((w: any) => myIdSet.has(w.id)) : [];\n\n return (\n

📖 発音単語帳

\n \n

\n\n

\n {!data ? (\n

読み込み中...

\n ) : view === \"admin\" && user.isAdmin ? (\n \n ) : view === \"pick\" ? (\n \n ) : (\n setView(\"pick\")} />\n )}\n

\n\n \n

\n );\n}\n",[],[228,277],"caa2d4e3-41de-4db4-8a6a-bf54476459d6","Admin.tsx","61518896-7de0-11f1-bd63-1607ee4eb77e",["D",1783875097403],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\n\nexport default function Admin({ fields, words, refresh }: { fields: any[]; words: any[]; refresh: () => Promise }) {\n const [newField, setNewField] = useState({ name: \"\", side: \"back\", speak: false });\n const [autoWord, setAutoWord] = useState(\"\");\n const [editId, setEditId] = useState(null);\n const [editData, setEditData] = useState>({});\n const [error, setError] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n const run = async (fn: () => Promise) => {\n setBusy(true);\n setError(\"\");\n try {\n await fn();\n await refresh();\n } catch (e: any) {\n setError(e.message);\n } finally {\n setBusy(false);\n }\n };\n\n const addField = () => run(async () => {\n if (!newField.name.trim()) throw new Error(\"項目名を入力してください\");\n await api(\"/api/admin/fields\", { method: \"POST\", body: JSON.stringify(newField) });\n setNewField({ name: \"\", side: \"back\", speak: false });\n });\n\n const delField = (f: any) => {\n if (!confirm(`項目「${f.name}」を削除しますか？（各単語のこの項目の内容も表示されなくなります）`)) return;\n run(() => api(`/api/admin/fields/${f.id}`, { method: \"DELETE\" }));\n };\n\n const autoAdd = () => run(async () => {\n if (!autoWord.trim()) throw new Error(\"英単語を入力してください\");\n await api(\"/api/admin/words/auto\", { method: \"POST\", body: JSON.stringify({ word: autoWord }) });\n setAutoWord(\"\");\n });\n\n const delWord = (w: any) => {\n if (!confirm(\"このレコードを削除しますか？（各ユーザーのマイ単語帳からも消えます）\")) return;\n run(() => api(`/api/admin/words/${w.id}`, { method: \"DELETE\" }));\n };\n\n const startEdit = (w: any) => {\n setEditId(w.id);\n setEditData({ ...w.data });\n setError(\"\");\n };\n\n const saveEdit = () => run(async () => {\n await api(`/api/admin/words/${editId}`, { method: \"PUT\", body: JSON.stringify({ data: editData }) });\n setEditId(null);\n setEditData({});\n });\n\n const cancelEdit = () => {\n setEditId(null);\n setEditData({});\n };\n\n return (\n

\n {error &&

{error}

}\n\n

📋 データ項目の管理

\n \n \n \n \n \n \n \n \n \n \n {fields.map((f) => (\n \n \n \n \n \n \n ))}\n \n

項目名	面	音声
{f.name}	{f.side === \"front\" ? \"表\" : \"裏\"}	{f.speak ? \"🔊 あり\" : \"－\"}	\n \n

\n setNewField({ ...newField, name: e.target.value })}\n placeholder=\"新しい項目名\"\n className=\"border border-gray-200 rounded-lg px-3 py-1.5 text-sm flex-1 min-w-[8rem]\"\n />\n setNewField({ ...newField, side: e.target.value })}\n className=\"border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white\"\n >\n \n \n \n \n setNewField({ ...newField, speak: e.target.checked })}\n />\n タップで音声\n \n \n

\n\n

📚 単語データの管理（{words.length}件）

\n setAutoWord(e.target.value)}\n onKeyDown={(e) => { if (e.key === \"Enter\" && !busy) autoAdd(); }}\n placeholder=\"英単語を入力（例: adventure）\"\n className=\"border border-gray-200 rounded-lg px-3 py-2 text-sm flex-1 min-w-[10rem] bg-white\"\n />\n \n {busy ? \"生成中...\" : \"✨ 自動補完して追加\"}\n \n

\n 発音記号・意味・例文・日本語訳などの項目はAIが自動で補完します。追加後に「編集」で修正できます。\n

\n \n \n \n {fields.map((f) => )}\n \n \n \n \n {words.map((w) => (\n editId === w.id\n ? (\n \n {fields.map((f) => (\n \n ))}\n \n \n )\n : (\n \n {fields.map((f) => )}\n \n \n )\n ))}\n \n

{f.name}
\n setEditData({ ...editData, [String(f.id)]: e.target.value })}\n placeholder={f.name}\n className=\"border border-indigo-300 rounded-lg px-2 py-1 text-sm w-full min-w-[6rem] bg-white\"\n />\n	\n \n \n
{w.data[String(f.id)] \|\| \"\"}	\n \n \n

\n );\n}\n",[],[228,285],"13a74445-c574-4f4f-b085-d54ce5b1f523",["D",1783853732693],[198,199,200,201,202,203,204,205,206],[228],["D",1783873717457],[],[18,81],["D",1783853691891],[],[18,66],["D",1783853691891],[195,196],[18],["D",1783853674493],["D",1789560647748],{"_11":12,"_144":72},{"_11":12,"_139":140,"_71":72,"_31":70,"_141":142,"_143":30},{"_41":130,"_13":16,"_35":38,"_131":93,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_54":-5,"_163":342,"_343":344,"_345":346,"_347":30,"_348":30,"_349":30,"_350":24,"_351":-5,"_352":-7,"_353":-7,"_354":26,"_355":30,"_356":30,"_357":-5,"_358":30,"_359":30,"_360":30,"_361":-5},"ENV",{"_313":314,"_315":316,"_317":16,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend