人型ピクトグラム符号化学習ガイド

このページでは、4.html に実装されている「人型ピクトグラム符号化」の目的と使い方を解説します。多色のピクトグラムを例に、符号化（エンコード）と復号化（デコード）の考え方を体験的に学べる教材です。

学習目的

シンボルに 0/1 の符号を割り当てる仕組みを理解する
接頭語条件を満たす可変長符号を設計し、固定長符号より効率良く表現できることを確かめる
走査順序（行優先・列優先）や符号化単位（1個・2個組）を変えると符号長がどう変わるかを比較する
任意のビット列を復号してピクトグラムに戻す手順を身に付ける

画面構成と基本操作

ピクトグラムグリッドと設定コントロールのスクリーンショット — グリッドと設定パネル。列数は最大 20 まで拡張でき、ピクトグラムは接触に近い配置で表示されます。

シンボル種類 n / 行 a / 列 b を選択して、学習したい構成を決めます。列 b は最小 3 から最大 20 まで設定できます。
走査順 を切り替えると、エンコード時に読み取る順番（行優先・列優先）が変わり、リアルタイムでビット列が更新されます。
符号化単位 を「1個ずつ」または「2個組」から選びます。2個組では n×n 通りのペアをすべて符号化できるように設定が必要です。
「格子を再生成」を押すと、新しいサンプル並び（任意の例）で学習を続けられます。

符号割り当て表のスクリーンショット — 符号割り当て表では、各シンボル（またはペア）に 0/1 で構成されたコードを入力します。空欄や重複、接頭語の衝突があるとエラーが通知されます。

初期状態では、出現頻度に基づいた簡易ハフマン符号が自動でセットされます。学習者はこれをヒントにしつつ、自由に符号を編集して効率を試せます。
2個組モードを選んだ際にセル数が奇数だとリアルタイムプレビューの欄に警告が表示され、符号割り当てが無効になります。行・列・走査順を調整して偶数セルにし、n² 通りすべてのペアに符号が付くようにしてください。

リアルタイムの符号化プレビュー

リアルタイムプレビューのスクリーンショット — 符号表を編集すると、総ビット数・1セルあたりの平均ビット数・固定長との比較がリアルタイムで更新されます。

コードを入力するたびに、下部のプレビュー領域にエンコード結果が表示されます。2個組モードでは「理論上の組み合わせ数 n²」も確認できるため、すべてのペアについて符号が定義されているかを意識できます。

復号体験

復号結果をピクトグラムで表示したスクリーンショット — 入力したビット列を復号すると、テキストの説明に加えてピクトグラムでも復元された並びを確認できます。

「復号チャレンジ」に任意のビット列を入力します（自動生成したエンコード結果を貼り付けても構いません）。
復号ボタンを押すと、読み取ったシンボル列がテキスト表示され、同時にピクトグラムで再現されます。
2個組モードの場合はペアを展開したうえで並びが描画されるため、視覚的に確認できます。

学習の進め方の提案

まずは n=2 の固定長符号と可変長符号（例: 0,1 / 0,10,11）を比較し、平均ビット数がどう変化するかを体験します。
n=3〜6 へ段階的に増やし、頻度が偏った並びでハフマン符号がどの程度効率化できるか確かめます。
2個組モードに切り替え、n² 通りのペアに符号を割り当てる練習を行います。最短符号による利点と、実装の大変さを比較して議論できます。
自分の考えた符号でビット列を復号し、意図通りの並びが再現されるかをテストします。