超かんたん！楽天APIでアフィリエイトサイト作成（コピペOK）

コンサルロケッツ STATION

肆号機

2018年3月22日

カテゴリ：乗組員的EC探査録

タグ：API, アフィリエイト, カモン諭吉, 楽天

こんにちは。フロントエンドエンジニアの4号機です。

最近、いろいろと話題の「働き方改革」。
プレミアムフライデーと言ってみたり、副業OKと言ってみたり・・・。

「あ〜副業したい！でもそこまで働きたくない！」そんなあなたに！
今回は私からどこよりも早いクリスマスプレゼント！

題して「簡単！楽天APIでアフィリエイトサイト作成（コピペOK）」。
このコードをどのように使おうが、あなたの自由！

もってけドロボー！

楽天API（今回は「楽天市場商品検索API」を使用）
https://webservice.rakuten.co.jp/explorer/api/IchibaItem/Search/
*要アプリID発行

規約はこちら
https://webservice.rakuten.co.jp/guide/rule

■HTML

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="api.js"></script>

<div class="wrapper">
<h1>APIで簡単アフィリエイトだぜ！</h1>
<div class="secItem secCommon">
<div class="secInner">
<ul id="contentInner"></ul>
</div>
</div>
</div>

<h1>APIで簡単アフィリエイトだぜ！</h1>

</div>

■JavaScript(jQuery)

$(function() {

  let APPID = 'xxx'; //アプリID *必須
  let MAX_PAGE = 3; //最大取得ページ件数(1ページ30件)。この場合3ページ = 90件取得。
  let SHOP_CODE = 'xxx'; //ショップコード（店舗を指定したい場合）
  let KEYWORD = encodeURIComponent("xxx"); //絞り込みしたい単語
  let SORT = '-reviewCount'; //レビューの多い順

  function put_item(item) {
    //ループで表示したいHTML部分を作成します
    $("#contentInner").append(
      `
      <li>
      <dl>
      <dt><a href="${item.itemUrl}" target="_blank"><img src="${item.mediumImageUrls[0].imageUrl.replace('?_ex=128x128', '')}" width="100%"></a></dt>
      <dd class="itemName"><a href="${item.itemUrl}" target="_blank">${item.itemName}</a></dd>
      <dd class="itemPrice">${item.itemPrice}<span>円(税込)</span></dd>
      <dd class="itemValue">レビュー:&nbsp;<span>${item.reviewAverage}</span>(${item.reviewCount})件</dd>
      </dl>
      </li>
      `
    );
  }

  //ajax
  function search_rakuten(page) {
    $.ajax({
      url: 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=' + APPID +
              '&shopCode=' + SHOP_CODE + //店舗を指定しない場合は不要
              '&keyword=' + KEYWORD +
              '&sort=' + SORT +
              '&page=' + page,
      type: 'get',
      dataType: 'json',
      timeout: 10000,
      async: 'true'
    })
    .done(function(data) {
      //読み込み成功時の処理
      goods = data.Items;
      for (let i in goods) {
        put_item(goods[i].Item);
      }
      //MAX_PAGEで設定した数値になるまでループします
      if (page < MAX_PAGE) {
       search_rakuten(page + 1);
      }
    })
    .fail(function(data) {
      //読み込み失敗時の処理
      console.log('読み込みエラー');
    });
  }

  search_rakuten(1);

});

$(function() {

let APPID = 'xxx'; //アプリID *必須

let MAX_PAGE = 3; //最大取得ページ件数(1ページ30件)。この場合3ページ = 90件取得。

let SHOP_CODE = 'xxx'; //ショップコード（店舗を指定したい場合）

let KEYWORD = encodeURIComponent("xxx"); //絞り込みしたい単語

let SORT = '-reviewCount'; //レビューの多い順

function put_item(item) {

//ループで表示したいHTML部分を作成します

$("#contentInner").append(

<li>

<dl>

<dd class="itemName"><a href="${item.itemUrl}" target="_blank">${item.itemName}</a></dd>

<dd class="itemPrice">${item.itemPrice}<span>円(税込)</span></dd>

<dd class="itemValue">レビュー: <span>${item.reviewAverage}</span>(${item.reviewCount})件</dd>

</dl>

</li>

);

}

//ajax

function search_rakuten(page) {

$.ajax({

url: 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=' + APPID +

'&shopCode=' + SHOP_CODE + //店舗を指定しない場合は不要

'&keyword=' + KEYWORD +

'&sort=' + SORT +

'&page=' + page,

type: 'get',

dataType: 'json',

timeout: 10000,

async: 'true'

})

.done(function(data) {

//読み込み成功時の処理

goods = data.Items;

for (let i in goods) {

put_item(goods[i].Item);

}

//MAX_PAGEで設定した数値になるまでループします

if (page < MAX_PAGE) {

search_rakuten(page + 1);

}

})

.fail(function(data) {

//読み込み失敗時の処理

console.log('読み込みエラー');

});

}

search_rakuten(1);

});

■CSS

body{
  text-align: left;
}
.wrapper{
  width: 960px;
  margin: 0 auto;
}
.secCommon{
  margin-bottom: 50px;
}
#contentInner{
  display: flex;
  flex-wrap:wrap;
}
#contentInner li{
  font-size:15px;
  width: calc(100%/3);
  padding: 0 10px;
  margin-bottom: 40px;
}
#contentInner li dl dt{
  margin-bottom: 15px;
  height: 300px;
}
#contentInner li dl dt a{
  display: block;
  height: 100%;
  text-align: center;
}
#contentInner li dl dt a img{
  height: 100%;
  width: auto;
}
#contentInner li dl dd.itemPrice{
  color: #ed1b24;
  font-size: 22px;
  letter-spacing: 1px;
}
#contentInner li dl dd.itemPrice span{
  font-size:15px;
}
#contentInner li dl dd.itemValue{
  letter-spacing: 1px;
}
#contentInner li dl dd.itemValue span{
  font-size:20px;
}