バイナリファイルの16進ダンプリストおよびBase64変換ツール

このページをスマホなどでご覧になる場合は、画面を横長にする方が読みやすくなります。
2024年07月04日 公開。

パソコンのディスク内のバイナリファイル(またはテキストファイル)を指定すると、そのファイルの16進ダンプリストを表示したり、ファイルの内容をBase64エンコードして表示したり、するサービスです。ファイルの内容をC言語の配列に埋め込むプログラムや、JavaScriptUint8Arrayに埋め込む出力する機能もあります。

なお、処理は全てJavaScriptにより、ローカルマシン内で行われるため、バイナリファイルの内容が外部に送信される事はありません。

表示方法を選んだ後に、参照...ボタン(OSやブラウザにより、ファイルを選択など、別の表記になる場合があります)をクリックして処理したいファイルを指定し、最後に表示ボタンをクリックすると、ダンプリスト表示やBase64エンコード等の処理が行われます。詳しい説明は下に書いてあります

目次

1. このサービスの使い方 … 1ページ
1-1. 表示方法の選択 … 1ページ
1-1-1. 表示方法の選択方法と選択肢 … 1ページ
1-1-2. 16進ダンプリスト … 1ページ
1-1-3. Base64エンコード(改行なし) … 1ページ
1-1-4. Base64エンコード(改行あり) … 1ページ
1-1-5. C言語のソースに埋め込み … 1ページ
1-1-6. JavaScriptのソースに埋め込み … 1ページ
1-2. ファイルの選択 … 1ページ
1-3. 表示ボタンのクリック … 1ページ
1-4. 処理結果をクリップボードにコピーする … 1ページ

1.このサービスの使い方

このサービスは、バイナリファイル(またはテキストファイル)の内容を、16進ダンプリストとして表示したり、ファイルの内容のBase64のエンコード結果を表示したりするものです。また、16進ダンプリストの結果を利用して、ファイルの内容をC言語のuint8_t型の配列に埋め込んだり、Base64エンコードの結果を利用して、ファイルの内容をJavaScriptのUint8Arrayに埋め込んだりするプログラムを出力する機能もあります。

このサービスでは、JavaScriptのコードにより、ファイルをローカルマシン内で処理します。よって、ファイルの内容が、外部に送信される事はありません。ファイルの全部をローカルマシンのメモリに読み込んで処理するため、大きなファイルを読み込むと、大量のメモリを使用して処理が重くなる可能性があります。100kB以内程度の、比較的小さなファイルの処理に向いています。

このサービスを使うには、(1)表示方法の選択、(2)ファイルの選択、(3)表示ボタンのクリックの順に操作を進めます。以下、各ステップごとに説明します。

1-1.表示方法の選択

1-1-1.表示方法の選択方法と選択肢

図1に示す様に、ドロップダウンリストで表示方法を選択してください。

図1、表示方法の選択
図1、表示方法の選択

上の例は、Windows 11のFireFoxで実行した例です。OSやブラウザにより、画面表示は変わります。

選択肢には次の5つがあります。

各選択肢の説明を、以下に説明します。

1-1-2.16進ダンプリスト

表示方法として16進ダンプリストを選択すると、図2に示す様な16進ダンプリストが表示されます。

図2、16進ダンプリストを出力した例
図2、16進ダンプリストを出力した例

1-1-3.Base64エンコード(改行なし)

表示方法としてBase64エンコード(改行なし)を選択すると、図3に示す様に、ファイルの内容をBase64エンコードした結果が表示されます。

図3、Base64エンコードの結果を表示した例
図3、Base64エンコードの結果を表示した例

1-1-4.Base64エンコード(改行あり)

表示方法としてBase64エンコード(改行あり)を選択すると、Base64エンコード(改行なし)を選択した場合と同様、ファイルの内容をBase64エンコードした結果(図3参照)が表示されます。

エンコード結果を画面上で見るだけなら、Base64エンコード(改行なし)Base64エンコード(改行あり)は同じですが、エンコード結果をクリップボードにコピーする際に、前者は、エンコード結果の全部を1行としてコピーを行うのに対して、後者は、76文字ごとに改行してコピーします。(図4、図5参照)

