スマレジ・アプリマーケットのアプリ開発のはじめ方 ⑤商品一覧取得APIの使い方（全5回）

# はじめに

スマレジ・デベロッパーズについて学んできたことを、『スマレジ・アプリマーケットのアプリ開発のはじめ方』というタイトルで投稿します。全 5 回中の 3 回目です。

https://developers.smaregi.jp/

スマレジ公式のチュートリアル、その他開発パートナーの方が書いた Qiita 記事などを参考にしながら、調べたり手を動かしてきた内容について、記事にしていきます。

## 投稿内容（全 5 回）

本連載は以下の順序で投稿します。

- [① スマレジ・デベロッパーズとは](https://qiita.com/ryamate/items/e04e0ef65cc676afa5d0)
- [② スマレジ・デベロッパーズのアカウント登録](https://qiita.com/ryamate/items/33d760144cfb2fd73fb1)
- [③ アプリの新規登録](https://qiita.com/ryamate/items/fa9d26b87c3d1ef38a2b)
- [④ アプリアクセストークン取得 API の使い方](https://qiita.com/ryamate/items/792f54231474d6a9a1c9)
- **⑤ 商品一覧取得 API の使い方**

今回は、 **⑤ 商品一覧取得 API の使い方** についてです。 Postman で実際に スマレジ・プラットフォームAPI の一つである **商品一覧取得API** を使用します。

その際、前回取得した アプリアクセストークン を使います。

※ スマレジ公式のチュートリアルの対応箇所はこちらです。（チュートリアルとは別の API を使用します）

https://note.com/smaregi_devtaro/n/n568354721c23

## 目次

1. [サンプルデータの登録](#1-サンプルデータの登録)
1. [スコープの設定](#2-スコープの設定)
1. [アプリアクセストークンの取得(HTTPリクエスト送信)](#3-アプリアクセストークンの取得httpリクエスト送信)
1. [HTTPリクエストの設定](#4-httpリクエストの設定)
1. [商品一覧取得(HTTPリクエスト送信)](#5-商品一覧取得httpリクエスト送信)

# 1. サンプルデータの登録

スマレジ・デベロッパーズのサンドボックス環境は、商品などデータは空であるため、サンプルデータの CSV ファイルをダウンロードします。

## 1-1. サンプルデータのダウンロード

スマレジ・デベロッパーズ管理画面のサイドバー「ドキュメント」→「ヘルプと参考資料」タブから「部門データサンプル」と「商品データサンプル」をダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/d09120ff-7ff3-2d58-d543-48ad10fa4f77.png)

## 1-2. 部門データサンプルの CSV アップロード

続いて、
サイドバー「商品」→「部門」→「部門（カテゴリ）」→「CSVで登録」を押し、
先ほどダウンロードした「部門データサンプル」（sample_category.csv）をアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/2674e99f-2816-7e67-09ad-2d3a576c2a95.png)

「商品」→「部門（カテゴリ）」→「部門一覧」を開くと、サンプルデータが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/254e0ef9-7fc8-5afe-30c9-06d8e1e34fea.png)

## 1-3. 商品データサンプルのCSVアップロード

同じ要領で、
サイドバー「商品」→「商品登録」→「CSVで登録」を押し、
先ほどダウンロードした「商品データサンプル」（sample_product.csv）をアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/4447a166-c3b8-78d4-b364-42bb340f3505.png)

「商品」→「商品一覧」を開くと、サンプルデータが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/b8ed2750-a0c2-075a-79b2-997cc0dedafd.png)

# 2. スコープの設定

スコープとは、範囲のことで、有効にしたスコープの対象のAPIのみ使うことができます。

## 2-1. 仕様書でのスコープの確認

**スマレジ・プラットフォームAPI POS仕様書 (ver.1.0.0)** を開き、スコープを確認します。

https://www1.smaregi.dev/apidoc/#operation/getItem

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/a19a61f9-3df5-2842-5b7e-d4ef7db3c59d.png)

> **AUTHORIZATIONS:** AppAccessToken (`pos.products:read`)
> 

と記載があり、 `pos.products:read` がスコープです。

## 2-2. 管理画面でのスコープの設定

スマレジ・デベロッパーズの管理画面を開きます。

https://developers.smaregi.dev/

管理画面サイドバーから、「アプリ」→「パブリックアプリ」→「概要を見る」を押し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/9ff1ecdc-a272-93f4-ed95-c2f01fa5be45.png)

「スコープ」タブ →「スマレジ」タブ の順に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/cf52488e-0d9c-2771-e6db-97195e8b5d90.png)

**商品一覧取得API** に必要なスコープである `pos.products:read` を 有効 にし、「保存」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/45b747d3-3184-7cec-6f90-f9777220d449.png)

