Chrome拡張「Talend API Tester」でAPIを叩く

# この記事は?

[ことみん Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kotomin_m) 3日目の記事です!

Chromeの拡張機能「Talend API Tester - Free Edition」の基本的な使い方を書きます。
全部やっても15分ぐらいだと思うので気になった方はぜひ触ってみてください。

この記事ではQiita API v2を例として利用しています。
https://qiita.com/api/v2/docs


# Talend API Testerとは

Google Chromeの拡張機能です。ストアからダウンロードするだけで無料で利用出来ます。

https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm

# GET リクエストのAPIを叩く

対象のAPIは [GET /api/v2/items](https://qiita.com/api/v2/docs#get-apiv2items)です。

画面中央上の欄に`https://qiita.com/api/v2/items`を入力し、右上の「Send」ボタンをクリックします。
![スクリーンショット 2022-12-04 13.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/44afc158-e033-9ce2-20c0-7d0f66b2084f.png)

画面下にレスポンスが表示されています。やったね。

# リクエストの情報を保存する

「Send」ボタンの真上にある「Save as」ボタンをクリックするとモーダルが表示されます。
右下の「＋ Create」ボタンからProjectなどを作成することも出来ます。
![スクリーンショット 2022-12-04 13.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/44641171-2fd0-6397-ac0c-d2f98a00f6db.png)

今回は「Qiita API v2」というProjectを作成しました。
「Name」欄には任意の名前を入力します。日本語でも大丈夫です。

右下の「Save」ボタンを押して保存します。名前などは後からでも変更出来ます。

![スクリーンショット 2022-12-04 13.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/3904a5e4-8cdc-bc2f-f72d-0d217d985173.png)

# Projectに新しいリクエストを追加する

先ほど作成した「Qiita API v2」というProjectの下に別のリクエスト情報を追加します。

サイドバーに表示されているプロジェクト名の「︙」ボタンをクリックし、「＋ Add a request」を選択します。

![スクリーンショット 2022-12-04 13.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/627a67be-1bc0-34a0-b48c-88fa577b2412.png)

# POST リクエストのAPIを叩く

Qiita API v2の [POST /api/v2/items/:item_id/comments](https://qiita.com/api/v2/docs#post-apiv2itemsitem_idcomments) を叩いてみます。

リクエスト情報の名前をクリックして変更します。
「method」欄のプルダウンボタンをクリックし、「POST」を選択します。

![スクリーンショット 2022-12-04 13.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/47d04108-d8ee-ab15-a6e7-4faa0e7ec02c.png)

画面中央上の欄に`https://qiita.com/api/v2/items/:item_id/comments`を入力します。

>`:item_id`は記事のURLの `/items/{ここがitem_id}`です。
https://qiita.com/kotomin_m/items/569bc88f23134d7fae73
↑この場合は「`569bc88f23134d7fae73`」が`:item_id`

リクエストヘッダーに認証情報を追加します。
認証認可については[公式ドキュメント](https://qiita.com/api/v2/docs#%E8%AA%8D%E8%A8%BC%E8%AA%8D%E5%8F%AF)を参照してください。

リクエストボディにjsonを追加します。

```json:例
{
  "body": "Qiita API v2 を利用してコメントを投稿"
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/0a7b943f-084b-1471-e87f-c44b13d90912.png)

右上の「Send」ボタンをクリックします。
Qiitaの記事にコメントが出来ました。やったね。

![スクリーンショット 2022-12-04 14.57.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/7ab2e1b4-f7b5-f9f2-1fd8-61931a2468ac.png)

# アクセストークンをEnvironmentsに保存する

リクエストヘッダーに直接アクセストークンを書きましたが、毎回はやりたくないですよね。
Environmentsに保存して変数で利用出来るようにします。

画面右上の「＋ Add an environment」をクリックします。

![スクリーンショット 2022-12-04 14.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/22fbfea1-7db0-f9af-5d8f-c6168b453a13.png)

「Environment name」欄に任意の名前を入力し、「Create」ボタンをクリックします。

![スクリーンショット 2022-12-04 14.41.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/f31f25bf-c200-13cb-9b45-80e572b5110e.png)

「Name」欄に変数名、「Value」欄に実際のアクセストークンを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/e5b61b91-31bf-b6fc-18d9-69d9e341b081.png)

`Authorization`を`Bearer ${token}`に変更します。

![スクリーンショット 2022-12-04 14.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326600/092d1c4d-db1a-8375-1bb9-51f8a464039f.png)

「Send」をクリックしたら、またQiitaの記事にコメントが出来ました。やったね。

# おわりに

試しにAPIを叩いてこの記事にコメントしてみていいですよ。お待ちしてます。