日本語と英語の切り替えに対応する

[ipusiron]

何をしたか

日本語UIだった本ツールに英語UIを足し、右上のボタンで切り替えられるようにしました。

既存の dancingmen-messages.js に「英語も同じキーを共有できる」設計コメントがあったため、
新しい辞書ファイルを作らず、この構造をそのまま広げています。
画面に触る層（言語の決定・data-i18n の適用・localStorage）だけを i18n.js へ切り出しました。
dancingmen-messages.js は document・localStorage 等を持てない（test/static.test.js が禁じている）ためです。

• 辞書は 68キー × 2言語（元は日本語24キー。HTMLの文言44キーを同じ辞書へ移した）
• 初期言語は ?lang=ja / ?lang=en → localStorage → ブラウザーの言語設定の順で決まる
• 切り替えると languagechange が起き、人形の代替テキスト・置換表26行・復号ボタン52個・サンプル一覧を作り直す
• script.js の t() が既定言語固定（DancingMenMessages.DEFAULT_LANG）だったのを、選択中の言語を見る形へ変更
• noscript は両言語併記（JSが動かない環境では切り替えられないため）
• README.en.md を新設し、README.md と相互リンク

見つけた不具合（2件、いずれも本PRで修正）

1. 状態メッセージが言語切り替えで消えていた

翻訳済みの文字列を status.textContent = t(...) で要素へ直接書いていたため、
切り替え時の作り直し（encrypt() / updateDecryption()）が走ると空になっていました。
貼り付け復号の「読めなかった部分: 「1」「!」」のような、消えては困る情報も失われます。

{ key, values } を statusMessages に覚えておき、描く直前に訳す形へ変更しました。
対象は5か所（validation-feedback / decode-status / save-status / font-copy-status / copy-toast）。
次の入力で消える従来の挙動は保っています。

実測（同じ状態で ja → en → ja）:

日本語: 使えない文字を取り除きました: 「,」「!」 ／ コピーできませんでした。文字列を選択して…
英語:   Removed the characters that cannot be used: “,”“!” / Could not copy. Select the text…
日本語: 使えない文字を取り除きました: 「,」「!」 ／ コピーできませんでした。文字列を選択して…
入力を直した後: （空・showクラスも外れる）

2. 320px幅の英語表示でタブが横にはみ出していた

.tab-button の white-space: nowrap が原因です。
日本語の「📓 置換表」は収まりますが、英語の "📓 Substitution table" が収まらず、
documentElement.scrollWidth が 355（ビューポート320）になり横スクロールが出ていました。
折り返しを許し、flexアイテムが縮めるよう min-width: 0 を足して 320 に収めました。

修正前  ja: 320 / en: 355（はみ出し tab-encrypt -35..67, tab-table 181..355）
修正後  ja: 320 / en: 320（3タブすべてではみ出し0）

実測（Playwright、Chromium、python -m http.server）

見たこと	結果
?lang=ja	html lang=ja、title「DancingMen CipherLab - ドイルの踊る人形暗号ツール」
?lang=en	html lang=en、title "DancingMen CipherLab - Sherlock Holmes Dancing Men Cipher Tool"
英語表示に残った和文	2件のみ＝noscript の併記と切り替えボタンのラベル「日本語」
切り替え → 再読込	ja → en に即座に変わり、localStorage に en が入り、再読込後も en
暗号化タブ	入力「Am here, Abe Slaney!」を保持。人形15個、Characters that can be encrypted: 15、代替テキスト M (with a flag)
復号タブ	復号結果「AM HERE ABE」と人形9個を保持。ボタンの aria-label は A (with a flag)
置換表タブ	26行を作り直し、aria-label は Enlarge A (no flag)。モーダルも英語（Close）、Escで閉じて元のボタンへフォーカスが戻る
サンプル一覧	Message 1: AM HERE ABE SLANEY。選択（m1）は切り替えを越えて維持
検証メッセージ	Ｈｉ, 1 → Removed the characters that cannot be used: “,”“1” / Full-width letters, full-width spaces and tabs became half-width
「6通すべて」投入	人形76個、Characters that can be encrypted: 76、PNG保存ボタンが有効化
CSP違反	0件（ja / en / 切り替え後 / 320px のすべて）
JSエラー・consoleエラー	0件

テスト

npm test は 60件 → 72件。全件パスします。

test/i18n.test.js（12件）で次を縛りました。

• 日英でキーの集合が一致し、差し込み名（{letter} 等）も一致する
• index.html の data-i18n* が指すキーがすべて両辞書にある（44キー以上）
• script.js が呼ぶキーがすべて両辞書にある（t("...") と { key: "..." } の両方を走査）
• 英語辞書に和文が残っていない（app.langButton だけ例外）
• t() が差し込みを埋め、リストを引用符で包み、知らないキー・欠けた値で throw する
• i18n.js を他のスクリプトより先に読み込む
• 表示中の文字列との一致で状態を判定していない
• 状態メッセージをキーで保持している（status.textContent = を禁止）
• noscript が両言語を併記している
• README.en.md があり、両READMEが相互リンクし、見出しに和文が無い

既存の test/html.test.js はスクリプトの読み込み順に i18n.js を足し、langToggle をID一覧へ追加しました。
既存テストは M.format("ja", ...) と言語を明示していたため、英語追加で壊れたものはありません。

ドキュメント

• README.md: 相互リンク、機能に切り替えの1行、「言語の切り替え」節、localStorage に入るのは言語の選択だけである旨、ツリー更新
• README.en.md: 英語として読める形で新規作成（丸写しではない）
• CLAUDE.md: 「Japanese-First Design ／ 英語辞書と切り替えは後回し」を「Bilingual UI」へ書き換え、
  子要素を持つ要素に data-i18n を付けない・表示文字列で分岐しない等の注意を明記

🤖 Generated with Claude Code