[2026/9/9]

[WEB App] Bz-Style Binary Editor v1 — ブラウザ完結型16進数バイナリエディタ & ワイルドカード検索

Bz-Style Binary Editor v1

ローカル環境でファイルを外部サーバーへ送信することなく、ブラウザ完結でバイナリデータの閲覧・書き換え・解析を行えるWebアプリケーションツール。

名作バイナリエディタ「Bz」の操作感と視認性にリスペクトを込めつつ、HTML5 CanvasとJavaScript（TypedArray / DataView）を用いて完全ローカルで動作する高速エディタとして構築しています。

大量のバイナリデータでもスムーズにスクロールできる仮想描画エンジン、ニブル（半バイト）単位に対応したワイルドカード検索、リアルタイム数値構造解析（Data Inspector）、データ構造を視覚化する 2D ビットマップ表示（Bitmap View）を搭載しています。

ブラウザ完結型16進数バイナリエディタ。仮想スクロール Canvas 描画、ニブル単位ワイルドカード検索、Data Inspector、Bitmap View 対応。

サンプルデータは、過去に録画したSteamゲーム「Subsistence」の録画データになります。

Subsistence (64-bit, DX9) 2022-05-03 14-39-46.mp4

完全ローカル処理:
読み込んだファイルデータはブラウザ上のメモリ（Uint8Array / ArrayBuffer）でのみ保持し、外部通信を行いません。
Canvas 仮想スクロール:
DOM要素を大量生成せず、可視領域のみを HTML5 Canvas に直接描画することで高速表示を実現。
ニブル単位ワイルドカード検索 :
HEX（例: 9? や ?A）および TEXT (UTF-8) での高度なパターンマッチングに対応。
Data Inspector :
カーソル位置の値を Uint8/Int8、Uint16/Int16、Uint32/Int32、Float32/Float64、8bit Binary、および Endianness（Little/Big）に応じてリアルタイムデコード。
2D Bitmap View :
バイナリ値を輝度に変換し、Stride幅（16px〜512px）を指定して画像構造やパッキングパターンを視覚化。
ダイレクト編集 & 履歴管理 — キー入力（0-9, A-F）による直接書き換えと、Undo/Redo スタックによる安全な編集。
エクスポート対応 :
編集後のバイナリデータを即座にローカルファイルとして保存ダウンロード。

左パネルのドラッグ＆ドロップエリアに解析・編集したいファイルをドロップするか、エリアをクリックしてファイルを選択します。読み込み完了後、ファイル名、ファイルサイズ、総バイト数などのメトリクスが表示されます。

左パネルの VIEW CONFIG でエディタの表示形式を変更できます：

設定項目	選択肢・説明
Bytes / Row	1行あたりの表示バイト数（16 / 32 / 64 bytes）を選択
Endianness	数値デコード時のエンディアン指定（Little Endian / Big Endian）

中央の Hex 領域をクリックしてカーソルを移動させます。キーボードから 0〜9 や A〜F を入力することで、指定位置の16進数データを直接書き換えることができます。

ツールバーの Search（または Ctrl+F）をクリックすると検索ウィンドウが開きます。

HEX Mode: 50 4E 47（完全一致）、9?（上位ニブル指定）、??（任意の1バイト）などの構文が利用可能です。
TEXT Mode: UTF-8 文字列での検索。? による任意の1文字マッチや \? でのエスケープに対応しています。
Goto Offset: ツールバーの Goto（または Ctrl+G）から、指定した16進数アドレス（例: 0x00000080）へ一瞬でジャンプできます。

右パネルでは、カーソル選択位置のバイナリを視覚的・数値的に分析できます。

Data Inspector: カーソル位置から続くバイト列を各種数値型に変換して一覧表示。
Bitmap View: ファイル全体を 2D 画像パターンとして描画。ドロップダウンで Stride（横幅）を変更することで、グラフィックリソースや特定のフォーマットパターンを特定できます。

ブラウザ完結型バイナリエディタ「Bz-Style Binary Editor」の技術解説。HTML5 Canvasを用いた仮想スクロール描画、HEX/TEXTワイルドカード検索エンジン、Data Inspector、Bitmap View、ショートカット操作・ヘルプモーダルの実装詳細。