More than 3 years have passed since last update.

Yahoo!ショッピングWeb APIを使ってみた

Posted at 2021-02-17

はじめに

初めて「API」というものに触れたので記事にまとめてみようと思います！

ちなみにFlutterも初心者なのでそこは温かい目で見てください…

Yahoo!ショッピングWeb APIを使えるようにするには

Yahoo!デベロッパーネットワークにアクセスする

サイトのリンク↓
https://developer.yahoo.co.jp/

開いたサイトの画像↓

Yahoo!ショッピングWeb APIのサイトに飛ぶ

上部の「テクノロジー」タブ内の「APIドキュメント」ページに飛び、「ショッピング」を選択する

タブ↓

「テクノロジー」タブを開いた↓

「APIドキュメント」がある場所↓

「APIドキュメント」を開いた後↓

「ショッピング」の見た目↓

「ショッピング」を押した後↓

ここでYahoo IDにログインしておくといいかもしれないです

アプリケーションを登録する

「アプリケーションの管理」タブを押し「新しいアプリケーションを開発」ボタンを押す

タブ↓

「アプリケーションの管理」タブを押した↓

「新しいアプリケーションを開発」ボタン↓

「新しいアプリケーションを開発」ボタンを押した後↓

作る物に沿って情報を入力します

登録した後に表示される「Client ID」は後で利用するのでどこかにメモしておくと楽です

これでYahoo!ショッピングWeb APIが使えるようになった

APIを使って作ったもの

アプリの概要

収録曲検索アプリ(search_song_contents)

＜CDのJANコードをスキャンするとCDのタイトルと詳細を表示するアプリ＞

git hub : https://github.com/sato-na/search_song_contents

アプリの詳しい概要ははてなブログで

ステップ１：HTTPにリクエストできるようにする

今回は説明を省略します

制作の時に参考にさせていただいた記事は下記のものです（ありがとうございます<(_ _)>）

ステップ２：バーコードスキャナを使えるようにする

JANコードから商品を検索したいのでバーコードスキャナを使えるようにします

今回は説明を省略します

制作の時に参考にさせていただいた記事は下記のものです（ありがとうございます<(_ _)>）

受け取ったJANコードをString型でbarcodeScanResという変数に入っているとします

ステップ２：リクエストするurlを指定する

公式の使い方は↓
https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html

基本は

https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=<Client ID>

「Client ID」はアプリケーションを登録したときにメモしたものです

※もしメモしていなかったら

「Yahoo!ショッピングWeb APIを使えるようにするには」の「Yahoo!ショッピングWeb APIのサイトに飛ぶ」までの工程を行う
登録したアプリを選択する
↓のアプリ名を押す
「Client ID」が表示される
選択後の画面↓

この基本のurlに条件を追加していきます

今回追加したい条件は

お店
JANコード

です

※お店を指定した理由
　詳細を表示したときに収録曲を見えるようにしたかったのですが、
　見えるお店と見えないお店があったので比較的見えるお店を選びたかったからです。

お店の指定の仕方

お店にはseller_idというのが振り分けられています

指定したいお店のトップページを開くとurlが

https://store.shopping.yahoo.co.jp/<shop_id>/

もしくは

https://paypaymall.yahoo.co.jp/store/<shop_id>/top/

という風になっています

ここから指定したいお店のshop_idを見つけます

urlには

https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=<Client ID>&shop_id=<shop_id>

という風に最後にshop_idを指定します

ちなみにこのまま実行するとお店のトップページでキーワードに何も入れずに検索した結果が出ます

JANコードの指定の仕方

JANコードはお店の指定のときと記述方法はほぼ同じです

しかし、プログラム上では変数で渡すので↓のようになります

https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=<Client ID>&jan_code=${barcodeScanRes}

これを実行するとそのJANコードでヒットしたものが一覧になります

よってまとめると

https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=<Client ID>&shop_id=<shop_id>&jan_code=${barcodeScanRes}

となります

ステップ３：必要な情報を取ってくる

今回取ってくる情報は

CDのタイトル
詳細

です

そもそも先ほど作ったurlを実行するとどんな風になるかというと

{
  "totalResultsAvailable": a(int),
  "totalResultsReturned": b(int),
  "firstResultsPosition": c(int),
  "request": {
  "query": d(String)
  },
  "hits": [
    {
      "index": 1,
      "name": e(String),
      "description": f(String),
      "headLine": g(String),
      "url": h(url),
      "inStock": i(bool),
      "code": j(String),
      "condition": k(String),
      "imageId": l(String),
      "image": {
        "small": m(String),
        "medium": n(String)
      },
      "seller": {
        "sellerId": <seller_id>,
        "name": o(String),
        "url": p(url),
        "isBestSeller": q(bool),
        "isPMallSeller": r(bool),
        "payment": s(String),
        "review": {
          "rate": t(int),
          "count": u(int)
        },
        "imageId": v(String)
      },
    }
  ]
}

ここでさっき指定したseller_idも見ることができます

ココからはこのデータがMap型のdataという変数に入っているとします

CDのタイトルの取り出し方

CDのタイトルは"hits"の中の0番目の要素の"name"という項目に入っています

したがってこのように取り出すことができます

main.dart

// "data"中の"hits"の中身をList型のhitsという変数に入れる
List<dynamic> hits = data["hits"];

// "hits"中の0番目の要素の"name"をString型のnameという変数に入れる
name = hits[0]["name"];

これでCDのタイトルがnameという変数に格納されました

詳細の取り出し方

詳細は"hits"の中の0番目の要素の"description"という項目に入っています

したがってこのように取り出すことができます

main.dart

// "data"中の"hits"の中身をList型のhitsという変数に入れる
// CDのタイトルをすでに取ってきている場合はこの文はいらない
List<dynamic> hits = data["hits"];

// "hits"中の0番目の要素の"name"をString型のdescriptionという変数に入れる
description = hits[0]["description"];

これで詳細がdescriptionという変数に格納されました

よってAPIを通してアプリに必要な情報を得ることができた