CSS selector 覚書

これで飯食っている人なら何を今更、だと思うんですけど。。。
CSS selector と JavaScript の覚書です。

昨日ボヤいた Walmart のサイトデザインが変わって、印刷した inovice のレイアウトが悲惨なことになったという件ですが、一括ダウンロードする際に、CSS を編集して保存していました。
そうすると、サイトの構成が変わったら、また一からダウンロードしなおさないといけないので、このやり方はまずいなと。そこで、ダウンロードは素のままで、それをローカルで開いた時に JavaScript で CSS を後から細工することにしました。
やることは、document.querySelector('#target').style.display = 'none' 的な感じなんですが。

まず最初のお題は、いくつかのアイテムをまとめて注文した場合、返品ボタンとかが複数表示されて、それも印刷されてしまうので まとめて 消したい、です。

先に結論を書きます。

document.querySelectorAll('.product-button-groups').forEach(e => { e.style.display = 'none'; });

ボタンは、product-button-groups というクラスなので、querySelectorAll まとめてひっかけます。

ここまではいいんですが、querySelectorAll で戻ってきた NodeList をどう回していくかというのが問題です。

ありがとう、エラい人。
自分は美しさが気に入りましたよ。
IE なにそれですし。

今までだったら、for で回すところです。
美しくないけど、何やっているかは明らかだし、ちゃんと動くし。

どういえばいいんでしょうか、便秘で溜まったものが一気に出たというか、そういうスッキリ感です。
便秘になったことはないんですけどね。

スッキリしたところ、次のお題です。
先にコードから書いちゃいます。

document.querySelectorAll('[data-automation-id=gc-payment-details] tr:nth-child(n+2)').forEach(e => { e.style.display = 'none'; });

支払い内容の表示なんですけど、table になっていて、普通はカードで払ってそれでおしまいなので、最初の tr に Total が、次の tr にカード番号が入ってきます。

ところがどっこい、最近、ギフトカードがバンドルされたお買い得商品をよく買うもので、買った以上使うわけですが、1 度に 5 枚まで使えるので、そこにさらに 5 件のカード番号が表示されて、もうトイレットペーパー占いで引き出された便所神の如く、だらだらと長いインボイスになってしまうので、2 番目以降には消えてもらおうってわけですよ。

:nth-child(n+2) でまとめてひっかけ、スッキリ。
forEach でまとめて消して、スッキリ。
ダブルスッキリ。

ダブルといえば、JB64 ですがオーディオレスなのでヘッドユニットを買わないといけないのですが、日本だと 2 DIN っていうじゃないですか。アメリカだと、double DIN といいます。
それで、ナビはもっぱらスマホのを使っているので Apple Car Play に対応していて、そのほかの下らない機能、ナビはさておき DVD だとかの光学ドライブといったもう 10 年は使っていないものがなくて、シンプルで安いものを探していたんです。

Amazon.com 売れ筋 No.1 が Sony XAV-AX1000 です。

これ、物理的なボリュームがあるし、前に USB コネクタがあるんですよ。
なもんで、USB メモリを挿すのも楽。
そして何よりも安い。
注文しようと思ったら、日本に直接出荷してくれるセラーさんが品切れしてしまいました。

それと crutchfield で適合を確認したかったんですが、そもそも SUZUKI が存在しなかったです。JB23 の情報でもあれば、付くかどうかくらいはわかると思ったんですが、JB23 を置いておけば、XAV-AX1000 単体を輸入して、動作確認をした上で、配線キットなどは JB23 と JB64 との差分で行けると判断できましたが。
なんにせよ、段取りが悪すぎました。

ステアリングリモコンに対応しているし、純正でも良かったんですけど、それはそれで、面白くないので Alpine の DAF9, フローティングビッグDA を買いました。

しかし、クソ高かったなぁ。。。

その割に、DAF9 もそうだし、純正の DA も、XAV-AX1000 も、Bluetooth 機能はあるんですが、Apple Car Play に関していえば、有線で接続しないとダメなんです。

Mini の場合、乗ると勝手に Bluetooth でペアリングして、勝手に音楽の再生(レジューム)がはじまります。
何もしないでいいんですよ。
センターには Qi の充電機能付きホルダがありますから、XR 以外だったら、そこにセットできます。
自分も 5 号も XR だからセットできませんけど。
なので、それが当たり前だと思っていたのですが、随分と完成度が低い気がしますね。

