Postman で「エンジニア・プログラマにしか使えないSNS」をビジュアライズすると楽しかった話

@HawkClaws さんの エンジニア・プログラマにしか使えないSNS （ versatileapi ）の API を Postman から使ってみました。

実は Postman に触るのは初めてだったんですが、とても使いやすい上に Visualizers というデータをビジュアライズする機能が面白かったので、ついつい遅くまで遊んでしまいました。フロントエンドエンジニアな方にはオススメです。仕組みも簡単で、任意の HTML を iframe 内のサンドボックスで走らせる、ただそれだけ。 script タグ内で Postman の API を呼び出し、 Handlebars のテンプレート構文で出力、仕上げに style タグでスタイライズすれば、即席のクライアントが出来上がる、という感じです（見るだけですけど）。
で、下記が私の作った versatileapi 用の Visualizers コードです。よろしければどうぞ。ブラックリストと返信先のテキストをプレビューする機能が売りです。が、使い方の説明などはしません。何と言っても「エンジニア・プログラマにしか使えないSNS」なので…。

const template = `
<style>
*, * > * {
    box-sizing: border-box;
    line-height: 1;
    margin: 0;
    padding: 0;
}
td, th {
    padding: 0.5em !important;
}
th {
    text-align: center;
}
.sns__updated-at,
.sns__user-id,
.sns__text-id {
    color: #c0c0c0;
    white-space: nowrap;
}
.sns__text__user-id {
    color: #0080f0;
    margin-bottom: 0.5em;
}
.sns__text__text-id {
    color: #008000;
    margin-bottom: 0.5em;
}
.sns__text__reply {
    background-color: rgba(0, 0, 0, 0.125);
    border: 1px solid #c0c0c0;
    border-radius: 0.5em;
    color: #606060;
    font-style: italic;
    line-height: 1.375;
    margin-bottom: 0.5em;
    padding: 0.5em 1rem;
    white-space: pre-wrap;
    word-break: break-all;
}
.sns__text__body {
    line-height: 1.375;
    white-space: pre-wrap;
    word-break: break-all;
}
</style>
<table>
    <thead>
      <tr>
          <th>Updated at</th>
          <th>User ID</th>
          <th>Text ID</th>
      </tr>
    </thead>
    <tbody>
      {{#each response}}
      <tr>
          <td class="sns__updated-at">{{updatedAt}}</td>
          <td class="sns__user-id">{{_user_id}}</td>
          <td class="sns__text-id">{{id}}</td>
      </tr>
      <tr>
          <td colspan="3">
            {{#if in_reply_to_user_id}}
            <div class="sns__text__user-id">@{{in_reply_to_user_id}}</div>
            {{/if}}
            {{#if in_reply_to_text_id}}
            <div class="sns__text__text-id">&gt; {{in_reply_to_text_id}}</div>
            {{#if reply}}
            <div class="sns__text__reply">{{reply.text}}</div>
            {{/if}}
            {{/if}}
            <div class="sns__text__body">{{text}}</div>
          </td>
      </tr>
      {{/each}}
    </tbody>
</table>
`;

const blacklist = [
    'ARASHI_NO_USER_ID'
];

let response = pm.response.json()

response = response.filter((item) => !blacklist.includes(item._user_id))

response.forEach((item) => {
    const date = new Date(item._updated_at)
    item.updatedAt = date.toLocaleString()
})

response.forEach((item) => {
    if (item.in_reply_to_text_id) {
        item.reply = response.find((reply) => reply.id === item.in_reply_to_text_id)
    }
})

pm.visualizer.set(template, { response })

なお orderBy パラメータを指定している想定です。
ちなみに同じアプローチで「例のエンドポイント」もビジュアライズできます。