Q&A
実現したいことを具体的に書いてください。「検索する」ボタンを押すと具体的に何が起きてほしいのですか?
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- 楽天などのECサイトのTOPでプルダウン検索機能を有効にしたい。
- 自社サイトにて３つの選択肢から数字を選択させ、それをもとに検索結果を楽天上に表示させたい。
- タイヤの幅 扁平率 インチを選択させ、自社の楽天サイトからタイヤの検索結果を表示させる。
前提
以前こちらで違法になるかも！
っと指摘を受けましたが、それでは上司が納得しませんでした。
それを実装させる、させないは別にして完成させたいです。
発生している問題・エラーメッセージ
以前はエラーが出ていたのですが、ヤフー知恵袋の説明通りにやったら、エラーも出なくなってしまった。
該当のソースコード
ソースコード <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes,initial-scale=1.0" > <title>タイヤを探す</title> <!-- <link rel="stylesheet" href="./css/search-style.css?1912"> --> <script type="text/template" name="rat" id="ratAccountId" value="1"></script> <script type="text/template" name="rat" id="ratServiceId" value="5"></script> <script type="text/template" name="rat" id="ratSiteSection" value="gold"></script> <script type="text/template" name="rat" id="ratAdobeSiteSection" value="shop"></script> <script type="text/template" name="rat" id="ratPageType" value="gold"></script> <script type="text/javascript" src="https://r.r10s.jp/com/rat/js/rat-cdn.js" async defer></script></head> <body> <!-- <figure class="img"><img src="./images/search_t_img.png" width="500" alt=""></figure> --> <form name="myForm" id="myForm" method="GET" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank"> <input type="hidden" name="sv" value="6"> <input type="hidden" name="sid" value="223203"> <input type="hidden" name="su" value="ainet"> <input type="hidden" name="sn" value="AINET"> <!--▼ジャンルコード--> <input type="hidden" name="g" id="g" value="うんこ"> <div class="select-list"> <select name="size" id="size"> <option value="" selected>■タイヤ幅を選択</option> <option value="tg1002956">135</option> <option value="tg1002957">145</option> <option value="tg1002958">155</option> <option value="tg1002959">165</option> <option value="tg1002960">175</option> <option value="tg1002961">185</option> <option value="tg1002962">195</option> <option value="tg1002963">205</option> <option value="tg1002964">215</option> <option value="tg1002965">225</option> <option value="tg1002966">235</option> <option value="tg1002967">245</option> <option value="tg1002968">255</option> <option value="tg1002969">265</option> <option value="tg1002970">275</option> <option value="tg1002971">285</option> <option value="tg1002972">295</option> <option value="tg1002973">305</option> <option value="tg1002974">315</option> <option value="tg1002975">325</option> <option value="tg1037304">335</option> </select> <select name="henp" id="henp"> <option value="" selected>■偏平率を選択</option> <!--▼20230106削除 <option value="/20">20</option> --> <option value="tg1002943">25</option> <option value="tg1002944">30</option> <option value="tg1002945">35</option> <option value="tg1002946">40</option> <option value="tg1002947">45</option> <option value="tg1002948">50</option> <option value="tg1002949">55</option> <option value="tg1002950">60</option> <option value="tg1002951">65</option> <option value="tg1002952">70</option> <option value="tg1002953">75</option> <option value="tg1002954">80</option> <option value="tg1002955">85</option> </select> <select name="inch" id="inch"> <option value="" selected>■インチを選択</option> <!--▼20230106削除 <option value="R8">8</option> <option value="R9">9</option> <option value="R10">10</option> --> <option value="tg1010873">~10</option> <option value="tg1010874">11</option> <option value="tg1002930">14</option> <option value="tg1002931">15</option> <option value="tg1002932">16</option> <option value="tg1002933">17</option> <option value="tg1002934">18</option> <option value="tg1002935">19</option> <option value="tg1002936">20</option> <option value="tg1002937">21</option> <option value="tg1002938">22</option> <option value="tg1002939">23</option> <option value="tg1002940">24</option> <option value="tg1002942">26</option> <!--▼20230106削除 <option value="R28">28</option> --> </select> </div> <button type="button" value="上記の内容で検索" class="btn-search-size">上記の内容で検索<span>></span></button> <input type="hidden" name="sitem" id="sitem"><input type="hidden" name="nitem"><input type="hidden" value="A" name="f"> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> jQuery(function($){ //sp mode var url_pram = $(location).attr('search'); var mode = url_pram.split("mode="); if ( mode[1] != undefined && mode[1] == "sp") { $('body').addClass('modeSP'); } $('.btn-search-size').click(function(){ var size = $('#size').val(); var henp = $('#henp').val(); var inch = $('#inch').val(); var g = $('#g').val(); var data = size + '-' + henp + '-' + inch; $('#sitem').val(data); //$('#myForm').submit(); window.open('https://search.rakuten.co.jp/search/mall/タイヤ/'+ g + '/' + data + '/?sid=223203'); }); }); </script> <!-- <script type="text/javascript" src="https://r.r10s.jp/com/js/d/pa/pa3.min.js" async defer></script> --> </body> </html> ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
コメントありがとうございます。
言葉足らずで申し訳ないです。
実現したいことを追記しましたので確認お願いします。
説明が下手ですが、これで伝わりますでしょうか？？
このコードがどのように「楽天上に表示」と関係するのか不明です。楽天の検索結果ページに遷移するということでしょうか。
「ユーザが、幅 100、扁平率 20、インチ未選択で [検索する] ボタンを押したら、htts://〜 という URL が生成され、それが #view のリンクとして設定される」というぐらい具体的にお願いします。
例えば
幅110 扁平率70 インチ未選択
で入力すると下記のアドレスへジャンプできるように設定したいです。
https://search.rakuten.co.jp/search/mall/タイヤ+110%2F70/?sid=XXXXX
ちなみにjs初心者で#viewがどういう動きをするとか全く分かっていない状態です。
https://search.rakuten.co.jp/search/mall/-/503190/tg1002932-tg1002949-tg1002964/?sid=281143
こういうページですかね。
どうやら、タイヤの幅 扁平率 インチ にそれぞれカテゴリタグみたいなものが決まっているようなので、まずはそれを調べるところからじゃないでしょうか。
あ、行き違いました。そっちでいいんですね。
あ、ここURL張っていいんですねｗ
https://www.rakuten.ne.jp/gold/autoway/
ここの検索ページのようなものを作れと指示が出て、見様見真似で作成している感じです。
えええ。
見様見真似してるならコピペぐらいしましょうよ。答え書いてあるじゃないですか。
<select name="size" id="size">
<option value="" selected="">■タイヤ幅を選択</option>
<option value="tg1002956">135</option>
<option value="tg1002957">145</option>
<option value="tg1002958">155</option>
<option value="tg1002959">165</option>
<option value="tg1002960">175</option>
<option value="tg1002961">185</option>
<option value="tg1002962">195</option>
<option value="tg1002963">205</option>
<option value="tg1002964">215</option>
<option value="tg1002965">225</option>
<option value="tg1002966">235</option>
<option value="tg1002967">245</option>
<option value="tg1002968">255</option>
<option value="tg1002969">265</option>
<option value="tg1002970">275</option>
<option value="tg1002971">285</option>
<option value="tg1002972">295</option>
<option value="tg1002973">305</option>
<option value="tg1002974">315</option>
<option value="tg1002975">325</option>
<option value="tg1037304">335</option>
</select>
どうやらソースを見ているところが違ったようでした。
こちらのソースを発見してどうにか動かせるとこまでできました！
ですが、これだと必ずタイヤの幅を入力しないと駄目なようで、扁平率やインチだけの入力だと検索結果が表示されません。
モバイル版（下記のURL）だと扁平率だけとかでも検索できるようなのですが。。。
すみません、原因と解決方法を知りたいです。
お願いします。
https://www.rakuten.ne.jp/gold/autoway/sp-index.html
というより、このモバイル版のソースだと、どの部分を真似すればこのようにちゃんと動くのでしょうか？？
なんどもすみません。。。
上記は無視してください。
ソースコード書き換えたのですが、この場合扁平率だけの選択だと検索結果が表示されないです。
これを表示させるにはどうしたらできますか？
どんどん質問の趣旨が変わり申し訳ないです。
うんこってなんですの……？
回答2件
0
ご提示のコードが何をやっているのかよくわからなかったので、検索結果のURLを見て適当に書いてみました。
html
1<!doctype html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 7 <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes,initial-scale=1.0"> 8 <title>タイヤを探す</title> 9</head> 10 11<body> 12 <form id="myForm"> 13 <div class="select-list"> 14 15 <select name="size" id="size"> 16 <option value="" selected>■タイヤ幅を選択</option> 17 <option value="tg1002956">135</option> 18 <option value="tg1002957">145</option> 19 <option value="tg1002958">155</option> 20 <option value="tg1002959">165</option> 21 <option value="tg1002960">175</option> 22 <option value="tg1002961">185</option> 23 <option value="tg1002962">195</option> 24 <option value="tg1002963">205</option> 25 <option value="tg1002964">215</option> 26 <option value="tg1002965">225</option> 27 <option value="tg1002966">235</option> 28 <option value="tg1002967">245</option> 29 <option value="tg1002968">255</option> 30 <option value="tg1002969">265</option> 31 <option value="tg1002970">275</option> 32 <option value="tg1002971">285</option> 33 <option value="tg1002972">295</option> 34 <option value="tg1002973">305</option> 35 <option value="tg1002974">315</option> 36 <option value="tg1002975">325</option> 37 <option value="tg1037304">335</option> 38 </select> 39 <select name="henp" id="henp"> 40 <option value="" selected>■偏平率を選択</option> 41 <option value="tg1002943">25</option> 42 <option value="tg1002944">30</option> 43 <option value="tg1002945">35</option> 44 <option value="tg1002946">40</option> 45 <option value="tg1002947">45</option> 46 <option value="tg1002948">50</option> 47 <option value="tg1002949">55</option> 48 <option value="tg1002950">60</option> 49 <option value="tg1002951">65</option> 50 <option value="tg1002952">70</option> 51 <option value="tg1002953">75</option> 52 <option value="tg1002954">80</option> 53 <option value="tg1002955">85</option> 54 </select> 55 <select name="inch" id="inch"> 56 <option value="" selected>■インチを選択</option> 57 <option value="tg1010873">~10</option> 58 <option value="tg1010874">11</option> 59 <option value="tg1002930">14</option> 60 <option value="tg1002931">15</option> 61 <option value="tg1002932">16</option> 62 <option value="tg1002933">17</option> 63 <option value="tg1002934">18</option> 64 <option value="tg1002935">19</option> 65 <option value="tg1002936">20</option> 66 <option value="tg1002937">21</option> 67 <option value="tg1002938">22</option> 68 <option value="tg1002939">23</option> 69 <option value="tg1002940">24</option> 70 <option value="tg1002942">26</option> 71 </select> 72 </div> 73 74 <button type="submit" value="上記の内容で検索" class="btn-search-size">上記の内容で検索<span>></span></button> 75 76 </form> 77 78 <script> 79 document.getElementById('myForm').addEventListener('submit', e => { 80 e.preventDefault(); 81 location.href = `https://search.rakuten.co.jp/search/mall/タイヤ/200286/${[...document.querySelectorAll('.select-list select')].flatMap(select => select.selectedOptions[0].value == "" ? [] : select.selectedOptions[0].value).join('-')}/?sid=223203` 82 }) 83 </script> 84</body> 85 86</html>
投稿2023/10/27 01:44
総合スコア37421
入れ違いになってしまったようで、新たに質問投稿してました！
これ完璧ですね！
こんな少ないコードで再現できるなんて思いませんでした。
ほんとありがとうございます！！
0
ベストアンサー
実際に動作をさせてそれをエミュレートするだけで実現可能でしょう。
クライアントのjsでは実装は厳しいかもしれないので、サーバーサイドのクローラを使うか場合によってはヘッドレスchromeなどで実装してください
前のお伝えしたかもしれませんが、接続先がAPIを公開しているならそれに合わせた仕様を設定するとよいでしょう
参考
javascript
1<script> 2window.addEventListener("DOMContentLoaded", () => { 3 document.querySelector("#btn").addEventListener("click", e => { 4 let url = "https://サンプル/"; 5 var s = [...document.querySelectorAll('select')] 6 .filter(x =>x.value) 7 .map(x => x.value) 8 .join('/'); 9 var view = document.querySelector('#view'); 10 view.href = view.textContent = url + s; 11 }); 12}); 13</script> 14 <select name="haba"> 15 <option value="">タイヤの幅</option> 16 <option value="90">90</option> 17 <option value="100">100</option> 18 <option value="110">110</option> 19 </select> 20 21 <select name="henpei"> 22 <option value="">扁平率</option> 23 <option value="20">20</option> 24 <option value="30">30</option> 25 <option value="40">40</option> 26 </select> 27 28 <select name="inch"> 29 <option value="">インチ</option> 30 <option value="I1">10</option> 31 <option value="I2">11</option> 32 <option value="I3">12</option> 33 </select> 34 35 <div class="l-flex"> 36 <button value="◆^◆C◆◆" id="btn">検索する</button> 37 <a id="view"></a> 38 </div>
ボタンのvalueはどうしたいのかわからないのでそのままにしてあります
投稿2023/10/24 04:32
編集2023/10/24 10:00
総合スコア117674
コメントありがとうございます。
楽天APIを探してみたのですが、これに対応するのはなさそうでした。
あと申し訳ないですがクローラーやヘッドレスクローム等が調べてもわからないのですが、jsだけでの作成はやはり無理なのでしょうか？
すでに回答している通り「実際に動作をさせてそれをエミュレートする」ことができるならjsだけでもできますし、動作しないならjsだけでは無理です。ブラウザの仕組み上9割以上の確率で無理だと思いますが、やってみないとわかりません。イリーガル要素があるので回答者がやれるとは言えないので、自己責任でおためしください
あ、すみません。
そもそもこのコード自体が間違っていると思われるのですが、どこが間違っていますか？
というのが質問の趣旨でした。
エディター上でも動かないので。。。
その後楽天にて動かしたいと思ってます。
単純に動かない理由は以下の箇所です
view.href = view.innerText = url + a;
↓↓↓
view.href = view.innerText = url + s;
ただセレクトボックスの値に「/」がついていますが、これは「%2F」にエスケープされるので
もし仮にhaba=90、hepei=20、inch=11を「https://サンプル/90/20/11」にしたいなら
各optionのvalueから「/」をとってください
追記分を参考にしてください
ありがとうございます！
検索するを押すとしっかりURLが表示されるようになりました！
ちなみにこれはURL表示ではなく勝手にジャンプするようにできませんか？？
あとURLなのですが下記のようなアドレスになるのですが、タイヤの後に選択した数字を入れ込みたいです。
https://search.rakuten.co.jp/search/mall/タイヤ/?sid=XXXXX
現在の表記だと選択したものが後ろに表記されてしまうのですが、可能でしょうか？？
あなたの回答
tips
プレビュー
