API

【Nuxt.js】API:Rakuten Developers

前置き

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

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

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


登録

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

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


使い方

APIテストフォーム

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


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

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

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

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

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

ショップコード

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通信

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


テンプレートで表示

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

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

Error

TypeError: Cannot set property 'results' of undefined


見やすく調整①

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

データの加工について

私は最初に勘違いをしていて
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までを入れます🎈🧸

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


見やすく調整②

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

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

CSSは最低限🌸


まとめ

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

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

-API
-,

© 2021 aLiz Nuxt