疑問
コミックのランキングとりあえず取得する
アフィリエイトに必要なIDとかは自分のに変えてね
DMM.com
<!doctype html> <html> <head> <html lang="ja"> <meta charset="UTF-8"> </head> <body> <a href="https://affiliate.dmm.com/api/"><img src="https://pics.dmm.com/af/web_service/com_88_35.gif" width="88" height="35" alt="WEB SERVICE BY DMM.com" /></a> <ul id="dmmItem"></ul> <script src="./script.js"></script> </body> </html>
(async () => { const url = "https://api.dmm.com/affiliate/v3/ItemList?api_id=vVgTxSx9WSzUSKGXCsZt&affiliate_id=elve-990&site=DMM.com&service=ebook&floor=comic&sort=rank"; const res = await fetch(url); let json; try { if (res.ok) { json = await res.json(); let allItem = ""; for (let i = 0; i < json.result.items.length; i++) { const product = json.result.items[i]; const productLink = product.affiliateURL; const productImage = product.imageURL.large; const productName = product.title + "(" + product.number + ")"; const shopName = product.iteminfo.manufacture[0].name; const productPrice = product.prices.price.toLocaleString(); let allItemParts = `<li><a href="` + productLink + `" target="_blank" class="productLink link-` + (i + 1) + `"> <img src="` + productImage + `" alt="` + productName + `" class="productImage"> <div class="shopname">` + shopName + `</div> <p class="publisherName">` + productName + `</p> <p class="productPrice">` + productPrice + `<span>円</span></p> </a></li>`; allItem += allItemParts; } document.getElementById("dmmItem").innerHTML = allItem; } else { throw new Error(res.status); } } catch (e) { console.log(e); } })();
rakutenブックス
<!doctype html> <html> <head> <html lang="ja"> <meta charset="UTF-8"> </head> <body> <!-- Rakuten Web Services Attribution Snippet FROM HERE --> <a href="https://webservice.rakuten.co.jp/" target="_blank"><img src="https://webservice.rakuten.co.jp/img/credit/200709/credit_31130.gif" border="0" alt="Rakuten Web Service Center" title="Rakuten Web Service Center" width="311" height="30"/></a> <!-- Rakuten Web Services Attribution Snippet TO HERE --> <ul id="rakutenItem"></ul> <script src="./script.js"></script> </body> </html>
(async () => { const url = "https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?applicationId=1077688777613086627&affiliateId=05eff714.c5ceaa1a.05eff716.192055f2&format=json&formatVersion=2&size=9&booksGenreId=001&hits=5&page=1&availability=0&outOfStockFlag=1&chirayomiFlag=0&sort=sales&limitedFlag=0&carrier=0&genreInformationFlag=0"; const res = await fetch(url); let json; try { if (res.ok) { json = await res.json(); let allItem = ""; for (let i = 0; i < json.Items.length; i++) { const product = json.Items[i]; const productLink = product.affiliateUrl; const productImage = product.largeImageUrl; const productName = product.title; const shopName = product.publisherName; const productPrice = product.itemPrice.toLocaleString(); let allItemParts = `<li><a href="` + productLink + `" target="_blank" class="productLink link-` + (i + 1) + `"> <img src="` + productImage + `" alt="` + productName + `" class="productImage"> <div class="shopname">` + shopName + `</div> <p class="publisherName">` + productName + `</p> <p class="productPrice">` + productPrice + `<span>円</span></p> </a></li>`; allItem += allItemParts; } document.getElementById("rakutenItem").innerHTML = allItem; } else { throw new Error(res.status); } } catch (e) { console.log(e); } })();
参考
楽天トラベルランキングAPIをJavascriptで叩いてサンプルページを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
Fetch APIの使い方(JavaScriptでHTTP通信) | コードライク
JavaScript の基本 - ウェブ開発を学ぶ | MDN
JavaScript の第一歩 - ウェブ開発を学ぶ | MDN
JavaScript | MDN
encodeURI() - JavaScript | MDN
JSON.parse() - JavaScript | MDN
楽天市場商品検索APIで任意のキーワードの商品一覧を表示 | DUB DESiGN
Fetch API
Fetch: クロスオリジン(Cross-Origin) リクエスト
fetch の使い方 - JavaScript の基本 - JavaScript 入門
JavaScript でファイルを読み込む方法 - JavaScript の基本 - JavaScript 入門
FormData の使い方 - JavaScript の基本 - JavaScript 入門
【JavaScript】Fetch APIの使い方とか注意点とか、、、 | PisukeCode - Web開発まとめ
【JavaScript】blocked by CORS policy エラーの簡単な解決法 | PisukeCode - Web開発まとめ
JavascriptでWebAPIを叩いてみる - Qiita
【CORSエラー】初心者がJavaScriptから外部APIを叩いたときの話 - Qiita
JavaScriptのFetch API について - Qiita
JavaScriptのFetch APIを利用してリクエストを送信する
【JavaScriptの応用】JSONデータを扱う方法 | ワードプレステーマTCD
JavaScriptでAPIを呼び出す方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptのFormDataオブジェクトの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでformのbuttonオブジェクトを操作する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
【JavaScript】if文を使った条件分岐の書き方 - TECH PLAY Magazine
JavaScriptで外部APIで取得したJSONデータをオブジェクトとして扱いたい
JavaScriptのfetchAPIについて
JavaScriptで文字列の長さを取得する方法:length() | UX MILK
JavaScriptはheadとbodyのどちらで読み込むのが最適なのか? | ウェブカツBLOG
ボタンのクリック時にJavaScriptを実行する : JavaScript | iPentec
JavaScript | class属性の値を指定して要素ノードを取得(getElementsByClassName)
HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 第3回目/Webサービスとブラウザをつなぐ機能「Fetch API」 | デザインってオモシロイ -MdN Design Interactive-
ボタンをクリックするとJavaScript関数を呼ぶやり方について解説します | たいらのエンジニアノート
javascript — fetchは空の応答本文を返します
javascript — fetch()はヘッダーを送信しませんか?
javascript — fetch()予期しない入力の終了
FormDataオブジェクトの中身を確認する方法 – ysklog