JSON API レスポンスに含まれる Base64 画像をデバッグする方法

JSON 内の Base64、何が問題なのか

マルチモーダル AI API ── 画像生成、OCR、音声合成 ── は、JSON レスポンスの中にメディアデータを Base64 エンコード文字列として返すのが一般的です。従来の JSON ビューアーはこれらをプレーンテキストとして扱うため、画面に表示されるのは延々と続くエンコード文字の羅列。中身が何なのかはまったくわかりません。

よくある対処法は多段階の手作業です。Base64 フィールドを探し、文字列をコピーし、別のデコーダーサイトを開き、ペーストして、デコードして、ダウンロード。1 つのフィールドだけでも面倒ですが、レスポンスに複数の Base64 値が含まれていると、作業効率が大きく損なわれます。

典型的な AI API レスポンスの構造

以下は、DALL·E 画像生成レスポンスの簡略化したサンプルです。複数の画像バリエーションが含まれています：

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

各 "b64_json" フィールドには、Base64 エンコードされた完全な PNG 画像が格納されています。通常の JSON ビューアーでは 3 つの巨大なテキストブロックが並ぶだけで、中身を見ることも、比較することも、画像として正しいかどうかを確認することもできません ── 1 つずつデコードしない限り。

もっと良い方法：自動検出してインラインプレビュー

ViewJSON は、JSON 内の Base64 エンコードメディアを自動検出し、インラインプレビューとしてレンダリングします ── 画像はサムネイルで、音声は再生プレーヤーで、動画は埋め込みプレーヤーで、PDF はドキュメントプレビューとして表示されます。

検出はどのように行われるのか

ViewJSON はフィールド名や文字列の長さで推測するのではなく、マジックナンバー検出を使用します。これは OS がファイル形式を識別するのと同じ技術です。

仕組みはシンプルです：

1. JSON 内の各文字列に対して、Base64 コンテンツの先頭 64 バイトだけをデコードします
2. デコードしたバイト列を、既知のファイルフォーマットシグネチャ（マジックナンバー）のライブラリと照合します
3. 一致が見つかれば（例: 89 50 4E 47 = PNG、FF D8 FF = JPEG）、対応するプレビューをレンダリングします

この方式は非常に高速です。100 MB の Base64 文字列でも、検出時にデコードするのは先頭 64 バイトだけなので、ミリ秒単位で識別が完了します。フルコンテンツのデコードは、プレビューを展開したときに初めて行われます。

対応フォーマット

ViewJSON は現在 15 種類以上のメディアフォーマットを検出・プレビューできます：

ステップバイステップ：API レスポンスをデバッグする

1. ViewJSON を開く ── viewjson.net にアクセス
2. JSON を貼り付ける ── ターミナル、Postman、またはコードから API レスポンス全体をコピーしてエディターに貼り付けます。不正な JSON（末尾のカンマ、コメント、クォートなしのキー）は自動修復されます。
3. プレビューを確認する ── Base64 フィールドは自動的に検出されます。検出されたメディアフィールド横の目のアイコン（👁）をクリックすると、インラインプレビューの表示/非表示を切り替えられます。
4. 出力を比較する ── すべてのプレビューを表示した状態で JSON をスクロールすれば、複数の画像を並べて比較できます。別のツールは不要です。
5. チームに共有する ── 共有ボタンを使うと、JSON 構造を圧縮した URL が生成されます。なお、非常に大きな Base64 データは URL の長さ制限により省略される場合があります。

特に役立つシーン

• DALL·E / Stable Diffusion の出力確認 ── 画像生成 API は複数の Base64 バリエーションを返すことがよくあります。ViewJSON なら、すべての画像を並べて比較し、最適なものを選べます。
• OCR のクロップ領域チェック ── バッチ OCR ではクロップされた画像領域が大量に Base64 で返されます。インラインプレビューですぐに位置ズレやクロップミスを発見できます。
• TTS 音声バリエーションの比較 ── 音声合成 API で異なる声質やトーンをテストする際、JSON 内の各音声クリップをその場で再生して比較できます。
• HTTP キャプチャの確認 ── Postman や Fiddler のリクエスト履歴にある JSON を貼り付ければ、エンコード文字列をスクロールする代わりに、実際のメディア内容をすぐに確認できます。

プライバシー

すべての処理はブラウザ内で完結します。JSON や Base64 データがサーバーに送信されることはないため、機密性の高い API レスポンスにも安心して使用できます。