An open API service indexing awesome lists of open source software.

https://github.com/tuki0918/rakuten-api-itemsearch-api2-api-

楽天商品検索API:プログラム初心者向けの支援コード
https://github.com/tuki0918/rakuten-api-itemsearch-api2-api-

Last synced: 3 months ago
JSON representation

楽天商品検索API:プログラム初心者向けの支援コード

Awesome Lists containing this project

README

        

楽天商品検索API 支援コード(API2 / API 対応)
======================
> Javascript / jQueryやプログラミングがよくわからない人でも比較的簡単に導入できるよう、記述をシンプルしました。
> コードは自由に変更・修正して下さい。
 

# リファレンス
----------------
+ どんなデータが所得できるのか調べたい場合は [APIテストフォーム](https://webservice.rakuten.co.jp/explorer/api/IchibaItem/Search/) がオススメです
+ 「入力パラメーター」と「出力パラメーター」の詳しい情報は [楽天商品検索API2:API一覧](http://webservice.rakuten.co.jp/api/ichibaitemsearch/) をご確認下さい
 

# 機能
----------------

+ リクエストURLの発行
+ パラメーターの追加 / 上書き
+ テストプレビュー
+ 表示のカスタマイズ
+ その他:現在の状態を保持しているため、特定のパラメータのみ変更や `次の30件` や `前の30件` などが容易
 

# 準備( itemSearch.js 側 )
----------------
### パラメーターの初期値
基本的には `既存のパラメータを上書き` しながら商品データを所得していきます。
よく使いそうな値を `初期値` として設定しておくと全体のコードがスッキリとします。

※ 必須パラメーターに注意
設定できる値は [楽天商品検索API2:API一覧](http://webservice.rakuten.co.jp/api/ichibaitemsearch/) をご確認下さい

▼ 初期値

this.option = { keyword: '送料無料', page: 1, hits: 10, sort: '%2DreviewCount' };

▼ 記述ルール 

this.option = { key1: value1, key2: value2, key3: value3, ... };

### applicationId / developerId の設定
▼ お持ちの applicationId / developerId の設定をして下さい

this.applicationId = [
'【 applicationId / developerId 】を設定して下さい'
];

▼ 複数のIDのお持ちの場合は以下の様に設定して下さい
※最後の,(カンマ)に注意

this.applicationId = [
'【 applicationId / developerId 1 】を設定して下さい',
'【 applicationId / developerId 2 】を設定して下さい',
'【 applicationId / developerId 3 】を設定して下さい',
'【 applicationId / developerId 4 】を設定して下さい'
];
 
 

# 使い方
----------------
###ファイルの読み込み


###サンプルデータの表示
例) ■キーワード:`javascript` ■並び替え:`楽天標準ソート順`



$(function(){

var books = new ItemSearch('books', { keyword: 'javascript', sort: 'standard' });
books.getItems('test');

});

 
 

メソッドの解説
----------------
###new ItemSearch() データの初期化・インスタンスの作成

var instanceName = new ItemSearch('elementId', { key1: value1, key2: value2, ... });

+ 第1引数 : `elementId `
商品情報を表示する要素のID

+ 第2引数 : `{ key1: value1, key2: value2, ... }`
省略可、設定できる値は [楽天商品検索API2:API一覧](http://webservice.rakuten.co.jp/api/ichibaitemsearch/) をご確認下さい

 
###getItems() 商品データの所得・表示する

instanceName.getItems();

+ getItems() : `customHTML` が呼び出される(表示をカスタマイズした時の呼び出し)

+ getItems('test') : `viewTest` が呼び出される(テスト表示:楽天商品検索API2用)

+ getItems('test', 1) : `viewTest1` が呼び出される(テスト表示:楽天商品検索API用)

 
###setOptions() 商品データの追加・上書き(一括)

instanceName.setOptions({ key1: value1, key2: value2, ... });

+ 引数 : `{ key1: value1, key2: value2, ... }`
設定できる値は [楽天商品検索API2:API一覧](http://webservice.rakuten.co.jp/api/ichibaitemsearch/) をご確認下さい

 

現在の状態を所得・変更する
----------------
###設定されている対象の要素のID

instanceName.elementId

 
###設定されているオプションの一覧

instanceName.option

 
###次のページの商品を所得・表示する場合

instanceName.option.page = ++instanceName.option.page;
instanceName.getItems();

 
###設定されているapplicationId

instanceName.applicationId

 

表示をカスタマイズ
----------------
▼ `...` を記述する。 商品データは引数の `data` に格納されています。

instanceName.customHTML = function (data) { ... };

###カスタマイズサンプル

$(function(){
instanceName.customHTML = function (data) {
var items = data.Items, html, item, i, j;

html = '

    ';
    for (i = 0, j = items.length; i < j; i++) {
    item = items[i].Item;

    html += '

  • ';
    html += '';
    html += '';
    html += '
    ';
    html += ' 感想:' + item.reviewCount + '件';
    html += ' 評価:' + item.reviewAverage;
    html += ' 価格:' + item.itemPrice + '円';
    html += '
  • ';
    }
    html += '
';

$('#' + this.elementId).html(html);
};
instanceName.getItems(); // 商品データの所得・表示
});
 

その他
----------------
Publicな値なため容易に変更が出来る、出来てしまう
applicationId / developerId が丸見え
エラーチェックしてない