diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..108b6d3 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,18 @@ +name: Test + +on: + push: + pull_request: + +permissions: + contents: read + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 22 + - run: npm test diff --git a/.gitignore b/.gitignore index e325e0b..a7ff372 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,3 @@ -# .github/workflows/ is ignored -.github/workflows/ # OS files .DS_Store diff --git a/CLAUDE.md b/CLAUDE.md index 9e33c39..760b3a5 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -8,48 +8,82 @@ DancingMen CipherLab is a web-based tool that implements the classical substitut ## Development Commands -This project has **no build, test, or lint commands**. It consists of static HTML, CSS, and JavaScript files that can be opened directly in a browser. +This project uses static HTML, CSS, and classic JavaScript. No build, npm install, or external dependencies are required. - **To run locally**: Simply open `index.html` in a web browser - **No dependencies**: No npm install, no build process, no external libraries - **Deployment**: Direct deployment to GitHub Pages (static hosting) +- **Tests**: `npm test` (Node.js 22 or later, built-in `node --test`); CI runs on push and pull_request +- **SVG check**: `node tools/build-full-svg.js --check` (no writes) +- **SVG regeneration**: `node tools/build-full-svg.js` (writes only assets/svg/full/) +- **Local HTTP**: `python -m http.server 8000 --bind 127.0.0.1`, then open http://127.0.0.1:8000/ ## Architecture Overview ### Core Components 1. **index.html**: Single-page application with three tabs (Encryption, Decryption, Substitution Table) -2. **script.js**: All cipher logic and UI interactions (~230 lines) +2. **script.js**: Input events, tabs, shared figure rendering, PNG export, decryption state, and native dialog 3. **style.css**: Styling and responsive design -4. **assets/svg/**: Dancing figure SVG images in two variants: - - `tight/`: Minimal spacing for text display +4. **assets/svg/**: Dancing figure SVG images in three variants (52 files each, 156 total): + - `tight/`: Immutable source for full SVG generation - `padded/`: With margins for individual character examination + - `full/`: Generated root viewBox expansion, used by both text displays and PNG export +5. **dancingmen-logic.js**: DOM-independent functions, exposed through globalThis.DancingMenLogic and CommonJS +6. **dancingmen-messages.js**: Japanese dictionary and formatter, exposed through globalThis and CommonJS +7. **test/**: Logic, samples, SVG integrity, layout, messages, HTML, contrast, formatting, static code, and README tests +8. **tools/build-full-svg.js**: Dependency-free Node generator, not used by the browser ### Key Architectural Decisions -1. **Space Encoding**: Spaces are represented by "flagged" characters (e.g., `Af.svg` indicates 'A' followed by a space). This preserves word boundaries while maintaining visual continuity. +1. **Flag rules**: A letter is flagged when its immediate next character is an ASCII space, or when it is the last character + of a line and the immediately following line contains a letter. Empty or space-only lines separate messages. -2. **Dual SVG Strategy**: Two SVG variants serve different purposes: - - Tight version for continuous text display +2. **SVG Strategy**: Keep the original 104 tight/padded assets byte-for-byte unchanged: + - Full version expands the tight viewBox by 5pt horizontally and 2pt vertically, without changing other SVG content + - Natural pt sizing, negative 5pt inline margins, flex-end alignment, and multiply blending preserve scale and advances - Padded version for character reference and selection + - Do not edit full files manually; regenerate them with the Node tool 3. **Pure Client-Side**: No backend, no API calls, no external dependencies. All cipher logic is contained within the browser. -4. **Event-Driven UI**: Tab switching and modal functionality use event delegation for efficiency. +4. **Event-Driven UI**: No inline handlers or styles. Decryption uses a token-line array rather than reading state from the DOM. + Tabs use roving tabindex and ArrowLeft/ArrowRight/Home/End without hard-coding the number of tabs. + The substitution table is built once. Only its buttons open the native dialog; Escape and close restore focus. ### Cipher Implementation The cipher follows these rules: - Each letter A-Z maps to a specific dancing figure -- Flagged versions (with 'f' suffix) indicate the character is followed by a space -- Total of 52 SVG files (26 letters × 2 states) +- Flagged versions use the 'f' suffix, following the two rules above +- Each SVG variant has 52 files (26 letters × 2 states) +- Font notation uses lowercase for unflagged letters and uppercase for flagged letters +- File-name notation accepts A.svg through Z.svg and Af.svg through Zf.svg +- Serializers trim outer blank rows and do not leave trailing spaces; internal blank rows remain +- Six original samples contain 76 letters over 12 rows when separated by blank rows +- Sample 6 has no trailing space; append one space to reproduce the source's final flagged E Key functions: -- `validateAndSanitizeInput()`: Input validation and sanitization (script.js:37-51) -- `encrypt()`: Converts plaintext to dancing figures (script.js:78-128) -- `appendDecryption()`: Builds decrypted text from clicked figures (script.js:189-200) -- Modal system for image zooming (script.js:3-22) +- `sanitizeInput()`: Normalize CRLF/CR, fullwidth Latin letters, and whitespace; remove unsupported code points; cap at 2,000 +- `caretAfterSanitize()`: Restore the caret using the sanitized prefix length +- `encryptText()`, `toFontText()`, `toFileNameText()`: Produce token lines and both notations +- `parseCipherText()`, `decodeTokens()`: Parse either notation and produce uppercase plaintext +- `renderFigures()`: Shared full-SVG renderer for encryption and decryption +- `layoutCipher()`: Logical PNG dimensions and figure coordinates +- `encrypt()`: UI processing; input events do nothing while isComposing, then compositionend processes committed text + +### PNG Export and Browser Security + +PNG export loads same-origin full SVG files with Image.decode(), caches each file in a Map, and draws them onto a white canvas +using multiply compositing at 2x scale. It rejects logical dimensions above 8,000px, saves toBlob output, and revokes the object URL. +No fetch or runtime SVG creation is used. file:// supports encryption, decryption, the table, and clipboard when permitted, +but PNG export deliberately shows the local-server guidance instead. Chromium on Windows has been verified; Firefox/Safari have not. +Clipboard absence or rejection is handled as a status message, without execCommand fallback. +Keep the meta CSP, no-referrer policy, and noopener noreferrer links. Meta CSP does not provide frame-ancestors protection. ### Japanese-First Design -The UI is primarily in Japanese, targeting Japanese Sherlock Holmes enthusiasts while maintaining international accessibility through the visual cipher system. \ No newline at end of file +The UI is Japanese. All dynamically displayed text, alt/title/aria labels, and messages must go through `t(key, values)` +and dancingmen-messages.js. The formatter rejects unknown keys and missing values. Do not add Japanese string literals to +script.js or dancingmen-logic.js. English dictionaries and a language switch are deferred to a later iteration. +Static HTML text may remain Japanese. Keep the README's sample/rule tables, file tree, and screenshots consistent with the code. diff --git a/README.md b/README.md index ba3f5df..14f3419 100644 --- a/README.md +++ b/README.md @@ -39,21 +39,13 @@ hub: true    +[](https://ipusiron.github.io/dancingmen-cipherlab/) **Day022 - 生成AIで作るセキュリティツール100** -**DancingMen CipherLab** は、シャーロック・ホームズの短編「踊る人形」に登場する古典暗号を再現・体験できるWebツールです。 - -本ツールでは、以下のような特徴を備えています: - -- 平文を入力すると自動で暗号化 -- 「旗付き人形」による空白表現 -- 視覚的に並ぶ人形で暗号の雰囲気を体感 -- 復号支援機能にも対応 - -本ツールは、古典暗号・推理小説・ビジュアル表現に興味をもつ初学者から研究者まで、幅広いユーザーを想定しています。 -学習・教育・創作支援など多様な用途に活用可能です。 -古典暗号やシャーロキアンに興味のある方、遊びながら暗号を学びたい方にもおすすめのツールです。 +**DancingMen CipherLab**は、シャーロック・ホームズの短編「踊る人形」に登場する古典暗号を再現・体験できるWebツールです。 +平文を人形へ暗号化し、人形の選択や暗号文の貼り付けで復号でき、原作6通のサンプルも試せます。 +古典暗号や推理小説に興味のある初学者から研究者まで、学習・教育・創作支援に利用できます。 --- @@ -65,76 +57,51 @@ hub: true ## 📸 スクリーンショット -> ->*暗号化の例* -> -> ->*復号の例* -> -> ->*置換表(平文文字がアルファベット、暗号文文字が人形文字)* + + +> *原作の5通目を2行で入力。1行目末尾のOにも旗が付き、ファイル名とフォント用の文字列を出力* + + + +> *フォント用の文字列「comE herE aT oncE」を貼り付けて「COME HERE AT ONCE」へ復号* + + + +> *A〜Zの旗なし・旗ありの置換表。ボタンはクリックとキーボードの両方で拡大可能* --- -## 🔍 本ツールの主な機能 +## ✨ 主な機能 ### 暗号化タブ + - アルファベット(A-Z)の英文を入力すると、自動的に対応する「踊る人形」画像に変換 - 空白文字は「旗付き人形」として表現(例:`A` + 空白 = `Af.svg`) - リアルタイムで暗号化処理を実行 -- 生成された人形画像はクリックで拡大表示可能 +- 全角英字・全角スペース・タブを半角へ置き換え、IMEの変換確定後に処理 +- 原作6通と「6通すべて」の7種類のサンプル +- ファイル名の列とGL-DancingMenフォント用の文字列を出力し、後者をコピー可能 +- HTTP配信時は暗号文をPNGで保存可能(file://では保存不可) ### 復号タブ + - 人形画像を順番にクリックして復号文字列を構築 -- 旗付き人形は自動的に文字+空白として認識 +- 旗付き人形を語の終わりとして認識し、結果の行末には空白を残さない +- フォント用の文字列とファイル名の列を貼り付けて復号可能 - 復号中の文字列をリアルタイムで表示 - クリアボタンで復号文字列をリセット可能 ### 置換表タブ + - A-Zまでのアルファベットと対応する人形画像を一覧表示 - 各文字の旗なし版・旗付き版の両方を参照可能 - 画像クリックでモーダル拡大表示機能 ### その他の機能 + - レスポンシブデザイン対応 - 日本語UI(シャーロキアン向け) - 純粋なクライアントサイド実装(外部API不要) - ---- -## 🏗️ アーキテクチャ - -### 技術スタック -- **フロントエンド**: Pure HTML5 + CSS3 + Vanilla JavaScript -- **ビルドツール**: 不要(静的ファイルのみ) -- **外部依存**: なし -- **ホスティング**: GitHub Pages - -### 設計原則 -1. **シンプルさ**: ビルドプロセスや外部ライブラリに依存しない -2. **アクセシビリティ**: 誰でも簡単に利用・展開可能 -3. **保守性**: コード量を最小限に抑え、理解しやすい構造を維持 - -### 実装の特徴 -- **空白文字の処理**: 旗付き人形(`Af.svg`〜`Zf.svg`)で表現し、視覚的な連続性を保持 -- **SVGの2バージョン管理**: tight版(表示用)とpadded版(参照用)を使い分け -- **モーダルシステム**: 純粋なJavaScriptで実装した画像拡大表示機能 -- **イベント駆動設計**: 効率的なイベントデリゲーションによるUI制御 - ---- -## 📁 ディレクトリー構成 - -``` -dancingmen-cipherlab/ -├── index.html # メインUI(暗号化・復号・置換表) -├── script.js # 暗号化/復号処理とUI制御 -├── style.css # 各UI要素のスタイリング -├── assets/ -│ ├── svg/ -│ │ ├── tight/ # tight版SVG素材(デフォルト使用) -│ │ └── padded/ # padded版SVG素材(余白あり) -│ └── *.png # スクリーンショット用画像 -├── CLAUDE.md # 開発ガイドライン -└── README.md # 本ファイル -``` +- タブ・復号ボタン・置換表の拡大をキーボードだけで操作可能 --- ## 📖 使い方 @@ -142,36 +109,85 @@ dancingmen-cipherlab/ [デモページ](https://ipusiron.github.io/dancingmen-cipherlab/)にアクセスするだけで利用可能です。 ### 暗号化の手順 + 1. 「暗号化」タブを開く -2. テキストエリアに英文(a-z、A-Z、空白のみ)を入力 -3. 入力と同時に下部に踊る人形の暗号文が自動生成される -4. 各人形画像をクリックすると拡大表示される +2. テキストエリアに英文(a-z、A-Z、スペース、改行)を入力。全角英字と空白類は半角へ置換 +3. 入力と同時に下部に踊る人形の暗号文が自動生成される。「暗号化」ボタンでも実行可能 +4. 原作の例はサンプルを選び、「入力欄に入れる」を押す +5. フォント用の文字列をコピーするか、HTTP配信時は「暗号文をPNGで保存」を押す + +入力の上限は2,000文字です。 +変換・削除のメッセージは次の入力処理まで残り、修正の不要な入力を行うと消えます。 ### 復号の手順 + 1. 「復号」タブを開く -2. 表示される人形一覧から、復号したい順番でクリック -3. クリックした文字が下部のテキストエリアに追加される -4. 「クリア」ボタンで復号文字列をリセット可能 +2. 表示される人形一覧から、復号したい順番でクリックするか、Tabで選んでEnterを押す +3. 選んだ人形と復号結果が下部に追加される +4. テキストから復号する場合は、フォント用の文字列かファイル名の列を貼り付け、「貼り付けた暗号文を復号」を押す +5. 「1文字削除」で末尾を削除、「クリア」で状態と貼り付け欄をリセット。「復号結果をコピー」でコピー可能 + +フォント用の文字列は小文字が旗なし、大文字が旗ありです。 +空白だけでは語を区切らないため、`am here`は`AMHERE`、`aM here`は`AM HERE`に復号されます。 ### 置換表の確認 + 1. 「置換表」タブを開く 2. A-Zの各文字と対応する人形(旗なし・旗付き)を確認 -3. 画像クリックで拡大表示 +3. 画像クリック、またはTabで選択してEnterを押すと拡大表示 +4. Escか「閉じる」で閉じると、開いたボタンへフォーカスが戻る -### ローカル利用 +タブにフォーカスがあるときは←→で隣へ、Home/Endで最初/最後のタブへ移動できます。 +暗号化タブの人形は拡大操作の対象ではありません。 -本ツールはHTML + JavaScriptのみで構成されており、ローカル環境でそのまま動作します。 +--- +## 🚩 旗の規則 -```bash -# リポジトリをクローン -git clone https://github.com/ipusiron/dancingmen-cipherlab.git +旗は語の区切りを表します。 +まず全角英字・空白類を正規化し、次の2つの規則で旗を付けます。 -# ディレクトリに移動 -cd dancingmen-cipherlab +1. 文字の直後が半角スペースなら旗あり +2. 文字が行の最後にあり、すぐ次の行に英字が1つ以上あれば旗あり -# ブラウザで開く(例:macOS) -open index.html -``` +空行や空白だけの行は通の区切りです。 +その直前の行には規則2を適用しません。 +末尾スペースがなければ、各通の最後の文字は旗なしになります。 +表の`⏎`は改行、`␣`は半角スペースです。 + +| 入力 | フォント用の文字列 | 説明 | +|---|---|---| +| HELLO WORLD | hellO world | 語の最後の文字に旗が付く | +| HELLO WORLD | hellO world | 全角スペースは半角に置き換えてから処理する | +| MEET ME⏎AT NOON | meeT mE⏎aT noon | 続きの行があれば、行末の語にも旗が付く | +| HELLO⏎⏎WORLD | hello⏎⏎world | 空行で区切ると別の通になり、各通の最後の語には旗が付かない | +| COME HERE AT ONCE␣ | comE herE aT oncE | 末尾に半角スペースを入れると、最後の文字にも旗が付く | + +[原文(Project Gutenberg #108)](https://www.gutenberg.org/ebooks/108)では、旗は文を語に分けるために使われていると推測されています。 +また、旗がない暗号文は1語と考えられています。 + +--- +## 🏗️ アーキテクチャ + +### 技術スタック + +- **フロントエンド**: Pure HTML5 + CSS3 + Vanilla JavaScript +- **ビルドツール**: 不要(静的ファイルのみ) +- **外部依存**: なし +- **ホスティング**: GitHub Pages + +### 設計原則 + +1. **シンプルさ**: ビルドプロセスや外部ライブラリーに依存しない +2. **アクセシビリティ**: 誰でも簡単に利用・展開可能 +3. **保守性**: コード量を最小限に抑え、理解しやすい構造を維持 + +### 実装の特徴 + +- **空白文字の処理**: 旗付き人形(`Af.svg`〜`Zf.svg`)で表現し、視覚的な連続性を保持 +- **SVGの3バージョン管理**: full版(表示・PNG保存用)、padded版(参照・選択用)、tight版(full版の生成元) +- **モーダルシステム**: ネイティブのdialog要素による置換表の画像拡大 +- **イベント駆動設計**: 効率的なイベントデリゲーションによるUI制御 +- **分離**: 純粋ロジックはdancingmen-logic.js、文言の辞書はdancingmen-messages.js、画面処理はscript.js --- ## 🖋 使用フォントについて @@ -185,7 +201,7 @@ open index.html --- ### GL-DancingMenフォントの詳細 -本編中には5つの暗号文が登場します。 +本編中には6つの暗号文が登場します。 いずれも比較的短い暗号文であるため、'F'、'J'、'K'、'Q'、'U'、'W'、'X'、'Z'に対応する人形文字が登場しません。 そのため、これらの文字はオリジナルでデザインを採用しているとのことです。 @@ -193,13 +209,14 @@ open index.html 小文字が旗なし、大文字が旗あり、空白はそのまま空白に対応しています。 --- -### 🧷 SVG素材のバリエーションについて(padded版とtight版) +### 🧷 SVG素材のバリエーションについて(full版・padded版・tight版) -本ツールでは、表示される「踊る人形」のSVG素材について、以下の2種類を用意しています: +本ツールでは、表示される「踊る人形」のSVG素材について、以下の3種類を用意しています。 | バージョン | 説明 | 用途 | |------------|------|------| -| **tight版** | 余白を極限まで除去した正式版。`bbox_inches='tight'` に加え、左上基準配置やfigsize最小化などを組み合わせ、**人形同士の間隔がもっとも詰まった表示** になります。 | 暗号文の連続表示(デフォルト) | +| **full版** | tight版のviewBoxを左右5pt・上下2pt拡張。旗のはみ出しを含めた素材 | 暗号文の連続表示・PNG保存 | +| **tight版** | `bbox_inches='tight'`に加え、左上基準配置やfigsize最小化などで余白を最も詰めた既存素材 | full版の生成元 | | **padded版** | 初期生成版。余白(padding)が多めに含まれており、ゆったりとした見た目です。 | 個別文字の参照・比較用 | --- @@ -209,11 +226,11 @@ padded版SVGファイルとtight版SVGファイルを具体的にどう生成し #### padded版SVGの生成方法について -`assets/svg/padded/`以下に格納されているSVG素材は、`GL-DancingMen.ttf`の各文字をPython + Matplotlibを用いて以下の条件で生成したものです: +`assets/svg/padded/`以下に格納されているSVG素材は、`GL-DancingMen.ttf`の各文字をPython + Matplotlibを用いて以下の条件で生成したものです。 - **描画方式**:`matplotlib.pyplot.text()` により人形文字を描画 - **位置指定**:`x=0.5`, `y=0.5`, `ha='center'`, `va='center'`(中央寄せで描画) -- **出力設定**: +- **出力設定** - `figsize=(1, 1)` - `dpi=48` - `bbox_inches` の指定なし(デフォルト) @@ -226,11 +243,11 @@ padded版SVGファイルとtight版SVGファイルを具体的にどう生成し --- #### tight版SVGの生成方法について -デフォルトで使用されているSVG素材(`assets/svg/tight/` 以下)は、`GL-DancingMen.ttf`の各文字をベースにPython + Matplotlibによって以下の条件で自動生成したものです: +full版の生成元であるSVG素材(`assets/svg/tight/`以下)は、`GL-DancingMen.ttf`の各文字をベースにPython + Matplotlibによって以下の条件で自動生成したものです。 - **描画方式**:`matplotlib.pyplot.text()` により人形文字を描画 - **位置指定**:`x=0`, `y=1`, `ha='left'`, `va='top'`(左上に寄せて描画) -- **出力調整**: +- **出力調整** - `figsize=(0.4, 0.4)` - `dpi=120` - `bbox_inches='tight'` + `pad_inches=0` を指定し、**余白を極限まで除去** @@ -242,77 +259,117 @@ padded版SVGファイルとtight版SVGファイルを具体的にどう生成し ## 🔧 技術仕様 ### 暗号化アルゴリズム -```javascript -// 基本的な変換ルール -A-Z → A.svg - Z.svg(旗なし人形) -A-Z + 空白 → Af.svg - Zf.svg(旗付き人形) - -// 実装例(script.js:76-104より) -function encrypt(text) { - // 大文字変換と非アルファベット除去 - const processedText = text.toUpperCase().replace(/[^A-Z ]/g, ''); - - // 各文字を人形に変換 - for (let i = 0; i < processedText.length; i++) { - const char = processedText[i]; - const nextChar = processedText[i + 1]; - - if (char === ' ') continue; // 空白はスキップ - - // 次が空白またはEOFなら旗付き、それ以外は旗なし - const filename = (nextChar === ' ' || nextChar === undefined) - ? `${char}f.svg` - : `${char}.svg`; - } -} -``` + +`dancingmen-logic.js`の`sanitizeInput`で入力を正規化し、`encryptText`で文字と旗の状態を持つトークンの行配列にします。 +`toFileNameText`・`toFontText`が表記を変換し、`parseCipherText`・`decodeTokens`が貼り付けと復号を受け持ちます。 +旗の規則は前述の「旗の規則」を参照してください。 +画面の入力処理はIMEの変換中に値を書き換えず、確定後の置換ではキャレットを戻します。 ### ファイル命名規則 + - **通常文字**: `[A-Z].svg`(例:`A.svg`, `B.svg`) - **旗付き文字**: `[A-Z]f.svg`(例:`Af.svg`, `Bf.svg`) -- **合計**: 52ファイル(26文字 × 2状態) - -### モーダル実装 -```javascript -// 画像クリックで拡大表示(script.js:15-30) -modal.addEventListener('click', (e) => { - if (e.target === modal || e.target.classList.contains('close')) { - modal.style.display = 'none'; - } -}); +- **合計**: 各版52ファイル(26文字×2状態)、3版で156ファイル + +### 人形の表示とPNG保存 + +tight版のSVGは旗が`viewBox`の外へはみ出しています(右へ最大3.8pt、上へ最大1.49pt)。 +そこで`viewBox`を左右5pt・上下2pt広げたfull版を用意し、素の大きさで並べています。 +負のマージン(−5pt)でフォント本来の送り幅(通常38.4px)まで詰め、`mix-blend-mode: multiply`で白い背景を消します。 +両方のタブで共通の`renderFigures`を使い、CSSの`align-items: flex-end`で足元をそろえています。 + +PNG保存は`layoutCipher`で配置を決め、同じfull版をcanvasへ2倍の解像度で描きます。 +論理サイズの幅または高さが8,000pxを超える場合は保存しません。 +full版は`node tools/build-full-svg.js`で作り直せます。 +`node tools/build-full-svg.js --check`は書き込まずに差分を検査します。 +既存のtight版とpadded版は変更しません。 + +### モーダルと文言 + +置換表の拡大にはネイティブの`dialog.showModal()`を使い、Esc・閉じるボタン・背景クリックで閉じます。 +閉じた後は、開いたボタンへフォーカスを戻します。 +JavaScriptが表示する文言は`dancingmen-messages.js`の日本語辞書から`t`で取得します。 +英語辞書と言語切り替えは未実装です。 + +--- +## 🔒 セキュリティ + +- meta CSPで同一オリジンのスクリプト・CSS・画像だけを許可。インラインイベントとstyle属性は不使用 +- referrerをno-referrerに設定。別タブへのリンクにはrel="noopener noreferrer"を指定 +- 入力の正規化と長さ制限を実施。入力・貼り付け・メッセージはtextContentで表示 +- 外部API・CDN・アクセス解析を使用せず、ページの表示と操作で外部への通信は0件 +- コピーAPIが使えない、または拒否された場合は手動コピーの案内を表示 + +外部リンクをユーザーが開いたときは、そのリンク先へ通信します。 +metaのCSPではクリックジャッキングを防げません。 +GitHub Pagesの静的ファイルだけではX-Frame-OptionsなどのHTTPレスポンスヘッダーを設定できないため、この制約が残ります。 + +--- +## 🧪 テスト + +Node.js 22以上で、リポジトリーのルートから実行します。 +依存パッケージはなく、`npm install`は不要です。 + +```bash +npm test +node tools/build-full-svg.js --check ``` +GitHub Actionsはpushとpull_requestの両方で`npm test`を自動実行します。 +旗の規則・正規化・表記の往復・寸法・PNG配置・配色・HTML・辞書・READMEの表を検証します。 +既存SVG素材104枚の無改変をSHA-256で検証し、full版52枚が生成スクリプトの出力と一致することも検証します。 + --- -## 「踊る人形」を探究する +## 🔎 「踊る人形」を探究する 「踊る人形」(原題 *"The Dancing Men"*)は、アーサー・コナン・ドイルの短編集『シャーロック・ホームズの帰還』に収録されています。 -踊る人形では以下の5つの暗号文が登場します。 +踊る人形では以下の6つの暗号文が登場します。 > 最初の暗号文(依頼者であるヒルトン・キュビットがホームズに最初に見せた暗号文) > > "Am here Abe Slaney." > > 「私はここにいる。エイブ・スレーニー」 > > 2つ目の暗号文(2週間後にまた描かれていた暗号文) -> > "At Elriges. Come Elsie." -> >「エルリッジに。こい、エルシー」 +> > "At Elriges." +> >「エルリッジに」 +> +> 3つ目の暗号文(2通目の2日後の朝に、新しく描かれていた暗号文) +> > "Come Elsie." +> >「こい、エルシー」 > -> 3つ目の暗号文(犯人ではなく依頼者の妻エルシーが描いた暗号文) +> 4つ目の暗号文(犯人ではなく依頼者の妻エルシーが描いた暗号文) > > "Never." > >「決して」 > -> 4つ目の暗号文(ヒルトン・キュビットがホームズと別れた2日後に描かれた暗号文) -> > "Elsei prepare to meet the God." +> 5つ目の暗号文(ヒルトン・キュビットがホームズと別れた2日後に描かれた暗号文) +> > "Elsie prepare to meet thy God." > >「エルシー、神に会う準備はできたか」 > -> 5つ目の暗号文(ホームズが犯人をおびき出すために描いた暗号文) +> 6つ目の暗号文(ホームズが犯人をおびき出すために描いた暗号文) > > "Come here at once." > >「すぐ来て」 -本ツールを使えば、この5つの暗号文も生成できます。 +本ツールを使えば、この6つの暗号文も生成できます。 + +| 通 | 平文 | フォント用の文字列(小文字=旗なし、大文字=旗あり) | +|---|---|---| +| 1 | AM HERE ABE SLANEY | aM herE abE slaney | +| 2 | AT ELRIGES | aT elriges | +| 3 | COME ELSIE | comE elsie | +| 4 | NEVER | never | +| 5 | ELSIE PREPARE TO⏎MEET THY GOD | elsiE preparE tO⏎meeT thY god | +| 6 | COME HERE AT ONCE | comE herE aT once | -> ->*「踊る人形」に登場する暗号文* +1〜5通目の出力は、原著の挿絵をもとにしたフォントGL-DancingMen-Orgの[ReadMe](https://github.com/Gutenberg-Labo/GL-DancingMen/blob/main/documents/GL-DancingMen-Org-readme.txt)が挙げる表記と一致します。 +5通目は原著でも2行で、1行目の最後のOに旗があります。 +6通目はReadMeでは`comE herE aT oncE`と最後のEにも旗があり、ここだけ規則の例外です。 +本ツールで再現するには、入力の末尾に半角スペースを1つ入れます。 +サンプルは末尾スペースなしで収録しています。 + + + +> *「6通すべて」を本ツールのPNG保存で出力。空行で通を区切り、5通目だけ2行* --- ### 踊る人形の暗号は単一換字式暗号 @@ -320,6 +377,7 @@ modal.addEventListener('click', (e) => { シンプルな単一換字式暗号であるため、頻度分析のアプローチが有効です。 「踊る人形」の中で、ホームズは頻度分析の知識を活用して、一番多く登場する人形文字が'E'であると推測しました。 +1通目は15個の人形のうち4個が同じで、ホームズはこれをEと見ました。 その後、旗は文字の区切りを意味することも突き止めます。 さらに推論を働かせて、暗号文を解読し、最終的に犯人に暗号文を送るに至るわけです。 @@ -350,16 +408,83 @@ modal.addEventListener('click', (e) => { --- #### 書籍 --『暗号解読事典』 P145 シャーロック・ホームズの『踊る人形』のサイファ --『暗号の話』P186 第9章 推理小説と暗号 +- 『暗号解読事典』P145 シャーロック・ホームズの『踊る人形』のサイファ +- 『暗号の話』P186 第9章 推理小説と暗号 + +--- +## 📁 ディレクトリー構造 + +```text +dancingmen-cipherlab/ # 「踊る人形」の暗号を体験するWebツール +├── .github/ # GitHubの設定 +│ └── workflows/ # GitHub Actionsのワークフロー +│ └── test.yml # pushとpull_requestでnpm testを実行 +├── .gitignore # Git管理から除外するファイルの指定 +├── .nojekyll # PagesのJekyll処理を無効化 +├── assets/ # 人形のSVG素材とREADMEに載せる画像 +│ ├── dancingmen_messages.png # 原作の暗号文6通。本ツールのPNG保存で出力 +│ ├── screenshot.png # 暗号化タブ。原作の5通目を2行で入力 +│ ├── screenshot2.png # 復号タブ。フォント用の文字列を貼り付けて復号 +│ ├── screenshot3.png # 置換表タブ +│ └── svg/ # GL-DancingMenフォントから生成した人形のSVG +│ ├── full/ # 左右5pt・上下2pt広げた52枚。暗号文の表示とPNG保存用 +│ ├── padded/ # 72×72ptの52枚。置換表と復号ボタン用 +│ └── tight/ # 余白を詰めた52枚。full版の生成元 +├── CLAUDE.md # AI向けの開発ガイド +├── dancingmen-logic.js # 画面に依存しない純粋なロジック +├── dancingmen-messages.js # 画面の文言の辞書とフォーマッター +├── index.html # 暗号化・復号・置換表の3タブ +├── LICENSE # 本ツールのMITライセンス +├── package.json # 依存なしのnpm test定義 +├── README.md # 本ドキュメント +├── script.js # 入力・タブ・描画・PNG保存・モーダル +├── style.css # CSS変数の配色とレスポンシブレイアウト +├── test/ # node --testの自動テスト +│ ├── assets.test.js # SVG156枚の対応・寸法・無改変・生成結果を検証 +│ ├── contrast.test.js # 文字色と面のコントラストを検証 +│ ├── format.test.js # 行長と読みやすさを検証 +│ ├── html.test.js # CSP・ARIA・インライン属性なしを検証 +│ ├── layout.test.js # 人形の寸法・viewBoxの拡張・PNG配置を検証 +│ ├── logic.test.js # 正規化・旗の規則・表記変換・往復を検証 +│ ├── messages.test.js # 文言の辞書と画面側のキーを検証 +│ ├── readme.test.js # 表・画像・ツリー・YAMLを検証 +│ ├── samples.test.js # 原作6通の既知解答を検証 +│ └── static.test.js # 純粋性・禁止した書き方・CI設定を検証 +└── tools/ # 公開ページから使わない開発用スクリプト + └── build-full-svg.js # tight版からfull版を生成。--checkで差分確認 +``` + +--- +## 💻 動作環境 + +静的HTML・CSS・JavaScriptだけで動作し、ビルドは不要です。 +WindowsのChromium 145で、HTTPとfile://の暗号化・復号・置換表・コピーを確認しました。 +コピーはブラウザーの権限設定に依存し、許可されない場合は手動コピーを案内します。 +Firefox・Safariは未検証です。 + +ローカル利用では、クローンした`index.html`をブラウザーで直接開けます。 +PNG保存だけはfile://では利用できないため、公開ページかローカルサーバーを使ってください。 + +```bash +git clone https://github.com/ipusiron/dancingmen-cipherlab.git +cd dancingmen-cipherlab +python -m http.server 8000 --bind 127.0.0.1 +``` + +その後、ブラウザーで`http://127.0.0.1:8000/`を開きます。 +このHTTP配信で「COME HERE AT ONCE」のPNGは1166×198、6通すべては1244×1502となることを確認しています。 --- ## 📄 ライセンス MIT License - 詳細は[LICENSE](LICENSE)をご覧ください。 +人形のSVGは、[GL-DancingMenフォント](https://github.com/Gutenberg-Labo/GL-DancingMen)(Copyright (C) 2007-2009 Das Ende der Wildnis、Copyright (C) 2008-2023 Gutenberg Labo)から生成したものです。 +同フォントは、改変の有無や商用・非商用を問わず、自由な利用・複製・再配布が認められています(無保証)。 +詳細はフォントの[LICENSE.txt](https://github.com/Gutenberg-Labo/GL-DancingMen/blob/main/LICENSE.txt)を参照してください。 + --- -## 🛠 このツールについて +## 🛠️ このツールについて 本ツールは、「生成AIで作るセキュリティツール100」プロジェクトの一環として開発されました。 このプロジェクトでは、AIの支援を活用しながら、セキュリティに関連するさまざまなツールを100日間にわたり制作・公開していく取り組みを行っています。 diff --git a/assets/ciphertext.png b/assets/ciphertext.png deleted file mode 100644 index 2c8b3e4..0000000 Binary files a/assets/ciphertext.png and /dev/null differ diff --git a/assets/dancingmen_messages.png b/assets/dancingmen_messages.png new file mode 100644 index 0000000..41be5ee Binary files /dev/null and b/assets/dancingmen_messages.png differ diff --git a/assets/decryption_example.png b/assets/decryption_example.png deleted file mode 100644 index c2812f1..0000000 Binary files a/assets/decryption_example.png and /dev/null differ diff --git a/assets/encryption_example.png b/assets/encryption_example.png deleted file mode 100644 index 1415058..0000000 Binary files a/assets/encryption_example.png and /dev/null differ diff --git a/assets/screenshot.png b/assets/screenshot.png new file mode 100644 index 0000000..ca271a4 Binary files /dev/null and b/assets/screenshot.png differ diff --git a/assets/screenshot2.png b/assets/screenshot2.png new file mode 100644 index 0000000..443fbf1 Binary files /dev/null and b/assets/screenshot2.png differ diff --git a/assets/screenshot3.png b/assets/screenshot3.png new file mode 100644 index 0000000..25e170f Binary files /dev/null and b/assets/screenshot3.png differ diff --git a/assets/substitution_table.png b/assets/substitution_table.png deleted file mode 100644 index a0d996c..0000000 Binary files a/assets/substitution_table.png and /dev/null differ diff --git a/assets/svg/full/A.svg b/assets/svg/full/A.svg new file mode 100644 index 0000000..aa065ba --- /dev/null +++ b/assets/svg/full/A.svg @@ -0,0 +1,114 @@ + + + + + + + + 2025-07-23T02:13:15.149412 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Af.svg b/assets/svg/full/Af.svg new file mode 100644 index 0000000..f346ee2 --- /dev/null +++ b/assets/svg/full/Af.svg @@ -0,0 +1,121 @@ + + + + + + + + 2025-07-23T02:13:15.173785 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/B.svg b/assets/svg/full/B.svg new file mode 100644 index 0000000..6f4bb83 --- /dev/null +++ b/assets/svg/full/B.svg @@ -0,0 +1,93 @@ + + + + + + + + 2025-07-23T02:13:15.202944 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Bf.svg b/assets/svg/full/Bf.svg new file mode 100644 index 0000000..1bbdee8 --- /dev/null +++ b/assets/svg/full/Bf.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:15.238970 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/C.svg b/assets/svg/full/C.svg new file mode 100644 index 0000000..0e099a7 --- /dev/null +++ b/assets/svg/full/C.svg @@ -0,0 +1,107 @@ + + + + + + + + 2025-07-23T02:13:15.268987 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Cf.svg b/assets/svg/full/Cf.svg new file mode 100644 index 0000000..fad29a6 --- /dev/null +++ b/assets/svg/full/Cf.svg @@ -0,0 +1,117 @@ + + + + + + + + 2025-07-23T02:13:15.298724 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/D.svg b/assets/svg/full/D.svg new file mode 100644 index 0000000..d853aa3 --- /dev/null +++ b/assets/svg/full/D.svg @@ -0,0 +1,97 @@ + + + + + + + + 2025-07-23T02:13:15.350419 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Df.svg b/assets/svg/full/Df.svg new file mode 100644 index 0000000..49820ee --- /dev/null +++ b/assets/svg/full/Df.svg @@ -0,0 +1,106 @@ + + + + + + + + 2025-07-23T02:13:15.376384 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/E.svg b/assets/svg/full/E.svg new file mode 100644 index 0000000..aae41ba --- /dev/null +++ b/assets/svg/full/E.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:15.404575 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Ef.svg b/assets/svg/full/Ef.svg new file mode 100644 index 0000000..a58b899 --- /dev/null +++ b/assets/svg/full/Ef.svg @@ -0,0 +1,112 @@ + + + + + + + + 2025-07-23T02:13:15.433606 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/F.svg b/assets/svg/full/F.svg new file mode 100644 index 0000000..a57a320 --- /dev/null +++ b/assets/svg/full/F.svg @@ -0,0 +1,112 @@ + + + + + + + + 2025-07-23T02:13:15.457667 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Ff.svg b/assets/svg/full/Ff.svg new file mode 100644 index 0000000..16b23c0 --- /dev/null +++ b/assets/svg/full/Ff.svg @@ -0,0 +1,123 @@ + + + + + + + + 2025-07-23T02:13:15.481690 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/G.svg b/assets/svg/full/G.svg new file mode 100644 index 0000000..c082a67 --- /dev/null +++ b/assets/svg/full/G.svg @@ -0,0 +1,96 @@ + + + + + + + + 2025-07-23T02:13:15.514475 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Gf.svg b/assets/svg/full/Gf.svg new file mode 100644 index 0000000..a8f75c4 --- /dev/null +++ b/assets/svg/full/Gf.svg @@ -0,0 +1,106 @@ + + + + + + + + 2025-07-23T02:13:15.544682 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/H.svg b/assets/svg/full/H.svg new file mode 100644 index 0000000..588a016 --- /dev/null +++ b/assets/svg/full/H.svg @@ -0,0 +1,100 @@ + + + + + + + + 2025-07-23T02:13:15.584795 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Hf.svg b/assets/svg/full/Hf.svg new file mode 100644 index 0000000..33d5867 --- /dev/null +++ b/assets/svg/full/Hf.svg @@ -0,0 +1,107 @@ + + + + + + + + 2025-07-23T02:13:15.611025 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/I.svg b/assets/svg/full/I.svg new file mode 100644 index 0000000..8ee0fa2 --- /dev/null +++ b/assets/svg/full/I.svg @@ -0,0 +1,105 @@ + + + + + + + + 2025-07-23T02:13:15.641730 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/If.svg b/assets/svg/full/If.svg new file mode 100644 index 0000000..c54c275 --- /dev/null +++ b/assets/svg/full/If.svg @@ -0,0 +1,113 @@ + + + + + + + + 2025-07-23T02:13:15.666338 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/J.svg b/assets/svg/full/J.svg new file mode 100644 index 0000000..42255f8 --- /dev/null +++ b/assets/svg/full/J.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:15.698680 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Jf.svg b/assets/svg/full/Jf.svg new file mode 100644 index 0000000..88d56a0 --- /dev/null +++ b/assets/svg/full/Jf.svg @@ -0,0 +1,111 @@ + + + + + + + + 2025-07-23T02:13:15.723324 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/K.svg b/assets/svg/full/K.svg new file mode 100644 index 0000000..3b0a4d3 --- /dev/null +++ b/assets/svg/full/K.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:15.761163 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Kf.svg b/assets/svg/full/Kf.svg new file mode 100644 index 0000000..1f616d2 --- /dev/null +++ b/assets/svg/full/Kf.svg @@ -0,0 +1,111 @@ + + + + + + + + 2025-07-23T02:13:15.784659 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/L.svg b/assets/svg/full/L.svg new file mode 100644 index 0000000..972f86b --- /dev/null +++ b/assets/svg/full/L.svg @@ -0,0 +1,122 @@ + + + + + + + + 2025-07-23T02:13:15.815528 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Lf.svg b/assets/svg/full/Lf.svg new file mode 100644 index 0000000..e254938 --- /dev/null +++ b/assets/svg/full/Lf.svg @@ -0,0 +1,130 @@ + + + + + + + + 2025-07-23T02:13:15.854127 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/M.svg b/assets/svg/full/M.svg new file mode 100644 index 0000000..e830425 --- /dev/null +++ b/assets/svg/full/M.svg @@ -0,0 +1,118 @@ + + + + + + + + 2025-07-23T02:13:15.878757 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Mf.svg b/assets/svg/full/Mf.svg new file mode 100644 index 0000000..237d834 --- /dev/null +++ b/assets/svg/full/Mf.svg @@ -0,0 +1,124 @@ + + + + + + + + 2025-07-23T02:13:15.903188 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/N.svg b/assets/svg/full/N.svg new file mode 100644 index 0000000..c126ff9 --- /dev/null +++ b/assets/svg/full/N.svg @@ -0,0 +1,116 @@ + + + + + + + + 2025-07-23T02:13:15.927882 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Nf.svg b/assets/svg/full/Nf.svg new file mode 100644 index 0000000..f01216b --- /dev/null +++ b/assets/svg/full/Nf.svg @@ -0,0 +1,123 @@ + + + + + + + + 2025-07-23T02:13:15.960938 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/O.svg b/assets/svg/full/O.svg new file mode 100644 index 0000000..44dcc70 --- /dev/null +++ b/assets/svg/full/O.svg @@ -0,0 +1,110 @@ + + + + + + + + 2025-07-23T02:13:15.992317 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Of.svg b/assets/svg/full/Of.svg new file mode 100644 index 0000000..ec3a8bc --- /dev/null +++ b/assets/svg/full/Of.svg @@ -0,0 +1,120 @@ + + + + + + + + 2025-07-23T02:13:16.032505 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/P.svg b/assets/svg/full/P.svg new file mode 100644 index 0000000..556f1fc --- /dev/null +++ b/assets/svg/full/P.svg @@ -0,0 +1,93 @@ + + + + + + + + 2025-07-23T02:13:16.219125 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Pf.svg b/assets/svg/full/Pf.svg new file mode 100644 index 0000000..8b51891 --- /dev/null +++ b/assets/svg/full/Pf.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:16.240864 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Q.svg b/assets/svg/full/Q.svg new file mode 100644 index 0000000..7f5a630 --- /dev/null +++ b/assets/svg/full/Q.svg @@ -0,0 +1,92 @@ + + + + + + + + 2025-07-23T02:13:16.262771 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Qf.svg b/assets/svg/full/Qf.svg new file mode 100644 index 0000000..eaba020 --- /dev/null +++ b/assets/svg/full/Qf.svg @@ -0,0 +1,103 @@ + + + + + + + + 2025-07-23T02:13:16.287268 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/R.svg b/assets/svg/full/R.svg new file mode 100644 index 0000000..46a34d3 --- /dev/null +++ b/assets/svg/full/R.svg @@ -0,0 +1,110 @@ + + + + + + + + 2025-07-23T02:13:16.310682 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Rf.svg b/assets/svg/full/Rf.svg new file mode 100644 index 0000000..d6ad6db --- /dev/null +++ b/assets/svg/full/Rf.svg @@ -0,0 +1,116 @@ + + + + + + + + 2025-07-23T02:13:16.332235 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/S.svg b/assets/svg/full/S.svg new file mode 100644 index 0000000..427ff4e --- /dev/null +++ b/assets/svg/full/S.svg @@ -0,0 +1,125 @@ + + + + + + + + 2025-07-23T02:13:16.354028 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Sf.svg b/assets/svg/full/Sf.svg new file mode 100644 index 0000000..777b00e --- /dev/null +++ b/assets/svg/full/Sf.svg @@ -0,0 +1,133 @@ + + + + + + + + 2025-07-23T02:13:16.374579 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/T.svg b/assets/svg/full/T.svg new file mode 100644 index 0000000..496264c --- /dev/null +++ b/assets/svg/full/T.svg @@ -0,0 +1,104 @@ + + + + + + + + 2025-07-23T02:13:16.395022 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Tf.svg b/assets/svg/full/Tf.svg new file mode 100644 index 0000000..505ef7a --- /dev/null +++ b/assets/svg/full/Tf.svg @@ -0,0 +1,116 @@ + + + + + + + + 2025-07-23T02:13:16.415436 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/U.svg b/assets/svg/full/U.svg new file mode 100644 index 0000000..2f8109d --- /dev/null +++ b/assets/svg/full/U.svg @@ -0,0 +1,116 @@ + + + + + + + + 2025-07-23T02:13:16.435194 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Uf.svg b/assets/svg/full/Uf.svg new file mode 100644 index 0000000..6949711 --- /dev/null +++ b/assets/svg/full/Uf.svg @@ -0,0 +1,126 @@ + + + + + + + + 2025-07-23T02:13:16.456425 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/V.svg b/assets/svg/full/V.svg new file mode 100644 index 0000000..3b3ecbc --- /dev/null +++ b/assets/svg/full/V.svg @@ -0,0 +1,94 @@ + + + + + + + + 2025-07-23T02:13:16.478333 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Vf.svg b/assets/svg/full/Vf.svg new file mode 100644 index 0000000..0fd91cc --- /dev/null +++ b/assets/svg/full/Vf.svg @@ -0,0 +1,105 @@ + + + + + + + + 2025-07-23T02:13:16.497885 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/W.svg b/assets/svg/full/W.svg new file mode 100644 index 0000000..d7d62d1 --- /dev/null +++ b/assets/svg/full/W.svg @@ -0,0 +1,93 @@ + + + + + + + + 2025-07-23T02:13:16.517708 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Wf.svg b/assets/svg/full/Wf.svg new file mode 100644 index 0000000..9b4fc1d --- /dev/null +++ b/assets/svg/full/Wf.svg @@ -0,0 +1,105 @@ + + + + + + + + 2025-07-23T02:13:16.540360 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/X.svg b/assets/svg/full/X.svg new file mode 100644 index 0000000..be59005 --- /dev/null +++ b/assets/svg/full/X.svg @@ -0,0 +1,108 @@ + + + + + + + + 2025-07-23T02:13:16.565461 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Xf.svg b/assets/svg/full/Xf.svg new file mode 100644 index 0000000..8b3fca6 --- /dev/null +++ b/assets/svg/full/Xf.svg @@ -0,0 +1,117 @@ + + + + + + + + 2025-07-23T02:13:16.589146 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Y.svg b/assets/svg/full/Y.svg new file mode 100644 index 0000000..79e0951 --- /dev/null +++ b/assets/svg/full/Y.svg @@ -0,0 +1,110 @@ + + + + + + + + 2025-07-23T02:13:16.609921 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Yf.svg b/assets/svg/full/Yf.svg new file mode 100644 index 0000000..df98c56 --- /dev/null +++ b/assets/svg/full/Yf.svg @@ -0,0 +1,116 @@ + + + + + + + + 2025-07-23T02:13:16.630317 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Z.svg b/assets/svg/full/Z.svg new file mode 100644 index 0000000..6f10521 --- /dev/null +++ b/assets/svg/full/Z.svg @@ -0,0 +1,107 @@ + + + + + + + + 2025-07-23T02:13:16.651290 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/full/Zf.svg b/assets/svg/full/Zf.svg new file mode 100644 index 0000000..4e3aa43 --- /dev/null +++ b/assets/svg/full/Zf.svg @@ -0,0 +1,118 @@ + + + + + + + + 2025-07-23T02:13:16.678074 + image/svg+xml + + + Matplotlib v3.6.3, https://matplotlib.org/ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dancingmen-logic.js b/dancingmen-logic.js new file mode 100644 index 0000000..1ae5df5 --- /dev/null +++ b/dancingmen-logic.js @@ -0,0 +1,224 @@ +// Pure cipher operations shared by classic scripts and Node tests. +const DancingMenLogic = (() => { + const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + const MAX_INPUT_LENGTH = 2000; + const FULL_PAD_X = 5; + const FULL_PAD_Y = 2; + const PX_PER_PT = 4 / 3; + + function sanitizeInput(raw) { + let text = ""; + const removed = new Set(); + let replacedSpaces = 0; + let replacedFullwidth = 0; + for (const char of raw.replace(/\r\n?/g, "\n")) { + if (/^[A-Za-z \n]$/.test(char)) { + text += char; + } else if (/^[\uFF21-\uFF3A\uFF41-\uFF5A]$/.test(char)) { + text += String.fromCodePoint(char.codePointAt(0) - 0xFEE0); + replacedFullwidth++; + } else if (/\s/.test(char)) { + text += " "; + replacedSpaces++; + } else { + removed.add(char); + } + } + const truncated = text.length > MAX_INPUT_LENGTH; + return { + text: text.slice(0, MAX_INPUT_LENGTH), removed: [...removed], + replacedSpaces, replacedFullwidth, truncated + }; + } + + function caretAfterSanitize(raw, caret) { + return sanitizeInput(raw.slice(0, caret)).text.length; + } + + function feedbackItems(result) { + const items = []; + if (result.removed.length) { + items.push({ key: "feedback.removed", values: { chars: [...result.removed] } }); + } + if (result.replacedFullwidth || result.replacedSpaces) { + items.push({ key: "feedback.replaced", values: {} }); + } + if (result.truncated) { + items.push({ key: "feedback.truncated", values: { max: "2,000" } }); + } + return items; + } + + function encryptText(raw) { + const rows = sanitizeInput(raw).text.split("\n"); + return rows.map((row, rowIndex) => { + const tokens = []; + for (let index = 0; index < row.length; index++) { + const char = row[index]; + if (!/[A-Za-z]/.test(char)) continue; + const flag = row[index + 1] === " " || + (index === row.length - 1 && /[A-Za-z]/.test(rows[rowIndex + 1] || "")); + tokens.push({ letter: char.toUpperCase(), flag }); + } + return tokens; + }); + } + + function countLetters(lines) { + return lines.reduce((total, row) => total + row.length, 0); + } + + function trimEmptyRows(lines) { + let first = 0; + let last = lines.length; + while (first < last && !lines[first].length) first++; + while (last > first && !lines[last - 1].length) last--; + return lines.slice(first, last); + } + + function tokenFileName(token) { + return `${token.letter}${token.flag ? "f" : ""}.svg`; + } + + function toFileNameText(lines) { + return trimEmptyRows(lines).map(row => row.map(tokenFileName).join(" ")).join("\n"); + } + + function textFromTokens(lines, font) { + return trimEmptyRows(lines).map(row => row.map((token, index) => { + const char = font && !token.flag ? token.letter.toLowerCase() : token.letter; + return char + (token.flag && index < row.length - 1 ? " " : ""); + }).join("")).join("\n"); + } + + function toFontText(lines) { + return textFromTokens(lines, true); + } + + function decodeTokens(lines) { + return textFromTokens(lines, false); + } + + function normalizePlain(raw) { + const rows = sanitizeInput(raw).text.toUpperCase().split("\n") + .map(row => row.replace(/ +/g, " ").trim()); + return trimEmptyRows(rows).join("\n"); + } + + function parseCipherText(raw) { + const notation = /\.svg/i.test(raw) ? "filenames" : "font"; + const invalid = new Set(); + const lines = raw.replace(/\r\n?/g, "\n").split("\n").map(row => { + const tokens = []; + if (notation === "filenames") { + for (const word of row.split(/\s+/).filter(Boolean)) { + const match = /^([A-Za-z])(f?)\.svg$/.exec(word); + if (match) tokens.push({ letter: match[1].toUpperCase(), flag: Boolean(match[2]) }); + else invalid.add(word); + } + } else { + for (const char of row) { + if (/[A-Za-z]/.test(char)) { + tokens.push({ letter: char.toUpperCase(), flag: /[A-Z]/.test(char) }); + } else if (!/\s/.test(char)) { + invalid.add(char); + } + } + } + return tokens; + }); + return { lines, invalid: [...invalid], notation }; + } + + const flagHeights = [ + 43.965, 43.2, 40.9425, 43.485, 42.0975, 41.6175, 42.0975, 44.445, 44.445, + 44.445, 42.0975, 41.2275, 39.5475, 39.5475, 42.0975, 46.0275, 45.5475, + 43.965, 40.7025, 43.485, 40.9425, 46.0275, 45.5475, 39.5475, 39.5475, 40.9425 + ]; + const TIGHT_VIEWBOX = {}; + [...LETTERS].forEach((letter, index) => { + TIGHT_VIEWBOX[letter] = Object.freeze([28.8, 38.9775]); + const width = letter === "I" ? 31.8225 : letter === "M" ? 28.845 : 28.8; + TIGHT_VIEWBOX[`${letter}f`] = Object.freeze([width, flagHeights[index]]); + }); + Object.freeze(TIGHT_VIEWBOX); + + function figureSize(token) { + const [width, height] = TIGHT_VIEWBOX[tokenFileName(token).replace(".svg", "")]; + return { + width: (width + 2 * FULL_PAD_X) * PX_PER_PT, + height: (height + 2 * FULL_PAD_Y) * PX_PER_PT, + advance: width * PX_PER_PT + }; + } + + function expandSvgViewBox(svgText, padX = FULL_PAD_X, padY = FULL_PAD_Y) { + return svgText.replace(/]*>/, tag => { + const viewBox = /\bviewBox="([^"]+)"/.exec(tag); + if (!viewBox) throw new Error("Missing root viewBox"); + const [, , width, height] = viewBox[1].split(/\s+/).map(Number); + const round = value => Number(value.toFixed(4)); + const expandedWidth = round(width + 2 * padX); + const expandedHeight = round(height + 2 * padY); + return tag.replace(/\bwidth="[^"]*"/, `width="${expandedWidth}pt"`) + .replace(/\bheight="[^"]*"/, `height="${expandedHeight}pt"`) + .replace(/\bviewBox="[^"]*"/, `viewBox="${-padX} ${-padY} ${expandedWidth} ${expandedHeight}"`); + }); + } + + function layoutCipher(lines) { + const MARGIN = 16; + const LINE_GAP = 12; + const BLANK_ROW_HEIGHT = 24; + const ROW_HEIGHT = (46.0275 + 2 * FULL_PAD_Y) * PX_PER_PT; + const rows = trimEmptyRows(lines); + const figures = []; + const round = value => Number(value.toFixed(2)); + let top = MARGIN; + let bottom = MARGIN; + let longest = 0; + for (const row of rows) { + bottom = top + (row.length ? ROW_HEIGHT : BLANK_ROW_HEIGHT); + let x = MARGIN; + for (const token of row) { + const size = figureSize(token); + figures.push({ + name: tokenFileName(token), x: round(x), y: round(bottom - size.height), + w: round(size.width), h: round(size.height) + }); + x += size.advance; + } + longest = Math.max(longest, x - MARGIN); + top = bottom + LINE_GAP; + } + return { + width: Math.ceil(longest + 2 * FULL_PAD_X * PX_PER_PT + 2 * MARGIN), + height: Math.ceil(bottom + MARGIN), rows: rows.length, figures + }; + } + + const SAMPLES = Object.freeze([ + { id: "m1", text: "AM HERE ABE SLANEY" }, + { id: "m2", text: "AT ELRIGES" }, + { id: "m3", text: "COME ELSIE" }, + { id: "m4", text: "NEVER" }, + { id: "m5", text: "ELSIE PREPARE TO\nMEET THY GOD" }, + { id: "m6", text: "COME HERE AT ONCE" } + ].map(Object.freeze)); + + function allSamplesText() { + return SAMPLES.map(sample => sample.text).join("\n\n"); + } + + return { + LETTERS, MAX_INPUT_LENGTH, sanitizeInput, caretAfterSanitize, feedbackItems, + encryptText, tokenFileName, toFileNameText, toFontText, parseCipherText, + decodeTokens, normalizePlain, countLetters, TIGHT_VIEWBOX, FULL_PAD_X, + FULL_PAD_Y, PX_PER_PT, figureSize, expandSvgViewBox, layoutCipher, SAMPLES, allSamplesText + }; +})(); + +globalThis.DancingMenLogic = DancingMenLogic; +if (typeof module === "object" && module.exports) { + module.exports = DancingMenLogic; +} diff --git a/dancingmen-messages.js b/dancingmen-messages.js new file mode 100644 index 0000000..6ac4eea --- /dev/null +++ b/dancingmen-messages.js @@ -0,0 +1,54 @@ +// UI-independent messages. Additional languages can share the same keys. +const DancingMenMessages = (() => { + const DEFAULT_LANG = "ja"; + const dictionaries = { + ja: { + "list.open": "「", + "list.close": "」", + "feedback.removed": "使えない文字を取り除きました: {chars}", + "feedback.replaced": "全角の英字・スペースやタブを半角に置き換えました", + "feedback.truncated": "{max}文字を超えた分は切り捨てました", + "feedback.separator": " / ", + "encrypt.count": "暗号化可能文字数: {count}", + "figure.letter": "{letter}", + "figure.flag": "{letter}(旗あり)", + "sample.label": "{number}通目 {text}", + "sample.lineSeparator": "/", + "sample.multiline": "(2行)", + "sample.all": "{count}通すべて(空行で区切る)", + "copy.fontSuccess": "フォント用の文字列をコピーしました", + "copy.failure": "コピーできませんでした。文字列を選択して手動でコピーしてください", + "save.tooLarge": "画像が大きすぎて保存できません。1行を短くするか、行数を減らしてください", + "save.unavailable": "このページをfile://で開いているときはPNGを保存できません。" + + "公開ページか、ローカルサーバー(python -m http.server など)で開いてください", + "save.success": "暗号文をPNGで保存しました", + "figure.plain": "{letter}(旗なし)", + "figure.zoom": "{figure}を拡大", + "decode.tooLong": "人形が{max}個を超える暗号文は復号できません。短くしてから貼り付けてください", + "decode.invalid": "読めなかった部分: {chars}", + "decode.more": " ほか{count}件", + "copy.decryptSuccess": "復号結果をコピーしました" + } + }; + + function format(lang, key, values = {}) { + const dictionary = dictionaries[lang]; + if (!dictionary || !Object.hasOwn(dictionary, key)) { + throw new Error(`Unknown message: ${lang}/${key}`); + } + return dictionary[key].replace(/\{([^}]+)\}/g, (_, name) => { + if (!Object.hasOwn(values, name)) throw new Error(`Missing message value: ${name}`); + const value = values[name]; + return Array.isArray(value) + ? value.map(item => dictionary["list.open"] + item + dictionary["list.close"]).join("") + : String(value); + }); + } + + return { DEFAULT_LANG, dictionaries, format }; +})(); + +globalThis.DancingMenMessages = DancingMenMessages; +if (typeof module === "object" && module.exports) { + module.exports = DancingMenMessages; +} diff --git a/index.html b/index.html index 2ab79ad..56b8fe4 100644 --- a/index.html +++ b/index.html @@ -3,89 +3,122 @@ + + + DancingMen CipherLab + このツールはJavaScriptを有効にすると動きます。 DancingMen CipherLab シャーロック・ホームズの「踊る人形」暗号を体験できるツールです。 - - + + 🔐 暗号化 - 🔓 復号 - 📓 置換表 + 🔓 復号 + 📓 置換表 - + 🔐 暗号化 平文を入力してください(A〜Zとスペースのみ):平文を入力してください(A〜Zとスペース、改行) - ※英字(A-Z)とスペースのみ入力可能です + A〜Zとスペース、改行が使えます。全角の英字とスペースは半角に置き換えます。 暗号化可能文字数: 0 - - 暗号化 + + + 原作の暗号文 + + 入力欄に入れる + + 暗号化 + 暗号文をPNGで保存 + 暗号文(ファイル名の列) + + 暗号文(GL-DancingMenフォント用の文字列) + + 小文字が旗なし、大文字が旗あり。GL-DancingMenフォントを指定すると、そのまま踊る人形になります。復号タブへ貼り付けると元の文に戻せます。 + フォント用の文字列をコピー + + - + 🔓 復号 - 下の人形から順にクリックして、対応する文字を復元していってください。 + 下の人形をクリックするか、Tabで選んでEnterを押すと、対応する文字を復元できます。 - ▼ 以下の人形をクリックして復号対象に追加: - + ▼ 以下の人形を選んで復号対象に追加します。 + + 旗なし + + 旗あり(語の終わり) + + - 入力した人形: - + 暗号文のテキストを貼り付ける(フォント用の文字列、またはファイル名の列) + + 貼り付けた暗号文を復号 + + + 入力した人形 + - - クリア - 1文字削除 + + クリア + 1文字削除 - - 復号結果: + + 復号結果 - 復号結果をコピー - - - 復号結果をコピーしました + 復号結果をコピー + - + 📓 置換表 以下はアルファベットと踊る人形の対応表です(平文文字がアルファベット、暗号化文字が人形文字)。クリックすると拡大表示されます。クリック、またはTabで選んでEnterを押すと拡大表示されます。 - 🏱 旗ありの意味 + 🚩 旗ありの意味 「旗あり」の人形は、その直後に - 空白が来る ことを示します。 + 空白が来ることを示します。続く行に英字がある場合も、行末の文字に旗が付きます。空行は通の区切りです。 たとえば "HELLO WORLD" では、"O" の次がスペースなので "Of.svg"(旗付き)が使われます。 @@ -93,7 +126,7 @@ 🏱 旗ありの意味 サンプル: は "O" + 空白 @@ -101,20 +134,24 @@ 🏱 旗ありの意味 - - - + + + 閉じる + + +
シャーロック・ホームズの「踊る人形」暗号を体験できるツールです。
小文字が旗なし、大文字が旗あり。GL-DancingMenフォントを指定すると、そのまま踊る人形になります。復号タブへ貼り付けると元の文に戻せます。
- 下の人形から順にクリックして、対応する文字を復元していってください。 + 下の人形をクリックするか、Tabで選んでEnterを押すと、対応する文字を復元できます。
▼ 以下の人形をクリックして復号対象に追加:
▼ 以下の人形を選んで復号対象に追加します。
以下はアルファベットと踊る人形の対応表です(平文文字がアルファベット、暗号化文字が人形文字)。クリックすると拡大表示されます。クリック、またはTabで選んでEnterを押すと拡大表示されます。
「旗あり」の人形は、その直後に - 空白が来る ことを示します。 + 空白が来ることを示します。続く行に英字がある場合も、行末の文字に旗が付きます。空行は通の区切りです。 たとえば "HELLO WORLD" では、"O" の次がスペースなので "Of.svg"(旗付き)が使われます。