今回は、ペイペイの商品ページからJanコードを抽出して、それをアマゾンへ自動リンクし、Janコードでアマゾン検索をかけるツールです
今回も同じく、
getElementsByClassName()でクラス名からHTML要素を複数取得する方法がわかればできますね
ペイペイ商品ページからJanコードを抽出するJavaScript
動作確認用に、PayPayの商品ページを開きならが、Chromeの開発機能のデベロッパーモードのコンソール画面位以下をコピペしたら、JANコードが表示されるはず
|
1 2 3 4 |
var result = document.getElementsByClassName("ItemDetails_list")[1].innerHTML; var jan = result.replace(/[^0-9]/g, ""); console.log(jan); alert(jan); |
JANコードを自動でアマゾン検索バーに貼り付けて、商品検索する方法
PayPay商品ページから、Janコードが抽出できたら、そのJanコードでアマゾン商品検索ができるようにしたいですよね
以下のコードはJanコードをアマゾン検索にかけるJavaScriptコードです
以下のコードを上と同じく、Chromeのその他のツール→デベロッパーツールからコンソールを開いて、以下のコードをコピペ
|
1 2 3 4 5 6 |
var result = document.getElementsByClassName("ItemDetails_list")[1].innerHTML; jan = result.replace(/[^0-9]/g, ""); window.open( "http://www.amazon.co.jp/s/ref=nb_sb_noss?url?search-alias=aps&field-keywords=" + jan, "_blank" ); |
ブックマークレットに変換
以下のようにブックマーク登録でそのブックマークボタンを押したら自動実行するために、以下のコードを付加する
|
1 2 3 |
javascript:(function(){ 〜ここに上記コードを貼り付け〜 })(); |
↓コードを貼り付けたらこうなります
|
1 2 3 4 5 6 7 8 |
javascript:(function(){ var result = document.getElementsByClassName("ItemDetails_list")[1].innerHTML; jan = result.replace(/[^0-9]/g, ""); window.open( "http://www.amazon.co.jp/s/ref=nb_sb_noss?url?search-alias=aps&field-keywords=" + jan, "_blank" ); })(); |
ただ、このままだと、改行が入っちゃってるので、改行を全て消す。
|
1 2 |
javascript:(function(){var result = document.getElementsByClassName("ItemDetails_list")[1].innerHTML;jan = result.replace(/[^0-9]/g, "");window.open("http://www.amazon.co.jp/s/ref=nb_sb_noss?url?search-alias=aps&field-keywords=" + jan,"_blank");})(); |
これで、ブックマークに登録したら完成！！
リンクから自動でドラックアンドドロップ対応させるために
上記コードでも実行できるが、ブログなどに貼り付ける時、a hrefタグで貼り付けると思うのですが、このままだと ”” の記号が、邪魔するので、以下のように書き換えよう
ただ単に ” → ' に置き換えるだけ
|
1 2 |
javascript:(function(){var result = document.getElementsByClassName('ItemDetails_list')[1].innerHTML;jan = result.replace(/[^0-9]/g, '');window.open('http://www.amazon.co.jp/s/ref=nb_sb_noss?url?search-alias=aps&field-keywords=' + jan,'_blank');})(); |
今回はここまで
出来上がったコードは以下リンクより
