2018年3月22日
こんにちは。フロントエンドエンジニアの4号機です。
最近、いろいろと話題の「働き方改革」。
プレミアムフライデーと言ってみたり、副業OKと言ってみたり・・・。
「あ〜副業したい!でもそこまで働きたくない!」そんなあなたに!
今回は私からどこよりも早いクリスマスプレゼント!
題して「簡単!楽天APIでアフィリエイトサイト作成(コピペOK)」。
このコードをどのように使おうが、あなたの自由!
もってけドロボー!
楽天API(今回は「楽天市場商品検索API」を使用)
https://webservice.rakuten.co.jp/explorer/api/IchibaItem/Search/
*要アプリID発行
規約はこちら
https://webservice.rakuten.co.jp/guide/rule
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
$(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">レビュー: <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); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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年、僕の生活はみなさんにかかっているぞ!