HEX友 - 操作マニュアル

1. リアルタイム変換機能

16進数(HEX)、2進数(BIN)、10進数(DEC)、文字(ASCII)のいずれかの枠に数値を入力すると、他のすべての表現にリアルタイムで自動変換されます。

• 例えば、16進数に「FF」と入力すると、10進数では「255」に、2進数では「11111111」と表示されます。

2. 仮想CPU＆メモリ・シミュレーター

自分で書いたプログラム（16進数）をメモリに読み込ませて、CPUのように実行することができます。

• プログラム・エディター: ここに16進数で命令を記述します。入力すると自動的に2文字ごとにスペースで区切られます。
• メモリへ読み込む: エディターに書いたプログラムを下部の「メモリ領域」にセットします。
• 実行 (RUN): プログラムを自動的に連続して実行します。
• ステップ実行 (STEP): プログラムを1命令（1アドレス）ずつ手動で実行し、レジスタ（A, Bなど）の動きを確かめることができます。

3. 命令の種類（各種アーキテクチャ）

画面上部の設定パネルから、CPUの「アーキテクチャ」を変更すると、使える命令（コード）が変わります。

• CPU1: 複雑な命令を持つアーキテクチャ（例: B8 は MOV A, im）。
• CPU2: シンプルな命令構造を持つアーキテクチャ。
• シンプル: 独自の非常に簡略化された学習用命令セット。

※ 利用可能な命令コードの一覧は、画面下部の「命令セット表」タブからいつでも確認できます。

4. ファイル ⇔ HEX 変換機能

画面下部の「ファイル生成」タブから、実際のファイルと16進数（HEX）データを相互に変換できます。

• ファイルから読込: 手元の画像やテキストファイルを読み込ませると、その中身のバイナリデータが16進数として自動展開されます（※ブラウザ保護のため5MBの制限があります）。
• 生成してダウンロード: テキストエリアに貼られた16進数データを、実際のファイルとして復元・ダウンロードします。
• プレビュー機能: 画像や動画などのマジックナンバーを検知した場合、ダウンロードと同時に画面上でプレビューが可能です。

5. 録画モード (Recording Mode)

「🎥 録画モード」ボタンを押すと、メニューや広告など不要な要素が隠れ、シミュレーター（またはファイル生成画面）だけがすっきりと表示されるモードになります。学習動画の撮影や画面共有時にご活用ください。右上の「❌」ボタンで元に戻せます。

6. その他の便利機能

• マジックナンバー一覧: タブから主要なファイル形式の先頭バイト（マジックナンバー）を確認できます。
• コピー＆クリア: エディターやHEXデータエリアには「📋 コピー」「🗑️ クリア」ボタンが備わっており、長い文字列もワンクリックで操作できます。
• テーマ変更: 画面上部の設定から、ハッカー風（黒・緑）やダークモードに画面の色を切り替えることができます。

🔰 初学者のためのバイナリプログラミング入門

16進数やアセンブリ言語が初めての方に向けて、「CPU1」アーキテクチャを使った簡単なプログラミングのチュートリアルをご紹介します。まずは設定で「CPU1」を選んでください。

◆ そもそも「レジスタ」と「メモリ」って何？

• レジスタ (Registers): CPUの中にある「超高速な一時メモ帳」です。計算を行うために直接数字を書き込んだり、足し算の結果を一時的に保存したりします。このシミュレーターには R0〜R15まで、16個もの箱（レジスタ）が用意されています。（※互換性や分かりやすさのため、R0を A、R1を B とも呼びます）
• PC（プログラムカウンタ）: 「今からメモリの何番地の命令を実行するか」を指し示す、しおりのような役割を持つ特殊なレジスタです。1回命令を実行するごとに自動的に次の番地へ進みますが、「ジャンプ命令」を使うとこのPCの数字が強制的に書き換わり、プログラムの別の場所にワープすることができます。
• FLG（フラグレジスタ）: 計算の結果（ゼロになったか等）や、比較の結果（一致したか）を覚えておくランプ（スイッチ）の集まりです。HEX友では「直前の比較が一致したかどうか（1か0か）」を記録するシンプルな仕組みになっています。

ステップ1: レジスタに数字を入れる

まずは先ほどの「一時メモ帳（レジスタ）」に数字を入れてみましょう。
エディターに以下のように入力し、「メモリへ読み込む」を押してから「ステップ実行」を2回押してみましょう。

B8 05   // Aに 05 を入れる (MOV A, 05)
B9 03   // Bに 03 を入れる (MOV B, 03)

ステップ2: 足し算をしてみる

さきほどのプログラムの続きに、AとBを足す命令を追加します。

