【Nuxt.js】API：Rakuten Developers

前置き

楽天商品検索APIを使ってみます💫
登録してアプリIDを発行するだけで
すぐに商品情報が取得できます✨

商品は完全に見た目の可愛さで選びました❤️笑
(見るだけならタダだし…)

参考: https://qiita.com/mgr/items/f2193fd21765be1d34c2

登録

Rakuten Developersに登録
アプリIDを発行するだけです🌟
1分で終わります😁笑

規約はこちら
楽天ウェブサービス規約
普通に登録して個人的に使う分には
特別注意する問題はないですね💡

使い方

APIテストフォーム

テストを用意してくれているので
すぐに確認ができます✨🙆‍♀️
パタメータを入力し、
GETを押して
Itemsが表示されればOKです！

リクエストURLとパラメータ

テストで表示されるURLの仕組みはこちらです。
ベースとなるリクエストURLに
パラメータを追加しています。

https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?[parameter]=[value]…

1	https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?[parameter]=[value]…

parameter
設定必須のパラメーター
🌟アプリID(applicationId)
🌟検索キーワード、ジャンルID、商品コード、ショップコードのいずれか

これらのパラメーターを
先頭に&をつけて連結させます。
検索キーワード(keyword)と
ソート(sort)はvalueの分類で、
ここのみエンコードが必要みたいですね💡

例

キーワードは「ピンク」
ショップは「tiarassic」
にしてみました。
formatはデフォルトのjsonが入っています。

https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&keyword=[エンコードされたキーワード]&shopCode=lassic&applicationId=[自分のアプリのID]'

1	https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&keyword=[エンコードされたキーワード]&shopCode=lassic&applicationId=[自分のアプリのID]'

ショップコード

URLには2種類ありますが、
どちらのパターンでも
***の部分がショップコードです。
「http://www.rakuten.ne.jp/gold/***/」
「http://www.rakuten.co.jp/***/」

コード

まずはconsoleで表示

まずはURLのみで
情報の取得がきちんとできるか確認します。
出力パラメータのmediumImageUrlsなどが
あるので大丈夫そうですね✨🙆‍♀️

非同期通信、API通信については
こちらをご覧ください👀
【Nuxt.js】Nuxt文法編：asyncData
【Nuxt.js】axios導入編：かんたん・お手軽API通信

<template>
  <div class="page">
  </div>
</template>


<script>
import axios from 'axios'

export default {
  data () {
    return {
    }
  },
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    axios.get(baseUrl)
      .then((res) => console.log(res))
  }
}
</script>

<style lang="scss" scoped>
</style>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

}

async asyncData() {

const baseUrl = 'テストで作成したURLを入れてください'

axios.get(baseUrl)

.then((res) => console.log(res))

}

</script>

</style>

awaitをすっかり忘れていました😀笑
async/awaitでセット、
awaitがPromiseにあたる部分でしたね。
次で追加しましょう✍️

テンプレートで表示

とりあえず表示ができることが
確認できたので、
次は画像やタイトルなどを
見やすく調整していきましょう♪

<template>
  <div class="page">
    <ul>
      <li
        v-for="result in results"
        :key="result.id"
      >
        {{ result }}
      </li>
    </ul>
  </div>
</template>


<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res }
  },
}
</script>

<style lang="scss" scoped>
</style>

<ul>

<li

v-for="result in results"

:key="result.id"

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

results: [],

}

async asyncData() {

const baseUrl = 'テストで作成したURLを入れてください'

const res = await axios.get(baseUrl)

return { results: res }

}

</script>

</style>

ちなみにasyncData部分を
こうするとエラーです。
この辺はまた別記事にて。

Error

TypeError: Cannot set property 'results' of undefined

  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    await axios.get(baseUrl)
      .then((res) => this.results = res)
  },

