スナックelve 本店

バツイチ40代女の日記です

ハマったー

やりたいこと

phpと同じことをしたい
snack.elve.club
snack.elve.club


一日ひたすらググってトライして動かなくて寝てたw

結論

  • valuecommerce APIは無理っぽい
  • phpでいいんじゃね?

最初にvaluecommerceで試してハマってました(´;ω;`)

rakutenとdmmは情報取れました。
これでこのブログにアフィリエイト検索バー的なものを仕込めるかもしれません。

疑問

  • GETでいいじゃん。なんでPOSTにしようと思ったんだろ? phpの時から・・・
  • valuecommerceもphpでは取れてるんだよなぁ・・・。
  • CORSって結局どうすりゃいいの? サーバーで対応してもらわんと駄目なの?

コミックのランキングとりあえず取得する

アフィリエイトに必要な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