Yahoo APIでの商品検索

# 本記事で紹介すること

1. Yahoo APIの導入方法
2. Yahoo APIを使ったYahoo Shopping相当の検索

今回は、その他内容には触れません。

## Yahoo APIとは

Yahooが開発したWebサービス（API）のことで、以下のようなAPIがある。

1. ショッピング（Yahooショッピング）
2. YOLP（地図）
3. テキスト解析
4. 求人
5. ニュース（Yahoo ニュース）

今回は **ショッピング**の**ショッピング情報取得API**を使う。

:::note alert
旧仕様と新仕様の二つがあるが、旧仕様は提供停止なので、利用できない
:::

使う前に必ず、アプリケーションIDを取得する必要がある。

## アプリケーションIDの取得方法

1. Yahooでアカウント登録
    1. アカウント未所持の場合
    2. 携帯の電話番号が必要
2. `https://e.developer.yahoo.co.jp/dashboard/`で*新しいアプリケーションを開発*をクリック
3. 必要な情報を入力し、アプリケーションの登録を行う
4. 表示されるIDをメモしておく

# 使い方

## ショッピング情報取得API　商品検索

https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html

### リクエストURL

 `https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch`

### 主要なリクエストパラメーター

使いそうなパラメーター、デフォルト値が入っているパラメータを以下に列挙した

Yahoo Shopping相当の検索実装に必要なパラメーターは `appid`, `query`

| 名前 | 必須 | 型 | デフォルト値 | 説明 |
| --- | --- | --- | --- | --- |
| appid | 〇 | string |  | アプリケーションID |
| query |  | string |  | 検索キーワード |
| results |  | integer | 20 | 検索結果の返却数 |
| start |  | integer | 1 | 返却結果の先頭位置 |
| user_rank |  | string | guest | 指定すると会員属性に応じたポイント額を返す |
| sale_end_from |  | integer | now | 販売終了UNIX時間の下限 |
| sale_start_from |  | integer | 0 | 販売開始UNIX時間の下限 |
| sale_start_to |  | integer | now + 7d | 販売開始UNIX時間の上限 |
| sort |  | string | score | 並び順を指定 -score：おすすめ順, +price：価格の安い順, -price：価格の高い順, -review_count：商品レビュー数の多い順 |
| condition |  | string |  | 商品状態の指定, used: 中古, new: 新品 |

[詳細はドキュメントにて。](https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html#newrequest)

# 実装

## 流れ

1. リクエストURLのパラメーターとして `appid`, `query`を用意する
2. `fetch`などのAPIでリクエストを送信する
3. レスポンスを受け取り、自由に加工する

## fetchAPIでの実装例

今回はシンプルにYahoo shoppingでの検索結果と同様の結果が得られるように

パラメータは`appid`, `query`を使っている。

```js
const query = "ルビー"
await fetch(
    `https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=${process.env.NEXT_PUBLIC_APP_ID}&query=${query}`
)
.then((response) => {
  return response.json()
})
.then((data) => {
  console.log(data)
})
```

### レスポンス例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/b075bf34-bd26-6f65-22e7-8277651d89a1.png)


## 商品の出品者情報の取得

[ドキュメント](https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html#newresponse)によると、`hits/seller`で取得できる

（JavaScript標準のオブジェクトのアクセス方法で取得できる）

```jsx
// data: Object
// hits: Array
data.hits[index].seller
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/5a33ac5d-ee28-8590-e6a3-fe120f37118a.png)

## 商品が出品された時期の取得

- `hits/releaseDate`で商品の発売日を取得できる
    - おそらく出品時期と同義
    - 数値で返ってくるので、Date型に変換する必要あり

```jsx
// data: Object
// hits: Array
data.hits[index].releaseDate
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/8b4da6ca-730a-588a-8232-3ba346c79776.png)


## 商品の状態の取得

- `hits/inStock`で商品の在庫（売り切れかどうか）取得できる
    - `true`で在庫あり
    - `false`で在庫なし＝売り切れ
    - `boolean`なので、取り下げ・出品停止かどうかは判別がつかないと思われる

```jsx
// data: Object
// hits: Array
data.hits[index].inStock
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/40838a39-9a48-e2bc-4347-55be2d75bdc1.png)


## 商品のURL取得

- `hits/url`で商品が出品されているページを取得できる

```jsx
// data: Object
// hits: Array
data.hits[index].url

// 今回の場合
// => https://store.shopping.yahoo.co.jp/yoshioka-seika/yo00002.html
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/639fbef2-ae19-7567-3485-4bff131edec8.png)


# エラー対応

## CORSエラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/d2603379-c413-5ac2-cba3-07d1dee802ec.png)
上記のようなエラーが出る時があります。
その時は `CORS Unblock`を使うと動作確認できます。

https://webextension.org/listing/access-control.html


:::note alert
注意：この拡張機能は使う時以外はOFFにしましょう
他のサイトでの動作がおかしくなる可能性があります
:::



# 参考文献

https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html

https://webextension.org/listing/access-control.html