async asyncData() {

const baseUrl = 'テストで作成したURLを入れてください'

await axios.get(baseUrl)

.then((res) => this.results = res)

  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    await axios.get(baseUrl)
      .then((res) => { this.results = res })
      .catch((error) => {
        console.log(error)
      })
  },

async asyncData() {

const baseUrl = 'テストで作成したURLを入れてください'

await axios.get(baseUrl)

.then((res) => { this.results = res })

.catch((error) => {

console.log(error)

})

見やすく調整①

まずはitemNameだけ表示させてみます🍒

<template>
  <div class="page">
    <ul>
      <li v-for="result in results" :key="result.id">
        {{ result.Item.itemName }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData () {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res.data.Items }
  },
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

results: [],

}

async asyncData () {

const baseUrl = 'テストで作成したURLを入れてください'

const res = await axios.get(baseUrl)

return { results: res.data.Items }

}

</script>

データの加工について

私は最初に勘違いをしていて
consoleでresのみを表示していた時は
{ "Items": [{ "Item": { "itemName": "商品名" }}, { "Item": {"itemName": "商品名" }} ]}
となっていたので
res.Itemsとしていましたが、
本来はdataの中のItemsなので…
data: { "Items": [{ "Item": {"itemName": "商品名" }}, { "Item": {"itemName": "商品名" }} ]}
res.dataにしなければ
いけないみたいですね🤔💭

ただ参考にさせていただいた記事では
res.Itemsで表示できていたので
formatによってできるのかもしれません💡

res.data.Itemsの中の
Item1つ1つを並べたいので
results: []には
res.data.Itemsまでを入れます🎈🧸

表示はresultのItemの中の
itemNameなので
result.Item.itemNameです。

見やすく調整②

あとは好きなパラメータを追加するだけです❤️
とりあえず画像はいれましょう！

<img :src="result.Item.mediumImageUrls[0].imageUrl" alt="">

1	<img :src="result.Item.mediumImageUrls[0].imageUrl" alt="">

商品をリンクにしたいので
aタグで囲ったりして完成！
(外部リンクなのでnuxt-linkは使えません)

CSSは最低限🌸

<template>
  <div class="page">
    <h1>Rakuten Developers使ってみた</h1>
    <ul class="list">
      <li
        v-for="result in results"
        :key="result.id"
        class="item"
      >
        <a
          :href="result.Item.itemUrl"
          class="link"
        >
          <img
            :src="result.Item.mediumImageUrls[0].imageUrl"
            alt=""
            class="img"
          >
          {{ result.Item.itemName }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData () {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res.data.Items }
  },
}
</script>

<style lang="scss" scoped>
  .page {
    > .list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;

      > .item {
        width: 25%;

        > .link {
          color: #c6c6c6;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px;

          > .img {
            width: 50%;
          }
        }
      }
    }
  }
</style>

<h1>Rakuten Developers使ってみた</h1>

<li

v-for="result in results"

:key="result.id"

class="item"

:href="result.Item.itemUrl"

class="link"

<img

:src="result.Item.mediumImageUrls[0].imageUrl"

alt=""

class="img"

</a>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

results: [],

}

async asyncData () {

const baseUrl = 'テストで作成したURLを入れてください'

const res = await axios.get(baseUrl)

return { results: res.data.Items }

}

</script>

.page {

> .list {

list-style: none;

display: flex;

flex-wrap: wrap;

> .item {

width: 25%;

> .link {

color: #c6c6c6;

text-decoration: none;

display: flex;

flex-direction: column;

align-items: center;

margin: 10px;

> .img {

width: 50%;

}

</style>

まとめ

データの形が分かれば
簡単に表示させることができますね✨

勘違いをしていたと書きましたが、
それによって
テストの使い方が違うのか❓
パラメータの理解が間違っているのか❓
など色々想定していたら
時間を取られてしまいました…😂
そもそも.catchでerrorがないなら
データの加工が違うと分かるんですけどね…
慣れです。慣れ。。。