# Custom Previewer Tab（カスタムプレビュータブ）

> Proxyman のカスタムプレビュータブを追加して、リクエストやレスポンスのボディを JSON、Protobuf、HTML、MessagePack として表示したり、Connection Log タブを追加したりできます。

## 1. カスタムプレビュータブとは {#1-whats-it}

カスタムプレビュータブを使うと、リクエストとレスポンスのパネルに追加のタブを表示できます。各タブは、常に 1 つの形式でコンテンツを表示します。

このツールは、次のような場合に役立ちます：

* Content-Type は `application/json` ではないが、ボディを **JSON** として整形する
* Content-Type は `application/x-protobuf` ではないが、ボディを **Protobuf** として整形する
* HTML ページを Web View でレンダリングする
* minify されたファイル（HTML、CSS、JS）を **整形**（Beautify）する
* Multipart/form-data の表示
* `Content-Type` に関係なく、選択した形式でボディの整形を試す
* MessagePack（msgpack）を JSON に変換する
* [Code Generator](https://proxyman.com/docs/ja/advanced-features/code-generator) で Swift、Node、JavaScript、cURL などのコードを生成する
* GraphQL Query の整形（Prettier）
* [Connection Log](https://proxyman.com/docs/ja/basic-features/connection-log) で DNS、TCP、TLS、HTTP の詳細を確認する

![Request と Response のチェックボックスがあり、Connection Log にチェックが入っている Proxyman の Custom Body Previewer Tabs ウィンドウ（Add Custom Tabs を含む）](https://proxyman.com/docs/assets/proxyman-custom-previewer-tab-window.jpg)

_Request / Response パネルのカスタムタブを選択する_

> **備考:** 選択したカスタムタブは、Request または Response ビューの右側に追加されます。 

## 2. 使い方 {#2-how-to-use-it}

カスタムプレビュータブのウィンドウを開くには：

1. Request / Response タブバーの「+」ボタンをクリックするか、**Tools** → **Custom Previewer Tab…** を開きます。
2. チェックボックスをオンまたはオフにして、カスタムタブを表示または非表示にします。
3. 新しいタブが Request または Response パネルに表示されます ✅

### 2.1 Server-Sent Events と OpenAI タブ {#21-server-sent-events-and-openai-tabs}

Proxyman 5.22.0 以降では、次をサポートしています：

* **SSE** タブ：OpenAI エンドポイントの Server-Sent Events 用です。各データイベントのインライン JSON を自動で整形します。
* **OpenAI** タブ：ストリーミングされたコンテンツを自動で結合し、チャットビューの出力と同様の最終結果を表示します。

### 2.2 接続ログ {#22-connection-log}

* **Connection Log** には、選択したリクエストの接続情報が表示されます。DNS 名前解決、TCP 接続、TLS ネゴシエーション、証明書、HTTP ヘッダーが含まれます。
* Request タブバーの **+** をクリックします。**Request** の下で、**Connection Log** にチェックを入れると表示され、チェックを外すと非表示になります。
* タブは Request パネルの **Summary** の隣に表示されます。既定で有効になっており、Proxyman は選択内容を記憶します。
* サンプルのログは [HTTP/2 ガイド](https://proxyman.com/docs/ja/basic-features/http2) を、すべての項目は [接続ログのガイド](https://proxyman.com/docs/ja/basic-features/connection-log) を参照してください。

## 3. ⚡️ 応用：Scripting ツールでカスタムタブを作成する {#3-️-advanced-create-a-custom-tab-with-the-scripting-tool}

* ✅ タブに独自のデータを表示できます
* ボディをデコードしたい場合や、ボディの一部を独自のタブに表示したい場合に便利です

### 使い方 {#how-to-use}

1. Request / Response タブバーの「+」ボタンをクリックするか、**Tools** → **Custom Previewer Tab…** を開きます。
2. **Add Custom Tabs** ボタンをクリックします。
3. Request または Response パネルを選択し、タブの名前を設定します。
4. 「...」ボタンをクリックして、JavaScript のコードを表示します。
5. **Scripting** → **Script List…** を開き、新しい[スクリプト](https://proxyman.com/docs/ja/scripting/script)を作成して、このコードで独自のデータを表示します。

![onRequest と onResponse で customPreviewerTabs の値を設定している Proxyman のスクリプトエディタ](https://proxyman.com/docs/assets/343035431-1a336092-5c50-4e23-afbb-9a41f9679bb9.jpg)

_コードを書いてデータを表示する_

6. 完了です。

![スクリプトから取得したデータが入ったカスタムボディタブと json タブを表示している Proxyman](https://proxyman.com/docs/assets/343035436-dc7e6346-9ac6-4601-b07a-8294de2c4a02.jpg)

_新しいタブにデータを表示する_

## 4. 例 {#4-examples}

### JSON TreeView を強制的にレンダリングする {#force-render-json-treeview}

Proxyman は、より見やすく表示するための JSON Tree View をサポートしています。

列ヘッダーを右クリックして、列の表示と非表示を切り替えられます。

### HTML ページを強制的にレンダリングする {#force-render-html-page}

Response パネルのリストで **HTML Webview** にチェックを入れると、HTML レスポンスを生の HTML として読むのではなく、Web ページとしてレンダリングできます。

### JavaScript ファイルを整形する {#beautify-the-javascript-files}

カスタムプレビュータブのウィンドウ下部にある **Auto beautify the minified content** にチェックを入れます。すると Proxyman は、minify された HTML、CSS、JavaScript を読みやすく整形します。

## 関連情報 {#learn-more}

* [OpenAI の Server-Sent Events を Proxyman でデバッグする](https://proxyman.com/posts/debug-server-sent-event-openapi-endpoint-with-proxyman)
* [HTTP リクエストとレスポンスの multipart/form-data ボディをプレビューする](https://proxyman.com/posts/2021-06-24-preview-multipart-formdata)