超かんたん!楽天APIでアフィリエイトサイト作成(コピペOK)

こんにちは。フロントエンドエンジニアの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>

  
  

■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);
});

  
  

■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;
}

  
  
いずれのコードも表示に最低限のコードのみですので、自由にカスタマイズしてください!
あと、もしこのコードを活用して儲けられたらマージンくださいね!
  
  
2018年、僕の生活はみなさんにかかっているぞ!
  
  

ECの運営でお悩みの方!ロケッツに「ほぼ丸投げ」してみませんか?

ECサイトのコンサル・制作・運用業務に10年以上携わっているチームが、最短の成功法則を多角的に提案・実行・検証まで一貫して行います。
今後さらに拡大し、兆規模になっていくEC市場。
現在その中心にある大手ECモールの最新ノウハウと実行方法を熟知しており、常に最善のEC運営を実現していきます!

乗組員的EC探査録
シェアする
コンサルロケッツステーション
タイトルとURLをコピーしました