図4、Base64エンコード(改行なし)のエンコード結果をテキストエディタにペーストした例
図4、Base64エンコード(改行なし)のエンコード結果をテキストエディタにペーストした例
図5、Base64エンコード(改行あり)のエンコード結果をテキストエディタにペーストした例
図5、Base64エンコード(改行あり)のエンコード結果をテキストエディタにペーストした例

1-1-5.C言語のソースに埋め込み

表示方法としてC言語のソースに埋め込みを選択すると、図6に示す様に、ファイルの内容を16進表記する事で、C言語の配列に、ファイルの内容を埋め込むプログラムが表示されます。

図6、C言語のソースに埋め込みの出力結果の例
図6、C言語のソースに埋め込みの出力結果の例

このプログラムでは、fileSizefileContentの2つの変数が定義されます。fileSizeは、ファイルのバイト数を表すsize_t型の変数です。またfileContentは、ファイルの内容を埋め込んだuint8_t型の配列です。

size_tとuint8_tの2つの型を使うには、stdint.hをインクルードする必要があるため、そのインクルード文を、コメントとして1行目に書いてあります。

1-1-6.JavaScriptのソースに埋め込み

表示方法としてJavaScriptのソースに埋め込みを選択すると、図7に示す様に、ファイルの内容をBase64エンコードして得られた文字列をデコードして、Uint8Arrayに埋め込むJavaScriptのプログラムを生成します。

図7、JavaScriptのソースに埋め込みの出力結果の例
図7、JavaScriptのソースに埋め込みの出力結果の例

このプログラムではまず、Base64エンコードで得られた文字列をatob関数でデコードし、バイナリ文字列(文字コードが0~255の範囲の文字列)に変換します。次に、バイナリ文字列をUint8Array.from関数でUint8Arrayに変換します。

1-2.ファイルの選択

処理するファイルを選択するには、ファイル:の右に表示されている、参照...ボタン(Windows用FireFoxの場合)をクリックします。(図8参照) なお、このボタンは、OSやブラウザによっては、ファイルを選択(Windows用Chromeの場合、図9参照)やファイルの選択(Windows用Edgeの場合、図10参照)など、別の表記になる場合があります。

図8、参照...ボタン(Windows用FireFoxの場合)
図8、参照...ボタン(Windows用FireFoxの場合)
図9、ファイルを選択ボタン(Windows用Chromeの場合)
図9、ファイルを選択ボタン(Windows用Chromeの場合)
図10、ファイルの選択ボタン(Windows用Edgeの場合)
図10、ファイルの選択ボタン(Windows用Edgeの場合)

ボタンをクリックすると、ファイルの選択画面が表示されますので、ファイルを選択してください。(図11参照)

図11、ファイルの選択画面(Windows用FireFoxの場合)
図11、ファイルの選択画面(Windows用FireFoxの場合)

OSやブラウザにより、表示する画面は変わります。

1-3.表示ボタンのクリック

表示方法を選択し、ファイルを選択したら、最後に表示ボタンをクリックします。(図12参照) そうすると、表示方法の選択内容により、ファイルの16進ダンプリストやBase64エンコードの結果などが表示されます。

図12、表示ボタンをクリックする
図12、表示ボタンをクリックする

なお、サイズの大きなファイルの場合は、処理が終わるまでに時間がかかります。この場合、図13に示す様に、右下に〇%読み込み済み(〇には数字が入ります)と、進捗状況が表示されます。

図13、進捗状況の表示
図13、進捗状況の表示

処理が完了すると、進捗状況の表示が読み込み完了に変化します。(図14参照)

図14、処理完了時の表示
図14、処理完了時の表示

1-4.処理結果をクリップボードにコピーする

表示ボタンをクリックした後、ファイルの処理が完了して、図14の様に読み込み完了のメッセージが表示されると、コピーボタンが有効化され、クリックできる様になります。(図15参照)

図15、コピーボタン
図15、コピーボタン

コピーボタンをクリックすると、処理結果がクリップボードにコピーされます。

Arduino 電子工作
このサイトの記事が本になりました。
書名:Arduino 電子工作
ISBN:978-4-7775-1941-5
工学社の書籍の内容の紹介ページ
本のカバーの写真か書名をクリックすると、Amazonの書籍購入ページに移動します。