Day17 - 生成AIで作るセキュリティツール100
ヴィジュネル暗号ツール（Vigenère Cipher Tool） は古典暗号学習のための包括的なWebベースのツールです。
単純な暗号化・復号だけでなく、3つのタブ機能で暗号の仕組みを深く理解できるよう設計されています：
- 📝 暗号化・復号タブ: 基本的な暗号化操作と詳細な可視化
- 🔬 タブラレクタ研究タブ: ヴィジュネル表を使った暗号化の仕組み研究
- 🧪 実験室タブ: シーザー暗号・ワンタイムパッドなどの関連暗号実験
👉 https://ipusiron.github.io/vigenere-cipher-tool/
以下は実際の画面例です。
ヴィジュネル暗号の暗号化例
🔐 基本的な暗号化機能
- 暗号化・復号: 平文 ⇔ 暗号文の相互変換
- スマート入力処理: 英字以外の文字を自動除外、大文字小文字統一
- ファイル入出力:
- 📁 ファイル選択ボタンでテキストファイル読み込み
- ドラッグ&ドロップによるファイル読み込み
- 📋 ワンクリック結果コピー機能
- リアルタイム検証: 入力内容に応じた警告・エラーメッセージ表示
📊 高度な可視化機能
- 処理対象テキスト: 実際に処理される英字のみの表示
- 文字対応テーブル: 平文・鍵・出力の文字を列で並べて対応関係を可視化
- インタラクティブハイライト: テーブルセルにマウスホバーでヴィジュネル表の該当部分をハイライト
- 完全なヴィジュネル表: 26×26のタブラレクタを常時表示
- 固定ヘッダー: 長いテキストでもスクロール時に列ラベルが常に見える
🧮 暗号化メカニズムの研究
- 文字別暗号化研究:
- 平文文字（A-Z）と鍵文字（A-Z）を選択
- 暗号文字の計算結果を即座に表示
- 数式:
暗号文字 ← shift(平文, 鍵)
- 数学的計算過程の表示:
- 文字 → 数値変換（A=0, B=1, ..., Z=25）
- モジュロ26演算の詳細:
(平文 + 鍵) mod 26 - 数値 → 文字変換の過程
🔄 逆算機能（復号研究）
- 鍵文字の特定:
- 平文文字と暗号文字から使用された鍵文字を逆算
- 数式:
鍵文字 ← findKey(平文, 暗号文) - 逆算の数学的過程:
(暗号文 - 平文 + 26) mod 26
🎯 インタラクティブ学習
- ヴィジュネル表ハイライト: 選択した文字組み合わせを表でハイライト表示
- リアルタイム計算: 文字選択と同時に計算結果を更新
🔤 シーザー暗号実験
- 1文字鍵の特殊性: ヴィジュネル暗号で鍵が1文字 = シーザー暗号
- シフト量の可視化: 選択した鍵文字によるシフト量（A=0, B=1, ..., Z=25）を表示
- 繰り返し鍵の表示: 1文字鍵がテキスト全体に繰り返される様子を可視化
- シーザー暗号との比較: ヴィジュネル暗号の特殊ケースとしての理解促進
🎲 ワンタイムパッド実験
- ランダム鍵自動生成:
- 平文と同じ長さの完全ランダム鍵を生成
- 暗号学的に安全な疑似乱数使用
- 理論上解読不可能の実証:
- 情報理論的安全性の概念を体験
- 鍵の長さ = 平文の長さの重要性
- 詳細な文字対応表:
- 各文字ペアの変換過程をテーブルで表示
- 鍵の使い捨て性質の理解促進
🌙 テーマ・表示
- ダークモード: ライト/ダーク テーマ切り替え（設定自動保存）
- レスポンシブデザイン: デスクトップ・タブレット・モバイル対応
- アクセシビリティ: キーボードナビゲーション、ESCキーでモーダル閉じる
📖 学習サポート
- 包括的ヘルプモーダル: 全機能の詳細な使い方ガイド
- ツールチップ: ヴィジュネル表の各セルにホバーで詳細情報
- 段階的エラー表示: 警告（無視可能）とエラー（処理停止）の区別
基本操作:
- モード選択: 「暗号化」または「復号」を選択
- テキスト入力:
- 手動入力: 暗号化したい平文、または復号したい暗号文を入力
- ファイル読み込み: 📁アイコンをクリックしてファイル選択
- ドラッグ&ドロップ: テキストファイルを入力欄に直接ドロップ
- 鍵の入力: 暗号化・復号に使用する鍵を英字で入力（例:
LEMON） - 実行: 「実行」ボタンをクリックすると結果が表示
- 結果取得: 📋 コピーアイコンで結果をクリップボードにコピー
可視化の活用:
- 文字対応テーブル: 平文・鍵・出力の対応関係を確認
- インタラクティブ学習: テーブルセルにマウスを合わせてヴィジュネル表の動作を理解
- 処理対象確認: 実際に暗号化される英字のみのテキストをチェック
暗号化研究:
- 文字選択: 平文文字（A-Z）と鍵文字（A-Z）をドロップダウンから選択
- 計算実行: 「計算する」ボタンで暗号化結果を表示
- 数式確認: モジュロ26演算の詳細な計算過程を確認
- 表ハイライト: ヴィジュネル表で該当する交点セルがハイライト
復号研究（逆算）:
- 逆算実行: 平文文字と暗号文字から鍵文字を特定
- 計算式理解:
(暗号文 - 平文 + 26) mod 26の仕組みを学習 - 応用学習: 既知の平文・暗号文ペアから鍵を推測する手法を理解
シーザー暗号実験:
- 平文入力: 暗号化したいテキストを入力
- 1文字鍵設定: A-Zの中から1文字を選択
- 実験実行: シーザー暗号としての結果を確認
- 比較理解: ヴィジュネル暗号の特殊ケースとしてのシーザー暗号を理解
ワンタイムパッド実験:
- 平文入力: 実験したいテキストを入力
- 鍵自動生成: 「ランダム鍵生成」ボタンで平文と同じ長さの鍵を生成
- 暗号化実行: 理論上解読不可能な暗号化を体験
- 結果分析: 文字ごとの対応表で一度きりの鍵使用の重要性を理解
段階的学習アプローチ:
- 基礎理解 (タブ1): まず基本的な暗号化・復号操作に慣れる
- 仕組み理解 (タブ2): 個別文字の変換メカニズムを深く研究
- 応用理解 (タブ3): 関連する暗号方式との比較で理解を深める
実践的な使い方:
- 短い単語から始めて段階的に長いテキストに挑戦
- 異なる長さの鍵で暗号化の性質の変化を観察
- ヴィジュネル表のハイライト機能を活用して視覚的に理解
- 数式表示で数学的背景を確認
- フロントエンド: HTML5, CSS3, Vanilla JavaScript (ES6+)
- UI フレームワーク: Alpine.js（軽量リアクティブ）
- アーキテクチャ: モジュラー設計（JS・CSS共に分離）
├── index.html # メインHTMLファイル
├── favicon.svg # ファビコン
├── js/ # JavaScript（モジュラー分離）
│ ├── app.js # アプリケーションエントリーポイント
│ ├── core/ # コアロジック層
│ │ ├── cipher.js # ヴィジュネル暗号アルゴリズム
│ │ ├── validation.js # 入力検証ロジック
│ │ └── utils.js # ユーティリティ関数
│ ├── features/ # 機能別モジュール
│ │ ├── main-tab.js # メイン暗号化タブ
│ │ ├── research-tab.js # タブラレクタ研究タブ
│ │ └── lab-tab.js # 実験室タブ
│ └── ui/ # UI制御層
│ ├── dom-elements.js # DOM要素管理
│ ├── theme.js # テーマ切り替え
│ ├── message-display.js # メッセージ表示
│ └── table-generator.js # テーブル生成
├── css/ # CSS（レイヤードアーキテクチャ）
│ ├── main.css # CSS統合エントリーポイント
│ ├── base/ # 基盤レイヤー
│ │ └── variables.css # デザインシステム変数（130+項目）
│ ├── themes/ # テーマレイヤー
│ │ ├── light.css # ライトテーマ
│ │ └── dark.css # ダークテーマ
│ ├── layout/ # レイアウトレイヤー
│ │ ├── container.css # コンテナ・ページレイアウト
│ │ └── grid.css # グリッド・フレックスレイアウト
│ ├── components/ # コンポーネントレイヤー
│ │ ├── buttons.css # ボタンコンポーネント
│ │ ├── forms.css # フォーム要素
│ │ ├── tabs.css # タブナビゲーション
│ │ ├── messages.css # メッセージ・通知
│ │ ├── tables.css # テーブル・可視化
│ │ ├── modal.css # モーダルダイアログ
│ │ └── icons.css # アイコン・ツールチップ
│ └── utilities/ # ユーティリティレイヤー
│ ├── animations.css # アニメーション
│ └── print.css # 印刷スタイル
├── assets/ # 静的アセット
│ └── screenshot.png # スクリーンショット画像
├── README.md # プロジェクト概要・使い方
├── TECHNICAL.md # 技術実装詳細解説
├── CLAUDE.md # Claude Code開発ガイド
└── LICENSE # MITライセンス
# リポジトリをクローン
git clone https://github.com/ipusiron/vigenere-cipher-tool.git
# ディレクトリに移動
cd vigenere-cipher-tool
# ブラウザーで index.html を開く
# または、ローカルサーバーを起動
python -m http.server 8000- テーマ:
css/themes/でライト・ダークテーマを変更可能 - デザインシステム:
css/base/variables.cssで統一的なデザイン調整 - 機能拡張: モジュラー構造により機能追加が容易
実装の技術的詳細については TECHNICAL.md を参照してください。
ヴィジュネル暗号は、シーザー暗号を強化した多表式換字暗号として知られていますが、現代の観点からは以下のような明確な弱点を持ちます。
短い鍵を使うと、暗号化のパターンが繰り返されるため、暗号文にも周期性が現れます。
この性質を利用して、カシスキーテスト（Kasiski Test） により鍵長を特定し、各部分をシーザー暗号として分解できます。
鍵が再利用される場合、一度でも漏洩すると同じ鍵で暗号化されたメッセージはすべて復号可能です。
これは ワンタイムパッド（使い捨て鍵） との大きな違いです。
鍵の長さが分かった場合、暗号文を複数のシーザー暗号に分割できるため、頻度解析によって平文を逆算される危険性があります。
- 既知平文攻撃（Known Plaintext Attack）
- 選択平文攻撃（Chosen Plaintext Attack）
- 選択暗号文攻撃（Chosen Ciphertext Attack）
などの基本的な攻撃に対して、暗号構造的に防御手段がありません。
ヴィジュネル暗号は原理的に A〜Zの26文字 に限定されており、記号・数字・日本語などを直接扱うことができません。
ヴィジュネル暗号は教育・学習用には適していますが、現代の通信やセキュリティには使用できません。
- 『暗号技術のすべて』 P.71-81
- 『シーザー暗号の解読法』 P.90-93
- 『Pythonでいかにして暗号を破るか 古典暗号解読プログラムを自作する本』 P.333-422
MIT License - LICENSEファイルを参照
本ツールは、「生成AIで作るセキュリティツール100」プロジェクトの一環として開発されました。このプロジェクトでは、AIの支援を活用しながら、セキュリティに関連するさまざまなツールを100日間にわたり制作・公開していく取り組みを行っています。
プロジェクトの詳細や他のツールについては、以下のページをご覧ください。
🔗 https://akademeia.info/?page_id=42163
本ツールの実装技術、コアアルゴリズム、設計判断の詳細については、以下の技術解説ドキュメントを参照してください：
- コアアルゴリズムの数学的基盤
- モジュラーアーキテクチャの設計
- CSS設計パターンとデザインシステム
- 入力検証と視覚化エンジンの実装
- 開発過程で得られた技術的教訓