開発ダイジェスト · 暗記マスキング

バグ修正 7件 + UX改善 6件

静かに壊れる不具合の除去と、既存機能の露出改善。全項目をヘッドレスブラウザで自己検証済み。作り直しなし、単一ファイルの局所修正。

プレビュー: anki-masking.pages.dev ↗ commit 0d79d53 index.html +137 / −52

やったこと

重大

学習モードで黒塗りがめくれない/透ける

マスクツールのまま学習モードに入ると、ホバーで消えず中身も透けていた。tool-maskの半透明表示を学習モード中だけ打ち消す。

重大

Ctrl+Zで全作業が消える

21手以降やデータ読込直後の取り消しで白紙化。空の初期状態を履歴の起点に据え、全消去分岐を撤去。上限20→50。

重大

ペン線がundoで戻らない

履歴が浅いコピーで過去分まで書き換わっていた。深いコピーに変更。

重大

複数選択リサイズで別要素が飛ぶ

掴んだつまみと違う要素が変形。掴んだ要素1つに選択を絞る。

データ

複製/貼付したテキスト箱の入力が保存されない

cloneNodeでblurリスナーが複製されず履歴に載らなかった。委譲(focusout)1本に統合。

データ

Ctrl+VがOS画像貼付を潰す

アプリ内コピー後、スクショ貼付が効かなくなる。pasteイベント側で「画像が無ければ内部貼付」に分岐。

CSS

ハイライトの中心線が当たり判定を持つ

過去に踏んだ罠の生き残り。path→.fh-strokeに限定。

UX

ツールチップが出ない不具合を修正

position:relative+hover表示ルールの欠けを補完。ヘッダーは下向き表示。

UX

undo/redo/削除/複製に無効表示

押せるか/もう戻れないかを見た目で区別。

UX

濃さスライダーの色化け修正

色相を保ちalphaだけ変更。ハイライト選択時にもスライダーを表示。

UX

ファイルのドラッグ&ドロップ対応

画像/PDFは新規作成、.amkはデータ読込へ自動振り分け。

UX

書き出し後にマスク状態が戻らない副作用を修正

解答版/問題版の書き出し後、画面表示を元へ復元。

UX

ツールチップにショートカット併記

(V)(M)(H)(T)(G)(P)・Delete など。

前後の画面

修正前:起動直後の空画面
修正前 — 起動直後。何を押しても無反応で迷子になりやすい(ドラッグ&ドロップ導線を追加)。
学習モードでマスクがめくれる
修正後 — 学習モードで黒塗りにホバーすると下地が透ける(opacity=0)。主機能が復活。
undo/redoの無効表示
修正後 — 履歴が無い時はundo/redoが薄く無効表示。
ショートカット付きツールチップ
修正後 — ボタンのツールチップが表示され、ショートカットも併記。

テスト結果

シナリオ期待/観測結果
起動直後のundo/redo無効化disabled=true✓ OK
マスク3個描画→undo1回3→2(1手ずつ)✓ OK
undo連打2→0(白紙化バグ無し)✓ OK
redo0→1で復元✓ OK
学習モードでホバー→めくれopacity=0✓ OK
setAlpha単体(hex6/rgb/rgba/hex3)全て期待通り✓ OK
濃さ変更で色相保持rgb(255,255,0)→rgba(255,255,0,0.3)✓ OK
コンソールエラー全シナリオで0件✓ OK

判断待ち

  • テキストツール中に既存テキストを直接編集pointerdownの中核ロジックに触れる+「選択か即編集か」に好みが絡むため保留。
  • 空状態パネル・ショートカット一覧・保存メニュー統合見た目/文言/構成の好みで決まる範囲。方針をいただければ着手。
  • タブレット/タッチ対応現状はホバー依存でタッチ不可。PC専用と割り切るかの判断待ち。
  • GitHubへのpushこのクローンにリモート未設定。本番ankimasking.comへの波及可否を含め承認待ち。

詰まったこと

  • ツール切替のradioはdisplay:none。検証スクリプトはlabelをクリックする必要があった。
  • _redirects はNetlify専用記法(ホスト名分岐)。Cloudflare Pagesでは無効行として無視され実害なしだが移植不可。