🍣

Postman Visualizer

2025/08/08に公開

Postman

tech

今日はPostman Visualizer というツールを触っていきます。
これはツールというよりは、コレクションでAPI呼び出しのテストを行った際に、そのレスポンスのJSONなどを解析してグラフ化してくれる機能です。

APIの呼び出し統計をグラフ化するものではなく、そのレスポンスの中身にテーブル構造やデータ構造が含まれていた際に、それをあらかじめ指定しているデザインテンプレートに応じてグラフを描画してくれる、というものです。

Postmanがデザインテンプレートやテストで使えるAPIを準備してくれていますのでそれを見ていきます。

公式ドキュメントはこちらです。

さっそくやってみる

こちらにアクセスを行いまずはPostmanが準備している検証用ワークスペースを、自分のワークスペースにクローンします。

Visualizer Table

まずはVisualizer Tableをテストします。

https://postman-echo.com/postはPostmanが提供するecho用APIです、単純に投げた値が戻ってきます。
ボディに以下の値がセットされています。

{
	"contacts": [
		{
			"name": "{{$randomFullName}}",
			"email": "{{$randomEmail}}"
		},
		{
			"name": "{{$randomFullName}}",
			"email": "{{$randomEmail}}"
		},
		{
			"name": "{{$randomFullName}}",
			"email": "{{$randomEmail}}"
		},
		{
			"name": "{{$randomFullName}}",
			"email": "{{$randomEmail}}"
		}
		]
}

$randomFullName,$randomEmailはPostmanビルトイン関数でそれぞれ適当な名前とメールアドレスに置き換わったのちリクエストがポストされます。
実行をクリックすると以下のボディが投げられたことがわかります。

{
    "args": {},
    "data": {
        "contacts": [
            {
                "name": "Miss Toni Mohr",
                "email": "Jesus_Murazik11@gmail.com"
            },
            {
                "name": "Mr. Joy Walker",
                "email": "Lucas29@yahoo.com"
            },
            {
                "name": "Mrs. Darnell Halvorson",
                "email": "Tavares_Hansen@yahoo.com"
            },
            {
                "name": "Kate Douglas",
                "email": "Jailyn.Robel27@yahoo.com"
            }
        ]
    },
    "files": {},
    "form": {},
    "headers": {
        "host": "postman-echo.com",
        "x-request-start": "t1754553721.178",
        "connection": "close",
        "content-length": "332",
        "x-forwarded-proto": "https",
        "x-forwarded-port": "443",
        "x-amzn-trace-id": "Root=1-68945d79-53aa5e5a5439ba113c31097a",
        "content-type": "application/json",
        "user-agent": "PostmanRuntime/7.45.0",
        "accept": "*/*",
        "cache-control": "no-cache",
        "postman-token": "1364fa1b-e399-45ee-aa61-707eddbb4316",
        "accept-encoding": "gzip, deflate, br"
    },
    "json": {
        "contacts": [
            {
                "name": "Miss Toni Mohr",
                "email": "Jesus_Murazik11@gmail.com"
            },
            {
                "name": "Mr. Joy Walker",
                "email": "Lucas29@yahoo.com"
            },
            {
                "name": "Mrs. Darnell Halvorson",
                "email": "Tavares_Hansen@yahoo.com"
            },
            {
                "name": "Kate Douglas",
                "email": "Jailyn.Robel27@yahoo.com"
            }
        ]
    },
    "url": "https://postman-echo.com/post"
}

visualizationをクリックするとテーブルが描画されます。

このテーブルはデザインテンプレートがPost-responseの中に定義されているものが描画されています。

var template = `
    <style type="text/css">
        .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
        .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;}
        .tftable tr {background-color:#ffffff;}
        .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
        .tftable tr:hover {background-color:#e0ffff;}
    </style>
    
    <table class="tftable" border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        
        {{#each response.data.contacts}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td id={{@key}}>{{name}}</td>
                <td>{{email}}</td>
            </tr>
        {{/each}}
    </table>
`;

pm.visualizer.set(template, {
    response: JSON.parse(responseBody)
});

レスポンスのJSONがパースされ値がそのままname,emailを置き換えています。

Visualizer Bar Chart

こちらも同様にそのまま実行クリックするだけでテストが可能です。

{
    "args": {},
    "data": {
        "content": [
            882,
            699,
            715,
            923
        ]
    },
    "files": {},
    "form": {},
    "headers": {
        "host": "postman-echo.com",
        "x-request-start": "t1754554407.385",
        "connection": "close",
        "content-length": "51",
        "x-forwarded-proto": "https",
        "x-forwarded-port": "443",
        "x-amzn-trace-id": "Root=1-68946027-0b08c0f66a4ab7784abc3065",
        "content-type": "application/json",
        "user-agent": "PostmanRuntime/7.45.0",
        "accept": "*/*",
        "cache-control": "no-cache",
        "postman-token": "d3f7742c-da79-4a6d-93cf-4c4b758fe5f0",
        "accept-encoding": "gzip, deflate, br",
        "cookie": "sails.sid=s%3ARqDcLyrmTiLV0vcgLIZUC9GRcBlQAQB-.Z8R7Qk67lWEeKlFJLivqGITSOgLEfxv19%2FQYAubEy7M"
    },
    "json": {
        "content": [
            882,
            699,
            715,
            923
        ]
    },
    "url": "https://postman-echo.com/post"
}

このJSONレスポンスを以下の通りグラフ化してくれています。

さっそくやってみる

Visualizer Table

Visualizer Bar Chart

Discussion