B8 05   // A = 5
B9 03   // B = 3
01      // A = A + B (ADD A, B)
CD 80   // コンソールにAの値を出力する (INT 80)
F4      // プログラム停止 (HLT)

すべて通して「実行 (RUN)」を押すと、5 + 3 の結果である「8」がコンソールに表示されます。

ステップ3: ループ（繰り返し）を作る

コンピュータが得意なのは「繰り返し処理」です。新しく追加された `LOOP` 命令を使って、1から3までの数字を連続して出力してみます。

B8 01   // A = 1 (出力する最初の数字)
B9 03   // B = 3 (ループする回数)
CD 80   // [アドレス 04] Aを出力する
40      // Aを +1 する (INC A)
E2 04   // Bを -1 し、Bが0でなければ アドレス 04 に戻る (LOOP 04)
F4      // プログラム停止 (HLT)

ステップ4: 条件で動きを変える（条件分岐）

「もし〜ならジャンプする」という命令を使って、IF文のような処理を作ります。Aと直値（普通の数字）を比較して、一致していればジャンプするプログラムです。

B8 05   // A = 5
3C 05   // Aが 5 かどうかを比較する (CMP A, 05)
74 08   // もし一致していれば（FLG=1なら）、アドレス 08 にジャンプ (JE 08)
B8 99   // 一致していない場合、Aを 99 にする（ここは飛ばされます）
F4      // プログラム停止
00      // [アドレス 08]
B8 77   // ジャンプ先：Aを 77 にする
F4      // プログラム停止

Aを5にしているのでジャンプが成功し、最終的にレジスタAは「77（16進数）」になります。最初の B8 05 を B8 04 に変えて実行し、結果がどう変わるか試してみてください。

ステップ5: 本格的な16レジスタ操作（上級編）

R0からR15までの16個のレジスタをフル活用する「汎用拡張命令」を使ってみましょう！
命令コードのあとに「操作したい2つのレジスタ番号」を1バイト（16進数2桁）で指定します。例えば、左側がR5、右側がR10（16進数でA）なら 5A と書きます。

53 50 FF   // R5 に 直値 FF を代入する (MOV R5, FF)
53 A0 12   // R10 に 直値 12 を代入する (MOV R10, 12)
51 5A      // R5 に R10 の値を足す (ADD R5, R10)
50 25      // R2 に R5 の結果をコピーする (MOV R2, R5)
F4         // プログラム停止

このプログラムを実行すると、R5とR10に数字が入り、計算され、その結果が最終的に R2 のレジスタに格納されます。これが本物の機械語（マシン語）のデコード処理の基本です！

🎨 バイナリで画像を作ろう（ファイル生成チュートリアル）

16進数データはプログラムだけでなく、画像や動画そのものでもあります。シミュレーターの「ファイル生成」タブを使って、テキストから本物の画像を作り出す魔法のような体験をしてみましょう！

ミッション1: 世界最小のGIF画像を生み出す

以下の長い16進数は、実は**「1×1ピクセルの黒い点」**を表す世界最小クラスのGIF画像データ（わずか43バイト）です。

47 49 46 38 39 61 01 00 01 00 80 00 00 00 00 00 FF FF FF 21 F9 04 01 00 00 01 00 2C 00 00 00 00 01 00 01 00 00 02 02 44 01 00 3B

【やってみよう】
1. 上のデータをコピーして、シミュレーター画面の「ファイル生成」タブのテキストエリアに貼り付けます。
2. 最初の「47 49 46 38」が「GIF8」というマジックナンバー（ファイルの正体を示すサイン）であるため、アプリは自動的にこれをGIF画像だと判定します。
3. 「プレビューのみ」または「ダウンロード」ボタンを押すと、プレビュー領域に小さな黒い点（画像）が表示されます！

ミッション2: バイナリを書き換えて「色」を変える

先ほどのデータの中に、パレット（色情報）が隠されています。左から13番目の 00 00 00 が黒色、続く FF FF FF が白色を表すRGBデータです。
黒色を「真っ赤（Red）」に変えてみましょう。赤は16進数で `FF 00 00` です。

【やってみよう】
1. テキストエリアに貼ったデータのうち、80 00 00 00 00 00 FF FF FF となっている部分を探します。
2. それを 80 00 FF 00 00 00 FF FF FF に書き換えてみてください。（最初の 00 00 00 を FF 00 00 に変更）
3. 再度「プレビューのみ」を押すと、黒かった点が「赤い点」の画像に生まれ変わります！

このように、画像や動画もすべては「0〜F」の16進数の羅列でできており、直接書き換えること（バイナリエディット）で色や形を変えることができるのです。

シミュレーターに戻る