アマゾン転売屋ブラックリスト ツールのクローム拡張版と、プログラムの仕組みの解説。そしてクローム拡張ではなくブックマークレットでツールを提供した理由
はい、とりあえず、アマゾン転売やブラックリストツール、すごい簡単なので、素人の方にも作ってもらえるかと思ってちょっとソースの解説をします(｀・ω・´)っクローム拡張版の方
実は、このプログラムは本質的にはCSSを足してるだけなんです(； ･`д･´)っ
まず、アマゾンの商品て、必ず出品者へのリンクがありますよね？
そのリンクに出品者のIDが入っているのです(｀・ω・´)っ
上記はamazon.co.jpが販売してるとこですが、ふつう、個々の部分のリンクの中身には
<a href="/gp/help/seller/at-a-glance.html/ref=dp_merchant_link?
ie=UTF8&seller=Amazon.co.jp&isAmazonFulfilled=1"
id="sellerProfileTriggerId"
onclick="tabularBuyBoxClickLogger()">Amazon.co.jp</a>みたいにseller=出品者のIDみたいなのが書かれていて(｀・ω・´)っ
ここにCSSを足して、マークを付けるわけです(｀・ω・´)っ
では、このamazon.co.jpのリンクにCSSで情報を追加してやりましょう
[href*='amazon.co.jp']:before{
content: '元締め' !important;
}
そうすると
hrefという属性の中に、amazon.co.jpという文字列がある部分の前に、新しいコンテンツとして「元締め」という文字が入るようになります(｀・ω・´)っ
amazon.co.jpと書かれたリンクの前に「元締め」の文字列が入りましたね(｀・ω・´)っ
変なところに文字が出るのはこのCSSが適当で、別のところにもあたってるからです
ただ、これだと見にくいので、もうちょっと装飾を足して
[href*='amazon.co.jp']:before{
padding:3px !important;
height:1.2em;
font-weight:900;
content: '元締め' !important;
font-size:1.2em !important;
background: yellow;
word-break: keep-all ;
color:red;
} このようにしてやると
はい、少し見やすくなりましたね(*´ω｀*)
この原理を基本にして、「転売ヤー」をマーキングするプログラムを作ります(｀・ω・´)っ
まず必要なのは転売屋のセラーIDです(｀・ω・´)っ
それをどこに取りに行くのかというと・・・
この、販売元にあるリンクのページです(｀・ω・´)っアマゾンのリンクは使えないけど
リンク先のURLを見てやると
https://www.amazon.co.jp/sp?_encoding=UTF8&asin=B07VQRCRL1&isAmazonFulfilled=0&ref_=olp_merch_name_9&seller=XXXXXXXXXX
みたいになっているので、このXXXXXXXXXXの部分をブラウザ内に保存するわけです(｀・ω・´)っ
そこで、さっきCSSで [href*='amazon.co.jp'] となっていた部分を [href*='XXXXXXXXXX']に書き換えればよいわけです(｀・ω・´)っ
これを転売屋の数だけ繰り返して、転売屋のセラーIDが含まれるリンクに「転売ヤー」マークを入れることができれば、それだけで転売屋を見分けることができるわけです(｀・ω・´)っ
つまりプログラムとしては
1. 販売元のページからセラーIDを持ってきてブラウザに保存する
2. 保存されたセラーIDのリストをもとに、プログラムがCSSを足している
の、この２つの作業をしているだけです(｀・ω・´)っ
ではソース全文を下に(｀っ・ω・´)っ＿/
var base_prime={};
base_prime['amazon']=(function() {/*
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
var base={};
base['amazon']=(function() {/*
[href*='[:id]'],[data-a-popover*='[:id]']{
opacity:.7;
padding:1em 0;
padding-bottom:1.5em;
}
[href*='[:id]']:before,[data-a-popover*='[:id]']:after{
padding:3px !important;
height:1.2em;
font-weight:900;
content: '転売ヤー' !important;
font-size:1.2em !important;
background: yellow;
word-break: keep-all ;
color:red;
}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
function qd_mark_resaler(ids,type){/*転売屋をマーキング */
if(document.querySelector("#amazon_black_list")){
var style=document.querySelector("#amazon_black_list");
}else{
var style=document.createElement("style");
style.id="amazon_black_list";
}
/*上でスタイルタグを指定しています。重複しないようにタグがすでに挿入されている場合は再利用します */
var style_string=base_prime[type];
console.log(type,base[type])
for(var i=0;i<ids.length;i++){
/*パラメータである[:id]を置き換えながら */
style_string+=base[type].split("[:id]").join(ids[i]);
}
style.innerHTML=style_string;
document.body.appendChild(style);
}
function getUrlVars(url){/* urlのgetパラメータを取得します。販売店のセラーIDをブラックリストに追加するのに必要 */
var vars = {};
if(url){
try{
var param = url.split('?')[1].split('&');
}catch(e){
var params={};
}
}else{
var param = location.search.substring(1).split('&');
}
try{
for(var i = 0; i < param.length; i++) {
var keySearch = param[i].search(/=/);
var key = '';
if(keySearch != -1) key = param[i].slice(0, keySearch);
var val = param[i].slice(param[i].indexOf('=', 0) + 1);
console.log(val);
if(key != '') vars[key] = decodeURI(val);
}
}catch(e){
console.warn(e);
var vars={};
}
return vars;
}
/*配列のフィルタで使う関数 */
function is_in(target){
return function(value){
return (target==value);
}
}
/*ブラックリストの切り替え */
function black_list_switch(seller,type){
if(blackList.filter(is_in(seller)).length==0){
/*ブラックリストに該当セラーが存在しない場合*/
if(confirm("このセラーをブラックリストに追加しますか？")){
blackList.push(seller);
localStorage.qd_blacklist_on_amazon=JSON.stringify(blackList);
qd_mark_resaler(JSON.parse(localStorage.qd_blacklist_on_amazon),type);
}
}else{
/*すでにブラックリストがある場合*/
if(confirm("このセラーをブラックリストから除外しますか？")){
localStorage.qd_blacklist_on_amazon=JSON.stringify(blackList.filter(is_not_in(seller)));
qd_mark_resaler(JSON.parse(localStorage.qd_blacklist_on_amazon),type);
}
}
}
var seller_id="";
function on_amazon(){
/*とりあえず転売屋をマーキング */
qd_mark_resaler(blackList,'amazon');
if(location.href.split("?")[0].split('/').length=='4'){
var page=location.href.split("?")[0].split("=")[0].split('/')[3];
}
if(page=='sp'){
/* ショップの詳細ページを開いていた場合、リストの追加、削除を行う */
var items=getUrlVars();
if(items.seller){/*PC 用 */
seller_id=items.seller;
/*ダブルクリックしたらブラックリストに登録*/
var body = document.querySelector('body');
body.addEventListener('dblclick', function (e) {
black_list_switch(seller_id,'amazon');
});
}else if(items.s){/*スマホ用 */
seller_id=items.s;
var body = document.querySelector('body');
body.addEventListener('dblclick', function (e) {
black_list_switch(seller_id,'amazon');
});
}else{
alert("セラーのIDが取得できませんでした。")
}
}
}
var type='';/*ここでどのサイト用のCSSを指定するか決める */
function amazon_black_list(){
/*ブラックリストを読み出し*/
blackList=[];
try{
blackList=JSON.parse(localStorage.qd_blacklist_on_amazon);
}catch(e){
blackList=[];
};
if(location.href.indexOf("www.amazon") < 12 && location.href.indexOf("www.amazon")!=-1){
type='amazon';
on_amazon();
return false;
}
alert("現在対応しているのはアマゾンのみです")
}
amazon_black_list(); はい、わずか１６０行足らずで出来上がってしまいました(； ･`д･´)っ
ブラウザのLocalStorageを使っている以外は特に目新しいことはしていないのではないかと思います(｀・ω・´)ｖ
ちなみに、今回のソースコードは販売元のページでダブルクリックするとこでブラックリストへの登録、解除ができるようになっています(｀・ω・´)っ
このソースコードをGoogle Chromeのデベロッパーコンソール（F１２を押すと出てくる）で実行するとクローム拡張を実行したのと同じ効果が得られます(｀・ω・´)っ
今回はネットワーク越しでのブラックリストの共有をするところまでは解説しませんが、この方法で他のサービスにも対応したものが作れると思います(*´ω｀*)
さて、それでは最後に・・・
クローム拡張の危険性
さて、twitter上でも何度か質問されましたが
『なんでクローム拡張にしないんですか？ブックマークレットは毎回クリックしないと動かないからめんどくさい。クローム拡張なら自動で動いてくれるから楽じゃないですか？』
はい、そのとおりなんです。
クローム拡張は入れておけば勝手に動いてくれるんです。
それがどれだけ危険なことかわかるでしょうか(； ･`д･´)？
パスワードを入力するときも、買い物をするときに入力した住所が表示されているときも、ずっと動いてるんです、クローム拡張(； ･`д･´)っ
つまり、パスワードも個人情報も盗み放題(； ･`д･´)っ
仮に、自分が住所の情報のあるページを開いていなくても、あなたがこれからクリックすることのできるページの情報をブックマークレットやクローム拡張は取得することができるのです(； ･`д･´)っ
それどころか、いたずらで所品を購入することすらできます(´･ω･；`)
そんなわけで、私はこのたぐいのプログラムを動かすときは、ログアウトした後で動かすことを推奨しています(｀・ω・´)っ
実際に、私の作ったこのツール
こちらでも、リストの共有をするためにサーバーにデータを送信するときはログアウト画面から送信する等にしてます(｀・ω・´)っログインしっぱなしにならないように
それではプログラマおよびその予備軍の皆様、転売屋ブラックリストをご自分で作ってみては以下家がでしょうか(*´ω｀*)
良い日曜の昼下がりをお過ごしください。
あ、忘れてました(´･ω･；`)
クローム拡張はまだ審査中なのですが、審査が待てない方は
こちらからどうぞ(*´ω｀*)
ただ野良拡張なので、インストールしたい方は自己責任で、ググってインストールするか、
こちらの記事で野良クローム拡張のインストールをしている部分がありますので、参考になさってください(*´ω｀*)
クローム拡張版も基本的な部分はブックマークレット版と同じですが、ブラックリストの登録、除外については、販売社のページ（どこでもいい）をダブルクリックするという違いがあります。
また、クローム拡張版はセキュリティの問題で（あとクロームストアの審査を通るため）にコードの共有機能をつけていません(； ･`д･´)っ
でも、ブックマークレット版とクローム拡張版は同じところにリストを持っていますので、コードを共有したいときはブックマークレット版をご利用ください。
なにかご意見ご要望など有りましたら
ツイッターのDMもしくはコメント欄にお願いいたします(*´ω｀*)
この記事が気に入ったらサポートをしてみませんか？