ラジオボタンやチェックボックスをランダムにチェックするブックマークレットを作った
答える気が失せるほどのラジオボタンやチェックボックスがひしめくアンケートサイト。イチイチ文章を読んでチェックを入れるのもダルいので (爆)、ランダムにチェックを入れるブックマークレットを作った。
動作サンプルは以下。「Exec」ボタンを押すと、その度にラジオボタンやチェックボックスをランダムにクリックする。
- デモ : Random Check Inputs
- コード : frontend-sandboxes/random-check-inputs.html at master · Neos21/frontend-sandboxes
ソースコードは以下のとおり。
javascript:(e=>{const a={};[].forEach.call(document.querySelectorAll("[type=radio],[type=checkbox]"),e=>{e.name&&(void 0===a[e.name]&&(a[e.name]=[]),a[e.name].push(e))}),Object.keys(a).forEach(e=>{a[e][Math.floor(Math.random()*a[e].length)].click()})})();
上のコードを直接ブックマークレットとして用意してやれば動作する。
自分の GitHub Pages にこの JS ファイルを公開しているので、以下のようなブックマークレットにすれば、GitHub Pages よりコードを取り寄せられる。
javascript:((d,s)=>{s=d.createElement('script');s.src='https://neos21.github.io/bookmarklets/random-check-inputs.js';d.body.appendChild(s)})(document);
- bookmarklets/random-check-inputs.js at master · Neos21/bookmarklets · GitHub … 上述の圧縮したコード。
- bookmarklets/random-check-inputs.js at master · Neos21/bookmarklets · GitHub … 圧縮前のコード。読むならコッチ。
仕組みは簡単で、input[type="radio"] および input[type="checkbox"] を querySelectorAll() で取得し、name 属性値ごとにグルーピングする。そしてその name 属性ごとに、1つの要素をランダムに抽出してクリックしている。よほど変わった作りのフォームでなければ、ラジオボタンもチェックボックスも、1項目につき1つの name 属性値を複数回利用しているはずなので、コレで上手く行く。
<!-- 例えば性別を選択するラジオボタンなら、以下のように name="gender" が2回登場するワケだから、この中から1つ要素を取り出してクリックすれば良い -->
<p><input type="radio" name="gender" value="male"> 男性</p>
<p><input type="radio" name="gender" value="female"> 女性</p>
配列の中からランダムに要素を1つ取り出すイディオムは以下を参考にした。
Array.prototype.forEach は [].forEach とショートコーディング。querySelector マジ便利。
コード圧縮は Uglify-ES 行ったが、const を var か let に変えて文字数を短くはしてくれず。実装中から let のみ使うようにしておかないと短くならんね。
あと、iOS Safari とかにブックマークレットとして登録した時に、アロー関数 => の大なり文字 > が %3E とエンコーディングされて読みづらい。w
その他ブックマークレットは以下のリポジトリで公開中。