あと、「ビッグだ」なんて、安直な名前だと思ってたんですけど、

DA = ディスプレイオーディオだったんですね。。。

スッキリと言えば、愛媛の愛すべきクソ CM 企業、たかだ引越センターさんですよ。
スッキリする(?)CM を全国の皆々様にみていただきたいところなんですが、なんと非公開になってしまいました。
ネタバレするので、一応伏せ字にしときますけど。。。

逆に、全くスッキリしないのがコレ。

なんなんですが、このブ男は!
外人さんたちも激おこデス!
なかには、

ひっこシコシコしたかだ

という突っ込みまで入る始末。。。

えっと、なんの話でしたっけ?
CSS selector の話でした。

まあ、ここを見ろで終わってしまう話でもあるんですが。。。

それで、消えてもらう場合ですが、CSS selector でやる場合は、

visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。

の違いがあって、見えなくする(場所は確保されている)のと、全くない場合と 2 パターンあるので、レイアウトの崩れ具合によりどっちがいいってのは変わるわけです。

ところで、querySelector でひっかけた要素に完全に消えてもらう場合、どうするのかという話です。
child.parentNode.removeChild(child); しないといけない。

[document.querySelector].forEach(e => { e.parentNode.removeChild(e); }) みたいな?
これだと e に代入しているから同じだし、まあ All よりも [] で一文字減ったというかなんというか。

逆に、querySelector だと、引っかかる要素がなかったときに、null が戻るもんだから、引っ掛からなかったらそこでエラーが起こって後の処理が中断されてしまうんです。

TypeError: null is not an object (evaluating 'document.querySelector('foo').style')

まあ、それはそれで、Knuth がエラーが起こると塗りつぶして文章を書きなさせるように、不都合を無かったことにしないほうがいいのかなとも思うんですが。

try { /* some stuffs here */ } catch { document.body.style.backgroundColor = 'red' }

この作業自体がとても美しくないことに起因している対症療法であるわけで、適当に済ませておこうと思います。

IchigoJam — おみくじの自動販売機に使えそう

30 年前を思い出させてくれるオモチャですね。
IchigoJam、名前だけは知っていたんですが。

たまたま Facebook で I/O DATA の広告が表示されて、興味深いので見てみました。

自分が子供の頃を思い出すと、当時は MSX というものがあったのですよ。
あと、NEC から、PC-8800 シリーズ が出たりもして、最初に買ってもらったのがコレだったんですけどね、確か、PC-8801 mkII MR だったかと。

それで、MSX もそうですし、PC-88 もそうなんですが、最初に電源を入れて使えるのは BASIC という状態です。
BASIC というのは、その名の通り、ものすごく原始的なプログラム言語です。
思い出を書くとキリがないのでやめておきますけど。

それでまあ、小学校で IchigoJam という超小型のマイコンと BASIC を使ってプログラミングを勉強しましょう、ということなんですが、賛否はさておき、興味をそそられたのは、これでドローンや子供用自動車などを制御するプログラムが書ける的な下りです。

それと、小学生でも始められるってことは、おそらく買ってきて、電源を繋いだら昔の MSX や PC-88 のように、カーソルが表示されて、いきなり BASIC が書ける、ということではないかと思うわけです。
面倒くさくなくていいかなと。
あと、JavaScript 版もあるようです。

事例紹介の中の「3限目 IchigoJamかくちょう」で、暗くなると LED が光ると題して、ブレッドボードを使って明るさのセンサだと思いますが、ANA(2) という命令で数値を読み取る事例がありました。

また、サーボをコントロールする的な文章も散見されます。

まんまの記事もありますね。

おみくじの自動販売機も今は売り切れに対応できていないのですが、そういうこまかなこともプログラムすることで対応できるんじゃないかなと思ったりしました。

そうそう、少し前に注文した薪の自動販売機用の部品ですが、お約束でまだ届いていません。
というよりも、届くんでしょうか。。。

あちこち手を出しすぎるのもどうかと思うんですが、かなり興味深く安いので、ものになるかどうかはさておき、買って遊んでみたいと思います。