# リクエスト / レスポンスのプレビュー

> Proxyman の Header、Cookies、Query、Body、Raw、JSON Tree View のタブでリクエストとレスポンスを確認し、作業に合わせてパネルを配置できます。

[Certificate](https://proxyman.com/docs/ja/debug-devices/macos) をインストールし、ドメインまたはアプリで [SSL Proxying](https://proxyman.com/docs/ja/basic-features/ssl-proxying) を有効にすると、ネットワーク通信がすぐに Proxyman のウィンドウに表示されます。ウィンドウは主に 3 つのエリアで構成されています：

* 左パネルの Source List 
* 中央パネルの Flow List 
* 右パネルの Flow Content

![Source List、リクエスト一覧、201 Created のレスポンスを含む POST リクエストの JSON ボディが表示された Proxyman のメインウィンドウ](https://proxyman.com/docs/assets/proxyman-main-window.jpg)

_Proxyman のメインウィンドウ_

## ボディのプレビュー {#body-content-previewer}

リクエストまたはレスポンスの内容に応じて、Proxyman は次のタブに自動的に分けて表示します：

* **Header**: すべてのヘッダー（キーと値のテーブル）
* **Cookies**: リクエストの **Cookie** ヘッダー
* **Set-Cookie**: レスポンスの Set-Cookie ヘッダー
* **Auth**: **Authorization** ヘッダー
* **Body**: メッセージのボディです。Proxyman は **Content-Type** に応じて、JSON、PNG、GIF、Raw Data などのボディを自動的に整形して見やすく表示します。
* **Query**: リクエストのすべてのクエリパラメータ
* **Raw**: 生の HTTP メッセージ
* [Protobuf](https://proxyman.com/docs/ja/advanced-features/protobuf) メッセージ
* MessagePack
* [Multipart/form-data](https://proxyman.com/docs/ja/basic-features/multipart-form-data-previewer)

## カスタムプレビュータブ {#custom-previewer-tab}

表示するプレビュータブを選択できます：

* カスタムタブは Request/Response パネルに残ります
* Proxyman は、選択した形式でコンテンツをデコードし、見やすく整形します。

- [Custom Previewer Tab（カスタムプレビュータブ）](https://proxyman.com/docs/ja/basic-features/custom-previewer-tab)

![Request と Response のパネルの形式チェックボックスがある Proxyman の Custom Body Previewer Tabs ウィンドウ](https://proxyman.com/docs/assets/proxyman-custom-previewer-tab-window.jpg)

_表示するプレビュータブを選択_

## レイアウトモード {#layout-mode}

Request / Response パネルの配置方法は 2 つあります。詳しくは[縦または横のレイアウト](https://proxyman.com/docs/ja/basic-features/horizontal-vertical-layout)をご覧ください。

## Workspace のカスタマイズ {#customize-workspace}

アプリ右上のレイアウトボタンを使って、好みの配置に変更できます：

1. Source List パネルを折りたたむ / 展開する 
2. Request/Response パネルを新しいウィンドウで開く
3. Request/Response パネルを横レイアウトで表示する
4. Request/Response パネルを縦レイアウトで表示する

![右側にレイアウトボタン（Source List、Detachable Window、Horizontal、Vertical）が並んだ Proxyman のツールバー](https://proxyman.com/docs/assets/proxyman-toolbar-layout-buttons.jpg)

_ツールバーのレイアウトボタン_

## ショートカット {#shortcuts}

すべてのセクションで **Copy (⌘C)** と複数選択に対応しています。

詳細は、[Proxyman のキーボードショートカット](https://proxyman.com/posts/2019-08-20-Useful-shortcuts-that-boost-your-productivity)に関するブログ記事をご覧ください。

## **Body** プレビュー  {#body-previewer-}

Body プレビューは、コンテンツを自動的に整形し、便利な追加機能を提供します：

* **Tree View**: JSON を Tree View モードで表示します
* **Hex**: ボディを Hex 形式で表示します
* **Export only body**: ボディの内容のみをファイルに書き出します。Raw データやバイナリデータの保存に便利です。
* **Open With**: お好みのエディタでボディの内容を開きます。私のお気に入りは **Sublime Text** です 😍

## JSON Tree View モード {#json-tree-view-mode}

Proxyman には、JSON ボディ用のネイティブ JSON Tree View モードがあります。このモードでは次のことができます：

* [JSON Path](https://proxyman.com/docs/ja/basic-features/jsonpaths) を使って JSON を検索する
* Google Chrome DevTools と同じように、JSON のノードをコピーする

## さらに詳しく {#learn-more}

* [HTTP リクエストとレスポンスの multipart/form-data ボディをプレビューする](https://proxyman.com/posts/2021-06-24-preview-multipart-formdata)