まえがき
以前秋月電子さんにお邪魔した際、自分の買うものの陳列場所（売り場にあるのか、裏の倉庫に置かれているものなのか）を全く把握しておらず、店員さんを何度も倉庫に往復させてしまうなどという大変なご迷惑をおかけしました。
その際の反省を活かして、また同じような陳列場所未把握の民を救うため、秋月さんのwebサイトの買い物かごとスクリプトを活用した陳列場所の簡便な把握方法をご紹介いたします。
イメージ
https://akizukidenshi.com/catalog/cart/cart.aspx
「通販コード」の右側が…
こんな感じに！
スクリプト
以下のスクリプトを、買い物かごを表示した状態でブラウザの開発者ツール内のコンソールに打ち込んで実行すれば、上の画像の通りに売り場が表示されます。
スクリプト
(async() => {
const locs = ['秋葉原店', '八潮店'];
const items = [...document.querySelectorAll('form > table tr')];
for(const loc of locs) {
const nhead = document.createElement('td');
items[0].insertBefore(nhead, items[0].children[1]);
nhead.classList.add('cart_tdc_b');
nhead.innerText = loc;
}
for(const item of items.splice(1)) {
const link = item.querySelector('.cart_tdl > a');
const code = link?.innerText;
if(!code) {
const line = item.querySelector('.linecart');
if(line) {
const cs = line.getAttribute('colspan');
line.setAttribute('colspan', Number(cs) + locs.length);
} else {
for(const loc of locs) {
const node = document.createElement('td');
item.insertBefore(node, item.children[1]);
node.classList.add('cart_tdl');
}
}
continue;
}
const whi = await fetch(`/catalog/goods/warehouseinfo.aspx?goods=${code}`);
/* 「日本語サイトあるある：fetchすると文字化け」の回避 */
const buff = await whi.arrayBuffer();
const text = new TextDecoder('shift-jis')
.decode(buff);
const html = new DOMParser()
.parseFromString(text, 'text/html');
for(const loc of locs) {
const store = [...html.querySelectorAll('tr')]
.find(tr => (tr.querySelector('.storename_')?.innerText || '').trim() == loc);
const where = store ? store.querySelector('.storehouse_name').innerText.trim() : '不明';
const node = document.createElement('td');
item.insertBefore(node, item.children[1]);
node.classList.add('cart_tdl');
node.innerHTML = where;
}
}
})();
あとはスクショを撮るなりして、買い物メモ代わりにしましょう。
おまけ：ブックマークレット
ブックマークレットとはどんなものか・どうやって使うのかはここには書かないので別途調べていただきたいのですが、ブックマークレットを使えば、開発者ツールが使えないスマホなどの環境でも、上述の機能が使えます。
以下のソースをコピーして、然るべき手順でブックマークとして登録してください。
ブックマークレット用のソース
javascript:(async()%3D%3E%7Bconst%20locs%3D%5B'%E7%A7%8B%E8%91%89%E5%8E%9F%E5%BA%97'%2C'%E5%85%AB%E6%BD%AE%E5%BA%97'%5D%3Bconst%20items%3D%5B...document.querySelectorAll('form%20%3E%20table%20tr')%5D%3Bfor(const%20loc%20of%20locs)%7Bconst%20nhead%3Ddocument.createElement('td')%3Bitems%5B0%5D.insertBefore(nhead%2Citems%5B0%5D.children%5B1%5D)%3Bnhead.classList.add('cart_tdc_b')%3Bnhead.innerText%3Dloc%3B%7Dfor(const%20item%20of%20items.splice(1))%7Bconst%20link%3Ditem.querySelector('.cart_tdl%20%3E%20a')%3Bconst%20code%3Dlink%3F.innerText%3Bif(!code)%7Bconst%20line%3Ditem.querySelector('.linecart')%3Bif(line)%7Bconst%20cs%3Dline.getAttribute('colspan')%3Bline.setAttribute('colspan'%2CNumber(cs)%2B%20locs.length)%3B%7Delse%7Bfor(const%20loc%20of%20locs)%7Bconst%20node%3Ddocument.createElement('td')%3Bitem.insertBefore(node%2Citem.children%5B1%5D)%3Bnode.classList.add('cart_tdl')%3B%7D%7Dcontinue%3B%7Dconst%20whi%3Dawait%20fetch(%60%2Fcatalog%2Fgoods%2Fwarehouseinfo.aspx%3Fgoods%3D%24%7Bcode%7D%60)%3Bconst%20buff%3Dawait%20whi.arrayBuffer()%3Bconst%20text%3Dnew%20TextDecoder('shift-jis').decode(buff)%3Bconst%20html%3Dnew%20DOMParser().parseFromString(text%2C'text%2Fhtml')%3Bfor(const%20loc%20of%20locs)%7Bconst%20store%3D%5B...html.querySelectorAll('tr')%5D%20.find(tr%3D%3E(tr.querySelector('.storename_')%3F.innerText%20%7C%7C%20'').trim()%3D%3Dloc)%3Bconst%20where%3Dstore%20%3F%20store.querySelector('.storehouse_name').innerText.trim()%3A%20'%E4%B8%8D%E6%98%8E'%3Bconst%20node%3Ddocument.createElement('td')%3Bitem.insertBefore(node%2Citem.children%5B1%5D)%3Bnode.classList.add('cart_tdl')%3Bnode.innerHTML%3Dwhere%3B%7D%7D%7D)()%3Bvoid(0);
スクリプト同様、買い物かごのページで実行しましょう。