黒塗りグリッド生成ツール

16文字 x 20行の問題文を4x4文字ブロック (4列 x 5行 = 20ブロック) に分け、閾値 k に応じて黒塗り画像を生成するツールです。jszip.min.js を同梱しているため、Zip出力はオフラインでも動作します。

機能

• 問題文入力とグリッド表示
• 4x5グリッドでのブロック番号順列編集 (1〜20)
  • 1〜20以外は無効（変更なし）
  • 既存番号入力時は該当2マスを入れ替え
• k の変更による自動黒塗り表示
• k=1..20 のPNGをZipで一括保存
• 問題文 + 順列のプロジェクトJSON保存/読込
• 文字エンコーディング: UTF-8

使い方

1. index.html をブラウザで開く
2. 問題文と順列を入力
3. 入力内容は自動でプレビューに反映
4. k を調整して表示確認
5. 必要に応じて以下を実行
   • k=1〜20 をZip保存
   • プロジェクト保存
   • プロジェクト読込

プロジェクトJSON形式

{
  "version": 1,
  "encoding": "UTF-8",
  "createdAt": "2026-03-04T12:34:56.000Z",
  "problemText": "16文字x20行の文字列...",
  "permutation": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
}