【重要】 この記事で紹介しているAPIは、仕様変更により現在利用できません。
最新のAPIバージョンおよび仕様については、楽天ウェブサービスの公式ドキュメントをご確認ください。サンプルページは新しいAPIを使用しています。
作成したプログラムのコードはgithubにあります。※古いAPIを使用しています。
その他、作成したアプリやゲームの一覧はこちらにあります。
概要
JavaScriptライブラリのaxiosを使用して楽天商品ランキングAPIから年代別・性別の売り上げランキングを取得し表示をするページを作成してみました。JavaScriptフレームワークはVue.js、cssフレームワークはBulamaを使用しています。このページでは楽天商品ランキングAPIからaxiosを使用してランキングを取得する方法をすこし解説しています。
axiosを導入する
npmでインストールする場合
|
1 |
$ npm install axios |
CDNで読み込む場合
|
1 |
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
楽天商品ランキングAPIからランキングを取得する
↓のコードはaxiosのgetメソッドを使用して楽天商品ランキングAPIからランキングを取得する例です。パラメータのapplocationIdにご自身で取得したアプリIDを入力して実行するとコンソールログにJSONオブジェクトでランキングが表示されます。
|
1 2 3 4 5 6 7 8 9 10 |
axios.get('https://app.rakuten.co.jp/services/api/IchibaItem/Ranking/20170628', { params: { applicationId: '', // ご自身で取得したアプリIDを入力してください elements: "rank,itemName,itemUrl", sex: "0", age: "10", } }) .then(response => console.log(response.data)); |
第1引数にAPIのurlを指定し、第2引数にはパラメータを指定し渡します。パラメータのapplocationIdは楽天商品ランキングAPIを利用するにあたり必須のパラーメータとなります。IDはコチラか取得できます。elementsを指定すると指定された出力パラメータのみを返却します。この例では順位と商品名と商品のurlを指定しています。性別は男性は0女性は1、年齢は10,20,30,40,50のいずれかを渡すとその年代別のランキングが返ってきます。データは返ってきたresponseのresponse.dataにあります。
最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。
