increase zoom to fully crop baked-in black bars
force update version history
crop baked-in black bars from youtube iframe in mini player
remove bg-black from mini youtube player to blend with light mode
ensure all metadata uses VERSED. with period
resize favicon to 48x48 to meet Google Search guidelines
optimize metadata, add structured data, and expand sitemap
simplify manifest app name to resolve redundant window title
add Negitama to supporters list
show fallback warning when GPT requests fallback to Gemini
update changelog
add GPT indicator badge to analysis result
switch from Azure to direct OpenAI API for hybrid fallback
update changelog
integrate Azure OpenAI for hybrid analytics with hidden model toggle
soften splash screen exit shadows and thin out bottom borders for seamless integration
削除hover赤のライト対応とLRCLIB User-Agentの旧ドメイン修正
- 履歴削除×・プレーヤー閉じるのhover色(red-300)にライトvariantを追加 - LRCLIBへ送るUser-Agentの連絡先URLを実ドメイン versedapp.uk に修正 (versed.app は当方のドメインではない) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ライトモード未対応の赤系テキストを修正+SRSマルチタブ整合性
- 確認テストの誤答表示(text-red-200)がライトの紙地でほぼ不可視だった - レベル選択チップ(sky-300/rose-300)・単語帳の全削除確認・カスタム ブロックのCustomバッジ/削除ボタンも同様に светлый variantを追加 - lib/srs: storageイベントで_round/_clearsキャッシュも無効化 (他タブの周回進捗・クリア回数が反映されなかった) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
表示を起動時のみに制限し、5枚バーの分割感を強調
表示頻度: - sessionStorageで表示済みを記録し、セッション内2回目以降のフルロード (ページ間遷移等)はinline scriptがペイント前にスキップ(くどさ解消) - 30分以上空いた再訪は新しい起動とみなして再表示 デザイン: - バー間に常時カラム罫(縦の継ぎ目)を表示し5分割を予告 - 退場時は各バー下端にインクの縁(2px)+紙が持ち上がる影で1枚ずつ強調 - staggerを60ms→80ms間隔に拡大し、ずれをはっきりと - 文字の刷り上がりにオーバーシュート(活字を打った反動)を追加 - ローダーのスイープをフルコントラストに、will-changeでモバイル対策 - 表示中の背面スクロールを防止(touch-action/overscroll-behavior) - 最短表示時間をイントロ全体が見える1.4sに調整 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
保険タイマーによる退場後の再表示バグを修正し、デザインを校正刷り風に刷新
バグ: 4秒のfailsafeタイマーが正常退場後も解除されず、gone状態から exitへ巻き戻してスプラッシュが一瞬再表示されていた。 - 正規の退場スケジュール時にfailsafeを解除 - setPhaseを関数型更新にし show以外からは遷移しないようガード デザイン: - 四隅にトンボ(裁ち落とし線)+版面キャプションを追加(ポスターの版面化) - 縁に向かって濃くなるハーフトーン網点テクスチャ - 点滅カーソルを廃止し、罫線上をインクセグメントが流れるスイープローダーに Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
初回ロードに全画面スプラッシュ(活版印刷リビール)を追加
- SSR HTMLに含めてハイドレーション前の白画面をページ色で隠す - VERSED.がAnton斜体で1文字ずつマスクから刷り上がるイントロ - load完了後、画面が縦5枚のバーに割れて上へ抜けるリビールで退場 - テーマトークン参照でダーク/ライト両対応、reduced-motionはフェードのみ Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
resolve perspective zoom distortion in 3D lettering by using non-3D container for view-transition
isolate 3D lettering background from root view-transition to prevent size jumps and stutter on mobile theme toggling
テーマ切替にインク円形リビールのトランジションを追加
- View Transitions API でトグルボタンのクリック地点から新テーマが円形に 広がる(紙にインクが落ちて広がるイメージ。650ms / expo-out) - PCの html zoom(1.25/1.4) 分のクリック座標補正付き - 非対応ブラウザ・prefers-reduced-motion・スナップショット失敗時は 従来の即時切替へグレースフルにフォールバック - 既定のクロスフェードは無効化し、新テーマ(clip-path円)が旧の上に重なる構成 - html に suppressHydrationWarning(FOUCスクリプトが付ける data-theme への dev限定 hydration 警告を抑制。next-themes と同じ標準手法) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ブラウザタブのタイトルを「VERSED. - PAGE」に簡潔化
- title.default=「VERSED. - HOME」、template=「VERSED. - %s」 - 各ページを短い英大文字ラベルへ(WORDBOOK/BOOKMARKS/TERMS/PRIVACY/ SPECIAL THANKS/INSTALL/REINSTALL/CHANGELOG) - リンク共有カード(OG/Twitter)は従来の説明的タイトルを維持(影響なし) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
メニューの「開発を応援する」をライトで読みやすいamberに
淡い amber-200 がライトの紙メニュー地で読めなかったため、公式音源推奨バッジと 同系統の [data-theme=light]:amber-700 に切替(アイコン・hover含む)。ダークは不変。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
YouTube候補のライト対応(サムネ上タイトル・公式音源バッジ)
1. サムネ上の動画タイトル(VideoTitleOverlay)が text-fg/95 でライトでは黒に 反転し、暗い動画サムネ+黒スクリム上で黒潰れしていた → text-white/95 固定 (常に暗いサムネ上なので両テーマとも白が正しい) 2. 「※公式音源推奨」バッジの amber-200 がライト地で読めなかった → [data-theme=light] で amber-700/濃色に切替(ダークは不変) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モーダル地を専用変数化しダークを元値(14,14,14/0.95)に厳密復元
前コミットで modal 地を elevated(22,22,22)@0.97 にしたため、ダークのモーダルが 僅かに明るく変わっていた。--v-modal(dark:14 14 14 / light:227 224 217)を新設し 透明度も 0.95 に戻して、ダークは変数化前と完全一致・ライトは紙色を維持。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳モーダルの地色をトークン化しライト対応
Modal の背景が bg-[rgba(14,14,14,0.95)] のダーク固定で、ライトでは中の 文字(トークンで黒に反転)がダーク地に埋もれて読めなかった。 bg-[rgb(var(--c-elevated)/0.97)] に変更し、ライトでは紙色モーダルに。 セクションメニュー・学習カード両方をライトで実機確認済み。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase4 canvas演出・バッジのライト対応
- versed-ambient.js: theme属性で紙×インクのパレットへ切替(地・照明・ ハーフトーン multiply 黒ドット・インク雲の反転・黒グレイン・紙ビネット) - VersedAmbient.tsx: data-theme を theme 属性へ同期(初期値+切替イベント) - VersedLetters: 3Dレタリングのストロークを --c-text から取得しテーマ追従 - kind-styles / 解説レベル選択: [data-theme=light] variant で濃色系に切替 (ダークの見た目は不変) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Phase3 JSX全コンポーネントの色をテーマトークン化
- -white/* → -fg/*、solid text/bg-white → fg、rgba(242,240,235,*)→var(--c-text) - 白ボタン上の #0a0a0a/text-black → text-ink(反転で自動追従) - bg-[#f2f0eb]→bg-text、SiteHeader/メニューの黒地→var(--c-page/ink) - LineCard アクティブチャンク文字 #ffffff → var(--c-fg)(ライトで黒に) - 例外(意図的に固定色を維持): OG画像・global-error(CSS変数が届かない)、 動画サムネの黒スクリム、黒シャドウ Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Phase2 globals.css の全色をテーマ変数化
- rgba(242,240,235,*)→rgb(var(--c-text)/*)、#f2f0eb→var(--c-text) - rgba(255,255,255,*)→var(--c-fg)、#0a0a0a→var(--c-ink)、#080808→var(--c-page) - card-surface のグラデは専用変数 --v-card-top/bottom(ダーク実値は完全一致) - 黒シャドウ(rgba(0,0,0))・スクロールバー灰・同期オーロラ色は両テーマ共通のため温存 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Phase1 テーマ基盤(CSS変数・data-theme・トグル・FOUC防止)
- tailwind の全色トークンを rgb(var(--c-*)/<alpha-value>) 化(fg トークン新設) - :root にダーク実値(従来と完全一致)、[data-theme=light] に紙×インクのライト値 - lib/theme.ts: get/set/toggle + versed:theme 永続化 + theme-color メタ同期 - layout: body 先頭に FOUC 防止の同期スクリプト - ホームのナビ列(単語帳/履歴の並び)にテーマ切替ピル(太陽/月) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
implement plan A - auto-detect song title/artist from lyrics and auto-fetch YouTube videos on completion
add auxiliary song info input inside paste mode to allow manual search details
blacklist macOS Siri voice to prevent fallback to Katakana English, and prioritize Google US English
restore Google voice backup at normal speed and improve english voice load check in retry loop
implement retry mechanism for speech synthesis voices to prevent Japanese fallback (katakana accent)
blacklist creepy Fred and Alex voices on macOS and prioritize natural female voices
completely exclude Google online voices and set rate to 1.0 to prevent low-pitch bugs on Chrome
bump service worker to v3 to invalidate client cache
prioritize local en-US voices to avoid low-pitch Google voice bug on PC Chrome
reduce sticky header padding and increase transparency for lighter visual feel
ブックマークのタイトルを 18px → 21px に拡大
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ブックマーク・単語帳カードのUI最適化(全端末)
ブックマーク(/vocab): - タイトルを 16px→18px semibold に格上げ(強調すべき見出しが小さかった) - 全カードの「タップで意味を表示」文言を廃止し、回転シェブロンの 開閉インジケータに置換(くどさ解消・行もコンパクトに) - 展開時の本文 13→14.5px、使用例 12.5→13.5px、和訳 10.5→12px に増量 単語帳カード(StudySession): - 表面: 単語を clamp(2.4rem,10vw,3.6rem) に大型化 - 裏面: 英単語を小さな見出し(1.1rem/40%)に降格し、意味を主役 (1.6rem bold)に。例文 15.5px・和訳 13px・ニュアンス 13.5px に増量、 幅も max-w-md に拡大 - 発音ボタンを 36→44px に拡大(ホバー背景付き) - ○×ボタンをモノクロ体系に統一: ○(覚えた)=白塗りの主ボタン、 ✕(まだ)=ゴースト。文字グリフ→SVGで太さ・サイズを揃え h-16 に拡大 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
resolve physical scale measurement discrepancy in ReadingProgress
resolve PC progress bar offset and implement static changelog JSON to bypass Vercel shallow-clone limitation
resolve reading progress bar offset and force git remote change to fetch full logs on Vercel
perf: disable prefetch on changelog link to optimize initial load
fetch git unshallow on build to retrieve full changelog history on Vercel
remove duplicate SiteHeader on changelog page
show full git log history on changelog page
add App Store styled changelog page synced with git log, link EST. Tokyo to it
default lyrics scroll sync to ON when synced lyrics are loaded
resolve header overlap on tablet and PC by adjusting margin-top
resolve wordbook block click offset caused by CSS zoom
PC/タブレットのUI最適化(スマホは不変)
- PCの自動拡大 zoom 1.7 → 1.25 に抑制(1.7は実効ビューポート高が約470pxに なり、ランディングのフッターがコンポーザーに被って崩れていた)。 超ワイド(≥1920px)のみ 1.4 - タブレット以上(≥768px)では背面の回転3Dレタリングを 0.85 → 0.4 に減光。 広い画面で大量の文字が視界に入り「ごちゃごちゃ」して見える問題を解消し、 入力・コンテンツを主役に立てる - スマホ(<768px)は両変更ともメディアクエリ外のため一切影響なし (プレビューで zoom:1 / opacity:0.85 の不変を確認済み) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
change analyze submit button icon from → to ↑
歌詞取得ステータスの「実行促し」表示を削除
「取得が完了しました!」の後は実行促し(ボタンを押して解析してください→)へ 遷移せず、少し見せてから自動で消してナビを復帰させる。2段階(取得中→完了)に簡素化。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞取得ステータスをナビピル型に刷新(レイアウトシフト解消)
- ステータスをナビ(単語帳/履歴)と同じピル造形に統一し、ナビの位置に オーバーレイ表示。表示中はナビをフェードアウト → ボタンを押し退けない - 取得中は白イコライザーバー(v-status-bar・v-bar-wave共有)、 完了はチェック+明るめボーダー、実行促しは送信ボタンと同じ→アイコンをパルス - useLyricsFetchPhase フックと表示用 LyricsFetchStatusPill に分離し、 表示制御(候補表示中・メニュー開・解析中は出さない)を親へ集約 - nav の mt-3.5 は margin collapse するため inset-0 中央寄せで正確に重ねる Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞自動取得中の控えめなステータス表示
曲確定→歌詞取得(3〜8秒)の間ユーザーが不安にならないよう、コンポーザー直下に 3段階の控えめな案内を出す: 1) 取得中「歌詞取得中…」(バーアニメ付き) 2) 完了「取得が完了しました!」(1.8秒) 3) 実行促し「→ ボタンを押して解析してください」 - 自動取得時のみ反応(手動貼り付け・解析中・候補表示中は出さない) - 曲名編集で歌詞クリア時はリセット - 実機プレビューで3段階の遷移を確認済み Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
resolve unused var in SiteHeader to unblock Vercel build
サイトURL解決を堅牢化しビルドクラッシュを解消
NEXT_PUBLIC_SITE_URL をスキーム無し("versedapp.uk")で登録したため layout の new URL(siteUrl) が TypeError を投げ、全デプロイが Error で 失敗していた(本番が数十分前の古いビルドで停止=再インストール案内も未反映)。 - lib/siteUrl.ts に getSiteUrl() を新設: https:// を補完し、不正値でも 安全な既定へフォールバックしてビルドを絶対に落とさない - layout / sitemap / robots の3箇所の重複ロジックを getSiteUrl() に集約 - 壊れた環境変数(スキーム無し)でも next build が通ることを実測 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
再インストール案内を本番有効化+手順ページ /reinstall を追加
- 案内文言を確定版に差し替え((仮)を削除)、NOTICE_ENABLED=true で発動 - 「再インストール方法を見る」→ /reinstall へ遷移 - /reinstall: 削除→versedapp.ukで入れ直す手順(/installと同形式)+ 旧アドレス一覧(www/verced/lyra-two-sage→自動転送で引き続きアクセス可)を明記 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
旧ドメインPWAユーザー向け再インストール案内の仕組み
検出方法: - manifest の start_url に ?src=pwa の印を追加。移行後にインストールした PWAは起動時に必ず印付きで開き、versed:pwa-fresh-install を永続保存 - スタンドアロン起動なのに印もフラグも無い=旧ドメイン時代のPWAと判定 PwaReinstallNotice: - 案内オーバーレイ(文言はプレースホルダ・これから差し替え) - 「あとで」=セッション内非表示 / 「再インストール済み」=恒久非表示(誤検知救済) - ?versed-debug-legacy=1 で強制表示(実機確認用) - ⚠️ NOTICE_ENABLED=false のキルスイッチでOFF。manifestの印だけ先行して 本番に出し、新規インストールへの印付けを今日から開始する Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
新ドメイン(versedapp.uk)反映のためクリーンビルドを実行
NEXT_PUBLIC_SITE_URL はビルド時にHTMLへ焼き込まれるため、環境変数追加後に 新規ビルドを走らせて canonical/OGP/sitemap を versedapp.uk に更新する。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
本番ドメインを versedapp.uk に変更(Capacitor)
独自ドメイン versedapp.uk を取得しVercelに接続。今後のドメイン変更による PWA再インストール問題を防ぐため、本番URLを *.vercel.app から独自ドメインへ統一。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
bump PWA service worker version to clear cache, remove forceZoomOut iOS focus bug
resolve iOS PWA and Capacitor bugs (menu link, focus, header overlay)
perf(analyze): 解析パイプラインの計測ログ追加+品質ミス時の救済・無駄sleep削減
可観測性(#2): - セクション別に 試行回数/所要時間/thinkingトークン/粒度ミス を構造化ログ出力 - ブリーフ(Pass1)の所要時間・成否、全体時間・Vertex使用有無もログ - Vercel Functions ログで本番の実態(各段が何秒か)を初めて可視化 救済・待ち時間削減(#3): - 粒度/行欠落ガードを致命エラーから LowQualityError に分離 - valid だが粗い verse を保持し、全試行が合格に届かなくても空セクションに せず粗い訳を返す(無駄払いの回収・堅牢性向上) - 品質ミス再試行のバックオフsleepを廃止(sleepは上流混雑復帰用で粗さ再試行には不要) ※ 品質は eval で不変を確認(Developer APIの過負荷で救済パスの実行時実証は保留)。 本番Vertexにデプロイ後、新ログで実値を取得して次の最適化を判断する。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: ライトモード実装計画を追加
紙・オフホワイト(#f4f2ed)方向のライトモードをdata-theme+CSS変数で 実装するための計画。Phase 1-5に分割、トグルはホーム入力欄下に配置。 アンビエント背景/3Dレタリング/解説チャンク色の反転方針も明記。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
VERSED仕様への統一・デッドコード削除・バグ修正
バグ修正: - +メニューのトグル崩壊(menuRefが未接続で外側クリック判定が常時誤動作) - カスタムブロック削除時のクラッシュ(非nullアサーション) - customDeckの破損データ耐性(Array.isArray検証) - 履歴リンク再クリックの無反応(hashchange手動発火) デッドコード削除(+176 / -1185行): - 到達不能化していたチュートリアル機構一式(sample-result.ts等) - 未使用コンポーネント(Field/ReminderToggle/ErrorNotice/FlatModeToggle/LyricsNotice) - globals.cssの旧ヒーロー/星演出CSS 約540行・27クラス - 星座PNG 24枚(参照ゼロ) Lyra/星空→VERSED: - OG画像を黒地モノクロ+Antonワードマークに刷新 - 金色アクセント残骸をモノクロ化 - StarMenu→SectionMenu、lyra:home→versed:home、SW versed-sw-v1 - ※localStorageのlyra:*キーは不変(ユーザーデータ保護) 最適化: - PhysicsFloorの毎フレームquerySelector除去+画面外フロアのrAF停止 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX improvements and mobile scrolling fix
Refactor: Extract SiteFooter from LyricsForm
UI: Add framer-motion animations to menus and lists
Refactor: Extract HeroSection from LyricsForm
UI: Make PWA install page icons larger and transparent
Fix: Hide history panel when song candidates are called up
UI: Apply stronger glass/fisheye effect to all thumbnails including 16:9
UI: Add premium glass/fisheye effect to 1:1 thumbnails
Fix: Remove 1:1 thumbnail prioritization and slow down marquee animation
Fix: Move SongSuggest outside of form to fix iOS Safari nested backdrop-filter bug
Fix: Revert zoom prevention layout and apply programmatic zoom out
Fix: Remove backdrop-filter from composer and clear intro animation after completion to completely resolve iOS Safari random caret misalignment
Fix: Wrap input in relative container and absolute position it to fully bypass Safari flex input alignment and caret placement bugs
Fix: Set explicit input height and line-height to completely resolve iOS empty caret bug, and enlarge suggest list artwork and text
Fix: Add relative positioning and line-height: normal to composer input to fix iOS Safari cursor misalignment and vertical shift
Fix: Set input and textarea font-size to 16px to prevent iOS auto-zoom
UI: Move 'Add as app' menu item below 'History'
Fix: Remove duplicate SiteHeader from install page
Feat: Add PWA installation guide page and menu link
Fix: Force re-hash of manifest icons and fix site URL fallbacks for Vercel
Refactor: Remove auto-showing tutorials on first launch
Fix: Remove touch-action: none from .v-physics to fully enable scrolling
Fix: Wordbook UI text wrapping and mobile scrolling issues
Release: VERSED. rebranding and UI refinements
design: complete VERSED styling for legal pages, history panel, and study sessions
design: マイ単語帳をVERSED仕様に再設計+背景レイヤー順を修正
- マイ単語帳(/vocab)を再設計: SAVED. ロゴヘッダー、脱ボックス化した フォーム/検索/ドロップダウン/書き出し、脱・赤の削除系、空状態のタイポ化 - 共通背景を最背面(-z-10)へ: fixed z-0 が静的な本文の上に描画され、 マイ単語帳等の文字がビネットに隠れる潜在バグを解消(全ページで本文が前面に) - 回転レタリングはホーム限定に(コンテンツページはアンビエントのみ) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
design: refine versed ambient background, glassmorphic cards and study session UI
wip: before ambient redesign
Revert "feat: VERSEDテーマを追加(Lyraとワンタップ切替)"
This reverts commit e6eafdfee9aab84c8d92dcd7eeae02eaf3d5b27f.
VERSEDテーマを追加(Lyraとワンタップ切替)
リブランド候補「VERSED」(真夜中のNY・ネオン反射のハイエンドストリート)を 既存のLyra(宇宙)テーマと共存する形で実装: - 色トークンをCSS変数化(rgb(var()/<alpha>)形式で透過修飾子も互換)。 :root=Lyra、[data-theme=versed]=VERSED。Lyraの見た目は完全に不変 - VERSED: 漆黒+ボーン白+ネオンローズ/エレクトリックシアン。 専用ヒーロー(ワードマーク+濡れた路面の反射+街灯りグロー) - ヒーロー/ワードマーク/星空はtheme-*-onlyクラスでCSS出し分け (ハイドレーション不要=ちらつきゼロ) - メニューに「デザイン切替」を追加。localStorage永続+inline scriptで ペイント前復元 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
曲確定後に打ち直すとサジェストが再表示されないバグを修正
候補選択で suggestOpen を閉じた後、開き直すトリガーが onFocus しか無く、 フォーカスを保ったまま入力し直すと候補が二度と開かなかった。 onChange でも開き直すようにする。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
サジェスト検索をSpotify/Apple Music級に最適化(Deezer化+キャッシュ)
- 検索ソースをDeezerに変更(iTunesはフォールバック): ストリーミング専用の 有名曲(Central Cee "Doja" 等)がiTunes Storeカタログに無く出なかった問題を解決 - rank/nb_fanベースの人気度スコアで、カバー・リミックス・マイナー曲の 上位表示を抑制(装飾版ペナルティも-70→-260に強化、括弧内のみ判定で誤爆防止) - 速度改善: Upstash共有キャッシュ+Vercel CDNキャッシュ(2回目以降 ~25ms)、 レート制限チェックとupstream検索を並列化、edge runtime化、 クライアント側デバウンス180→120ms+セッション内キャッシュ - サジェスト専用レート制限(60回/分)を分離(タイピング連打で枠切れしないように) - karaoke業者パターン追加(made popular by / backing version / refix) - アーティスト絞り込みをハード除外からスコア加点に変更(共演曲も出るように) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ホームのフッター(利用規約/プライバシー/Special Thanks)を中央・均等配置
3リンクを justify-center で中央に均等配置し、注意文も中央寄せ。 「開発を応援する」は中央の別行へ分離。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
copy: 解説レベルの説明文言を調整
- ベーシック: 基礎文法から丁寧に - スタンダード: 口語・スラング解説が中心 - エリート: スラングと文化背景解説のみ Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
copy: 解説レベルの各説明を分かりやすい文言に
- ベーシック: 基礎文法から → 基礎文法をメインに丁寧に - スタンダード: AAVE・口語中心 → 口語・スラングの崩しを中心に - エリート: スラング・文化のみ → スラングと文化背景にしぼって Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞入力後の取得ボタンを薄い水色+「歌詞を再取得」表記に
歌詞があるときのゴースト状態をグレーから薄い水色(accent-2の淡色)へ。 ラベルも「歌詞を取り直す」→「歌詞を再取得」に変更。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解説レベルと歌詞取得ボタンの位置を入替+歌詞入力後は取得ボタンを控えめに
- 曲確定で歌詞は自動で入るため、触る頻度の高い解説レベルを左(主導線)に、 歌詞取得ボタンを右へ移動 - 歌詞入力欄に歌詞があるときは取得ボタンをゴースト調(muted・背景透明)にして 主張を下げ、ラベルも「歌詞を取り直す」に変更 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞の自動取得成功時に「歌詞を自動取得しました」トーストを表示
自動取得(ボタン/曲確定どちらも)が成功したら showToast で通知(5秒で自動消去)。 部分取得のときは「(一部)」を付け、欄下の注意書きも従来通り残す。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
曲を確定した瞬間に歌詞を自動取得(ボタン不要)
サジェスト候補から曲を選んだ時点で LRCLIB 取得を自動発火する。 - fetchLyrics に artistArg/titleArg を追加(確定直後は state 未反映のため 確定値を明示的に渡す)。省略時は従来通り入力欄の値を使う - onSelect で取得中でなければ fetchLyrics(s.artist, s.title) を発火 - 「歌詞を自動取得」ボタンは手動フォールバックとして残す 実機検証: サジェスト選択→ボタン未クリックで歌詞4064字が自動投入。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
履歴から復元した解析でも歌詞タイムスタンプ同期を使えるように
これまで同期歌詞(LRC)を履歴に保存しておらず、履歴復元時は必ず破棄していたため 「初回解析時しか歌詞と音楽を同期できない」状態だった。 - HistoryEntry に syncedLyrics(生LRC)を追加 - 自動取得した生LRCを trackKey 付きで保持し、解析結果の履歴保存時に一緒に書き出す - 履歴復元時、保存された同期歌詞があれば syncStore へ復元(無ければ従来通り破棄) 実機検証: 同期歌詞付き履歴を復元→YouTube再生で同期トグルが有効化+カード同期が動作。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解説レベルの表記を刷新+ドロップダウン誤動作を修正
- ラベルを「レベル 初級/中級/上級」→「解説のレベル ベーシック/スタンダード/ エリート」に変更(内部の value は不変=解析挙動は変わらない) - <label>(Field)内に置かれると label のクリック転送でトグルが二重発火し、 選択してもドロップダウンが閉じない不具合を preventDefault で修正 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Genius「歌詞を探す」ボタンを削除(自動取得で代替)
歌詞の自動取得がある今、Genius へ飛んで手動コピペする導線は使い勝手が悪い (特に iPhone)ため撤去。関連する死コードも一掃: - LyricsForm: 歌詞を探すボタン / goGenius / geniusUrl / ExternalLinkIcon を削除 - app/api/genius-url ルートと lib/geniusSearch.ts を削除(未使用化) - プレースホルダー・404文言を手動貼り付け前提に更新 - 利用規約・プライバシーポリシーから Genius の記載を削除(送信先実態に整合) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
文法レベルを歌詞取得ボタン隣のプルダウンに移動
チップ「レベル:中級 ▾」を「歌詞を探す」の隣に配置し、タップでチップ直下に 浮くドロップダウンで3択を出す形に。外側タップ/Escapeで閉じ、選択で自動クローズ。 機能は不変。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
文法レベル選択を折りたたみUIに(主導線を優先)
3枚の大きなカードがフォーム最上部で場所を取り、曲入力より目立っていたため、 普段は「文法レベル:中級 ▾」のコンパクトなチップだけを表示し、タップで3択を 展開する形に変更。レベルを選ぶと自動で畳む。機能(grammar_explanationの深さ 制御)は不変。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
待機カードの調整(ネビュラ削除・表裏の文字サイズ拡大)
- 表面背景の光輪(radial-gradient)を削除しすっきりと - 表面の単語を clamp(2.6rem,10.5vw,3.8rem) に拡大、ヒントを11pxに - 裏面: 単語2rem・意味text-xl・例文14.5px・例文訳/ニュアンス13pxに拡大 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
待機カードで長い単語だと裏面のニュアンス解説が右に見切れる問題を修正
グリッド重ねレイアウトのカラム幅が表面の巨大な単語に引っ張られ、カード幅を 超えて overflow-hidden で見切れていた("Internet/internet" 等で顕在化)。 grid-cols-1(=minmax(0,1fr))でカラム幅をカード内に固定し、子に min-w-0 と [overflow-wrap:anywhere] を付与して長い単語も折り返すようにした。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
R の生成ファイル(.Rhistory 等)を gitignore に追加
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析をストリーミング+並列化(体感待ち時間を大幅短縮)
根本原因: マーカー無し歌詞(LRCLIB)が「1つの巨大セクション」扱いで直列解析され 2-3分かかっていた。 - splitMarkerless: マーカー無し歌詞をスタンザ単位でPart Nに分割し並列解析に乗せる - /api/analyze を NDJSON ストリーミング化(start/verse/done/error イベント) - analyzeLyrics に onProgress コールバックを追加(セクション完了ごとに通知) - クライアント: セグメント式進捗バー+完成セクションから順次表示、未完はスケルトン 最初の結果が約27秒で見え始める(従来は完了まで真っ暗) - 一部セクション失敗時も成功分を表示する良い失敗モード - 通知バナー(AnalysisNotice)にも進捗を出しページ跨ぎで進捗が見える 実測(ローカル): 最初のverse +27秒、以降順次到着。本番Vertexは並列で更に短縮見込み。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チャンク粒度の退行を修正(色分けが1〜2色化する問題)
実Doja歌詞47行でA/B測定し原因を特定: - 解析本体の responseSchema を撤去(構造化出力が分割粒度の遵守を弱めていた。 ブリーフのみ維持。パースはリトライで十分堅牢) - セクション解析の thinking をモデル既定(動的)に復帰(thinking OFF が 分割規則の遵守を落としていた。並列実行では所要時間はほぼ変わらない) - few-shot に5チャンクの実演例を追加、チェックリストに粒度項目 - 粒度ガード(初回試行のみ): 5語以上の行の1/3超が2個以下なら振り直し - eval ハーネスに粒度メトリクスとゲートを追加(この回帰を検知) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析品質を現アーキの理論値へ(構造化出力・訳統一・evalハーネス)
- responseSchema で JSON 構造を API レベルで強制(パース失敗・欠落を排除、 propertyOrdering で _thought を先頭に固定)。GEMINI_DISABLE_SCHEMA で無効化可 - unifyRepeatedLines: 同一英文行(サビ)の訳・チャンク分割を初出に決定的統一し 並列解析由来の訳ブレを根絶 - 行数ガード(非最終試行のみ): 出力行<入力行なら振り直し、行の結合・欠落を防ぐ - チャンク分割を数値目標から手順化、逆接語尾ルール追加 - ブリーフに second_person を追加し呼称(お前/君/あなた)を曲全体で統一 - scripts/eval-analyze.mjs: 3曲×7チェックの回帰ハーネス(ALL PASS) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI改良(難易度選択の視認性・待機カード表面・候補列フェード)
- 難易度選択: 選択中カードにレベル色の✓を表示、非選択ラベルを一段落として どれが選ばれているか一目で分かるように - 解析待機の単語カード表面: 単語+ヒントを中央にまとめ、背後に金/藍の光輪を 重ねてヒーローと統一感(余白の間延びを解消) - YouTube候補列の右端に淡いフェードを重ねスクロールの続きを示唆 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
タイポグラフィ最適化(英語主役の階層強化・和文に高級感)
- 解説カードの英語行を主役に: 20/21px+font-en(Inter専用/ss01/liga)+ わずかなネガティブ字間で見出しらしく締める - 和訳行はサブへ: 14px・行間1.8・不透明度62%で英語に寄り添う - 解説ノートはさらに静かに: 13px・text-sub・ゆったり行間(バッジが視線の起点) - ヒーロー和文キャッチの字間を広げ(0.07〜0.09em)高級感を出す Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX改善(曲名のみ取得・同期ピル収納・コーチマーク等)
- 曲名だけでも歌詞を自動取得可能に(/api/lyrics を title 必須・artist 任意に、 artist 無し時は search を汎用 q 検索に切替。ボタンのゲートも緩和) - 同期オフセットのピルを4秒無操作で「♪」チップに自動収納(解説カードを隠さない) - モバイルでプレーヤーの音量スライダーを非表示にし曲名の幅を確保(PCは従来通り) - 対応曲の初回に同期ボタン上へコーチマーク「タップで歌詞が曲に同期」(一度きり) - マイ単語帳の「全削除」を安静時から赤系にし CSV/Anki と視覚的に区別 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ページタイトルの二重サフィックスとフッター文言の矛盾を修正
- title を「単語帳 — Lyra — Lyra」と二重に表示していた問題を修正 (layout の template が付与するため各ページの「— Lyra」を削除) - ホームフッター「歌詞はサーバーに保存しません」を、共有キャッシュ導入後の 実装・ポリシーと整合する「個人に紐づけて保存することはありません」に修正 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Noto Sans JP の読み込み削除で全フォントがセリフ体に落ちる回帰を修正
f068921 で「未使用」と誤判定して削除したが、tailwind の font-sans スタックが var(--font-noto-jp) を参照しており、変数未定義で font-family 全体が無効化されて ブラウザ既定のセリフ体にフォールバックしていた。読み込みを復元し、 layout.tsx に警告コメントを追加。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
docs: 利用規約・プライバシーポリシーを正式版に全面改訂
- お問い合わせ窓口を明記(X @iiyan_best_good) - 規約: AI生成物の私的学習目的限定、歌詞キャッシュの権利者削除申出対応、 免責を消費者契約法と整合、規約変更を民法548条の4ベース、分離可能性等(13条) - ポリシー: 外部送信先を全列挙、IPのレート制限利用と自動消去、共有キャッシュ 最長30日・匿名、第三者提供の原則禁止、GAオプトアウト、未成年、安全管理措置(11条) - 旧規約の実装矛盾(歌詞を一切蓄積しない等)と過剰断言を削除 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全体最適化(同期バグ修正・死コード削除・表記統一)
バグ修正: - 履歴復元/別曲の手動貼り付け解析で前曲の同期歌詞(LRC)が残り同期ボタンが 誤有効化される問題を修正(getSyncTrackKey追加、不一致/復元時にクリア) 死コード削除: - Noto Sans JP一式(適用クラス.font-jp未使用でCSSだけ配信していた/見た目不変) - 未使用のplayerSeekTo/PlayerControls.seekTo、syncStoreの二重クローン 表記統一: - 「開発者を支援する」→「開発を応援する」(フッターと統一) - 「出力が完了しました」→「解説ができました」 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
行跨ぎ歌詞で断片訳「〜するための」が出る問題を修正
- 行末が次行へ続く歌詞(to/and/前置詞で終わる)で、未完の断片訳を出さないルールを追加 - 行末の継続機能語は単独チャンクにせず直前チャンクへ吸収(数合わせの切り出し禁止) - 散在していたセルフチェックを「出力前の最終チェック」5項目に統合 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
perf: 解析と歌詞取得の処理時間を短縮(精度は維持)
解析(ローカル実測 55s→29s、本番Vertexはさらに短い見込み): - gemini-3.5-flash の内部thinkingを高速パスで OFF(_thought欄が明示的CoTを担うため品質同等・2.3倍速) - 最終リトライのみ thinking ON+キャッシュ無しで難所を救済 - ブリーフ抽出も常時 thinking OFF(12s→2.4s) - Context Cache をブリーフと並行プリウォーム(直列2秒を削除) - CONCURRENCY 4→6、env GEMINI_THINKING_BUDGET で高速パス予算を上書き可 歌詞取得(2回目以降 4〜6s→0.07s): - lib/lyricsCache.ts: Upstash共有キャッシュ(TTL30日、見つからない曲は保存しない) - LRCLIB get+search を並走(get が同期歌詞付きでヒットなら即返し) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
解析プロンプトv2(和訳の自然さ最優先+解説の偏り緩和)
- SYSTEM_PROMPTを全面書き直し(32KB→20KB、重複ルール統合) - 和訳: 場面を訳す/代名詞を逐一訳出しない/受動態・無生物主語の転換/翻訳調禁止 - _thoughtを1文60字以内に短縮(出力トークン・速度改善) - 解説を40〜80字・上限100字、1ライン最大2フィールド、曲内初出のみ - チャンク: 5語以上は最低4分割を明文化 - サーバ側dedupeExplanations()追加(セクション並列解析での解説重複を除去)+4テスト Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
待ち時間の単語カードにニュアンス解説を追加+面裏で高さを統一
- 裏面に nuance(ニュアンス解説)を表示(単語帳の StudySession と同体裁・ 左ボーダーは border-line/60)。意味/例文の文字サイズも読みやすく調整。 - 表・裏を同じグリッドセルに重ね、セル高を内容の多い裏に揃える。flip しても カードの高さ・単語位置・○×ボタン位置が動かない(動線改善)。 - 表は大きな単語を中央+下に小さくヒント(clamp 2.2〜3.2rem)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tweak: 読了バーをヘッダー直下へ移動+冗長な説明文を3点削除
- ReadingProgress: top:0(ヘッダー裏で見切れ)→ ヘッダー高を実測してその直下に。 安全領域でヘッダー高が変わっても ResizeObserver で追従。 - 歌詞欄下の「曲を選んで『歌詞を自動取得』…」を削除。 - 待ち時間単語カード下の「覚えた単語は単語帳の進捗に…」を削除。 - 解析中の実行ボタン下ステータス(「もうすぐ完成します…」等)を撤去。 AnalyzeLoadingStatus はファイルごと削除(同梱の免責文言も消える)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞のタイムスタンプ同期(解析カードを再生に追従)
LRCLIB の syncedLyrics を活用し、解析カード自体を YouTube 再生に同期させる。 - API/型: /api/lyrics が syncedLyrics(LRC) を返す。同点なら同期歌詞付きを優先。 - lib/lrc.ts: LRCパーサ + alignLineTimes(解析行↔LRC行の照合)。テスト15件。 - lib/syncStore.ts: 同期歌詞・ON/OFF・±オフセット・プレーヤー操作の橋渡し。 - components/LyricsSync.tsx: 現在行カードを中央へ自動スクロール+.sync-current付与 (DOM直操作で再レンダー無し。既存の data-focus-line と中央フォーカスを活用)。 - YoutubePlayer: 再生バーに同期トグル(非対応曲は薄く+「この曲は対応していません」)、 ONで金→アクティブ表示+±補正ピル。旧モーダル方式は廃止。 - globals.css: 現在行を薄いオーロラ(ティール↔バイオレット)で示し、10秒周期で ごくわずかに揺らめかせる(reduced-motionは静止)。 tsc / eslint / vitest(55) パス。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞取得の動線を入れ替え+解析中メッセージを実行ボタン下に移動
- 「歌詞を自動取得」を主導線として左に、「歌詞を探す」を右の補助導線に入れ替え。 自動取得ボタンの横padを少し縮小(px-3.5→px-3 / sm:px-4→px-3.5)。 - 解析中ステータスを実行ボタン行の flex 内(狭い隙間で折返し崩れ)から、 行の下の全幅ブロックへ移動。AnalyzeLoadingStatus を flex-1 span→div 化。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
クレジット失効日で解析上限を自動で絞る(失効後の実費課金を防ぐ)
GCP Free Credit が約20日後(2026-07-20)に失効し、以降は実費課金になるため、 失効日を境に上限を自動切替する仕組みを追加: - 失効前: 50回/IP/日(寛容=クレジットを活用) - 失効後: 5回/IP/日(実費保護) - env RATE_LIMIT_PER_DAY を設定すれば自動切替を無視して固定上書き(手動運用用) lib/rateLimit.ts: resolveAnalyzePerDay() を純関数で分離しリクエスト時に毎回評価 (境界で緩くならない)。上限値ごとに limiter をキャッシュ(同一prefixで日次カウンタ共有)。 rateLimit.test.ts(+4): 失効前/後/境界/env上書きを検証。 ⚠️ 本番で自動切替を効かせるには Vercel 環境変数 RATE_LIMIT_PER_DAY を未設定にする (設定されていると固定値で上書きされ自動切替しない)。失効日の正確な値は GCP で要確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析の1日上限を寛容化(既定3→50回/IP)+残量表示は残りわずか時のみ
クレジットを活用するため上限を大幅に緩和。通常ユーザーは実質無制限にしつつ、 悪用1IPの連打だけ頭打ちにしてクレジットを守る方針。 - lib/rateLimit.ts: RATE_LIMIT_PER_DAY の既定 3→50 - LyricsForm: 「今日はあと N 回」は残り≤5のときだけ表示(普段は非表示) - .env.local.example: 既定値と運用意図を更新 ※本番反映には Vercel の環境変数 RATE_LIMIT_PER_DAY を 50 に更新(または削除)が必要。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
reduced-motion判定をlib/motionに集約+未使用コード削除
- prefers-reduced-motion の matchMedia 判定が7ファイルに散在していたため lib/motion.ts の prefersReducedMotion() に集約(マジック文字列の重複を解消・ SSRガードも内包)。挙動は不変。 - 未使用エクスポートを削除: clearHistory(history) / SAMPLE_LYRICS(sample-result) / previewIntervals(srs)。いずれも参照ゼロのデッドコード。 tsc / eslint / vitest(36) すべてpass。プレビューでホーム描画も確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
アプリアイコンを磨き案A(L+星)に刷新し brand-icon.tsx へ集約
- 星に柔らかな金のハロー+光のコア、グローを温かく、奥行き用の微星を追加 - icon.tsx / apple-icon.tsx のインライン複製を撤去し brandIcon() 経由に統一 (favicon/apple/PWA 192・512・maskable を単一ソースで管理) - maskable は星を省いて安全領域にL収め、iOS角丸でも星が切れない配置 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Capacitorアイコン/スプラッシュ元画像を assets/ に追加
退役・削除した旧 lyra-ios リポから、ネイティブビルド(B案)用の元画像 icon.png/splash.png/splash-dark.png を単一ソース(lyra-web)へ退避。 将来 @capacitor/assets でアイコン再生成する際の素材。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
曲候補の外タップクローズを復活(blurでは閉じないまま=iOS完了で消えない)
要望により外タップで閉じる挙動を戻した。input+候補の同一ブロック内タップは 無視し、それ以外をタップしたら閉じる。blur非クローズは維持するので、iOSの キーボード完了では候補が消えない。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
曲候補を選択するまで閉じないようにする(iOSキーボード完了/外タップで消えない)
- 検索inputのonBlurによる候補クローズを廃止(iOSの完了(✓)で消える問題) - 外タップによるクローズも廃止(要望: 曲を選択するまで開いたまま) - 閉じるのは候補選択またはEscapeのみ - .gitignore にGCPサービスアカウント鍵などの秘密鍵パターンを追加(誤コミット防止) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞自動取得ボタンの取得中で幅が縮みiOSにゴースト枠が残る問題を修正
通常ラベルを常にレイアウトに残し(取得中は invisible)、取得中表示は 絶対配置で重ねることでボタン幅を固定(125px不変)。縮みによるiOS Safariの 再描画ゴースト枠を解消。併せてタップハイライト除去・transitionを色限定に。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析が成功した時だけ1日の回数を消費する(失敗時は消費しない)
これまでは解析開始前に limit() で1回消費していたため、503など解析失敗時にも 枠が減っていた。getRemaining(消費なし)で事前チェックし、解析成功後に consumeAnalyzeLimit で初めて1回消費するよう変更。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
getClient に Vertex AI 分岐を追加(GEMINI_USE_VERTEX フラグ・既定OFF)
GEMINI_USE_VERTEX=true のときだけ Vertex AI(サービスアカウント認証)を使う。 未設定/false では従来の Developer API(APIキー)のままで挙動不変。 env だけで切替・即時ロールバック可能。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Gemini SDK を @google/genai に移行(Vertex AI 切替の土台)
- @google/generative-ai → @google/genai(新統合SDK)に置換 - クライアント生成を getClient() に集約。vertexai:true へ1箇所変更すれば Vertex に切替可能な構成に - Context Cache を ai.caches API に書き換え(失敗時は systemInstruction へ フォールバックする挙動は維持) - 認証は引き続き API キー(Developer API)。挙動は不変 - 503/混雑時の分かりやすいメッセージ変換も維持 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞自動取得にスピナー表示+下部固定の実行ボタンを廃止し従来ボタンを拡大
- 歌詞を自動取得ボタンに取得中スピナーを追加(iOS PWAで実行中が分かるように) - モバイル下部の sticky 実行ボタンを削除(実行ボタンの二重表示を解消) - 従来の実行ボタンを横に拡大(px-9 / モバイル px-12) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
支援者「ピカピカの500円玉」に X プロフィールリンクを追加
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Special Thanks に支援者「ピカピカの500円玉」を追加
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Gemini混雑(503)エラーをユーザー向けの分かりやすい日本語に変換
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tweak: 歌詞自動取得の成功通知(LRCLIB出典含む)を非表示に
歌詞が欄に入ること自体がフィードバックなので、成功時の「歌詞を自動取得しました/LRCLIB」 通知は出さない。部分取得時の注意のみ残す。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞の自動取得を LRCLIB で実装(本番有効化)
- /api/lyrics を Genius スクレイピング→LRCLIB(lrclib.net)に置換。無料・キー不要・全文plainLyrics。 artist/title で検索→ベスト一致を選定。見つからなければ404+手動誘導。出典attribution付与。 - LyricsForm: dev限定だった自動取得ボタンを本番でも有効化(曲選択で活性・淡青ボタン)。 キャプション/プレースホルダ更新。見つからない曲は「歌詞を探す」(Genius手動)へフォールバック。 - ⚠️ LRCLIBは投稿ベースで未ライセンス(著作権グレー)。法的にクリーンにする際はMusixmatchへ。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Special Thanks: 見出しを SPECIAL THANKS 強調に整理+CTA文面更新+サンプル支援者1件
- 青文字 SPECIAL THANKS を見出しサイズに、「支援してくれたみなさん」見出しは削除 - CTA文を実情に合わせて更新(金欠学生・少額寄付が励みに) - lib/supporters.ts にサンプル1件(Sample, リンク+画像) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Special Thanks ページ+フッター整理+連続日数をヘッダーへ
1. フッターから単語帳/マイ単語帳/中央フォーカス(開発者用)を削除(メニューから到達可) 2. 🔥連続日数を最下部→ヘッダー常設バッジ(StreakBadge)へ移動(旧StreakFooter削除) 3. Special Thanks ページ(/thanks)を追加:支援者を名前+任意の画像+名前埋め込みURLで カード表示(lib/supporters.tsに追記するだけ)。下部に BMC 誘導CTA。フッターに導線追加 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
revert: YouTubeをワンタップ再生(音付き)に戻す
ミュート自動再生+音を出すボタンは「無音自動再生→結局タップで解除」の二度手間 だったため撤去し、857a242(playing初期=停止、▶タップでジェスチャ付き再生=音あり) に戻す。黒箱オーバーレイも撤去。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
iOS で動画が自動再生されない/読込中ボタンが見える問題
- iOSではジェスチャ無しのunMute()で再生が止まるため、自動unMuteをiOS以外限定に (ミュート自動再生を維持し、音は「音を出す」タップで解除) - 再生開始まで iframe を opacity:0(黒箱)にして、読み込み中のYouTube再生ボタン (赤/白)を一切見せない。playingで表示 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
YouTube をミュート自動再生にして即時再生+大ボタン非表示(iOS PWA)
- onReady で mute()+playVideo():iOS の standalone PWA でも自動再生が許可され、 呼び出し直後に動画が動き出す→YouTube の大きな再生ボタンが消える - 音声を出せる環境では250ms後に自動でunMute。iOSはジェスチャ必須なので ミュート時のみ「音を出す」ボタンを表示し、ワンタップで音声ON - playing/muted は実状態に同期 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
iOS standalone PWA で YouTube が再生されない問題
playing 初期値が true 固定で、onReady の自動 playVideo が iOS PWA のジェスチャ無し 自動再生ブロックで失敗→「一時停止アイコンのまま無音」になり手動再生もできなかった。 初期を停止にし onStateChange を状態の正とすることで、ブロック時は▶を表示→タップ (ユーザージェスチャ)で音声付き再生できるようにする。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Vercelデプロイを正しいcommitter identityで再発火
端末変更でgitのcommitterメールがローカル値(rui@RuinoMacBook-Air.local)になり、 Vercel HobbyプランがcommitterをGitHubユーザーに紐づけられずデプロイをブロックしていた。 正しいGitHub連携メール(ruiueki@gmail.com)で再コミットして発火させる。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
PWA: Service Worker でオフライン対応
- public/sw.js: ナビゲーション=network-first+オフラインフォールバック、 /_next/static=cache-first、/api/vocab=stale-while-revalidate(単語帳をオフライン化)、 検索/解析など他APIは非キャッシュ。VERSIONで旧キャッシュ破棄 - ServiceWorkerRegister: 本番のみ・Capacitorネイティブ内では登録しない - 本番ビルド+next start で検証: SW有効化・制御、アプリシェル/トップ/単語帳/全vocab がキャッシュ済み Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX: ヒーロー銀河の白飛び・単調さを修正
- 全面を覆う巨大な青ベースを廃止し各色を塊化+深い高彩度に(screen合成の白飛び解消) - ゾーン分離で色の重なりを減らし多色感を回復、筋(フィラメント)も深色・低不透明度に - マスクを中央寄り・早めのフェードにして上下の境界をさらに馴染ませる Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
PWA: インストール可能なアプリ化(アイコン・iOSメタ・導線)
- lib/brand-icon.tsx でアイコン生成を共通化し、manifest 用 192/512/maskable を追加 - manifest に上記アイコンを登録(display:standalone は既存) - layout に appleWebApp メタ(capable / title / status-bar)を追加→iOSで独立起動 - PwaInstallBanner を iOS Safari 対応に拡張(共有→ホーム画面に追加の手動ガイド)、 SW未実装に合わせオフライン文言を修正 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX: ヒーロー星雲の刷新とワードマーク強調
- 星雲: 色相回転を撤去し青/紫/マゼンタ/ティール/ローズを散らして同時多色に - マスクを楕円ソフトフェードにして上下の硬い境界を解消 - 浮いて見えた明るいコアを削除 - Lyra ワードマークを白寄りに(#ECEEF3→#FFFFFF)して視認性UP Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX: 単語帳の星まわりを調整(iOS箱バグ修正・控えめ化・モチーフ視認性)
- ClearCelebration: 🌟の filter:drop-shadow を撤去しグローを別レイヤー化(iOSで 背景が矩形に浮く不具合を解消。星の形は絵文字のまま) - StarMap: 点灯星のグローを clip-path と別レイヤーに分離(iOS箱対策)、色味・明るさを控えめに - 星座モチーフの濃度を 0.42→0.6 に上げて見やすく Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX: 全体の精錬(背景の奥行き・ヒーローの輝き・サーフェスの質感)
- StarField の背景を淡い藍の縦グラデに(奥行き、星屑はそのまま、resize時1度だけ生成) - ヒーローのワードマーク背後に金+藍の淡い光輪、英文タグラインを罫線+大文字で上品に - card-surface 上端に1pxハイライトを追加(上から光が当たる立体感を全カード共通で) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX: 銀河強化・連続日数フッター・単語帳チュートリアル
- ヒーロー背景の銀河を増光+マゼンタ/シアンで色味を追加(単調さ解消)、中央ヴィネットを緩和 - 🔥N日連続を全ページ最下部に表示するグローバルフッターを追加(StreakFooter) - 単語帳上部の「点灯 N/152星」+ティア凡例を削除してスッキリ - 単語帳チュートリアル(WordbookHowTo)を追加:使い方ボタン+初回自動表示、 夜空テーマの3スライド(星タップ→点灯→星座完成) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
UI/UX仕上げ: カスタム404・空単語帳の整理・メニュー導線ほか
- app/not-found.tsx を新規追加(既定の白背景404→ダークテーマ) - マイ単語帳の0件時は検索/書き出し/全削除のツールバーを隠す - ヘッダーメニュー先頭に「ホーム(歌詞解析)」導線を追加 - 「カードを自分で追加」アコーディオンの+/−をシェブロンに - ヒーローのスクロール誘導をモバイル限定(sm以上は非表示) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
文法レベル選択を難易度別の色に(初級=青/中級=黄/上級=赤)+説明文を削除
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルを6枚の解析カード形式に(お礼/使い方/チャンク/☆保存/単語帳/締め)
文法・イディオム・スラングのノートを各1枚に配し、全バッジ種類を体験できる構成。 チャンク分割を 3/4/4/4/4/4 に調整。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase5b: UI/UX 追加改善(検索バグ除く・今日の復習は除外)
- 単語帳: 上部に「点灯 N/M 星 + 🔥N日連続」を本番表示(全体進捗と継続の手応え。 今日の復習ボタンと開発ツールは従来どおり dev のみ)。 - ホーム: ヒーローをコンパクト化(上部余白/最小高さ/ワードマーク縮小)してフォームを早く見せる。 - レベル選択: 「解説の詳しさが変わる」旨のキャプションを追加。 - モバイル: 歌詞入力が有効で結果未表示のとき、画面下に sticky「実行」FAB(safe-area対応)。 - 入力フロー: プレースホルダを「歌詞を探す→コピー→貼り付け」の流れが分かる文言に。 - 結果: 先頭に「チャンクをタップで英日ハイライト・☆で保存」の操作ヒントを追加。 - コントラスト: muted/sub トークンを少し明るくし、淡い補助テキストの可読性を改善。 検証: tsc / next lint / vitest 36件 / next build / プレビュー各画面スクショ 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase5: UI/UX 最適化(実画面ベースの改善14項目)
命名統一・コピー: - 星空単語帳→「単語帳」、マイ単語→「マイ単語帳」に全UIで統一(見出し/title/リンク)。 - マイ単語帳の説明を2機能の違いが伝わる文面に。フッターを「端末内」に統一。 - 歌詞欄のネガティブ文言→「歌詞の自動取得は近日実装予定です!」。 解析結果の可読性: - centerFocus の周辺カード減光を緩和(opacity 0.15→0.42・縮小 0.75→0.85)。読めない問題を解消。 - ☆保存ボタンを金色ヒント色+タップ領域拡大(h-8/max-sm:h-10)で発見性向上。 - カード間隔を space-y-5→4 に。 星空単語帳の視認性: - 未点灯星に淡いハロー+opacity 0.5→0.65(背景に埋もれず「タップできる星」と分かる)。 - 番号をコントラスト+影で重なっても読めるように。 - ティアの凡例(未クリア/クリア/星座線)をマップ上部に追加。 学習カード: - StudySession に進捗表示(done/total+プログレスバー)。 - ○ボタンを青→緑(覚えた=緑が直感的)。WaitingStudy も統一。 iOSセーフエリア・モーション: - 既に全面対応済みを確認(header上部/player/toaster/scroll の inset、点灯バースト演出)。変更不要。 検証: tsc / next lint / vitest 36件 / next build / プレビュー各画面スクショ 全確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase4: YouTube 検索のサーバー共有キャッシュ(クォータ枯渇対策)
- lib/youtubeCache.ts: Upstash Redis に検索結果を保存(キー: 正規化した artist|title、 TTL 30日)。Upstash 未設定なら no-op で従来どおり(rateLimit と同じ流儀)。 - /api/youtube: キャッシュヒットなら YouTube を叩かず即返す。レート制限はキャッシュミス (実際に API を叩く)時だけ適用。成功時は結果を共有キャッシュへ保存。 → 人気曲は世界で1回だけ検索=search.list(100ユニット/回・実質100検索/日)の枯渇を防ぐ。 単語帳の遅延ロードは据え置き(意図的): - WordbookView は既に progressive ロード済み(A1 から順次描画・per-level キャッシュ+ inflight 合流)。backlog の白画面問題は解消済み。 - 「帯ごと遅延ロード」を完全実装すると reviewQueueAll(今日の復習)が全帯前提のため 網羅性が壊れる。挙動不変を優先し、review の正しさとのトレードオフは見送る。 検証: tsc / next lint / vitest 36件 / next build 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase3: 描画・バンドルの最適化
- StarMap: 星グローの drop-shadow を 3 枚→2 枚に削減(白い芯+色グロー)。 点灯時のコンポジタ負荷を半減(iOS で実証済みの最適化を単一ソースへ適用)。 - LyricsForm: WaitingStudy を next/dynamic(ssr:false) で遅延ロード。 解析ローディング中だけ必要なのに、静的 import が cefrDeck→constellations(星データ) までホーム初期バンドルへ巻き込んでいた。ローディングは内部と同じ「単語を準備中…」。 → ホーム First Load JS 115kB → 109kB(-6kB)。挙動不変。 確認済みの既存最適化(変更不要): YoutubePlayer は dynamic でマウント済み、 StarMap の Star は memo 済み、StarField canvas は rAF/IO/reduced-motion 対応済み。 検証: tsc / next lint / vitest 36件 / next build 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase2: 大コンポーネントから純粋ロジック/表示部品を抽出(挙動不変)
LyricsForm.tsx 967→884行: - splitQuery → lib/songQuery.ts(+ ユニットテスト5件) - AnalyzeLoadingStatus(+loadingMessage/Disclaimer) → components/analysis/AnalyzeLoadingStatus.tsx - Field → components/Field.tsx(汎用フォーム行) VocabList.tsx 700→678行: - filterAndSortVocab / groupVocabBySong → lib/vocab-filter.ts(+ ユニットテスト6件) - ソートキーに紛れ込んでいた制御文字 \x01 を2箇所除去(ゴミバイト。比較挙動は不変) もつれた state/effect 群(スクロール・バックグラウンド解析・チュートリアル)は リスク回避のため手を入れず温存。抽出は純粋関数と表示専用部品に限定。 検証: tsc / next lint クリーン / vitest 36件(+11) / next build 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase1: ESLint 導入と未使用コード整理
- 統合リポに ESLint 設定を導入(web リポには未導入だった。next/core-web-vitals + next/typescript)。 - 実エラー2件を修正: - lib/cefrDeck.ts: 未使用 import `getCard` を除去。 - components/LineCard.tsx: 値未読の `savedTick` を `const [, setSavedTick]` に(再レンダ用 setter は維持)。 - 残る eslint-disable は全て正当(外部画像の img / 意図的な hooks deps 省略 / エラーログ console)。 - 休眠ネイティブ(haptics/notify/ReminderToggle)・代替実装(StarFieldTrail)は意図的に保持。 検証: next lint クリーン / tsc / vitest 25件 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Phase0: web/iOS を単一ソースに統合(Capacitor を web リポへ取り込み)
- lyra-ios と9割重複していたコードを lyra-web に一本化。今後の変更・UI/UX を1回で両対応に。 - Capacitor 一式を移入: capacitor.config.ts(A案/CAP_DEV)、ios/(Xcode/SPMプロジェクト)、 @capacitor/{core,ios,haptics,local-notifications} + assets/cli。 - next.config.mjs: NEXT_OUTPUT=export 時のみ静的export(将来のB案用・通常webビルドは不変)。 - lib/platform.ts: 実行時プラットフォーム判定(A案は単一ビルドを両者へ配信するため ビルド時 env では区別不可 → Capacitor.isNativePlatform で実行時判定)。 - PwaInstallBanner はネイティブアプリ内で非表示(isNativeApp ガード)。 - iOS固有(haptics/notify/ReminderToggle)はネイティブフェーズまで休眠でリポに保持。 - 8つの分岐ファイルは web 版を採用(WaitingStudy は既に軽量ロード+シャッフルで理想形。 iOS の全レベル並列ロードは「全体最適化(2)」の軽量化を後退させるため不採用)。 検証: tsc / vitest 25件 / web build(16ルート・バンドル不変) / iOSビルド+シミュレータ起動 全通過。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析コアを iOS 版に同期(正規化分離・Pass1曲ブリーフ・チャンク補修・テスト導入)
- analysisNormalize.ts を新設(stripMetaParens / repairCoverage を含む正規化純粋関数群) - prompt.ts を iOS 版に更新(文脈訳ガイド・細かめチャンク分割・SONG_CONTEXT・SONG_BRIEF_PROMPT) - gemini.ts: Pass1 曲ブリーフ抽出と analysisNormalize 利用を取り込み(Context Cache / GEMINI_MODEL は温存) - vitest 導入+ analysisNormalize/splitter のユニットテスト(25件 pass) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全体最適化(3): 確認テスト中の背景誤タップでテストが破棄されるのを防止
Modal に closeOnBackdrop プロップを追加(既定 true=従来挙動)。確認テストの 出題中のみ false にし、背景タップではテストを中断しない。× ボタンと Esc は 従来どおり有効。学習セッションは誤タップ閉じでも周回進捗が保存されるため 従来挙動のまま。 検証: テスト出題中に背景クリック→開いたまま、×クリック→閉じる をプレビューで確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全体最適化(2): 解析中の待ち時間学習のデータロードを大幅軽量化
WaitingStudy は「解析中」に表示される=解析リクエストと帯域を取り合う瞬間に、 全4レベルの単語JSON(合計約2.9MB)を一括ダウンロードしていた。 易しいレベル(A1)から順にロードし、出題に必要な40語が集まった時点で打ち切る 方式に変更。学習初期のユーザーは1ファイルで足り、解析の邪魔をしない。 - sectionId はレベル単体の buildBands でも同一(level-sN・シャッフルシードは レベル名固定)なので、○ の進捗反映(markRoundDone)は従来と変わらない。 - 使われなくなった loadAllLevels を削除(全消費者が per-level ロードに移行済み)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全体最適化(1): モバイルのチャンク初回タップ無反応ほかバグ修正+軽量化
バグ修正: - チャンクのタップが初回無反応(モバイル): タップ時は mouseenter→click の順で 両方 toggle が呼ばれ「点灯→即消灯」で相殺されていた。touchstart 検知後は mouseenter を無視し click のみで toggle する(デスクトップ hover は無傷)。 - 学習モーダルに最大高さが無く、背の低い端末で裏面(長い例文・ニュアンス)が 画面外に切れていた → max-h 85vh/85dvh +内部スクロール。 - レート制限カウントダウンが 0 になっても古いエラーが残っていた → 自動で畳む。 - 音声合成: voiceschanged で声キャッシュを無効化(非同期ロード対応)。 軽量化: - 解析中の経過秒タイマーを AnalyzeLoadingStatus(子)に隔離。親フォーム全体 (WaitingStudy/履歴含む)の毎秒再レンダーを解消。 - 星空単語帳: 4レベル全JSON(約2.9MB)の到着を待たず、届いたレベルから順に 帯を描画(初回表示の体感を改善)。 - NoteRow の未使用 prop savedKey を削除。 検証: モバイルのタップ手順(touchstart→mouseover→click)で初回点灯・再タップ消灯、 デスクトップ hover 維持、単語帳 4帯152星・学習開閉、モーダル maxHeight/overflow を プレビューで確認。コンソールエラーなし。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: Mac引き継ぎ手順を追加(git clone + .env.local 手動移行)
zip移行を避け、Homebrew/Node導入→clone→npm install→.env.local手動移送→起動確認の 手順を明記。private時のgh auth、OneDrive/iCloud回避、二刀流の注意、トラブル対処つき。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: Day2撮影用の機能リスト(MoSCoW)+画面ラフを追加
コンセプト/ユーザーフロー/優先度つき機能リスト/5画面のASCIIワイヤーフレームを、 実装と一致させつつ「これから作る体」で提示。各画面のお披露目スケジュール対応表つき。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: 現状Web版の要件定義書(as-built)を追加
サービス概要・機能要件(解析/曲検索/歌詞取得β/YouTube/解析表示/星空単語帳/マイ単語帳/ 履歴/発音/PWA/法務)・画面一覧・API仕様・データモデル(型/localStorageキー)・非機能要件・ 外部依存・制約・スコープ外を実装ベースで網羅。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: 動画シリーズ構成を「ゼロから開発に見せる」7工程に再設計
裏はCapacitorラップ+既存機能、表は環境構築→要件定義→コア実装→UI→仕上げ→公開の 王道フローで提示。既存機能を日ごとに小出し解禁してアプリが育つ演出。信頼性の ガードレール(URLを映さない/検証可能な作り話はしない)も明記。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: 「1週間でアプリを作る」7本動画シリーズの構成を追加
知名度ゼロからの初期ユーザー獲得用。Day1(Webを数分でアプリ化)〜Day7(完成お披露目 +先行登録/クラファン告知)の7本を、各回のフック/作る機能/見せ場/撮影/引き/CTAまで 具体化。運用のコツとKPIも記載。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: iOS化(Capacitor)セットアップ手順を追加
Web版LyraをCapacitorでiOSアプリの皮に包む最短手順(A案=公開URLをWebView表示)。 Mac前提の環境構築〜シミュレータ起動、無料署名での実機、アイコン生成、更新フロー、 よくあるエラー、動画シリーズ構成案までまとめた。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析モデルを gemini-3.5-flash 単独運用に統一(2.5-flash フォールバック撤去)
再課金に伴い、最終リトライの安定版フォールバックを廃止。全リトライを 3.5-flash で実施し、最終回のみ Context Cache を使わず素のモデルで救済する方式に変更。 env GEMINI_MODEL での上書きは引き続き可能。backlog も更新。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳: 星座名ラベルと星・数字の重なりを実測で完全解消
描画後にラベル位置を実測し、星(data-cmstar)・番号(data-cmnum)と重なる場合は 近くの空き(上方向優先→左右→下方向)へ transform でずらす avoidLabelOverlap を 追加。px 実測なので画面幅に依存せず、normalized 配置では無理だった水平方向の 回避も可能。リサイズ時も再計算。 併せてラベルの逃げ場(LABEL_CLEAR=0.075・GAP=0.085・天井マージン)を確保。 モバイル(375)・デスクトップ(1280)とも全帯で重なり0・見切れ0を確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳: 星座名の可読性と B1/B2 の星密集を改善
- 密集帯(星座6個以上=B1/B2)は星座を大きく描いて帯を縦長にし、星の間隔を確保 (targetLong を可変化)。B2 の中央値ギャップ 26→39px、近接ペアを大幅減。 - 星座名ラベルを星より前面(z-10)へ出し、暗いハロー(text-shadow)を付与。星座の 上の余白へ逃がす位置調整+最上段ラベル用の天井マージンも追加し、星や数字と 重なっても読めるようにした。 - 星座どうしの隙間(GAP)を 0.05→0.06 に微増。 レイアウトの並び・形は維持したまま、拡大と前面化で対応。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳: 帯下端の星のセクション番号が見切れる問題を修正
overflow-hidden の帯で最下行(y>0.9)の星は番号が下にはみ出て切れていた。 右端(x>0.85)を左へ逃がす既存処理に加え、下端は番号を星の上へ逃がして 常に帯内へ収まるようにした。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳: 学習完了時の「よくできました」画面を廃止しクリア画面へ直行
全カード消化時は完了画面を挟まず即 onClose し、新規クリアならクリア祝福へ そのまま遷移する。最初から対象なしの案内のみ残す。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
バックログに YouTube クォータ対策を追加
search.list が100ユニット/回で実質100検索/日。利用者増で枯渇する懸念に対し、 サーバー共有キャッシュ/増枠申請/オンデマンド+フォールバックの対策を記録。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
本番リリース準備: 解析モデルを本番化+レート制限を再有効化
- lib/gemini.ts: 既定モデルを gemini-3.5-flash(主)/ gemini-2.5-flash(最終 リトライ時のフォールバック)に。env(GEMINI_MODEL/GEMINI_FALLBACK_MODEL)で上書き可。 - lib/rateLimit.ts: DISABLE_ANALYZE_LIMIT を false に(本番は回数制限ON)。 - docs/backlog.md: リリースブロッカー1,2を完了に更新、CEFR-J表記項目を削除、 「3.5単独運用」は将来・任意に格下げ(当面はフォールバック維持)。 ※ GEMINI_API_KEY を課金キーに戻す作業は env のため別途手動。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
バックログにサーバー共有の解説キャッシュ案を追加
歌詞ハッシュをキーに、歌詞本文を持たない解説JSONをサーバー共有キャッシュ (Upstash等)に保存し、全ユーザーで再利用する設計メモ。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
バックログにチュートリアル内容の最適化を追加
現状は宣材用のプレゼン文を仮表示。正式なチュートリアル文への作り直しを 将来タスクとして記録。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
宣材プレゼン文の色分けを微調整
- 2行目: hip-hop lyrics を1チャンク(1色)に。 - 4行目: 末尾の読点「、」を削除。 - 5行目: 「曲で。」を1チャンク(1色)に。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
宣材プレゼン文: 表記修正+チャンク分割を細かく(色数増)
- 「乗らない」→「載らない」に修正。 - 各行のチャンク分割を増やし、色(チャンク色)の数を増やした(5/6/5/4/3)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルを宣材用プレゼン文に差し替え(暫定)
「好きな音楽が、英語の教科書になる。…」のプレゼン文を、英語原文+和訳+ 文法/スラング/イディオムの解説付きで表示し、宣材スクショで製品の見え方が そのままプレゼンになるように。正式なチュートリアル文は後で差し替え予定。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析カードの表示形式トグル(開発者用)を追加
中央フォーカス表示(拡大+周辺減光)と通常表示(全カード等倍)をボタン1つで 切替。クラファン宣材などで全文をスクショしたいとき用。<html>.flat-cards を 付け外しして CSS で focus-line の transform/opacity を無効化、localStorageに保持。 ボタンはホーム下部フッター(利用規約の並び)に (開発者用) タグ付きで設置。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
アプリアイコンを刷新(ヒーロー系フォントのL+金の星・黒背景)
favicon / apple-icon を、Futura 由来の Jost で組んだ白い「L」+ブランドの 金色の星(こと座のきらめき)+黒背景の微グローに。フォントは必要文字だけ サブセット取得して埋め込み。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
OG画像をヒーロー風に刷新(日本語フォント埋め込み)
紫グローの星空背景+「Lyra」+「好きな音楽が教科書に。」+ 「Turn lyrics into lessons.」。Noto Sans JP を必要文字だけサブセット取得して 埋め込み、環境に依らず日本語が正しく描画される。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
リンク共有のOGタイトル・説明文を更新
タイトル: Lyra - 好きな音楽が教科書に。 説明: 洋楽やHIPHOPの歌詞から「生きたネイティブ英語」を学ぶWebサービス… title/description/openGraph/twitter をまとめて更新。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
セクションクリア時の星点灯演出を華やかに刷新
単なる丸いリングの点滅をやめ、星らしいバーストに: - 柔らかいフラッシュ(控えめ) - 8 方向の光条(スターバースト・回転しながら弾けて消える) - 6 方向へ飛び散るきらめき粒 を星の色(白/青白/赤白)で重ねて再生。reduced-motion では非表示。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空単語帳: 星番号の見切れと学習カードの長い単語の見切れを修正
- 星座レイアウトの外周マージンを 0.02→0.04 に拡大し、右端の星の番号は 左下に出すよう切り替え(帯外へはみ出さない)。全152番号で見切れ0を確認。 - 学習カードの単語を全幅+折り返し(break-words / overflow-wrap:anywhere)に。 発音ボタンは右の余白に絶対配置。長い語(millimeter/millimetre 等)も2行で収まる。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルの和訳を指定文面に差し替え
各行の表示和訳を指定どおりに更新(挨拶→操作→出力→星→単語帳→締め)。 英文・チャンク対応・解説(イディオム/スラング/文法を各2)も整合させた。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルを6行構成に再編(挨拶→操作→出力→星→単語帳→締め)
挨拶 → 操作説明 → 出力説明 → 星ボタン説明 → 単語帳案内 → 締めの挨拶 の流れに。 各行に解説を1つずつ付け、スラング/イディオム/文法をバランスよく提示。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルを説明調に変更し全行に解説を付与
挨拶調をやめて機能を淡々と説明する文体に。各行に解説を1つずつ付け (文法/イディオム/文法/スラング/イディオム)、解説なしの行をなくした。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアルの解説を一新(短く・少なく・項目と形式を間接的に提示)
スラング/イディオム/文法を1つずつ・各1文だけ載せ、バッジで「どんな項目を どんな形式で解説するか」を実演。解説の無い行も置き「多すぎない」ことを暗示。 機能(貼付→実行→チャンク→保存→単語帳)も自然に案内する5行に再設計。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアル: give it a try の解説を簡潔化
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
きらめく星空背景を調整(星っぽく・数と主張を抑制)
- 明るい星を 4 点星のきらめき(十字スパークル常時)で「星っぽい」形に。 - 星数を削減(モバイル60 / PC95)。 - 明度・振れ幅・グローを下げて主張を控えめに。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
背景を「きらめく星空」に試験的に変更(旧版はバックアップ保存)
- StarField.tsx: スクロール連動の尾を引く描画をやめ、瞬く星+明るい星のグロー +瞬きのピークで十字スパークル+ときどき流れ星、の星空に。reduced-motion は静止。 - 旧「尾を引く星空」は components/StarFieldTrail.tsx に丸ごと保存。 戻すときは app/layout.tsx の import を StarField → StarFieldTrail に変更するだけ。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ハンバーガーは開閉でアイコンを変えず常に三本線に
× は消去ボタンと紛らわしいため、クリックしても × に変えず三本線のまま固定。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ハンバーガー→×アイコンのいびつな形を修正
線ごとの transform-origin ズレで × が歪んでいたため、三(3本線)と ×(中心で交差する対角線2本)の2セットをクロスフェードする方式に変更。 × は幾何学的に正しい対称形になる。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空単語帳の説明を7000→7500単語に修正
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ヘッダー右上にハンバーガーメニューを実装
単語帳・マイ単語帳・履歴・開発者を支援する を1つのメニューに集約。 - SiteHeader をクライアント化し、開閉・外側クリック/Escape で閉じる挙動を実装。 - 履歴は /#history へ。HistoryPanel に id を付与し、ハッシュ遷移で自動展開+ スクロールするようにした(別ページからの遷移・ホーム内ハッシュ変更の両対応)。 - SupportLink から BMC_URL をエクスポートしメニューから参照。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアル文章を指定どおり微修正
- 1行目の和訳を「ご覧いただきありがとうございます!」に、stop by の解説を簡潔化。 - hit の解説を簡潔化。 - 3行目を「☆で解説をマイ単語帳に保存」の説明文に置き換え。 - 4行目を「7,500単語の単語帳の案内」に変更。 - 5行目の That's it スラング解説を削除、関係代名詞の解説を簡潔化。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
チュートリアル文章を改良+星空単語帳への導線を追加
- 言い回しをより自然に磨き、古くなっていた「星でチャンクの単語を保存」を 実装に合わせて「星で解説ノートを保存」に修正。 - 「Hungry for more words? Open the wordbook and light up the stars.」の 1 行を追加し、light up / be hungry for の解説とともに星空単語帳へ誘導。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフを高画質化(パレット量子化を廃止しフルRGBA出力)
細い線のアルファ階調を 256 色パレットに丸めるとエッジが荒れて画質が落ちる ため、可逆フルカラー RGBA(8bit アルファ)で出力し滑らかなエッジを保つ。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフをさらに細くシャープに+線をより青く
- 膨張 blur をさらに弱め(sigma 0.8→0.3)線をくっきり細く。 - 線の着色をより青く(#CAE4FF→#82BCFF)。背景透過とは独立なので両立。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフの線を細くシャープに調整(太さ・ぼやけを抑制)
膨張の blur を弱め(sigma 2.0→0.8, gain 2.6→2.0)、線がぼやけず くっきり細く見えるように再生成。視認性は維持。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフ背景の浮きを根本解消+スマホ星空の横はみ出しを修正
モチーフ: - 画像を「背景透過・線=淡い青白」の PNG に事前変換(scripts/motif-transparent.mjs)。 クリーム背景の線画を、輝度反転でアルファ化し線を太らせて着色。表示は <img> を 重ねるだけで filter / mix-blend-mode / mask 不要 → iOS Safari でも黒背景の箱が 浮かず、PC でも自然に馴染む。 - StarMap の描画を透過 img 用に簡素化。 - optimize:art に透過変換を統合(既に透過済みはスキップ=何度実行しても安全)。 スマホ星空: - aspect-ratio と min-height の併用で幅が逆算され横はみ出ししていた回帰を修正 (min-height を撤廃し w-full で幅を固定)。 - 星のタップ範囲を拡大(透明パディング)、番号はスマホのみ少し大きく(PC は据え置き)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップをスマホ向けに最適化+モチーフの黒背景の浮きを修正
- モチーフ: mix-blend-mode を screen→lighten に変更し、filter から brightness を 外して contrast を上げ背景を黒へ潰す。バンドに isolation:isolate を付与。 これでスマホ(Safari)でも黒背景の箱が浮かず、線だけが馴染んで見える。 - スマホで窮屈だったバンドに min-h(14rem) を付与(sm 以上は従来の aspect)。 - 星のタップ範囲を 18px→約38px に拡大(透明パディング)。番号/ping は星基準に。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
待ち時間学習カードのヘッダーから「覚えたN語」表示を削除
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解説生成の待ち時間に未学習単語を学習できる UI を追加
- WaitingStudy: 歌詞入力欄のスペースに未学習単語のフラッシュカードを表示。 ○ で applyGrade(easy)+markRoundDone し、星空単語帳の進捗に直結。例文も発音可。 - ホームではこのインライン学習があるため、通知バーの「単語帳で学習」CTA は ホーム以外でのみ表示。 - バグ修正: WaitingStudy を Field(<label>) の中に置くと、カード内のどこを タップしても label がラベル対象(最初のボタン=発音ボタン)へクリックを転送し 発音が鳴ってしまう問題。loading 時の表示を label の外に出して解消。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップの見た目を調整
- 星の輝きを強化(グロー増・白コア追加・色付き星をより鮮やかに) - 星と数字を大きく、点灯/消灯でサイズ統一 - 未クリアの星座線も薄い灰色で常時表示し、星座の形が見えるように Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空単語帳ページ最下部に全点灯トグルを追加
星座の完成形を確認できるよう、本番(/wordbook)・プレビュー両方で ページ最下部に全点灯トグルを表示。見た目のみで SRS 進捗は変更しない。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
習得状況バーを周回進捗に連動(再復習中も 10/50 のように更新)
StarMenu の進捗(section.learned)が SRS の review 数を見ていたため、クリア済み セクションの再復習中も 50/50 のままだった。周回中(round done>0)はその周回で済んだ 語数を表示するように変更。周回外は従来どおり習得済み数。 実機検証: クリア済みセクションを10語復習後、進捗バーが 10/50 表示を確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
根本修正: クリア済みセクションの再復習も「続きから」になるよう周回進捗を永続化
クリア済みセクションは全語 review 状態のため、○しても状態が変わらず「この周回で 済んだ語」を区別できず、再入室で毎回50語に戻っていた。 - srs.ts: セクションごとの「現在の周回で済んだ語id」を localStorage(lyra:srs:round)に 保存する軽量ストアを追加(getRoundDone/markRoundDone/resetRound, resetSrsにも追加)。 - cefrDeck.sectionStudyQueue: round done を除いた語を返す。全語済んだら周回リセットして 全語を返す(再復習可)。語の状態に依存しないので新規学習でも再復習でも同じ挙動。 - StudySession: ○ のとき markRoundDone(sectionId, wordId) を呼ぶ。sectionId を受け取る。 - WordbookView: studyOrigin.section.id を sectionId として渡す。 実機検証: クリア済みセクションを10語復習→離脱→再入室で「残り40語」(続きから)を確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
学習キューを due 撤廃・即復習に変更(完了dead-endを解消)
sectionStudyQueue を復習期日(due)判定から state 判定へ。まだ習得してない語(new/learning) だけ出し、全語習得済みなら全語を即復習として出す。これにより全クリア済みセクションでも 「完了」で止まらず、いつでもすぐ復習できる。部分学習の「続きから」も維持。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全語習得済みセクションも「やるべき語だけ」仕様に統一(全語再出題しない)
sectionStudyQueue から習得済み語の復習フォールバックを削除。due+未着手のみ返す。 全語習得済みで due も無ければキューは空=学習画面は「完了」表示になり、50語の 再出題は行わない。復習は各語の期日(due)が来たときだけ出る。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
学習を「続きから」に修正: 途中離脱→再入室で全50語やり直しになるバグを解消
sectionStudyQueue が習得済み語も含めて全語返していたため、途中まで学習して離脱→ 再入室すると 50 語を最初からやり直す状態だった。通常は due+未着手(=まだやるべき語) だけを返して続きから学習できるように変更。全語習得済みのときだけ全語を復習として 出す(一度クリアしたセクションの再学習は維持)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳から「マイ単語へ →」リンクを削除
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
本番の単語帳から進捗ヘッダーの塊を削除(dev のみ表示)
「星空単語帳 / 点灯 N/M星… / 今日の復習」+開発ツールのボックスを、本番(/wordbook) では非表示に。製作者プレビュー(dev=true)でのみ表示する。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳の説明文を更新(7000単語・星タップ案内)
「CEFRレベル別の語彙を…」→「実用的な7000単語をレベル別に学習できます。 星をタップして学習を始めてください」に変更。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳を本実装: /wordbook を Coming soon から本物の星空単語帳に
- app/wordbook/page.tsx: Coming soon と製作者用ボタンを削除し、クリーンなヘッダー+ WordbookView を表示する本番ページに。metadata も indexable に更新。 - 開発用ツール(全点灯・リセット)は WordbookView/StarMap に dev フラグを追加して一般 ユーザーには非表示。/wordbook は dev=false。 - /wordbook/preview は dev=true で全点灯・リセットを残置(noindex・製作者用)。戻りリンク を「← 単語帳へ戻る」に更新。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
おひつじ座・いるか座の見切れも contain で解消
おひつじ座(横長で上下が切れる)・いるか座(枠が小さく切れる)を fit:contain に。 いるか座(1.5)/おひつじ座(1.2) は scale で補正。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
見切れる4星座を個別調整(fit:contain+scale)
横長画像と矩形アスペクトが合わず object-cover で見切れていた はくちょう座/北斗七星/ おおいぬ座/こぐま座 を、motif に fit オプションを追加して個別に contain(全体表示)へ。 枠が縦長で小さくなる はくちょう座(1.6)/こぐま座(1.5)/おおいぬ座(1.25) は scale で補正。 他の星座は cover のまま矩形を埋める。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフを星座の外接矩形に合わせて object-cover で埋める(大きく精細に)
最小サイズ/高さ上限/アスペクト固定の方式をやめ、各星座の星の外接矩形(×1.2)に モチーフ枠を合わせ、object-cover(マスクは mask-size:cover)で矩形を埋める方式に。 letterbox による縮みが無くなり、各星座のエリアをモチーフがしっかり埋めて 大きく・精細に表示される。小さい星座も星の広がりに応じた自然な大きさに。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフをさらに拡大(最小幅0.36・高さ上限0.46)— A1/A2 を B1 並みの大きさに
短い密集帯(A1)で高さ上限を厳しくしすぎてモチーフが小さくなっていたため、上限を 0.4→0.46、最小幅を0.34→0.36に緩和。多少の重なりは許容しつつ存在感を優先。 B1/B2は元々帯が高く上限に当たらないため不変。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフを濃く&小さい星座を拡大(最小サイズ強制+A1重なり防止)
- 線が薄く見えにくかったので opacity 0.3→0.42。 - 小さい星座(みなみじゅうじ座/わし座/いるか座等)のモチーフが小さい問題を解消: 星座ボックスの1.6倍と最小幅(0.34)の大きい方を採用し、枠を画像アスペクト(1.79:1)に 合わせて letterbox を除去。Leo/Taurus 並みの存在感に。 - A1のような短い密集帯で縦に伸びて隣と重なるのを、モチーフ高さ上限(帯高の0.4)で防止 (アスペクト維持のまま幅を縮める)。B1/B2は帯が高いので影響なし。 - こと座の個別 scale は不要になったため削除。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
こと座のモチーフ(竪琴)を個別に拡大(scale 2.0)
こと座は星の枠が小さくモチーフが小さく見えたため、inline motif で scale 2.0 を指定。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフを見やすく調整: opacity制御バグ修正・濃度UP(0.14→0.3)・サイズ拡大(1.6倍)
- motif-fade-in が opacity を 0.14 固定で終了し、inline 指定が無視されていた不具合を修正。 CSS変数 --motif-op で制御可能にし、既定 0.3 に。 - StarMap: 死んでいた inline opacity を削除(変数制御へ)。 - constellations: モチーフボックスの拡大率を 1.3→1.6 倍に。横長画像が縦長ボックスで 小さく見えるのを補正。 - 実機(全点灯)で全23星座のモチーフが適切なサイズ・濃さで表示されることを確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
全23星座にモチーフ画像を紐付け(最適化済み画像を追加)
- public/constellations/ に全23星座の最適化済みラインアート(各80-150KB・計2.5MB)を追加。 - lib/constellations.ts: 星座名→ファイル名マップ(MOTIF_FILE)で全星座へ motif を一括付与 (opaqueBg)。inline motif があるものは尊重して上書きしない設計。 個別の inline 指定(ursa_major/cygnus)は集約のため削除。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
バグ修正: 連続日数のUTC日付ズレ+due件数のメモ化
- srs.ts: todayStr が toISOString()(UTC)で日付を切っていたため、日本(UTC+9)などで 「日付の境界が朝」になり連続日数(streak)・日次カウントがズレていた。ローカル日付に修正。 - WordbookView: countDue(全数千語走査)を render 直書きから useMemo([bands]) に。 点灯ping等の再描画で毎回走らせない。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
backlog: 軽量化セクション追加(単語帳の遅延ロード/画像最適化スクリプト)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星座画像を最適化(5MB→50-150KB)+北斗七星モチーフ紐付け+最適化スクリプト
- 生成画像が1枚5MB超と非常に重かったため、sharp で長辺900px縮小+PNG圧縮+ ファイル名小文字化(Vercel/Linuxの大文字小文字対策)する scripts/optimize-constellations.mjs を追加。npm run optimize:art で実行。Cygnus.png 5.6MB→cygnus.png 132KB、 ursa_major.png 4.9MB→53KB(約98%削減)。 - 北斗七星(BIG_DIPPER)に ursa_major.png モチーフを紐付け(opaqueBg)。 - 生成プロンプトdocに最適化手順を追記。sharp を devDependency に追加。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
最適化: YouTubeプレーヤーを動的import・星をmemo化・x-powered-by無効
- GlobalYoutubePlayer: YouTube IFrame API を含む重い YoutubePlayer を next/dynamic (ssr:false)で遅延読み込み。layout 常駐だが初期バンドルから外し初回表示を軽量化。 - StarMap: Star(152個)を React.memo 化。点灯ping(justLit)再描画時に props 不変の星の 再生成をスキップ。 - next.config: poweredByHeader を無効化。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフに微調整ノブ(scale/dx/dy/rotate/flipX)を追加
各星座のモチーフ画像を星座の向き・大きさに合わせて個別調整できるよう、 CSS transform ベースの拡大率・位置オフセット・回転・左右反転を motif 設定に追加。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
モチーフを画像対応に(透過マスク/不透明背景の反転スクリーン)+全星座生成プロンプト
- ConstellationDef.motif に src/opaqueBg を追加。 - 透過画像: CSS マスクで淡青に着色。 - opaqueBg(白/紙背景の線画): 反転+コントラスト+sepia→hue-rotate で青白く着色し、 スクリーン合成で明るい背景を消す。 - はくちょう座を画像モチーフ(cygnus.png, opaqueBg)に設定。 - docs/constellation-art-prompt.md: 白鳥と同テイストで全23星座を作る Gemini 用 プロンプト+被写体/ファイル名一覧。 - public/constellations/README.md: 画像要件メモ。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星座の手書きSVGモチーフを削除(画像差し替え予定)+形のイメージ注釈を追加
- A1 の4星座から仮のSVGモチーフ(path)を削除。motif の仕組みは残置。 - 単語帳画面の最下部に「※星座の形はイメージです…」の注釈を追加。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ヒーローのこと座を実際の形(ベガ+平行四辺形の竪琴胴)に修正+A1表記を英検5-3級に
- LyraConstellation: 胴が1点に収束する菱形だったのを、ζ–δ–β–γ の平行四辺形に修正。 本物のこと座どおり「ベガ+小三角+竪琴の胴(平行四辺形)」に。 - cefrDeck: A1 の指標表記を「英検5〜3級」→「英検5-3級」に。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星座完成時のモチーフ(手書きSVGラインアート)を実装 — まずA1の4つ
- ConstellationDef に motif(SVGパス)を追加。BandLayout/LevelBand に motifs(配置)を追加。 layoutConstellations が各星座のボックスからモチーフ配置を算出して返す。 - StarMap: 星座が全クリア(forceLitでも可)のとき、その星座のボックスにモチーフを うっすら(opacity 0.14)重ねて motif-fade-in でフェードイン。星の奥=最下層に描画。 - A1: 北斗七星→熊 / カシオペヤ→冠 / こと座→竪琴 / はくちょう座→白鳥。 - globals.css: motif-fade-in キーフレーム(0→0.14, reduced-motion対応)。 - 仕組みは全レベル共通。A2〜B2 は motif 未設定なので表示なし(後で追加)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星番号の蛇行を左上スタートに変更(上の行を左→右→次の行を右→左…)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星番号を蛇行順に最適化(右上開始→上の行を右→左→次の行を左→右…)
レイアウト後に星座を中心 y で行クラスタリングし、偶数行は右→左・奇数行は左→右で 並べ替えてから番号(セクション index)を振る。これで番号順に学習すると右上の星座から 順に、行ごとに蛇行しながら星座が完成していく。2行構成(A1)では右上→左上→左下→右下。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A2〜B2の星座を実装+詰め方を改善(横すき間確保・部分表示解消)
- A2: オリオン/ふたご/おおいぬ/おうし(28星)。 B1: しし/さそり/いて/うしかい/かんむり/わし/みなみじゅうじ(48星)。 B2: ペガスス/アンドロメダ/ペルセウス/こぐま/ヘルクレス/ケフェウス/いるか/おひつじ(54星)。 - スカイライン詰めに横方向のすき間も確保(箱に GAP を含めて列予約)し、隣の星座と 視覚的に混ざる問題を解消。GAP を 0.05 に拡大。 - B2 を合計54ちょうどにして部分表示(ちぎれ)を解消。アンドロメダ/ペルセウスを各+1星、 さんかく座を削除。 - プレビュー実機(全点灯)で全レベルの形・名前・分離を確認済み。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップを実在星座レイアウトに(A1プロトタイプ)+開発用の全点灯トグル
- lib/constellations.ts(新規): 星座定義(星座標+辺, flipX)とレイアウト。 全星座を同一縮尺にし、高さ降順のスカイライン詰め(bottom-left fill)で隙間なく配置。 最後に幅フィット拡大して右余白を解消。A1=北斗七星/カシオペヤ/こと座/はくちょう座(22星)。 - cefrDeck: buildBands が星座定義のあるレベルは星座レイアウト(positions/edges/labels/aspect)、 無ければ従来の散布。LevelBand に edges/labels/aspect を追加。 - StarMap: aspect-ratio で帯高さ、band.edges で星座の辺、星座名ラベルを描画。 開発用「全点灯」トグル(forceLit, 見た目のみ・SRS不変)で星座の形を確認可能に。 - A2〜B2 は従来の散布のまま(次に星座を実装)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
確認テスト(10問)へ改名・学習クリアでも祝福・再学習可・線アニメ修正
- 確認テスト: 25→10問(合格90%=9/10)、「腕試しテスト」→「確認テスト」に改名。 - ClearCelebration を共通化し、確認テスト合格/学習で全語クリアの両方で表示。 合格画面は「セクションクリア!」+スコア(or 習得語数)+連続日数。ティアバッジ削除。 - sectionStudyQueue がセクション全語(due→new→習得済)を返すよう変更し、クリア済み セクションもいつでも再学習可能に。 - 星座の線: 今クリアした星(justLit)に繋がる線だけ描画アニメ再生。既存の線が 再生し直されるバグを修正。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップ: 色モデル刷新・星座の線演出・リセット機能、1星=50語に
- StarMap: 星の色をティア配色から「未クリア=灰 / クリア=白く輝く」に変更。 特別な星: 10の倍数番=赤白、素数番=青白。点灯星はきらめき。 - 星座の線: 連番セクション(i と i+1)が両方クリアで 1→2 へ線が伸びる描画アニメ (pathLength 正規化、永続)。星座が徐々に出来ていく演出。 - リセット機能: マップ上部に進捗全消去ボタン(confirm 付き、resetSrs)。 - cefrDeck: SECTION_SIZE を 50 に(1星=50語、集中が続く学習単位。合計約152星)。 - TestSession: 出題の英単語を拡大・中央化、発音記号を削除、発音ボタンを単語の下へ。 - globals.css: constellation-draw / star-twinkle キーフレーム(reduced-motion対応)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップを調整: レベル文字拡大・指標を英検/TOEICに・冠座削除・星を4点星化
- StarMap: レベル表記(A1等)を text-3xl/4xl に拡大。隣の星座名を学年/資格指標(subtitle)に 差し替え。最終ゴールの冠座セクションを削除。 - 星デザイン: 円→4点星(clip-path)、サイズを控えめに、点灯星は star-twinkle で各星 位相をずらして明滅。セクション番号を星の右下に常時表示(ホバー限定から変更)。 - cefrDeck: LEVEL_META.subtitle を英検/TOEIC指標に変更(A1 TOEIC120+/英検5〜3級 ほか)。 - globals.css: star-twinkle キーフレーム(reduced-motion対応)。 A2〜B2 は完全データ駆動のため追加コードなしで同デザイン適用(検証済み)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
学習セッションを○×方式に刷新+新規上限を撤廃
- cefrDeck: sectionStudyQueue の新規1日上限スライスを撤廃し、セクションの全 new+due 語を 出題(数百語をまとめて学習可能に)。未使用化した newRemainingToday の import を削除。 - StudySession: 4段階の時間ベース採点(もう一度/むずかしい/ふつう/かんたん)を廃止し、 ✕(まだ)/○(覚えた)の2択に。○=習得(review)でセッション/以後から除外、×=キュー最後尾へ 回して再出題。時間ではなく○×で管理。残り枚数表示・完了サマリを更新。 - めくる前の単語を大きく中央表示(発音ボタンは右に絶対配置)。○は青(accent-2)・記号のみ・ ✕と大きさを揃えて調整。ヒント文「タップして答えを見る…」を削除。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
backlog: data/vocab コミット済みに更新、CEFR-J ライセンス表記を残タスク化
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
腕試しテスト+合格演出を実装し、CEFR単語データ(全4レベル)を追加
- TestSession: セクション単位の4択25問テスト(英単語→正しい和訳)。誤答は同レベル語彙の ja から生成。90%(23/25)以上で合格→seedReview で全語を review シード(4日間隔)し星座を 点灯、recordStudyDay で連続日数を更新。フル演出(星バースト/ティアバッジ/スコア/連続日数)。 - StarMenu: 「腕試しテスト」を有効化。 - WordbookView: テストフロー+合格時に点灯した星を ping 演出(justLit)。同レベル誤答プール。 - StarMap: justLit でリング+バーストの点灯演出。 - srs.ts: recordStudyDay() を追加。globals.css: vocab-burst キーフレーム(reduced-motion対応)。 - cefrDeck: データは ABC 順のため、固定シードの決定的シャッフルでセクションの頭文字偏りを 解消(端末間・再読込で安定、id 不変で SRS 進捗に影響なし)。 - data/vocab/{a1,a2,b1,b2}.json を追加(計7,452語)。クラウド配信用(backlog消化)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
生成中にホームへ戻ると解析が初期化される問題を修正+誘導吹き出し追加
- LyricsForm: バックグラウンド解析ストアを購読(useAnalysisBridge)。生成中に他ページ へ移動→ホーム復帰しても loading 表示を引き継ぎ、後から完了/失敗したら結果を反映する。 以前は新しい LyricsForm が idle で再マウントされ初期化されたように見えていた。 reflectingBgRef で引き継ぎ中フラグを持ち、自動チュートリアル表示の上書きを防止。 通常フロー(ホーム滞在/ポップアップ経由)は seenNow 判定で二重反映せず非回帰。 - AnalysisNotice: 「単語帳で学習 →」ボタン上に「待ち時間を有効活用」の吹き出しを追加。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
YouTubeプレーヤーをグローバル化しページ遷移後も継続再生+ミニプレーヤー追加
- lib/playerStore.ts: 再生中動画(videoId/title)をモジュールストアで保持。 LyricsForm(/ 専用)内に置いていた頃の「他ページへ移動で unmount→停止」を解消。 - components/GlobalYoutubePlayer.tsx: layout 常駐ラッパー。pathname==="/" はフルバー、 それ以外は左下のミニプレーヤーで表示。 - YoutubePlayer: variant("bar"/"mini") 対応。バー⇔ミニ切替で iframe が破棄されない よう return ツリーを共通化(host ノード保持)。ミニは Apple Music の Now Playing 風 (フロスト/角丸/同色)に。サムネは固定幅+左寄せクロップで横長動画でも面積が膨らまず、 中央下の解析通知バーと高さ・色・y座標を揃えた。 - LyricsForm: ローカル state を廃止し playVideo() を呼ぶだけに。 - layout: GlobalYoutubePlayer をマウント。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析通知バナーとプレーヤーバーの間隔を 4rem→5rem に微調整
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析通知バナーを調整: 背景を暗く・プレーヤーバーと重ならないよう配置・距離を詰める
- AnalysisNotice: 背景を bg-ink/90 に(より暗く)、.analysis-notice クラスで配置を管理 - globals.css: YouTube プレーヤー表示中(body.has-player)はバナーを上へ逃がし、 間隔を 6rem→4rem に詰めてプレーヤーバーと近づける Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞欄の下に灰色がはみ出る原因(inline-block の下余白)を解消
- textarea はデフォルト inline-block でベースライン下に数pxの隙間ができ、 外側ラッパー(bg-surface 灰色)がその分高くなって枠線下にはみ出していた。 textarea を block 表示にして高さをぴったり合わせて解消。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞欄のフォーカス時に下レイヤー(灰色)が枠線からはみ出る不具合を修正
- textarea の .focusable(focus 時 translateY(-1px) で1px浮く)が、外側ラッパーの bg-surface 灰色と1px ズレて枠線下にはみ出していた。浮き上がり無しの accent フォーカス枠+リング(transition-colors / focus:ring)に置き換えて解消。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
歌詞欄のリサイズグリップを除去(角丸からはみ出る図形&長押しリサイズを解消)
- textarea を resize-y → resize-none に。右下のリサイズグリップ(角丸枠から はみ出て見えていた斜め線)と、ドラッグ/長押しでの高さ変更を無効化。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
完成ポップアップの文言変更(出力が完了しました/解説をみる)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析中のサブ文言を経過時間で3段階に切り替え
- analysisStore に startedAt を追加。 - AnalysisNotice で経過秒を計測し「歌詞を分割しています → 和訳と解説を 組み立てています → 解説を生成中です(あと少し)」と進度表示。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
「生成中」の末尾ドットを . → .. → ... と循環アニメ
- ::after の content をアニメ(JS 不要・再レンダ無し)。幅固定でガタつき防止。 - prefers-reduced-motion では静止の「…」表示。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析通知バナーを横に広げる(max-w-md → max-w-xl、高さ不変)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
テスト用に解析の回数制限を一時無効化+運用前メモ
- lib/rateLimit.ts に DISABLE_ANALYZE_LIMIT(=true)を追加し、/api/analyze の 1日制限をテスト中だけ無効化(呼び出し無制限)。 - 運用前に false へ戻すリリースブロッカーを backlog.md に明記。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
一時的に解析モデルを下位(flash-lite)へ+運用前に戻すメモ
- 無料枠で呼び出し UX を詰めるため、混雑しない gemini-2.5-flash-lite / gemini-flash-lite-latest に一時ダウングレード(2.5-flash は現在 503)。 - flash-lite は解析品質が落ちるため本番不可。コード冒頭と backlog.md に 「運用前に gemini-3.5-flash+課金キーへ戻す」リリースブロッカーを明記。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
再生成可能な中間データを gitignore(差分から除外)
- scripts/words-raw.json(xlsx 抽出の中間データ。extract_words.py で再生成可) - .claude/launch.json(プレビュー用ローカル設定) - data/vocab は本物の語彙データなので無視しない(将来クラウド配信用にコミット)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析をページ移動しても継続+完成ポップアップ&単語帳誘導
- lib/analysisStore.ts: 解析ライフサイクルをモジュールスコープのストアに橋渡し。 fetch の完了処理は unmount 後も走るので、他ページへ移動しても結果を保持できる。 - AnalysisNotice(layout 常駐): - 解析中 → 「生成中…単語帳で学習 →」バナーで待ち時間を学習に誘導 - 完成(未閲覧)→ 「結果を見る」ポップアップ → ホームへ遷移して結果へスクロール - 失敗 → エラー通知 - LyricsForm: onSubmit でストアに開始/完了/失敗を通知(完了時 mountedRef で 「まだ表示中か」を判定し、移動済みのみポップアップ対象に)。復帰時は consumeUnseenAnalysis で未閲覧結果を復元して表示+スクロール。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星をさらに明るく+尾を端ほど細く薄くテーパー
- 星の alpha を base 0.16→0.22 / 振れ幅 0.2→0.22 に上げてもう一段明るく。 - 尾(コメットの筋)を4分割の単色 stroke にして、先端へ向かうほど幅と alpha を 線形に減衰(細く・薄く)。createLinearGradient は使わず軽量のまま実現。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: 将来やることリスト(backlog.md)を追加
- 解析モデルを将来 gemini-3.5-flash 単独へ切り替え(Tier 上昇で 503 回避できたら)。 - data/vocab のコミット、Musixmatch 契約、不正利用対策など既出の将来項目もまとめて記載。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
主モデル(flash-latest)+混雑時フォールバック(2.5-flash)に変更
- 解析は複雑なので主モデルは最高品質の gemini-flash-latest に戻す。 - ただし 503「high demand」で失敗したセクションは、最終リトライだけ安定版 gemini-2.5-flash にフォールバックして救済(普段は最高品質・混雑時のみ安定)。 - getModel(modelName, useCache) に一般化。フォールバックは Context Cache を 使わずモデル切替の thrash を回避。GEMINI_FALLBACK_MODEL で上書き可。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
解析モデルを gemini-2.5-flash に固定(503 high demand 対策)
- 既定モデルを gemini-flash-latest(共有エイリアス・503 になりやすい)から 固定版 GA の gemini-2.5-flash へ。本番で頻発していた「Gemini呼び出し失敗 (Error fetching...)」=モデル混雑由来のセクション失敗を抑える。 - セクション再ロールのバックオフを 350→600ms に延ばし短時間の混雑を吸収。 - GEMINI_MODEL で上書き可(品質が気になれば従来の flash-latest に戻せる)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
セクション解析にリトライを追加(本番で端折られる/パース失敗の緩和)
- analyzeSection を analyzeSectionOnce + 再ロール(最大3回)に分離。 一時的な JSON 切れ・上流の瞬間エラーで失敗したセクションを振り直す (temperature>0 なので再試行で valid JSON になりやすい)。 safety / timeout(中断)/ missing_key は即 throw(振り直しても無駄)。 - これで「失敗セクション=空(端折られた)」が出る確率を大幅に下げる。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
背景の星を少し明るく+CEFR-J Wordlist の出典を利用規約に明記
- StarField: 星が薄すぎたので alpha の base/振れ幅を上げて少し明るく ((0.1+twinkle*0.15) → (0.16+twinkle*0.2))。 - 利用規約に「データの出典・クレジット」を追加: 『CEFR-J Wordlist Version 1.6』東京外国語大学投野由紀夫研究室 (2026年5月ダウンロード、出典URL付き)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
既定モデルを gemini-3.5-flash に(課金キーで利用可)
- 課金有効キーで gemini-3.5-flash の 429 が解消(200 確認)。最新 Flash を既定に。 - 詰まる時は GEMINI_MODEL=gemini-2.5-flash で安定運用に切替可。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
503「high demand」対策 — 既定を gemini-2.5-flash 固定+503は長め待機
- gemini-flash-latest(共有エイリアス)が 503 になりやすいため、固定版 GA の gemini-2.5-flash を既定モデルに(動作確認済み)。GEMINI_MODEL で上書き可。 - 503/429/quota は内容起因の失敗と区別し、最大 90s まで長めにバックオフして粘る。 混雑時はバッチ分割せず、内容起因(パース/件数)の失敗のみ分割で切り分ける。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
例文も読み上げ対応+富化スクリプトの堅牢化
- StudySession: 例文の横にも🔊ボタンを追加(speakEn で例文を読み上げ)。 - build-vocab.mjs: maxOutputTokens を 16384、リトライを 6 回に増やし、 リトライ尽きた失敗バッチは半分に分割して再挑戦(truncation や特定 1 語の 問題で全体が止まらないように)。件数不足の応答も失敗扱いにして分割へ回す。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
学習カードから品詞・発音記号を省き、タップ発音(TTS)を追加
- 情報量を減らすため pos / phonetic の表示を削除。 - 単語の横にスピーカーボタンを追加。タップで Web Speech API(ブラウザ内蔵 TTS・ 外部API不要・無料)が en-US で読み上げる(lib/speak.ts)。 - 入れ子ボタン回避のためカードを div(role=button)化し、Enter/Space で反転(a11y)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
OneDrive 破損時の 1 コマンド復旧 `npm run dev:fresh` を追加
- scripts/dev-fresh.mjs: 壊れがちな .next を OS コマンドで確実に削除してから next dev を起動。OneDrive の .next 破損(EINVAL readlink)で起動できない時の復旧用。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空マップ・学習モーダルを実データ+実SRSに接続
- WordbookView: /api/vocab/<lv> を読んで bands 構築。未生成は「準備中」表示。 学習後にティア/進捗を再算出。今日の復習(全 due)導線。 - StudySession: 実カード(語/発音/品詞/意味/例文/ニュアンス)+実採点。 各採点ボタンに次回間隔プレビュー。空キューは「完了」を表示。 - StarMap/StarMenu: cefrDeck 型・実ティアに接続、今日の復習を件数つきで有効化。 - 配信: app/api/vocab/[level] が data/vocab/<lv>.json を返す(生成中の大ファイルを 静的公開せず検証を挟む)。next.config に outputFileTracingIncludes を追加(Vercel)。 - cefrDeck に TIERS/tierOf 追加、未使用 mockDeck 削除。 - 実データ(A1 280語=3星)で全フロー検証。データは並行生成中。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
CEFRデッキのローダ+セクション化(lib/cefrDeck.ts)
- public/data/vocab/<lv>.json を遅延 fetch(per-level キャッシュ・inflight 合流)。 - 100語ごとに Section 化、星位置を決定的生成、ティア/進捗を lib/srs から算出。 - 学習キュー(セクション単位 = due→新規枠まで / 今日の復習 = 全 due)と件数カウント。 - build-vocab.mjs の出力先を public/data/vocab に変更(クライアントから fetch するため)。 - 要件書のパス記載を public/data/vocab に更新。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SRS エンジン(SM-2 lite)を実装
- 純粋関数 schedule(card, grade, now) を中核に、localStorage 永続化・ セクションのティア算出(§5.1)・日次新規カウント・連続日数(streak)・ 腕試し合格シード(seedReview)・採点プレビュー(previewIntervals) を実装。 - new → learning(1分/10分) → review。Again/Hard/Good/Easy で ease/interval 調整。 - 学習開始した語のカードのみ保持(肥大化防止)、storage イベントでクロスタブ同期。 - トレーステストで間隔成長(1d→3d→8d)・lapse・卒業(easy=4d)を確認。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語の example/nuance をレベル(学齢)に合わせて生成
- build-vocab.mjs にレベル別ガイド(A1=小〜中1 … B2=大学受験+)を追加し、 レベルごとに対象学齢の指示を付けたモデルで富化。例文・ニュアンスの難易度が レベルに追従する(A1=超基本短文/やさしい説明、B2=高度・類義語の使い分け)。 - 要件書 §3.4 にレベル適応の方針を追記。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs+scripts: 単語帳データの決定事項を反映+Gemini 富化パイプライン追加
要件確定: - ja/phonetic/example/exampleJa/nuance を必須化(ニュアンス欄を追加)。 - 腕試しテスト = 4択・25問・合格90%。新規枚数デフォルト20(10/20/30)。 - データソース = words.xlsx(7,452語、headword+pos のみ。残りは Gemini 生成)。 スクリプト: - scripts/extract_words.py: xlsx → words-raw.json 抽出(API 不要)。 - scripts/build-vocab.mjs: 40語バッチで Gemini Flash 富化 → data/vocab/{a1,a2,b1,b2}.json。中断再開・JSON修復・リトライ・レート制御つき。 - ※ words-raw.json と生成 JSON はローカル運用(xlsx と同じく未追跡)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳プレビューを /wordbook/preview に復活+Coming soon に製作者用導線
- 公開ページ /wordbook(Coming soon)はそのまま維持。 - 星空マップのプレビュー(WordbookView)を /wordbook/preview に復活(noindex)。 製作者用バッジと Coming soon への戻りリンク付き。 - Coming soon ページ最下部に「製作者用:単語帳プレビューを見る」ボタンを設置。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
フィルタ/並び替えを自作ドロップダウンに(OS 標準リストを廃止)
- native <select> は開いたときの選択リストが OS 描画(灰色べた塗り)で テーマと噛み合わないため、ボタン+自前の暗色メニュー(.card-surface)の カスタムドロップダウンに置き換え。選択中は accent 色+✓ で示す。 - 外側クリック / Esc で閉じ、↑↓ 移動・Enter 決定に対応(SongSuggest と同方針)。 - トリガーの矢印は開閉で反転。サイト全体のカード/入力 UI とトーンを統一。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
種類フィルタの件数を削除+ツールバーをサイトのトーンに統一
- フィルタ/並び替えセレクトの ( 件数 ) 表示を削除(情報量を削減)。 - ネイティブ感のある select を appearance-none + カスタム矢印で作り直し、 検索バーに虫眼鏡アイコン、書き出し/削除を右寄せピルに整理。 - 角丸を rounded-lg に統一し、フォーカスは accent リング(focus:ring-accent/15)で サイト全体の入力 UI と揃えた。追加フォームの入力欄も同じトーンに。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
マイ単語の種類フィルタをチップからプルダウンに変更
- 種類絞り込みを <select> 化(全て / 単語・フレーズ / スラング / イディオム / 文法 / 自作カード、各件数つき)。並び替えセレクトと揃った UI に。 - 未使用になった FilterChip コンポーネントを削除。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
単語帳を Coming soon に/マイ単語をタップ展開のフラッシュカード化
- /wordbook を開発中の Coming soon ティザー(星座アート+説明)に変更。 星空マップ等のモック実装はファイルとして温存し、SRS 実装時に接続する。 - マイ単語の各カードを既定で「英語+カテゴリ(概要バッジ)」だけ表示し、 タップで意味・解説・使用例を開くフラッシュカード方式に。歌詞由来・自作の 全種別に適用(自己テストしやすくする)。 - NoteBody に hideWord を追加し、表面に出した英語語の重複表示を防止。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
マイ単語に Anki 風の手動カード作成を追加
- 「+ カードを自分で追加」フォームで 英単語 / 意味 / メモ を入力してカードを作成。 - VocabEntry に kind "manual"(自作カード)と note(メモ)フィールドを追加。 - 自作カードは単語カード表示(en/ja+メモ)。フィルタ・検索・並び替え・ CSV / Anki 書き出しにも自動対応(CSV に note 列、Anki は裏面へ note を反映)。 - 同一 en+ja の重複はトーストで通知して防止。空状態の案内も更新。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
星空単語帳の UI 先行実装(モック)+マイ単語とページ分離
- /wordbook を新設。CEFR レベル別の縦長「星空マップ」(上=易 / 下=難、難易度を 高さで表現)。70 星のモック配置・習熟ティア色・タップで星メニュー。最下部に 最終ゴールの冠座。星は静的グロー(動きは背景 StarField が担う)。 - 星メニュー → 学習セッション(フラッシュカードめくり+4段階評価)をモーダルで。 ※ SRS スケジューリング・実データ接続は未接続の UI プレビュー(mockDeck.ts)。 - 既存 /vocab を「マイ単語」に改称し、星空単語帳と明確にページ分離。 ヘッダー・フッター・サイトマップの導線を両ページへ整理。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs: CEFR 既製単語帳(SRS×星空マップ)の要件定義を追加
- 階層: Level(A1-B2)=難易度帯(高さ)/Section(100語)=星/Word=SRSカード。 約7000語≒70星を縦長の星空マップに配置し、難易度を「星座の数」ではなく 「画面上の高さ」で表現(上=易 / 下=難)。最終ゴールは最下部の冠座。 - SRS は SM-2 lite(Anki 風 4 ボタン)を推奨。状態・採点・日次キューを定義。 - 星の色=習熟ティア(クリア/育成/熟成/完全習得)。腕試しテストで SRS スキップ可。 - 学習・テストは専用ルートでなくフルスクリーンモーダル。全レベル最初から開放。 - Gemini 加工用の JSON スキーマ(data/vocab/*.json)と localStorage 設計、 将来のマイ単語帳統合方針、実装 TODO を記載。実装は未着手(要件のみ)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
perf+fix: 画面外でHero常時アニメ停止/will-changeを可視カード限定/エラーバウンダリ追加
- HeroAmbient: IntersectionObserver でヒーローが画面外の間、最も重い blur+hue-rotate のウィスプ/筋・こと座 float・スクロール誘導バウンスを animation-play-state: paused にする。見えていない時だけ止めるので見た目は不変、 GPU の継続再ラスタライズを丸ごと節約する。 - centerFocus: .focus-line の恒久 will-change を廃止し、IO で可視中(rootMargin 20% 先読み)の行だけに動的付与。長尺曲で合成レイヤーが大量常駐して GPU メモリを 浪費し Chrome の will-change budget を超える問題を回避。 - error.tsx / global-error.tsx: レンダリング中の想定外例外でも白画面で固まらず、 テーマに沿った復帰 UI(再読み込み)を表示する(安定化)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
表示時の3層ステージング登場+スクロール誘導の改良
- 銀河 → 星座 → 文字 → スクロール誘導の順にふわっと登場する演出を追加。 opacity 主体で、drift/hue/float/sparkle などの常時アニメは継続させ、 登場は親レイヤーや別プロパティに重ねて競合を回避。 - 銀河レイヤーは mix-blend-mode: screen を壊さないよう transform を使わず opacity のみでフェード(恒久 stacking context 化を回避)。 - スクロール誘導の矢印を拡大(32→40)+下方へ移動。上下バウンス+下端で 明滅させ「下へスクロール」を直感的に示す。 - overflow-hidden をセクションから銀河レイヤー(inset-0=同範囲)へ移し、 銀河の見た目を保ったまま矢印をセクション下端より下に出せるように。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
perf: StarField の毎フレーム不変計算を排除+snap の全DOM再スキャン除去
- StarField: 色/半径/ピクセル位置/尾の接線をリサイズ時のみ計算する形に変更し、 毎フレーム×星105個の hypot・除算・分岐を排除。非表示タブで rAF を停止。 - centerSnap: スナップ中に毎フレーム全 [data-focus-line] を querySelectorAll + getBoundingClientRect で再スキャンしていた処理を、捕捉済み1要素の測定だけに 削減(長尺曲で 1 フレーム 100 回超の rect 読みが発生していたのを解消)。 - VocabList: 撤去済みの「カード右上☆」を案内していた空状態コピーを実態に合わせ修正。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Update README to remove service description
Removed the description of the service in Japanese.
「ちょいちょい挙動がバグる」3 つの隠れ条件を解消
ユーザー報告: 弱化モード入れた後たまに変な動きをする。原因は lastTargetEl の更新漏れ& stale 参照保持。 1. ユーザーが進行中の snap をキャンセル(wheel/touch/key)した時、 lastTargetEl が古いまま → 次回 trySnap で current 判定が外れて ホイールを切ったのに強い CAPTURE_RATIO で引き戻されることがあった。 onUserIntent で animating 時に nearest を current として確定する。 2. snap 不要レベル(|delta| < MIN_MOVE_PX)で trySnap が return する時 lastTargetEl を更新していなかった → 「使い方を見る」「解析後スクロール」 「↑↓キーで着地」の直後の初回 trySnap でこのカードが current 扱いに ならず、続くホイールが強い CAPTURE_RATIO で阻害された。 早期 return 前に lastTargetEl = el を仕込む。 3. 解析結果差し替え / チュートリアル切替で focus-line が unmount された後も lastTargetEl が detached node を保持し続けて、isCurrent 判定が永久に false になっていた(軽い memory leak + 弱化モードが効かない)。 trySnap 冒頭で document.contains による生存チェックを入れる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
現在フォーカス中カードだけ捕捉範囲を弱める(離脱しやすく)
ユーザー報告: 弱いホイールで前後カードに移動しようとしても、現在 フォーカス中のカードに引き戻されて移動できないことがある。 対策: 「直近で snap し終えたカード」を lastTargetEl に記憶し、 trySnap で最寄りカードがそれと同一参照なら CAPTURE_RATIO を弱める。 - 通常 CAPTURE_RATIO = 0.18(前後/未取得カードに対しては従来通り) - 現在カード CAPTURE_RATIO_CURRENT = 0.06(離脱しやすい狭い範囲) これで「弱ホイール = 現在カードの 0.06 vh 圏外なら snap せず留まる」 「もう少しホイール = 別カードが最寄りになり通常 0.18 vh 圏で吸い寄せ」 という直感的な挙動になる。 nearestDelta は要素も返す形に変更し、step 内でも最終的な最寄りカードを 追跡して finalTarget を更新するように。snap 完了時点での最寄りを lastTargetEl に記録する。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
scroll-padding 左右対称化+snap 捕捉範囲の弱化
ユーザー報告: スクロール / ↑↓ / タッチでカード移動時に 「行き過ぎ or 少し足りない位置で急ブレーキ → 適切な場所まで調節」 という挙動。 根本原因は html の scroll-padding が非対称だったこと: - 旧: scroll-padding-top: 20vh / scroll-padding-bottom: 10vh - scrollIntoView({block:"center"}) は (vh - 30vh) の中央に着地するため、 実際の着地位置は viewport の 55% になっていた - centerSnap は 50% を基準にしているので 5vh ぶん後追い補正が走り、 ユーザーには「急ブレーキ → 微調整」に見えていた 対策: - scroll-padding を 4rem の左右対称に変更。これで block:"center" が 確実に viewport 50% に着地し、補正そのものが発生しなくなる。 4rem はヘッダー(約3rem)+ 少し余裕の値で、anchor scroll (block:"start" の #lyra-analyze-form) もヘッダー下に収まる。 吸いつき強度: - CAPTURE_RATIO 0.22 → 0.15 で少し弱め(前 commit)。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
perf: vocab cache・useMagneticHover の layout 強制を解消+小さなクリーンアップ
vocab.ts: - listVocab() を呼ぶたびに localStorage.getItem + JSON.parse していた。 LineCard の isSaved() が 1 行あたり 3 回(slang/idiom/grammar)呼ぶため、 20 行の結果で 1 レンダ 60 回。モジュールスコープのキャッシュ _cache を導入し、 save/remove/delete/restore/clear で更新後の配列を直接セット。 - storage イベントで他タブの保存にも同期(_cache を invalidate)。 - 取得側は immutable 参照を扱う前提(読み取り専用)。 useMagneticHover: - mousemove は秒間 100+ 回発火。旧実装は毎回 getBoundingClientRect を 読んでいて layout を強制していた。rect 読み取りと style 適用を rAF 1 フレームに集約して同フレーム内で 1 回に。 LyricsForm: - 文字数カウント表示を削除したときの dead 変数 charCount を整理し overLimit を直接 lyrics.length から算出。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
自動取得βボタンを開発環境限定で表示
process.env.NODE_ENV === "development" でガード。Next.js のビルド時に DefinePlugin で静的置換されるため、本番ビルドではボタン JSX 全体が tree-shake で除去される(コードベース上は残り、ローカルで dev 実行 した場合のみ表示)。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カード中央への着地を getBoundingClientRect ベースに切り替え
offsetTop ベースの計算は CSS zoom 1.7(PC)と組み合わさったときに スケール解釈の差で意図した位置に着地しないケースがあり、ユーザーから 「全然中央じゃない」と継続的に報告されていた。 getBoundingClientRect は zoom 環境でも window.scrollY / innerHeight と 同じ「post-zoom 座標」を返すため、`scrollY + rect.top + rect.height/2` でドキュメント上のカード中央位置が確実に求まる。これと vh/2 の差分を scrollTo に渡せばカード中央 = viewport 中央(snap が吸い寄せる位置と 同じ)にぴったり着地する。 前 commit で tutorial 系アニメから transform を抜いた効果もここで活きる: rect が最終レイアウト位置と一致するため、scroll 完了時点でカードが animation 途中の半端位置に居る誤差がもう生じない。 未使用になった getOffsetTopFromDocument は削除。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カード translateY 削除で「auto-scroll 錯覚」と着地ズレを解消
ユーザーが「サイト起動時に勝手に少し下にスクロールされる」「カードが 中央じゃない」と報告していた現象、いずれも tutorial-card / tutorial-line アニメの translateY が原因だった: 1. translateY(20px → 0) のスライドアップを「ページが下にスクロール した」と知覚していた(実際にはページは動いていない) 2. offsetTop はレイアウト座標(transform 非考慮)で計算するが、 smooth scroll 完了時点でカードはまだ translateY 半端な値にあり、 結果カード視覚位置が viewport 中央からズレて見えていた 両キーフレームから transform を削除し opacity のみに。さらに .verse-enter の transition による translateY(14px) もチュートリアル 内では transform/transition: none で打ち消し、カードは常に最終 レイアウト位置に居る前提にする。 これで: - スタートアップの「auto-scroll 錯覚」が消える - 「使い方を見る」で最初のカード中央が viewport 中央にぴったり着地 チャンクは前commit で既に opacity-only 化済み。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カード中央への正確な着地+スクロールカクつき解消+チュートリアル再呼び出し対応
着地位置: - フォーカス中央定数を 0.55 → 0.5(真の画面中央)に統一。 centerFocus / centerSnap / keyboardNav / VerseDisplay / LyricsForm すべてが同じ「画面中央」を基準にすることで、着地後に snap が吸い寄せて 余計に動いてカクつく問題を根本解消。 - offsetTop ベースで firstCard のレイアウト座標を計算し、tutorial-card の translateY アニメに影響されず最終的な中央位置にぴったり着地させる。 スクロールカクつきの原因を3点解消: - StarField の毎フレーム createLinearGradient(105個 × 60fps = 毎秒 6300 個生成)を撤去し、単色 stroke で尾を描画。GC 負荷と ラスタライズコストを大幅削減。ctx.lineCap も初回1回設定に。 - チュートリアル chunk アニメから transform を抜き opacity-only に。 同時走行する ~30-50 個のチャンクがコンポジターレイヤー化するのを抑止。 - .focus-line の transition を撤去。rAF 更新の度に transition が再起動 していた compositor 負荷を消し、rAF 直接駆動で滑らかに追従させる。 - .tutorial-card の will-change を削除(一度しか動かないので永続レイヤー 化は無駄)。 - centerFocus の MutationObserver を 200ms throttle してスクロール中の 細かい DOM 変化での querySelectorAll 連打を回避。 「使い方を見る」のスクロール不発バグ: - result が既に SAMPLE_RESULT のとき setResult(SAMPLE_RESULT) は React が同一参照で bail out し、result-watching useEffect が再発火しない ためスクロールが走らなかった。loadSampleNonce を deps に追加し、 loadSample 時に increment して強制発火させる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カード→行→チャンクの3段階ステージング登場アニメ
T7 強化。カード単位でフェードしていただけでは「文字が出てくる」 感が伝わらなかったので、3段カスケードに作り直し。 - カード: 200ms ごとに下から持ち上げ(既存の tutorial-card) - 行: --line-idx を VerseDisplay 側で各 verse-line に注入。 160ms ごとに行が順番にフェードアップ。 - チャンク(単語ブロック): nth-child(1..12) で 55ms ステップ。 card delay + line delay + 0.45s をベースに、チャンクが左→右へ タイプライターっぽく出現。 - チャンクは hover の scale(1.04) と競合しないよう animation-fill-mode を backwards にしてインライン transform に委ねる。 - reduced-motion でカード/行/チャンクすべて静止。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
サーバーコンポーネントに onClick を渡せないエラーを修正
Hero はサーバーコンポーネントだが onClick を直接書いたため、 "Event handlers cannot be passed to Client Component props" で 500 エラーになっていた。下向き矢印ボタンを ScrollDownButton として "use client" コンポーネントに切り出して解消。Hero 本体は引き続き サーバーコンポーネントのまま。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
初回の勝手スクロール抑制+カードフォーカスの軽量化
T3: サイトを開いた直後、たまたまカードが中央付近にあると centerSnap が 発火して下にスクロールしてしまうバグ。userEngaged フラグを導入し、 wheel/touchstart/keydown のいずれかが起きるまでスナップ判定を停止。 T6: チュートリアル/解説カードのスクロールカクつき対策。原因と対策: - 旧 centerFocus は forEach で rect 読み取り→ style 書き込みを 要素ごとに interleave していたため、毎フレーム要素数ぶんの forced reflow が発生していた。 - IntersectionObserver で可視要素だけを追跡し、計算対象を最小化。 - read(rect 取得)と write(style 適用)を 2 フェーズに分離して レイアウトスラッシングを根絶。 - 値が変わらない要素は setProperty をスキップして再描画コストを削減。 - MutationObserver でカード追加時のみ再登録。 T6(吸いつき): centerSnap の CAPTURE_RATIO を 0.12 → 0.22 に拡大し、 ほぼ効いていなかった中央寄せメリハリを体感できるレベルに。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Hero強化+プレースホルダー整理+チュートリアル登場アニメ
UI 表層の調整(T1/T2/T4/T5/T7)。 T1: 検索欄プレースホルダーを「例: Eminem - Lose Yourself」に。 T2: 歌詞欄の文字数カウント表示を削除。 T4: Hero の Lyra を clamp(3rem,13vw,6rem) + font-extrabold で大きく太く。 T5: 下向き矢印を 20px → 32px、bottom-1 → bottom-0、p-2 → p-3 で拡大。 onClick で smooth scrollIntoView し、CSS スクロールに影響しない方式に。 T7: チュートリアル展開時、各カードを 130ms ずつ遅延して下から 持ち上げて出す .tutorial-card アニメを追加(reduced-motion で無効化)。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Genius検索ロジックを共有モジュールへ集約+StarField軽量化
Task 4 の軽量化・整理。 - lib/geniusSearch.ts を新設:TRANSLATION_PATTERN / isSongPageUrl / isTranslationHit / pickBestHit / GeniusHit 型を一箇所に。 /api/genius-url と /api/lyrics の重複(約100行)を解消。 - StarField: prefers-reduced-motion 時は静止画なので、初回1フレーム 描画後に rAF ループを停止(バックグラウンドでも CPU 消費ゼロ)。 resize 時のみ再描画。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
初回起動時のヒーロー飛ばしバグ修正+モバイルUI最適化
Task 2: 初回チュートリアル自動表示時、result セットに反応した スクロール effect がヒーローを飛ばしてチュートリアル先頭に 飛んでしまっていた。skipNextResultScrollRef で1回だけ抑制。 「使い方を見る」ボタンからの再表示は従来通りスクロールする。 Task 1: PC見た目は維持したまま、モバイルのみ調整。 - min-h-screen → min-h-dvh(アドレスバー伸縮でのジャンプ防止) - Hero min-h を dvh に、Turn lyrics into lessons. を 11→12px - ヒーロースクロール誘導の当たり判定を p-2 で拡大 - 実行ボタン / 使い方を見る / 歌詞を探す / 自動取得 / 削除X / 保存☆ / 候補リスト / レベル選択 にタップ領域用の max-sm: を追加 - 候補リストの primary/secondary 文字も max-sm で読みやすく Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
こと座銀河のヒーローセクションを追加
特大 Lyra ワードマーク+キャッチコピー(好きな音楽が教科書に。/ Turn lyrics into lessons.)と、こと座+流れる星雲背景を実装。 - 星雲は青↔紫を色相遷移で混ぜながら流す靄+筋の CSS アニメ - 上下グラデーションマスクでヘッダー・サイト背景になじませる - こと座は右50°傾き+透明度一定の光芒スパークル - 背景 StarField の明るさ・星数を控えめに調整 - prefers-reduced-motion で全アニメ停止 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
feat.共演曲でGeniusが非英語の翻訳ページに飛ぶ問題を修正
主アーティストのみでGenius検索し、各言語の翻訳アカウント ("Polskie tłumaczenia Genius"等)を確実に除外する。 - cleanTrack: primaryArtist() を追加(&/;/x/vs で先頭アーティストのみ抽出、 カンマは "Tyler, The Creator" 等を壊すため分割しない) - genius-url / lyrics: 共演フル名ではなく primaryArtist で検索 - 翻訳ページ判定を TRANSLATION_PATTERN に統一し多言語対応を強化 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
検索ノイズ除去+原曲優先、公式インストの取りこぼし修正
- karaoke/tribute/cover業者/workout/8-bit等のゴミ版を候補から除外 (isJunkVersion)。song検索とアーティスト集計の両方に適用。 - リミックス/アコースティック/ライブ等の装飾版は -70 減点し、公式の 原曲が上位に来るようランキング改善 (isDecoratedVersion)。 - 公式アーティスト自身のインストしか配信が無い曲(例: XXXTENTACION "SAD!")が消える問題を修正。instrumental は除外せず stripInstrumental で表記だけ剥がし studio 曲として残す(Genius のボーカル版へ誘導可能)。 - 検索ボックスのラベルを「アーティスト名・曲名を入力」に変更。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs(legal): 利用規約・プライバシーポリシーを Legal コンポーネントで刷新
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
背景の星を白く・透明度UP、文法レベルセレクタの高さ調整
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
アーティスト・曲名を単一検索ボックスに統合+Genius最適化
- 2枠(アーティスト/曲名)をGoogle風の単一検索ボックスに統合。query から artist/title を派生保持し、解析・YouTube・Genius・履歴はそのまま動作。 - 候補選択時は "Artist - Title" 表示、自由入力は splitQuery で分解。 - suggest API を統合検索向けに変更。songTerm を外して全フィールド検索にし、 scoreCombined でタイトル/アーティスト/結合のいずれにもマッチ。 - scoreTokenMatch を追加し、句読点・語順の揺れを吸収("drake gods" が "Drake God's Plan" にヒット)。アーティスト→曲名の順入力にも対応。 - feat./版表記を除去する cleanTrack を suggest/genius-url/lyrics に適用し、 Genius への曲ページ誘導精度を改善。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
歌詞入力をGenius直リンク化+プレースホルダー刷新
- 「歌詞を探す」ボタンを追加し、/api/genius-url で曲ページURLを解決して直接その曲のGenius歌詞ページを新規タブで開く(検索一覧ではなく曲ページへ) - 自動取得βは開発用に残しつつ、未入力でも押せてフィードバックを出すよう調整+色味を抑えて控えめに - 空欄時のカスタムプレースホルダー(指示文+「例 :」+サンプル歌詞、下方向フェード)を実装 - 「歌詞を探す」をアクセント配色で強調、hover時の暗転を控えめに Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
トースト+Undo・全削除の2段階確認・レート制限UI
- ブラウザ confirm/alert を全廃し、削除は楽観的実行+「元に戻す」トーストに - グローバルなトースト基盤(lib/toast.ts, components/Toaster.tsx)を新設 - 履歴/単語の削除と全削除を Undo 可能に(restoreEntry / restoreVocab 追加) - 全削除のみ 2 段階クリックで確認(ブラウザダイアログなし) - レート制限を 1日3回に変更(既定値 5→3) - 上限到達時は「今日のAPI枠を使い切りました。また明日お試しください」を表示 - 実行成功時に残り回数を X-RateLimit-Remaining ヘッダーで返し、実行ボタン横に数秒表示 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
YouTubeプレーヤー刷新+英日タイポgrafィのジャンプ率調整
- YouTubeを IFrame Player API 化し、外付けの再生/音量コントロールを追加 - アイコンボタン化+グラスモーフィズム hover、選択時の自動再生 - コンパクトバー単一モードに統一(動画は操作不可の視覚表示) - 動画の実アスペクト比を /api/youtube/aspect で取得し枠をフィット(黒帯除去) - LineCard: 英語を大きく+medium、和訳を小さく薄くして視線誘導を強化 - sample-result: stop by のイディオム解説を簡潔化 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
背景の星を尾引き化+スクロール体験とヘッダーを刷新
- StarField: マウス視差を廃しスクロール進捗で斜めに尾を引く演出に。星数削減・毎フレーム reflow 排除 - scroll-snap の固まりを解消(CSS snap 廃止 → JS の弱い非割り込み中央スナップ centerSnap.ts) - 中央フォーカスのメリハリ強化(周辺 scale/opacity を下げ中央に集中) - スマホでカード/文字を拡大して可読性向上 - カスタムスクロールバー(極細・ホバー金色、Chrome の ::-webkit-scrollbar 優先対応) - 読了プログレスバー(上端の金→青ライン)を追加 - ヘッダー Lyra ロゴ: ☆削除・Futura・太字・全幅で左寄せ・y 見切れ対策 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
空配列をキャッシュしない+失敗時の console.warn 追加
旧: data.videos が空でも setCached → 7 日間 cache hit で永久に空表示 新: videos.length > 0 のときだけキャッシュ。空キャッシュは無視して再 fetch HTTP エラー / 例外時に console.warn でデバッグ可能に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
解析中・結果直後に candidates が空でもスケルトン表示
旧: videos.length === 0 だと YoutubeCandidates 自体が return null で何も 出ない。fetchYoutube が解析より遅いと「YouTube エリアが空白のまま」に なるバグ。 新: YoutubeSkeleton(3 枚の pulse カード + 「取得中…」テキスト)を追加し、 title 入力済みかつ videos が未到着の間表示。 - loading 中: status=loading の YouTube エリアに skeleton - 結果直後: result セット後 videos 未着の場合も skeleton videos が来ると即本体に差し替え(同じ位置) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
.card-surface を不透明化、StarField が透けないように
旧: background rgba 0.5-0.7 + backdrop-blur で星が透けて視線散る 新: #1a1c27 → #14151e の完全不透明グラデ、blur 撤去(不要に) LineCard / HistoryPanel / YoutubeCandidates 等すべてのカード系で 星の透けを遮断し、テキストに集中できる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
星を多く・明るく・最下層に統合
- 星数: モバイル 60→150 / PC 120→250 - 瞬き opacity: 0.08-0.22 → 0.35-0.75(明るく目立つ) - canvas で背景色 #0a0a0f を毎フレーム塗りつぶし → 透過なしの完全背景管理 - body bg を transparent に(canvas が視覚的背景を完結) - canvas z-index: 0 → -1 で最下層に固定 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
body 背景の不透明色が canvas を隠していたため透過化
- body background から #0a0a0f を削除(html bg に既存)。radial 2 つだけ残す - StarField canvas: -z-10 → z-index: 0 で body 背景の上、SiteHeader 等の下に 正しく描画される位置に これで星屑が実際に見えるようになる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
こと座を体現する静かなパーティクル背景
Canvas 2D で星屑を描画。Three.js 不要。 - 星数: モバイル 60 / PC 120 - 色: 70% 金 (Vega) + 30% 淡青 (琴座 ε)。opacity 8-22% で控えめ - 微細な瞬き(sin 波)、マウス位置に応じた depth 視差(近い星ほど動く) - prefers-reduced-motion: reduce で動き停止 - pointer-events-none / -z-10 / aria-hidden で操作・A11y への影響なし - DPR 上限 2 でモバイル GPU 過負荷を防止 Stagger / custom easing は既存 verse-enter で実装済みのため変更なし。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
モバイル sticky FAB を撤去し PC と同じレイアウトに統一
過去の [UX-6] でモバイル時の実行ボタンを sticky FAB 化していたが、 「使い方を見る」リンクがモバイルで非表示になる副作用があった。 - 「実行」+ ローディング文言 + 「使い方を見る」を flex-wrap で モバイル / PC 共通の通常レイアウトに(hidden sm:flex → flex flex-wrap) - モバイル sticky FAB の固定 div を完全に削除 - form の pb-20 sm:pb-0 を pb-0 のみに(sticky FAB 用の余白不要) - 未使用になった useMagneticHover(runFabRef) を削除 モバイルでもスクロールで「実行」+「使い方を見る」が両方見える。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
自動取得 β モードの placeholder を「API契約後に解禁」案内に
商用化前の Genius スクレイピングは Vercel cloud IP で 403 がほとんど。 ユーザーに「未来の機能」として伝える文言に変更。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
「タップすれば」を Tap any chunk (yellow) に紐付け修正
旧: 「タップすれば」が to highlight it, (sky) に紐付いていたが、 意味的には Tap any chunk (= タップ動作) に対応すべき。 chunk_id 1 → 0 に修正。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
through the songs you love. を 1 チャンクに統合(緑で統一)
旧: "through the songs" (緑) と "you love." (橙) で別チャンクになり、 関係代名詞節としての一体性が見た目で分断されていた Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル最終行の和訳調整
「それだけです — 」→「以上です。 —」 「楽しんでください。」→「楽しんでください!」 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル「The AI splits each line into chunks ...」を削除
冗長だったため。残り4行(Thanks / Paste / Tap / That's it)でチュートリアル成立。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル 1 行目を「Thanks for stopping by!」に変更
「Lyra turns any song lyric into an English lesson.」→ 「Thanks for stopping by! / ご覧いただきありがとうございます!」 idiom 解説も stop by に差し替えて教材として活きる形に。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Lyra 本家 BMC ハンドル "LyraStudy" を fallback として埋め込み
Vercel の env var UI で NEXT_PUBLIC_BMC_HANDLE が空白で保存される 問題に遭遇したため、env が空でもフォールバックで動くようにする。 env var が設定されていれば優先(フォーク派生用)。 normalizeHandle も "buymeacoffee.com/xxx" (https 無し) を弾けるよう調整。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
NEXT_PUBLIC_BMC_HANDLE が URL 全体でも動くよう正規化
Vercel の env Value に "https://www.buymeacoffee.com/<user>" 全体を入れても、 "@user" を入れても、ハンドルだけを入れても OK になるよう normalizeHandle を追加。 これまで URL 全体を入れると重複した URL が生成されて 404 になっていた。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PC zoom 1.65 → 1.70 微調整
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs: 第3回監査レポート (AUDIT_REPORT_3.md)
dead style 削除と PwaInstallBanner の表示判定バグ修正の記録、 ユーザー判断項目(未使用 utility 整理、PWA banner の挙動選択)を整理。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
dead style 削除 + PwaInstallBanner の表示判定バグ
- .verse-focus クラスを削除(VerseDisplay.tsx の className と globals.css)。 centerFocus は .focus-line を使っているため、verse-focus は dead style - PwaInstallBanner: マウント時の visit_count < MIN で早期 return する旧設計を 修正。これだと初回マウント後に解析・保存等で count が増えても beforeinstallprompt リスナー未登録のままで永遠にバナー出ない。 リスナー常時登録し、event 発火時に最新 count を判定する方式に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PC zoom 1.6 → 1.65 微調整
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PC zoom 1.25 → 1.6 に上げる
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PC zoom 1.5 → 1.25 に下げる
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PC (lg 以上) は自動で zoom: 1.5 適用
写真3,4の「拡大率150%」表示を、ユーザーがブラウザ zoom を操作しなくても 標準で見られるように。スマホ(< 1024px)は横スクロール回避のため 100% 維持。 scroll-snap / centerFocus / magnetic / getBoundingClientRect は zoom 後の 値で動くため、各種計算は自動で追従。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
revert(layout): max-w-6xl → max-w-3xl に戻す
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
max-w-3xl → max-w-6xl で 100% zoom 時の両端余白を縮小
写真3,4の「拡大率150%」の見え方を 100% zoom で再現するため、 コンテンツ最大幅を 768px → 1152px に拡大。フォント・padding は 現状維持(写真の文字サイズは zoom 由来のため)。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
↑↓ キーで前後カードへスムーズ移動
- lib/keyboardNav: window keydown で focus-line 要素群を辿り、現在の 中央(viewport の 0.55)に最も近いカードの前後へ scrollIntoView - ClientInit で setup/cleanup - 入力欄フォーカス中・focus-line が画面外(フッター閲覧中等)はハイジャックせず通常スクロール - prefers-reduced-motion: reduce では behavior auto Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
中央外のカードをクリックでそのカードまで smooth scroll
focus-line ラッパーに onClick を追加。クリック位置が centerFocus 中央線 (viewport の 0.55)から 15% 以上離れていれば scrollIntoView で吸い寄せ、 中央付近のカードならクリックを ChunkSpan の active トグルに渡す。 scroll-snap-align: center と組み合わせて snap 位置にピタッと止まる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
フォーカス中央を画面の上から 55% に下げる
上のカードが見切れる症状の修正。snap と centerFocus を以下に同期: - centerFocus.viewportCenter: 0.4 → 0.55 - scroll-padding-top: 80px → 20vh - scroll-padding-bottom: 30vh → 10vh snap 位置 = (top + viewportH - bot) / 2 = 0.55 * viewportH で centerFocus と一致。上のカードに余白ができ、下のカードは視野外へ。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カードを気持ち小さく、上下の前後カードが見える程度に
- padding: p-5 sm:p-7 → p-4 sm:p-5 - 英語: 18-22px → 16-19px - 和訳: 15-17px → 13.5-15px - ノート: 13.5-14.5px → 12.5-13.5px - margin / pt も少し詰める - VerseDisplay space-y-6 → space-y-5 scroll-snap で中央カードに吸い付くのは維持しつつ、視野の上下に 前後カード(薄く scale 0.85)がちゃんと見える高さに。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
横幅を max-w-3xl に戻し、カード/フォント/行間を拡大
ユーザー希望「画面に 1 チャンク + 前後チャンクの一部が映る」サイズに調整。 - SiteHeader / page / vocab: max-w-3xl を復活させ中央寄せ+両端余白 - LineCard: - padding p-3.5 sm:p-4 → p-5 sm:p-7 - 角丸 rounded-xl → rounded-2xl - 英語: 15-16px → 18-22px (sm) - 和訳: 14px → 15-17px (sm) - ノート: 12.5px → 13.5-14.5px (sm) - 各 gap も微増 - VerseDisplay: 行間 space-y-3.5 → space-y-6(カードが大きい分息継ぎも広く) scroll-snap で各カードに吸い付くので、画面中央に 1 カード+上下に 前後カードの一部が見える「iPhone ロック画面の歌詞」風に。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
SiteHeader / トップ / 単語帳の max-w を撤去してフル幅化
ローカル写真の「広い表示」に合わせ、max-w-3xl 制約を外して px-4 sm:px-6 のみの左右 padding に。利用規約 / プライバシーは 長文の可読性のため max-w-2xl を維持。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
カード外へマウスが出たら chunk active を解除
PC でマウスを離してもハイライトが残り続ける問題を修正。 カード右上の「☆単語帳へ」ボタン撤去(7a5bb72)で、A2F-2 で removed していた onMouseLeave を復活させられる状態になったため復活。 タッチデバイスでは onMouseLeave が発火しないため tap-toggle 挙動は維持。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
chunk active 時の右上「☆ 単語帳へ」ボタンを撤去
スクロール中にチラチラ出て邪魔だったため削除。chunk の単語帳保存は ノート行(スラング/イディオム/文法)の☆ボタンで引き続き可能。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
メリハリ更に強化+止まる位置を画面中央より少し上に
- scale: 0.9..1.0 → 0.85..1.0 - opacity: 0.4..1.0 → 0.3..1.0 - centerFocus の viewportCenter を innerHeight * 0.4 に変更 (画面の上 40% あたりがフォーカス中央扱い) - html の scroll-padding-bottom を 30vh、scroll-padding-top 80px に 不均等化。scroll-snap-align: center 時の実効中央が上に押し上がる 人間の視線は画面中央より少し上に集まりやすいので、それに合わせた配置。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
scroll-snap で各チャンクに吸着+イージング強化
- html に scroll-snap-type: y proximity を適用。.focus-line に scroll-snap-align: center で、近づいたチャンクが画面中央にピタッと 吸い付く。proximity なので強制度は緩く、入力欄スクロール等は普通通り - scroll-padding-top: 64px で SiteHeader(sticky)分のオフセット - focus-line の transition イージングを cubic-bezier(0.05, 0.7, 0.1, 1) に強化。最後の 30% を急減速して「最後ピタッ」感を増す - prefers-reduced-motion: reduce 環境では scroll-snap-type: none で無効化 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
中央フォーカスのメリハリを強化
scale: 0.94..1.0 → 0.9..1.0(縮小幅を 6% → 10% に) opacity: 0.55..1.0 → 0.4..1.0(透明幅を 45% → 60% に) 周囲のチャンクがよりノイズ化され、中央のチャンクへの視線誘導が明確に。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
画面中央フォーカス+verse 登場の custom easing
1. 中央フォーカス - lib/centerFocus: window scroll/resize で [data-focus-line] 要素の中央 からの距離を測り、CSS 変数 --focus-scale (0.94..1.0) / --focus-opacity (0.55..1.0) を更新。requestAnimationFrame スロットル、reduced-motion 無効 - ClientInit で setupCenterFocus を起動・クリーンアップ - VerseDisplay: 各 LineCard を <div class="focus-line" data-focus-line> でラップ - globals.css: .focus-line に CSS 変数受け+ expo-out 系イージング 2. Verse 登場 - .verse-enter .verse-line の transition を cubic-bezier(0.16, 1, 0.3, 1) に変更(既存の 50ms stagger はそのまま)。最初スッ、最後ゆっくり 中央のチャンクが大きく濃く、周囲は控えめになり集中しやすい UI に。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
magnetic strength をさらに弱める
主要ボタン: 0.15 → 0.08 リンク: 0.2 → 0.1 「ふっと感じる」程度の控えめな吸い付きに。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
曲候補を横スクロールの正方形カルーセルに刷新
縦リスト → 横スクロール(snap-x snap-mandatory)の正方形カード。Spotify ぽいアートワーク主役 UI。 - 各カード: aspect-square / rounded-2xl / 背景サムネ全面 / 下グラデ overlay でタイトル可読性確保。hover で中央に accent ▶ アイコン + 軽い zoom - 初回マウントで右から流れ込む slide-in-right を i*70ms stagger で適用 - no-scrollbar utility(globals.css)でスクロールバー非表示 - tailwind.config に slide-in-right keyframes + animation Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
入力欄・レベル選択に控えめなアニメ追加
- .focusable: hover で border 明るく+背景わずかに濃く、focus で1px浮く transform: translateY(-1px)。prefers-reduced-motion で無効化 - LevelSelector: 非選択カードに hover で -translate-y-0.5 + 薄影。 active 側は shadow をやや強めて選択感を明確化。motion-reduce: hover で translate を打ち消し Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
magnetic strength を弱める
主要ボタン: 0.25 → 0.15 リンク: 0.35 → 0.2 吸い付きが強すぎる印象を控えめに。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チャンクホバーで Glow+scale、主要ボタンに磁石効果
- lib/useMagneticHover: マウス近接で要素が吸い寄せられる Magnetic effect カスタムフック。requestAnimationFrame でスロットル、transform 移動。 pointer: coarse(タッチ)と prefers-reduced-motion: reduce は自動スキップ - ChunkSpan: active 時に box-shadow で薄い Glow(色の 55 アルファ・12px 拡散) + transform scale(1.04) でフワッと浮く。transition-[bg,box-shadow,transform] duration-200 ease-out - 「実行」(PC submit) / Mobile sticky FAB / 「使い方を見る」リンクに useMagneticHover を適用。strength 0.25〜0.35 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
「使い方を見る」「単語帳」リンクから☆を削除
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
英文 Inter / 和文 Noto Sans JP の混植最適化
- next/font で Noto Sans JP(400/500/700)を変数 --font-noto-jp で導入。 preload: false で初回ロードを軽くし、display: swap で OS フォントから差し替え - tailwind.config: font-sans を「Inter → OS Latin → Noto Sans JP → OS JP」に 並び替え。font-en / font-jp ユーティリティ ファミリーも追加 - globals.css: - body に font-feature-settings: "palt" 1, "kern" 1(和文プロポーショナル詰め + 欧文カーニング) - [lang="en"] / .font-en に Inter 強制+ liga / calt / kern / ss01 で 欧文の表情を最大化。letter-spacing -0.005em - 既存の <span lang="en"> 要素(チャンク・サンプル英文・YouTubeタイトル等)に 自動適用されるため、HTML 側の修正は不要 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
content に ./lib を追加(kind-styles の class が JIT 漏れしてバッジ色消失)
lib/kind-styles.ts に書いた text-violet-300 / bg-violet-400/10 等の class が tailwind.config.content からスキャンされず CSS 生成されないため、 単語帳のタグから色・背景・余白が消えていた。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
使用例の英文を大きく、和訳を小さく、インデント揃え
英文と和訳が同じ 11.5px で和訳の方が大きく見える錯覚があったため: - 使用例 英文: 11.5px → 12.5px - 使用例 和訳: 11.5px → 10.5px - 「使用例:」をラベル列にし、英文と和訳を本文列に。和訳のインデントが 自動的に英文の左端と揃うように flex 構造へ変更 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
タグデザイン統一+履歴のアーティスト色を控えめに
- lib/kind-styles.ts を新設し KIND_LABELS / KIND_BADGE / KIND_BADGE_BASE を集約。LineCard NoteRow と VocabList VocabRow が同じ定義を import するので 色・角丸・サイズが必ず一致する - LineCard NoteRow: 個別 label/color/bg props を受け取らず、kind のみ受け取って 内部で badge ルックアップ。VocabList と同じ mt-[1px] に揃える - HistoryPanel: アーティスト名を text-sub → text-muted。曲名(白)との対比が 強まりパッと見の主従が明確に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
視覚階層強化+行間余白拡大
- 和訳行(natural_segments / chunks.ja fallback)に opacity-80 を適用し、 英語=主役 / 和訳=補助のヒエラルキーを明確化。 英語学習ファーストの視線誘導「まず英語を見る→わからない部分の和訳」に整合 - VerseDisplay の line 間隔 space-y-2 (8px) → space-y-3.5 (14px)。 スマホスクロール時の息継ぎを確保 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
区切りドットの左右で色が違っていたのを accent 統一
左 bg-accent/70(金)右 bg-accent-2/60(淡青)と二色対比していたが、 「右だけ色違い」に見えて気になるので両端とも bg-accent/70 に統一。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
「使い方を見る」リンクを見つけやすく調整
10.5px / text-sub → 12px / text-accent-2 + ☆アイコン + 薄いアンダーライン。 実行ボタンの主張は崩さずに、ユーザーが気付ける程度の視認性に上げる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル位置変更に合わせて above → below に修正
チュートリアルがフォームより上に移動したため、「Paste ... above」は 意味が逆になっていた。「below」「下の欄に」に修正。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル本文をサイト上部に移動+説明バナーを削除
- 「☆ これはチュートリアルです...」バナーと×閉じるボタンを完全に撤去 - isTutorial && result の時、解説本文(verses)をフォームより上に表示 - 通常 result は従来どおりフォーム下(!isTutorial 限定) - tutorialBannerRef / clearSample / useEffect の isTutorial 分岐を撤去して スクロール target は「履歴復元 = youtube」「それ以外 = verses」の 2 分岐に - チュートリアル閉じる方法: 自分の歌詞を入れて「実行」(onSubmit で sampleMode=false) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
初回自動展開+「使い方を見る」を実行ボタン行に縮小
- フォーム上部の CTA バナー(「Lyra にようこそ…☞ 使い方を見る」box)を撤去 - PC 用 submit 行の右端に「使い方を見る」を 10.5px のテキストリンクとして配置 (実行ボタンとは対比的にミニサイズ) - 初回訪問時(localStorage に lyra:tutorial_shown が無い)に自動で setSampleMode(true) + setResult(SAMPLE_RESULT) し、チュートリアルを上部に展開。 既存 useEffect で result セット時にスクロールも走るので冒頭が見える - 一度展開したら flag を立てて 2 回目以降は出ない モバイルからのチュートリアル再呼び出し導線は廃止(初回自動展開で十分、PC では submit 行から再表示可能) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
visit_count を「実利用イベント」ベースに変更
旧: PwaInstallBanner マウントで visit_count++ → リロードでも増える 新: trackEvent が MEANINGFUL_EVENTS(analyze_submit / view_sample / save_vocab / export_vocab / history_restore)を発火した時のみ ++ 本当のリピーターだけがバナー候補になる。LyricsForm.onRestoreEntry にも history_restore イベントを追加。 - lib/analytics: VISIT_COUNT_KEY 移管、MEANINGFUL_EVENTS、getVisitCount - PwaInstallBanner: マウントで count++ を廃止、getVisitCount で読むだけ - LyricsForm: 履歴復元時に trackEvent("history_restore") Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
MAX_TOKENS で切れても normalize 成功した部分結果を返す
旧: finishReason === MAX_TOKENS で切れていたら parse/normalize 成功でも throw → ユーザーは何も見られない 新: normalize 成功なら verses を返却し、section_name に「(末尾切れ)」を 付けて UI で気付けるようにする 長尺曲で最後の数行だけ切れたケースで「丸ごと失敗」になるのを防ぐ。 parse も normalize も失敗した本当に何も返せないケースだけ throw。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
SmoothScrollProvider → ClientInit リネーム仕上げ
前 commit で git mv 済み。本コミットで export 名と全 import を更新: - ClientInit.tsx: export 名と JSDoc を ClientInit に - app/layout.tsx: import と JSX 利用箇所 - README.md: 構成図 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
重複判定に context (artist+title) を含めて別曲の同じ単語を保存可能に
これまで「kind + en + ja 完全一致」だと弾いていたが、別の曲で同じ単語が 出てきても保存できないのは学習用途と合わない。context.artist + title を 判定式に含めて、別曲なら別エントリとして残せるようにする。 - lib/vocab: matchKey ヘルパー新設、isSaved/saveVocab/removeByContent に ctx?: VocabContext を追加 - LineCard: ctxForSave を一元化して chunk と note 全ボタンに渡す 既存データには影響なし(新規保存時のみ判定が緩む)。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs: 第2回監査レポート (AUDIT_REPORT_2.md)
ジム中の自律監査結果。 - 実施した修正 3 commit の整理 - ユーザー判断が必要な 5 項目(vocab 重複判定 / MAX_TOKENS 部分結果 / LineCard onMouseLeave / SmoothScrollProvider リネーム / PWA visit_count) - 触らないと判断した項目の根拠 - 朝の確認手順 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs(readme): 最新機能と構造を反映(単語帳・チュートリアル・PWA・GA4 等)
components/ と lib/ の構成図を最新ファイル群(SiteHeader, VocabList, PwaInstallBanner, gemini-cache, vocab, vocab-export, analytics, sample-result 等)に更新。 「主な機能」セクションを新設しチュートリアル / 単語帳エクスポート / モバイル sticky FAB / オートスクロール / PWA / GA4 イベントを整理。 mock/ ディレクトリ(Claude.ai Artifact 用モック)を追記。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs: SmoothScrollProvider の名称と実体の乖離をコメントで補足
実体は localStorage マイグレーションのみ(Lenis は使っていない)。 将来スムーススクロール再導入する前提で名称は残置、と明記。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
監査で見つけた軽微なバグ・リソース問題を修正
- SongSuggest: items 縮小時に古い itemRefs を捨ててリーク防止 - lib/cache: keyYoutube に trim 追加(先頭末尾空白でキーがブレないように) - LyricsForm.fetchYoutubeFor: 連続実行/履歴復元で古いリクエストの結果が 最新の setVideos を上書きするレース対策(ytReqIdRef で識別) - lib/gemini-cache: create 失敗時 5 分間 backoff(連続失敗で毎リクエスト 毎に create を試みてコスト浪費するのを防ぐ) - components/Analytics: GA4 で deprecated の anonymize_ip 引数を削除 (GA4 は IP 匿名化が自動) すべて挙動を壊さない軽微修正。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
モック原型を現サイト構造に更新+歌詞解説サンプル追加
mock/lyra-base.tsx を最新仕様に同期: - SiteHeader (sticky, 22-24px Lyra☆ + 単語帳)、hero 撤去 - チュートリアル CTA バナー(「Lyra にようこそ!…☞」+ 「使い方を見る」) - 入力ヘルプを欄下に右寄せ小サイズ - 「実行」ボタン + 待機文言(和訳/組み立て中 + 免責) - 解説サンプル: 自作英文2行("Open the window..." / "Every song you love...") × chunks 色付き × natural_segments で並び替え × 文法/イディオムノート × 「☆ 単語帳へ」active ボタン + ノート行右端の☆ - フッター: プライバシー記述 + 利用規約/プライバシー/単語帳 + 開発を応援する 著作権セーフな自作英文。Claude.ai に貼って星空背景/star アニメ等を依頼する用。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
待機文言から「AI」を削除+3段目を k-pop 翻訳の案内に変更
- 「AI が」プレフィックスを loadingMessage の2文と loadingDisclaimer の1文から除去 - 3段目: 「特にスラング・地域表現・固有名詞は推測になりがちです」 → 「k-pop などの歌詞も翻訳できるかもしれません」(前向きな案内に) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
待機文言から YouTube 誘導を削除+免責コピーを3段階で表示
- 「下のYouTube候補から曲を選んでおく」を削除 - 「AI の和訳・チャンク分けは完璧ではないことがあります」など、 解析結果の正確性に関する免責を 3 段階で時間ローテーション表示 時間境界: < 12s: AI の和訳やチャンク分けは完璧ではないことがあります < 35s: 気になる箇所は辞書でも確認すると、より確実です 35s+: 特にスラング・地域表現・固有名詞は推測になりがちです Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
履歴復元時は YouTube 候補にスクロール(新規は verses 先頭のまま)
restoredFromHistory state を追加し、useEffect で 3 分岐: - チュートリアル → tutorialBannerRef - 履歴復元 → youtubeRef(未到着なら versesRef にフォールバック) - 新規解析 → versesRef 履歴復元では曲の再選択が必要になるケースが多いため、YouTube 候補で 止めるほうが導線が短い。新規生成時は実行前にユーザーが既に曲を選んで いるはずなので、解説本文の先頭で止める従来挙動。 onRestoreEntry の旧 window.scrollTo は useEffect に統一して撤去。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアルバナー残留を参照一致で根絶
sampleMode フラグだけだと setSampleMode(false) のタイミング問題や古い build のキャッシュで残留する可能性があった。 result === SAMPLE_RESULT (オブジェクト参照一致)も AND 条件にすることで、 別の解析結果が来た瞬間に必ずバナーが消える。 - isTutorial = sampleMode && result === SAMPLE_RESULT を一元化 - バナー表示 / submit FAB / VerseDisplay の meta も isTutorial で判定 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
YouTube 候補の後着でスクロール位置がズレる問題+チュートリアル消えない再発を対策
- scroll useEffect の依存に videos を追加: fetchYoutube は /api/analyze より 遅れて完了することが多く、その時点で YouTube candidates が verses の上に 挿入されて verses が下に押し下げられる → 「YouTube に飛ばされた」現象。 videos 変化時にも再スクロールで正しい位置を維持。 - onSubmit の setResult(data) 直後にも setSampleMode(false) を追加(冒頭でも 呼んでいるが再描画タイミングの保険として2重防御) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル時はバナーから、通常時は verses 群からスクロール
resultsRef を versesRef にリネーム + tutorialBannerRef を追加。 useEffect で sampleMode を見て target を切り替え。 チュートリアル中は説明文が最初に見える位置で止まる。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアルバナー残留+スクロール先 YouTube 化を修正
- onSubmit の早期 return(空歌詞 / 字数超過)時に sampleMode と result を リセットしてなかったため、チュートリアル表示中に空のまま実行を押すと バナーが残留していた。両 return 経路で setSampleMode(false) + setResult(null) - スクロール target を YouTube candidates も含む外側 div から、verses 群を 直接ラップする div に移動。チュートリアルバナー / YouTube 候補が結果上に あっても、解説本文の先頭で画面が止まる Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
オートスクロールの行き過ぎを修正(block: center → start)
block: "center" だと結果コンテナの中心が画面中心に揃うため、コンテナが 長いと先頭が画面外(上)に行きすぎていた。"start" に変更し、scroll-mt-16 で SiteHeader 分の余白を取って先頭がヘッダー直下に来るようにする。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
解説出力時に解説先頭を画面中央へオートスクロール
result がセットされた3つのタイミング(チュートリアル表示・解析完了・履歴復元) で、結果コンテナの先頭が画面中央に来るよう scrollIntoView を発火。 DOM 描画後に発火させるため 80ms 微遅延。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル和訳の文言調整
- 「各行を 和訳と解説をつけて」→「各行に 和訳と解説をつけて」 - 「次に星マークをタップで」→「星マークをタップするだけで」 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
入力欄の placeholder を Eminem - Lose Yourself に変更
アーティスト: 「Kendrick Lamar」→「(例) Eminem」 曲名: 「DNA.」→「Lose Yourself」 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル CTA 先頭の☆を削除
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
チュートリアル CTA を呼びかけ調に短縮
「初めての方へ。Lyraの使い方を、解説フォーマットそのままで確認できます。」 →「Lyra にようこそ!初めての方はここをクリック☞」 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
サンプル → 自己言及型チュートリアルに変更
「Lyra の使い方を英語で書いた文章」を解析結果フォーマットそのまま (chunks/natural_segments/解説)で表示。API は呼ばず即時表示。 - sample-result.ts: Twinkle Twinkle → How to use Lyra(5 行・自己言及型) チャンク分割・色対応・スラング/イディオム/文法解説をすべて手書きで本物の体験に - LyricsForm: sampleMode state を追加 - loadSample は artist/title/lyrics を埋めない(ユーザー自身の入力導線を残す) - 結果上に「これはチュートリアルです / 自分の歌詞を入れて実行」バナー+×閉じる - sticky submit FAB はサンプル中も表示(実行への導線維持) - clearSample で result/sampleMode をリセット - onSubmit 開始時に sampleMode=false(本物の解析に遷移) - CTA 文言: 「サンプルを見る」→「使い方を見る」、説明文も自己言及的に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
アーティスト/曲名のヘルプ文を入力欄の下に右揃え小さく配置
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
トップ hero のタグライン2行を削除(SiteHeader のみに統一)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
コピー調整・ヘッダー再構成
- 解析ボタン: 「歌詞をひもとく」→「実行」、関連語も「実行中…」「解析できる行が…」に統一 - 保存トースト: 「★ 星に刻みました/☆ 星座から外しました」→「単語帳に追加/削除しました」(素直な表現に) - トップ hero: 大きな「Lyra☆」見出しを削除(SiteHeader と重複していた) - タグライン: 「ひと節に、英語の宇宙が広がる」を主見出しに、サブを「好きな曲で英語を学ぼう」に - SiteHeader: Lyra☆ を 17px → 22-24px に拡大、hero 不在を補う存在感に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Claude.ai Artifact 用のモック原型 (mock/lyra-base.tsx) 追加
claude.ai に貼り付けて「これをベースに magic を起こして」と依頼するための 単一 React ファイル。現サイトの構造(ヘッダー/ヒーロー/サンプルCTA/フォーム/ 結果サンプル/フッター)をダミーデータで再現。tsconfig から mock/ を除外。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
CSV / Anki TSV エクスポート
/vocab に「CSV」「Anki」ボタン追加。Blob でローカル保存。 - CSV: 全フィールド(kind/en/ja/line/lineJa/artist/title/savedAt)、BOM 付きで Excel 文字化け回避 - Anki: タブ区切り 3 列(Front=英語 / Back=解説+使用例+曲名 / Tags=Lyra+kind+artist)。HTML 整形で Anki Desktop が解釈 - GA4 event: export_vocab (format, count) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
共通ヘッダー・コピー Lyra語化・サンプルデモ・ローディング段階表示・PWA バナー・GA4 計測
UI/UX 全体磨き上げ: - SiteHeader: sticky 共通ヘッダー(Lyra☆ + 単語帳)を全ページに統一。各ページのローカル戻るリンクを撤去 - タグライン: 「ひと節に、英語の宇宙が広がる」(感情訴求+機能説明の2段) - コピー: 解析ボタン「歌詞をひもとく」、保存トースト「★ 星に刻みました/☆ 星座から外しました」 - accent-2 (#9CC9E8 淡青) を tailwind に追加(琴座 ε/β の色感) - VerseDisplay: 区切りを「細罫線 + accent ドット + section名 + accent-2 ドット + 細罫線」に - LyricsForm: アーティスト/曲名のヘルプ一文追加、モバイル sticky submit FAB(safe-area 対応) - サンプルデモ: Twinkle Twinkle Little Star (パブリックドメイン、Lyra=琴座テーマと整合) で待ち時間ゼロ体験 - ローディング: 経過秒に応じた段階メッセージ(分割中→AI解析中→もう少し→もうすぐ完成) - PwaInstallBanner: beforeinstallprompt を訪問2回目+30日 dismiss TTL で表示 - GA4: analyze_submit / view_sample / save_vocab / remove_vocab / retry_analyze / pwa_install_* Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
ページヘッダーの☆装飾を削除
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
ノート系で単語を大きく強調・使用例に日本語訳併記・曲名右詰
- 解説本文の冒頭「単語: 説明」を分離し、単語を 20px font-semibold で主役表示 - LineCard 保存時に natural_segments を結合した lineJa を context に格納 - 使用例の英語の下に日本語訳を併記(既存データは後方互換で英語のみ) - 出典の曲名は右詰でカード下端に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
ノート系は解説本文を主役に、歌詞行は使用例として小さく表示
スラング/イディオム/文法では「en=歌詞行 / ja=解説」と「context.line=歌詞行」が 重複していたため、ノート系のみ表示構造を変更: - 解説本文 (ja) を 15px で主役表示 - 歌詞行 (context.line) を「使用例:」プレフィックス付きで小さく - chunk 系はこれまで通り英語フレーズを主役に Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
単語帳機能を追加(保存・一覧・フィルタ・検索)
- lib/vocab.ts: localStorage CRUD(history.ts と同方式、最大500件) - LineCard: active chunk 右上に保存ボタン、ノート行(slang/idiom/grammar)右端に☆。トグル動作+トースト - /vocab ページ: kind フィルタ・検索・並び替え(新着/古い/曲別)・削除・全削除 - ヘッダー右上とフッターに導線追加、sitemap にも /vocab を追加 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs: update audit report with second batch (G-K) implementations
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
iOS keyboard scrollIntoView on textarea focus, retry button + live countdown for errors, ARIA combobox on song suggest
- textarea onFocus: scrollIntoView({block:center}) after 300ms for iOS keyboard - error display: inline 再試行 button (formRef.requestSubmit), retryAfter live decrement via setInterval, friendly 秒/分 format - SongSuggest: useId() for listbox/option IDs, onAria callback wires aria-controls/aria-activedescendant to input - input: role=combobox + aria-autocomplete=list + aria-expanded Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
localize note labels (slang/idiom/grammar -> スラング/イディオム/文法) for color-blind users + bump label size 9->10px, remove uppercase
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
compact YouTube player minimized mode + dynamic main padding when player visible
- minimized mode: 40x64 iframe + 1-line title + 拡大/× only - body.has-player(-min|-full) class drives main padding-bottom dynamically Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
align env.local.example with current default model, gitignore tsbuildinfo
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
docs: overnight audit report (changes, deferred items, review checklist)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
use x-real-ip for client key, add light rate limit (20/min) to suggest/youtube/lyrics
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
tap-toggle on LineCard, lock history while loading, dropdown outside-click, scroll active suggest item, larger delete hit area + confirm
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
restore focus-visible rings, improve text contrast for WCAG AA
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
pass artist/title to Gemini prompt for better first-person inference
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
type-guard request bodies, share MAX_LYRICS constant, splitter edge cases, history try/catch, videoId validation
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
remove dead FocusedScroll + gsap/lenis deps
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>