上記のページで 有効 にしていない スコープ は使えません。

## 2-3. Postman でのスコープの入力

Postman を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/976cca50-1cad-7449-3699-961cf96089fe.png)

**アプリアクセストークン取得API** のリクエストボディの「scope」に、有効にしたいスコープ `pos.products:read` を入力します。

※ スコープが複数ある場合は、「`pos.stores:read pos.stores:write`」のようにスコープの値を 半角スペース で区切って追記します。

# 3. アプリアクセストークンの取得(HTTPリクエスト送信)

「Send」を押すと、 商品一覧取得 についての スコープ が有効になっている アプリアクセストークン が取得できます。
`"access_token"`とあるのが アプリアクセストークン です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/e54bb6e2-a1d7-9c02-7951-31b5738d4ff9.png)

レスポンスの`”scope”`に、有効にしたスコープ `pos.products:read` があることを確認します。

# 4. HTTPリクエストの設定

**商品一覧取得API** についての **HTTPリクエスト** の設定をします。

## 4-1. request（HTTPリクエスト）の作成

「Add a request」を押し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/ed934066-bc3b-9f94-2e3c-16d1fe6d5644.png)

「商品一覧取得」と名前をつけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/5cc4e39a-ccf2-77b5-549b-91679cee665e.png)

## 4-2. request（HTTPリクエスト）の設定

### エンドポイントの設定

スマレジ（POS）の各種APIの **エンドポイント** については [POS仕様書](https://www1.smaregi.dev/apidoc/#section/%E6%A6%82%E8%A6%81/%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88) に記載があります。

```
https://api.smaregi.dev/{契約ID}/pos
```

さらに各APIの記載箇所を見て、HTTPメソッドやパスを確認します。

https://www1.smaregi.dev/apidoc/#operation/getItem

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/2a1a05df-80ef-bdce-2478-8764a926efac.png)

```
GET https://api.smaregi.dev/{契約ID}/pos/products
```

アプリアクセストークン取得APIの時と同様に、以下のように 契約ID は 環境変数 で記述しておきます。

```
https://api.smaregi.dev/{{CONTRACT_ID}}/pos/products
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/420f09b3-0769-da9d-c2db-a475a915f2bc.png)

### Authorization の入力

「Authorization」タブを開いて、下記のとおり選択＆入力します。  **Token** には、取得した **アプリアクセストークン** を入力しますが、 契約ID 同様に 環境変数 を設定しておきます。

| Type | Bearer Token |
| --- | --- |
| Token | {{APP_ACCESS_TOKEN}} |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/cdbaccc2-6cc6-5a49-17d5-7710c019840c.png)

## 4-3. 環境変数の設定

### 環境変数の設定

Postman画面左サイドバーの「Environments」を押し、「開発_スマレジ・プラットフォームAPI」を開きます。

| VARIABLE | INITIAL VALUE |
| --- | --- |
| APP_ACCESS_TOKEN | 「アプリアクセストークン」 |

「3. アプリアクセストークンの取得」で取得した`"access_token"`の値（長〜い英数字全て）をコピー＆ペーストします。忘れずに「Save」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/5d99f534-786b-3968-f063-fe2f833eae8e.png)

# 5. 商品一覧取得(HTTPリクエスト送信)

「Send」を押すと、商品一覧が取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/f2e68c27-1f8c-1d17-deb0-d0ab3287793b.png)

JSON形式の商品データが取得されたかと思います！

※ 補足ですが、POS仕様書には、APIを使用する際に設定することのできる、「QUERY PARAMETERS」が記載されていますが、リクエストの「Params」タブに記述すると、設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/469ce087-2b14-c4ff-7cc8-88bb1cdc269d.png)

# おわりに

今回の記事で「スマレジ・アプリマーケットのアプリ開発のはじめ方」の連載は完了です。

スマレジ・デベロッパーズでの開発に興味をお持ちの方への共有、スマレジ・デベロッパーズをご存じない開発者の方に興味をお持ちいただくきっかけとなっていたら幸いです。

私自身は今後はスマレジ・アプリマーケットのアプリ開発を実際にしていこうと思っています。

ありがとうございました！