Run in Postmanボタンを設定してコレクション共有を効率化しよう！

# はじめに
`Run in Postman`ボタンは、自分のコレクションを手軽に共有するための効果的な方法です。`Run in Postman`ボタンを関連するAPI仕様ドキュメントや開発者ポータルに載せておけば、API利用ユーザーはボタンを押すだけで、コレクションを簡単にPostmanのワークスペースにフォークしてAPIエンドポイントやリクエストの構造をすばやく確認したり実行したりすることができます。また、コレクションの提供者にとってもコレクションを共有する手間を省力化できます。

:::note 
補足: フォーク(Fork)について

フォークとは、親要素の別ワークスペースへのコピーであり、親要素に変更を加えることなく変更できる新しいインスタンスのことです。Postman では、コレクション、環境、フロー（Postman Flows）をフォークできます。フォークはPostmanにおけるAPIコラボレーションを促進する利用者にとっても提供者にとても最強の機能です。

![Screenshot 2024-04-22 at 12.21.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/7ad80c8c-40c1-4005-922d-d1bda5efd470.png)

フォークにより
- 利用者は[Time to first call](https://blog.postman.com/the-most-important-api-metric-is-time-to-first-call/)が短縮化できる
- 提供者は利用者からフィードバックが得られる

:::

# Run in Postmanボタンをクリックするとどうなる？

これは著者がパブリックに公開している[コレクション](https://www.postman.com/yokawasa/workspace/opensearch-api/collection/32477503-b4ed5b3f-4bdc-429c-a326-2f5832bbec4d)のAPIドキュメントページの例です。

![Screenshot 2024-04-22 at 8.27.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/336f9f3c-a271-430e-e2a4-02db90608621.png)

APIドキュメントにあるオレンジ色の`Run in Postman`ボタンをクリックすると、次のようなモーダル（左イメージ）が表示され、フォークの作成先ワークスペースを選択できます。

![Screenshot 2024-04-22 at 10.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/037371f9-fbb0-3942-e667-007dbf10f21c.png)


# Run in Postmanボタン追加方法

Run in Postmanボタンを追加するには、次の手順に従います：

(1) Postmanでコレクションを開きます。

(2) コレクションの右上にある「...」（詳細）ボタンをクリックして`共有(Share)`をクリックします。

![Screenshot 2024-04-22 at 9.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/f7b66a8f-2a99-e95d-36cb-7e6d5060287c.png)

もし、共有元のコレクションがチームワークスペースにある場合は次のようなモーダルが表示され、公開先をチームなのかパブリックなのかを選択できます。共有元のコレクションがあるワークスペースのアクセス共有レベルによってこのモーダルの選択内容は異なります。

![Screenshot 2024-04-22 at 10.34.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/755efe6f-9ff8-2eaf-d572-3f27cde33226.png)


(3) `「Postmanで実行」経由 (via Run in Postman)`メニューを選択します。

![Screenshot 2024-04-22 at 9.42.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/7f6d2722-629a-561c-272d-bdeff0977025.png)

- オプショナルで、埋め込むコードにコレクションとセットで環境を含めることができます。`環境を追加(Add an environment)`ドロップダウンリストを選択して、環境を選択してください
- 埋め込みコードは`HTMLフレンドリ`（JavaScript, HTML, and CSSで構成）または、`Markdownフレンドリ`を選択できます

以下、HTMLフレンドリとMarkdownフレンドリのサンプルコードになります。

```html: HTMLフレンドリコード
<div class="postman-run-button"
data-postman-action="collection/fork"
data-postman-visibility="public"
data-postman-var-1="32477503-b4ed5b3f-4bdc-429c-a326-2f5832bbec4d"
data-postman-collection-url="entityId=32477503-b4ed5b3f-4bdc-429c-a326-2f5832bbec4d&entityType=collection&workspaceId=e7bccc60-56f2-4b2c-98fd-8cc4532662a2"></div>
<script type="text/javascript">
  (function (p,o,s,t,m,a,n) {
    !p[s] && (p[s] = function () { (p[t] || (p[t] = [])).push(arguments); });
    !o.getElementById(s+t) && o.getElementsByTagName("head")[0].appendChild((
      (n = o.createElement("script")),
      (n.id = s+t), (n.async = 1), (n.src = m), n
    ));
  }(window, document, "_pm", "PostmanRunObject", "https://run.pstmn.io/button.js"));
</script>
```

```markdown: Markdownフレンドリコード
[<img src="https://run.pstmn.io/button.svg" alt="Run In Postman" style="width: 128px; height: 32px;">](https://god.gw.postman.com/run-collection/32477503-b4ed5b3f-4bdc-429c-a326-2f5832bbec4d?action=collection%2Ffork&source=rip_markdown&collection-url=entityId%3D32477503-b4ed5b3f-4bdc-429c-a326-2f5832bbec4d%26entityType%3Dcollection%26workspaceId%3De7bccc60-56f2-4b2c-98fd-8cc4532662a2)
```

(4) 提供されるコードをコピーして、Webページやドキュメントに貼り付けます。

これは、コレクション概要部分にMarkdownフレンドリコードを貼り付けた例です。
![Screenshot 2024-04-22 at 8.27.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103420/336f9f3c-a271-430e-e2a4-02db90608621.png)


より詳しい説明はRun in Postmanボタンに関する公式ページを参照ください。

https://learning.postman.com/docs/publishing-your-api/run-in-postman/creating-run-button/


以上です。