@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">> {{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 パラメータを指定している想定です。
ちなみに同じアプローチで「例のエンドポイント」もビジュアライズできます。
↧