え？ amazonのでいいじゃん、と思ったそこのあなたっwwwww 世の中にはwwwアソシエイト アカウントBANされてる人もいるんですよ！！wwwwwwwwwwwwwwww
サイドバー
html追加して
<form action="https://elve.hatenadiary.jp/affiaffi" method="get"> <p><label for="keyword">*キーワード</label><input type="text" id="keyword" name="keyword" value=""></p> <p><input type="submit"> </form>
固定ページ追加
はてなブログに固定ページって何に使うのかよくわからないのあるじゃん？ あそこでページ作ってね。
htmlモードで編集だ。
ソース
//フォーム <p><label for="keyword">*キーワード</label><input type="text" id="keyword" name="keyword" value=""></p> <p><label for="genre">ジャンル</label><select name="genre" id="genre" size="1"> <option value="" selected>すべて</option> <option value="100371">レディースファッション</option> <option value="551177">メンズファッション</option> <option value="100433">インナー・下着・ナイトウェア</option> <option value="216131">バッグ・小物・ブランド雑貨</option> <option value="558885">靴</option> <option value="558929">腕時計</option> <option value="216129">ジュエリー・アクセサリー</option> <option value="100533">キッズ・ベビー・マタニティ</option> <option value="566382">おもちゃ</option> <option value="101070">スポーツ・アウトドア</option> <option value="562637">家電</option> <option value="211742">TV・オーディオ・カメラ</option> <option value="100026">パソコン・周辺機器</option> <option value="564500">スマートフォン・タブレット</option> <option value="565004">光回線・モバイル通信</option> <option value="100227">食品</option> <option value="551167">スイーツ・お菓子</option> <option value="100316">水・ソフトドリンク</option> <option value="510915">ビール・洋酒</option> <option value="510901">日本酒・焼酎</option> <option value="100804">インテリア・寝具・収納</option> <option value="215783">日用品雑貨・文房具・手芸</option> <option value="558944">キッチン用品・食器・調理器具</option> <option value="200162">本・雑誌・コミック</option> <option value="101240">CD・DVD</option> <option value="101205">テレビゲーム</option> <option value="101164">ホビー</option> <option value="112493">楽器・音響機器</option> <option value="101114">車・バイク</option> <option value="503190">車用品・バイク用品</option> <option value="100939">美容・コスメ・香水</option> <option value="100938">ダイエット・健康</option> <option value="551169">医薬品・コンタクト・介護</option> <option value="101213">ペット・ペットグッズ</option> <option value="100005">花・ガーデン・DIY</option> <option value="101438">サービス・リフォーム</option> <option value="111427">住宅・不動産</option> <option value="101381">カタログギフト・チケット</option> <option value="100000">百貨店・総合通販・ギフト</option> </select> <p><label for="maxPrice">最大価格</label><input type="text" id="maxPrice" name="maxPrice" value=""></p> <p><label for="page">ページ</label><input type="text" id="page" name="page" value="1"></p> <p><input type="button" name="raktuen" value="raktuen" onClick="searchRaktuen()"> <div class="rakutenPageNaveS" id="rakutenPageNaveS" name="rakutenPageNaveS"></div> <div class="rakutenItems" id="rakutenItems" name="rakutenItems"></div> <div class="rakutenPageNaveE" id="rakutenPageNaveE" name="rakutenPageNaveE"></div> <script> //====================================== //URLにつける形のパラメーター生成 function getUrlPara(prm) { let para = ""; Object.keys(prm).forEach(function (key) { if (key && prm[key]) { para += (key + "=" + prm[key] + "&"); } }); console.log("getUrlPara: " + para); return para; } //====================================== //キーワード、最高価格、ジャンルを変えたらページを1にする document.getElementById("keyword").onchange = function () { // onchangeイベントが発生した時の処理を記述する document.getElementById('page').value = 1; }; //====================================== document.getElementById("maxPrice").onchange = function () { // onchangeイベントが発生した時の処理を記述する document.getElementById('page').value = 1; }; //====================================== document.getElementById("genre").onchange = function () { // onchangeイベントが発生した時の処理を記述する document.getElementById('page').value = 1; }; //====================================== //URLのパラメータをフォームへ反映 function setParaFromUrl() { const params = new URLSearchParams(location.search); //キーワード if (params.get('keyword')) { document.getElementById('keyword').value = params.get('keyword'); } if (params.get('genreId')) { console.log("urlpara: genre: " + params.get('genreId')); document.getElementById('genre').value = params.get('genreId'); } if (params.get('maxPrice')) { document.getElementById('maxPrice').value = params.get('maxPrice'); } if (params.get('page')) { document.getElementById('page').value = params.get('page'); } console.log("setParaFromUrl"); return; } //====================================== //html構造読み終わるまで待つ window.addEventListener('DOMContentLoaded', function () { const params = new URLSearchParams(location.search); const selfUrl = new URL(location.href); console.log("===LOAD===: " + Array.from(selfUrl.searchParams).length + ": " + params.get('keyword')); //URLのパラメーター数で分岐 if (Array.from(selfUrl.searchParams).length === 1) { if (params.get('keyword')) { console.log("keywordのみ"); //フォーム更新 document.getElementById("keyword").value = params.get('keyword'); //サイドバーから呼ばれた時（keywordのみ） let paras = { applicationId: '1029880527351169328', affiliateId: '05eff714.c5ceaa1a.05eff716.192055f2', genreId: "", formatVersion: 2, keyword: encodeURI(document.getElementById('keyword').value), hits: 10, page: 1, sort: encodeURI('-itemPrice'), maxPrice: "" }; let urlPara = getUrlPara(paras); //読み込み処理 readApi(urlPara); } } else if (Array.from(selfUrl.searchParams).length > 1) { if (params.get('keyword')) { console.log("フルパラメータ"); //フォーム更新 setParaFromUrl(); let paras = { applicationId: '1029880527351169328', affiliateId: '05eff714.c5ceaa1a.05eff716.192055f2', genreId: encodeURI(document.getElementById('genre').value), formatVersion: 2, keyword: encodeURI(document.getElementById('keyword').value), hits: 10, page: encodeURI(document.getElementById('page').value), sort: encodeURI('-itemPrice'), maxPrice: encodeURI(document.getElementById('maxPrice').value) }; let urlPara = getUrlPara(paras); //読み込み処理 readApi(urlPara); } } }); function searchRaktuen() { console.log("ボタン押された: searchRaktuen()"); //パラメータをフォームから作成して再読み込み let paras = { applicationId: '1029880527351169328', affiliateId: '05eff714.c5ceaa1a.05eff716.192055f2', genreId: encodeURI(document.getElementById('genre').value), formatVersion: 2, keyword: encodeURI(document.getElementById('keyword').value), hits: 10, page: encodeURI(document.getElementById('page').value), sort: encodeURI('-itemPrice'), maxPrice: encodeURI(document.getElementById('maxPrice').value) }; let urlPara = getUrlPara(paras); //再読み込み処理 window.location.href = "https://elve.hatenadiary.jp/affiaffi?" + urlPara; } function readApi(urlPara) { //APIを呼んで戻り値からコンテンツとページナビゲータを作成して挿入 console.log("readApi: " + urlPara); //要素削除 let delItem = document.getElementById("rakutenItems"); while (delItem.firstChild) { delItem.removeChild(delItem.firstChild); } delItem = document.getElementById("rakutenPageNaveS"); while (delItem.firstChild) { delItem.removeChild(delItem.firstChild); } delItem = document.getElementById("rakutenPageNaveE"); while (delItem.firstChild) { delItem.removeChild(delItem.firstChild); } let page; if (document.getElementById('page').value) { page = document.getElementById('page').value; } else { page = 1; } //APIコール url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?" + urlPara; console.log("APIコール: " + url); let allItemParts = '<div class="affiliate-containers" id="affiliate-containers">'; let sItem; let eItem; let pages; (async () => { const res = await fetch(url); let json; try { if (res.ok) { console.log("APIコール: OK"); json = await res.json(); sItem = json.first; eItem = json.last; pages = json.pageCount; //コンテンツ生成 console.log(sItem + "/" + eItem + "/" + pages); for (let i = 0; i < json.Items.length; i++) { const product = json.Items[i]; const productLink = product.affiliateUrl; const productImage = product.mediumImageUrls[0]; const productName = product.itemName; const shopUrl = product.shopUrl; const shopName = product.shopName; const productPrice = product.itemPrice.toLocaleString(); let itemCaption = product.itemCaption; if (itemCaption.length > 150) { itemCaption = itemCaption.substr(0, 148) + "…"; } allItem = `<div class="affiliate-container"><div class="affiliate-header"><h2 class="affiliate-title"><a class="affiliate-title-link" href="${productLink}">${productName}</a></h2><a class="affiliate-title-link" href="${productLink}"><img src="${productImage}"></a></div><div class="affiliate-shop"><a href="${shopUrl}" class="affiliate-shop">${shopName}</a></div><div class="affiliate-body"><p class="affiliate-description">${itemCaption}</p><p>${productPrice}円</p></div></div>`; //allItemParts = allItemParts + allItem; allItemParts += allItem; } } else { console.log("APIコール: NG"); throw new Error(res.status); } } catch (e) { console.log("APIコール: NG"); console.log(e); } console.log("結果挿入"); //挿入 document.getElementById("rakutenItems").innerHTML = allItemParts; //ページナビゲータ console.log("ページナビゲータ作成: " + page); tPage = Math.floor(pages / 10); if (pages % 10 != 0) { tPage++; } let allNave = '<p id="rakutenPage">'; for (let i = 1; i <= tPage; i++) { let nave; if (i == page) { console.log("現在ページ: " + page); nave = `|${i}`; } else { console.log("現在ページ: " + i + "/" + tPage + ": " + page); urlPrms = { applicationId: '1029880527351169328', affiliateId: '05eff714.c5ceaa1a.05eff716.192055f2', genreId: document.getElementById('genre').value, formatVersion: 2, keyword: encodeURI(document.getElementById('keyword').value), hits: 10, page: i, sort: encodeURI('-itemPrice'), maxPrice: document.getElementById('maxPrice').value }; para = getUrlPara(urlPrms); url = "https://elve.hatenadiary.jp/affiaffi?" + para; nave = `|<a href="${url}">${i}</a>`; } allNave += nave; } console.log("ページナビゲータ挿入"); console.log(allNave); document.getElementById("rakutenPageNaveS").innerHTML = allNave + "|</p>"; document.getElementById("rakutenPageNaveE").innerHTML = allNave + "|</p>"; })(); } </script>
参考
[B! javascript] Webクリエイターの為の情報サイト | Web Programming Portal
Javascriptでのオプション引数を考える | Narumium Blog
【JavaScript】セレクトボックスで選択中のoptionがもつvalue値を取得する方法
javascriptで変数に値を入れ,htmlで別ページに送り、別ページ... - Yahoo!知恵袋
テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN
デフォルト引数 - JavaScript | MDN
Array.prototype.forEach() - JavaScript | MDN
encodeURI() - JavaScript | MDN
式と演算子 - JavaScript | MDN
加算代入 (+=) - JavaScript | MDN
条件 (三項) 演算子 - JavaScript | MDN
除算 (/) - JavaScript | MDN
剰余 (%) - JavaScript | MDN
for - JavaScript | MDN
if...else - JavaScript | MDN
文字列の中で変数を展開する | GRAYCODE JavaScript
【JavaScript】URLのクエリパラメータを取得する【URLSearchParams】｜Into the Program
【JavaScript】セレクトボックスのoptionをforEachでループする｜Into the Program
【JavaScript】セレクトボックスのoptionをforEachでループする｜Into the Program
JavaScript セレクトボックスの値を取得/設定するサンプル | ITSakura
URL オブジェクト
fetch の使い方 - JavaScript の基本 - JavaScript 入門
【JavaScript】URLSearchParams でクエリパラメータを操作する - ざきの学習帳（旧 zackey推し ）
JavaScriptで配列データを扱う(追加、結合、取得、削除、更新)
javascript エラー「Uncaught TypeError: Cannot set property ‘innerHTML’ of null」が発生した場合の対処法 | mebee
javascript ノード内の全ての子ノードを削除する | mebee
javascript エラー「Uncaught SyntaxError: Unexpected token ‘,’」の解決方法 | mebee
javascript エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」の解決方法 | mebee
JavaScriptでJSONからクエリパラメータを生成する | IT底辺脱却ブログ
ブラウザのJavaScriptでAJAX
【JSON入門】JSONデータの参照・追加（更新）・削除 | nyanblog ~にゃんぶろぐ~
【javascript】関数にオブジェクト渡しをした際に発生したエラー「Uncaught RangeError: Invalid string length」
JavaScriptで整数除算演算子を実現する - Qiita
【javascript】オブジェクトにプロパティを追加する - Qiita
[JavaScript]複数の子要素を削除する。 - Qiita
【JavaScript】桁指定して四捨五入・切り上げ・切り捨て - Qiita
JSのObjectをforEachで処理する方法 - Qiita
JavaScriptでURLを遷移させる方法 - Qiita
JavaScriptのFetch API について - Qiita
JavaScriptの関数のデフォルト引数の使い方を解説！ | Qumeruマガジン
javascript - How do I get the size (or length) for URL searchParams? - Stack Overflow
Javascript a=b=c statements - Stack Overflow
url - How can I get query string values in JavaScript? - Stack Overflow
HTMLのoptionを使って選択状態（selected）を設定する方法 | ポテパンスタイル
JavaScriptのonchangeイベントの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでJSONを生成する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptで選択項目を選択した状態に設定する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでselectオブジェクトの値（value）を取得する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptで要素を削除する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptで要素を削除する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptの論理演算子「&&」「||」「!」の使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptで「Unexpected token」というエラーが出る原因と対処法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptでselectedIndexプロパティを使ってセレクトボックスで選択中のインデックス番号を取得、設定する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
JavaScriptによるyes, no判定dialogの作成方法について現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
javascriptで連想配列をx-www-form-urlencodedで送信する方法がわからなくて困っています。
JavaScriptの記述場所 | JavaScript入門編 - ウェブプログラミングポータル
セレクトボックスで選択されている項目を取得する : JavaScript | iPentec
JavaScript | 配列の要素を順に取得する(forEach)
JavaScript | テキストボックスの値をJavaScriptを使って取得・設定する
JavaScript | ドロップダウンメニューの値をJavaScriptを使って取得・設定する
JavaScript | 引数を使って関数へ値を渡す
JavaScript | 文字列を連結する
JavaScript | 文字列の長さを取得する(length)
JavaScript | 現在のページのURLを取得する(location.href)
[JavaScript] onClick()を使ってフォームのボタンが押されたときの処理を作る | Search Light（CakePHP PHP jQuery JavaScript CSS Linux MySQLMac）
【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ！ | 侍エンジニアブログ
JavaScriptの文字列操作（置換・連結・検索・比較など）を徹底解説！ | 侍エンジニアブログ
ボタンをクリックするとJavaScript関数を呼ぶやり方について解説します | たいらのエンジニアノート
JavaScript、関数を終了する方法
JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい – WPJ
Javascript でURLのパラメータを取得する方法 | WWWクリエイターズ
JavaScriptでクエリ付きURLを簡単に作る（URLSearchParams）
JavaScriptの識別子
