🎈 この記事はWP専用です
https://wp.me/pc9NHC-YU
前置き
楽天商品検索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?[paramet
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]'
ショップコード
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>
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>
ちなみにasyncData部分を
こうするとエラーです。
この辺はまた別記事にて。
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 })
.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>
データの加工について
私は最初に勘違いをしていて
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="">
商品をリンクにしたいので
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>
まとめ
データの形が分かれば
簡単に表示させることができますね✨
勘違いをしていたと書きましたが、
それによって
テストの使い方が違うのか❓
パラメータの理解が間違っているのか❓
など色々想定していたら
時間を取られてしまいました…😂
そもそも.catchでerrorがないなら
データの加工が違うと分かるんですけどね…
慣れです。慣れ。。。