対応範囲と基本操作
この相互エンコーダーは,入力した文字列をBase64,URLパーセント形式,16進数,2進数のいずれかへ変換し,同じ4方式からUTF-8文字列へ戻すためのブラウザツールです.入力欄,エンコードとデコードの切替,方式の選択,結果欄という一つの流れに機能を絞り,入力が変わるたびに選択中の変換を実行します.4方式の結果を同時に並べるのではなく,必要な方式を一つずつ選びます.
結果欄は読み取り専用で,コピーボタンからClipboard APIへ渡せます.「方向を入れ替え」を押すと,現在の出力を次の入力へ移し,エンコードとデコードを反転します.往復結果を確かめたいときには便利ですが,変換前の書式や意図まで検証する機能ではありません.
HTML実体参照,Unicodeエスケープ,Base64URL,文字コード自動判定には対応していません.これらは似た見た目でも規則と用途が異なるため,必要な場合は専用ツールを使います.また,どの方式も暗号化ではなく,入力内容の安全性を判定したり,HTMLを無害化したりするものでもありません.
UTF-8とBase64の変換
通常のテキストをBase64へ変換するとき,実装はTextEncoderでJavaScript文字列をUTF-8のバイト列へ変えます.ASCII文字は通常1バイト,日本語は多くの場合3バイト,絵文字などは4バイトになるため,見た目の文字数と処理するバイト数は同じではありません.得られた各バイトを文字へ対応させてからbtoaへ渡し,標準Base64文字列を作ります.
Base64は3バイト,つまり24ビットを6ビットずつ4組に分け,64種類の文字へ対応させる表現です.元の長さが3バイトの倍数でなければ末尾にイコール記号が付く場合があります.この処理はデータを印字可能なASCII文字へ置き換えるだけで,秘密にする処理ではありません.
デコードではatobでBase64をバイトへ戻し,その配列をTextDecoderでUTF-8文字列として解釈します.不正なBase64はエラーになります.また,元データがUTF-8ではない場合や,任意のバイナリをテキストとして戻そうとした場合,置換文字が表示されるなど元の内容を再現できないことがあります.「日本語なら必ず文字化けしない」ではなく,UTF-8で往復できる入力を扱う機能です.
URLパーセント形式
URL方式はJavaScriptのencodeURIComponentとdecodeURIComponentを使います.日本語や空白,URL構文で意味を持つ記号などを,UTF-8の各バイトに対応するパーセント記号と2桁の16進数へ変換します.例えば「あ」はUTF-8でE3 81 82となるため,パーセント形式では%E3%81%82に相当する並びになります.
encodeURIComponentでは英数字のほか,ハイフン,アンダースコア,ピリオド,感嘆符,チルダ,アスタリスク,アポストロフィ,丸括弧など一部の文字はそのまま残ります.画面上の名称にあるURLエンコードは,この組み込み関数の結果を指します.フォーム送信で空白をプラス記号へ置く規則や,URLSearchParamsが行う組み立てとは同一ではありません.
接続先のAPI仕様がどちらを要求するかを先に確認する必要があります.
この処理はURL全体を解析してホスト名やパスを保つ機能ではありません.入力文字列全体を一つのURIコンポーネントとして扱うため,完全なURLを入れるとコロンやスラッシュ,疑問符も変換対象になります.クエリ値やパスの一部分など,変換したい範囲だけを入力する使い方が向いています.
decodeURIComponentは不正なパーセント列やUTF-8として成立しない並びを受け取ると例外を返します.本ツールはその例外を画面のエラーとして扱います.プラス記号を空白へ直すapplication/x-www-form-urlencoded専用処理や,URLの妥当性検査は実装していません.
16進数と2進数
16進数モードでは,UTF-8バイトをそれぞれ2桁の小文字16進数へ変え,区切りなしで連結します.文字「A」はUTF-8で1バイトの0x41なので,出力は41です.日本語は複数バイトになるため,一文字に対して複数組の16進数が並びます.デコードでは16進数以外の文字を除いたうえで2文字ずつバイトへ戻します.残った桁数が奇数なら1バイトを構成できないためエラーです.
2進数モードは各UTF-8バイトを8桁の0と1へ変換し,バイトごとに半角空白で区切ります.「A」は01000001です.デコード時は0と1以外を除き,残った長さが8の倍数であることを確かめてからバイト列へ戻します.空白や改行を区切りに使えますが,入力に別の文字が混ざっていても除外されるため,原文の厳密な構文検査には使えません.
どちらの表示もUnicodeコードポイントそのものではなく,UTF-8へ変換した後のバイト表現です.同じ見た目の文字でも正規化形式が異なればバイト列が変わる場合がありますが,本ツールはNFCやNFDへの正規化を自動では行いません.
即時変換,入替,ファイル入力
テキスト入力では,文字列,モード,方式のいずれかが変わるたびに変換をやり直します.大きな入力を分割するWorkerやストリーミング処理はなく,ブラウザのメインスレッドとメモリを使います.長大なテキストでは画面操作が重くなる可能性があります.
ファイル入力はエンコード側だけの補助機能です.ファイル選択またはドロップを行うとFileReaderのreadAsDataURLで単一ファイルを読み,方式をBase64,モードをエンコードへ切り替えます.出力はBase64本体だけではなく,data:で始まりMIMEタイプとbase64指定を含むData URLです.
入力欄にはファイル名とサイズを示す案内文字列が入り,実際のファイル内容は結果欄に表示されます.
このページにはData URLから元ファイルを作って保存する機能,複数ファイルの一括処理,MIMEタイプの正しさを検証する機能はありません.大きなファイルはData URL化によって元データより長い文字列となり,メモリ使用量も増える点に注意が必要です.
ファイルを読み込んだ直後のData URLは結果欄に直接設定されます.その後に入力欄を編集すると,通常のテキスト変換処理へ戻るため,表示中のData URLをファイルオブジェクトとして保持し続ける編集ソフトではありません.Data URLをコピーして別の場所へ貼り付ける場合は,内容だけでなくMIMEタイプも文字列に含まれることを理解して扱います.
用途,エラー,扱えない範囲
Base64はAPIレスポンスやData URLの確認,URL方式はクエリ値やパス要素の確認,16進数と2進数はUTF-8バイトの観察に使えます.デバッグ時に形式を切り替えて違いを確かめる用途には向きますが,変換結果が接続先の仕様に適合するかまでは判定しません.相手側がBase64URL,別文字コード,独自の区切り規則を要求する場合は,その仕様に合わせた追加処理が必要です.
不正なBase64,URI形式,奇数桁の16進数,8の倍数でないビット列などはエラーとして結果を空にします.一方,16進数と2進数では対象外文字を先に除くため,誤入力のすべてを指摘する厳格なバリデーターではありません.コピーもブラウザの権限や実行環境によって失敗する場合があります.
入力と出力の入替では,現在の結果を文字列として入力へ移すだけです.Data URLを入れ替えても元ファイルへ復元するわけではなく,選択中の方式でその長いテキストを処理します.結果が空のときやエラー中は,まず方式と変換方向が入力の形式に合っているかを確認してください.Base64のパディング,16進数の偶数桁,2進数の8ビット単位が代表的な確認点です.
変換ロジックは画面上のJavaScriptで実行されますが,Base64等には機密性がなく,出力を共有すれば容易に戻せます.パスワード,秘密鍵,個人情報を保護する目的では使わず,必要なら適切な暗号化手段を選んでください.ページ資源や広告などサイト全体の通信有無と,入力文字列を変換する処理の場所は分けて考える必要があります.
長い結果は先頭と末尾だけでなく全体を保存し,途中の改行や空白がコピー時に加わっていないか,利用先へ渡す前に同じ方式で逆変換して確認すると入力ミスを見つけやすくなります.テスト用の短い既知文字列でも往復させると,相手側と方式が一致しているかを切り分けられます.