そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

アマゾンの商品検索ページを直販のものに限定するブックマークレット

ブラックフライデーの時期で散財が捗りますね!(季節の挨拶)

amzn.to


僕はいつも物を買う時は製品の安心感や配送の迅速性の観点からできるだけ販売元がAmazonになっているものを選ぶようにしているのだけど、ここで問題なのが肝心の商品検索ページで販売元を限定するようなオプションが用意されていないこと。

商品名のそれっぽさやプライム配送の有無である程度は判別できるんだけど、あとは地道に開いては舌打ちして閉じ、別のを開いて・・・という流れになりがち。

Amazon側がそういうの用意してないんじゃしょうがないと諦めていたんだけど、先日ネットを徘徊していて検索結果ページのURLに&emi=AN1VRQENFRJN5を付与するとAmazon直販の結果だけを表示できるという情報を目にする。


普通に「モバイルバッテリー」検索した時は、スポンサードされた~年最新型みたいないかにもなやつが上位に表示される。

f:id:blue1st:20201128142106p:plain:w600
普通に「モバイルバッテリー」で検索

ここで先程のパラメータを入れてやると、スポンサー枠もすっぱり消えるし表示されるの商品は販売元がAmazonのものだけになってくれる!

f:id:blue1st:20201128142314p:plain
パラメータ付与して絞り込み
(パラメータはページを開くとrh=~に勝手に置き換えられるようだ。おそらくサイドバーの各種情報を収めてるのがrhで、その中の1項目として扱ってるんだな。)


もちろん毎度URL欄にコピペするのでも良いのだけど、そこはエンジニアとしては効率化を考えたいところ。 というわけでブックマークレットを作ってみた

Amazon直販 ←このリンクをブックマークバーにドラッグアンドドロップ! (ブックマークバーがない時はCtrl+Shift+Bで表示)

f:id:blue1st:20201128152017g:plain
ドラッグアンドドロップ

あとはAmazonの検索結果のページでブックマークから実行するだけ。

f:id:blue1st:20201128152717g:plain
ブックマークレット実行


いちおう書いたコードの解説。

// 現在開いているURLの部品を取得
const h = location.hostname;
const p = location.pathname;
const s = location.search;

// Amazonの検索結果ページであることを確認
if ( "www.amazon.co.jp" === h && "/s" === p && s.length > 0 ) {
  // 既存のパラメータをオブジェクト化してそこに追加
  const q = Object.assign(
 {},
 ...s.slice(1).split("&").map(
  a => {
   kv=a.split("=");
   return {[kv[0]]:kv[1]};
     }
 ), 
    {emi: "AN1VRQENFRJN5"}
  );  
  // URLを新たに作成したものに置き換え
  location.href = p+"?"+Object.keys(q).map(a => a + "=" + q[a]).join("&");
} else {
  // 対象ページ以外で実行された時
  alert("アマゾンの検索結果ページで使用してください");
}

雑に後ろにくっつけるだけ~とかでも実用上全く問題ないんだけど、一応パラメータの重複とかそういうのに気を使った結果、思いの外長くなってしまった。

↓本当に雑にやるなら見つけた時サクッと書いたこれ程度で十分。


これ作ってて「そういえば最近ブックマークレットってあんまり見かけないなー」と思ってたんだけど、どうもChromeなんかはJavaScriptからブックマークのAPIをJavaScriptから叩けない=ユーザのひと手間がどうしても必要=ド初心者相手には厳しいからっぽいですな。

あとガッツリ長期で運用していくならChrome拡張みたいなの作った方がアプデとかも効くし、ユーザ的にも管理しやすいしね。

個人的にはChrome拡張も一時興味持って調べてたんだけど、あれはあれでストアに出すのにお金かかるんで完全に個人の趣味でやるには微妙なんだけどなあ・・・

blue1st-tech.hateblo.jp