お題：selectタグ内のoptionをjavascript(jQuery)でランダムに選択する
これについて検索した結果。

var $options = $('#sel').find('option'),

    random = ~~(Math.random() * $options.length);



$options.eq(random).prop('selected', true);

なるほどー。…って、なんだこのニョロニョロは？
という訳でこれが本記事のタイトル前半部分。
後半部分の話はこれ。
　↓
js ~~ - Google 検索
ダメ元で記号で検索してみたところ…
ちゃんとヒットするではないか！
という訳で、「~~」について詳しく解説されている記事にたどり着くことができました。
　↓
【JavaScript】~~ で小数の切り捨て（ビット演算子 ~2つで0方向へ切り捨て） at softelメモ

＃自分が「鬱陶しい昔語りのおじさん」になっていく…今となってはあの人達の気持ちがわかる…。
昔は検索語に入れた記号は無視されたんだよ。
意味がわからない記号に遭遇したときは苦労したものさ。
そこで、記号の意味を調べるための記事を作ってみたことがあったなー。
便利になったものだ。
続きを読む

iPhoneからスクロールバーが消えてしまってからだいぶ日にちが経ちました。
どうして消したんですかAppleさん。
どうして戻るボタンを頑なに拒むんですか

やっぱりスクロールバーがあったほうが良い場面ってあるんです。
なので、JavascriptやCSSで表示するプラグインが存在します。
そのなかでもSimplebarというプラグインが使いやすそうでした。
使い方については下記記事がとてもわかりやすいです。
スクロールバーのカスタマイズは『Simplebar』を使えばだいたい解決すると思ったので使い方を紹介する試み | Weblasts

さて、これだけなら本記事の存在価値は無い訳です。
これに関連して調べたけど全く見つからなかったことがあったのでこの記事を執筆しております。
それは、掲題の通りですが、水平スクロールバーを上に表示したかったのです。

で、調べたのですが見つからず、今流行りのAIにお伺いを立ててみたわけです。
すると、CSSを書き足すだけで簡単にできそうなことを言ってくるではないですか。
じゃー、ってんで、やってみたわけです。
なんとできたではないかっ！
できてみれば単純で、bottomをキャンセルしてtopを指定するだけ。
すべての水平スクロールバーを上部にするのなら、これだけでOKっす。

/* 上部にスクロールバーを配置 */

.simplebar-track.simplebar-horizontal {

  top: 0; /* 上部に固定 */

  bottom: unset; /* 下部からの固定を解除 */

}

まあ、実はAIくんの言う通りそのままでは動かなかったので修正は必要だったけどね。
気付きを与えてくれたというだけでありがたい。

私がAIにコードを依頼するとほぼ100パーセントの確率で正常に動かないコードを提出してくるんですけど、皆さんの場合はちゃんと使えているのかな？
もしかして、私がAIに嫌われているのかも？

HTMLのSELECTタグでできるフォーム部品、つまり
↓これ
私の名前は何？What is my name?
の日本語での正式名称って何なのかなー、と思った話です。

昔から、ドロップダウンリストとかプルダウンとかセレクトボックスとか呼んでいて、定まっていなかった。呼ぶたびになんだかモヤッとした気持ちになっていた。
よーし、そろそろここいらで決着をつけようではないかっ！
と、勇んで調べたところ、下記ページに行き当たった。

HTMLタグの正式名称 #HTML - Qiita

わー、すべてのタグの正式名称を調べ上げて下さっている！
すげー、ありがてぇ。と思い、そのまま上から眺めていた。
あ、SELECTタグを調べるんだった！と気づくのに時間がかかったが、まあ良い。これで長年のモヤモヤに決着がつくのだ。このくらいの遠回りは物の数ではないわっ！
さて、SELECTの正式名称は、っと。
　SELECT → 和訳の正式名称なし
ふーん、なるほどー。正式名称は「和訳の正式名称なし」っていうんだねー。あースッキリしたー、、、じゃねーよっ！
無いんかーいっ！！！
ここにモヤモヤさらに深マレリ。。。

いやいや、この記事では全般的に調べて下さったので特定のタグは深掘りしなかったということですよね。不肖このワタクシメがSELECTタグにつきましては深掘りいたしましょう。
件の記事に倣って MDN Web Docs を正義とします。
そして下記のような記述が見つかりました。

選択ボックス

単純な選択ボックスは、1 つ以上の <option> 要素を子要素として持つ <select> 要素で作成され、

それぞれが可能な値のうちの 1 つを指定します。

(その他のフォームコントロール - ウェブ開発を学ぶ | MDN) より

というわけで、SELECTタグで作られるフォーム部品の日本語正式名称は
　選択ボックス
と言って良いのではないでしょうか。


そしてこれはちと盲点だったというか、そこまで考えてなかったというか…その通りだろうと思ったので付け加えさせていただく。正式云々というのとはズレてしまいますが。。

私見では、このモノの名前はセレクトボックス、ポイントまたはクリックしてズラズラと出てくる選択肢の一群をプルダウンまたはドロップダウンメニューと言っていいと思います。

つまり下図のごとし。


「選択ボックスをクリックするとリストがドロップダウンします。」垂れ幕を落とす(※)感じ？
「選択ボックスからリストがプルダウンされます。」トイレットペーパーのように引っ張り出す感じ？

※：怪盗なヒトが気球から「〇〇はいただいた」みたいなメッセージを書いた縦長の垂れ幕をダラッと落とすイメージだったり、何かの結果発表のときビルの屋上から垂れ幕をシュルシュルっと落とすイメージだったんだけど、そういうイメージがググっても出てこなかった。世間一般的ではないのかな…？そもそも「垂れ幕を落とす」という言葉が無いようだ。あーそうそう、「くす玉」を割ったときに出てくるメッセージのイメージです。

summernote でも画像挿入時とかに modal を使っている。
つまり modal 内で summernote を使うと画像挿入時とかに modal の入れ子が発生することになる。

bootstrap modal って、意外と入れ子のことは考えられていないようで、皆さん苦労されているようです。そもそも入れ子にすべきじゃないってことなの？

というわけで、公式な対応ではなく無理矢理ここだけ対応、ということになる。
ニッチ対応とでも言うのか…こんなことに命名するのも馬鹿げているが。
まあなんとなくカッコいいほうが良いよねー、的な。
ニッチやなくてリッチになりたいでほんま。

さて、愚痴を吐いて少しスッキリしたところで本題。

summernote で画像挿入した場合、挿入した時に画像選択用モーダルが閉じる。
その閉じた際にbodyタグが操作されて親モーダルも閉じた状態になってしまう。
具体的には'modal-open'クラスが無くなって、style属性も変更される。
そこでそれを元に戻そう、というのが下記コード。

    var body_style;

    $('#parent-modal').on('show.bs.modal', function (e) {

        if (e.target.id !== 'parent-modal') {

            body_style = $('body').attr('style');

            return;

        }

        // 親モーダル用処理

    }).on('hidden.bs.modal', function (e) {

        if (e.target.id !== 'parent-modal') {

            if (body_style) $('body').attr('style', body_style).addClass('modal-open');

            body_style = null;

            return;

        }

        // 親モーダル用処理

    });

子モーダルが開く時に親モーダルの「show」イベントも発火する。
まあそれはそれで不具合の元なのだが…今回はそれを利用して、、
子モーダルが開いた(と思わしき)時にbodyタグのstyle属性値を保存しておいて、子モーダルが閉じた(と思わしき)時に保存しておいたモノを戻す。そして'modal-open'クラスも付与。
ということをしてまーす。

そうそう。画像選択用モーダルのバツボタンを押して閉じた時、親モーダルまで閉じてしまうことにはワタクシメは気づいておりませんので。
もし気づいた方がいらっしゃったらご対応くださいませ＼(^o^)／

掲題のとおりです。
使ってしまったのです…orz

【備忘録】 JavaScript で replace を使って replaceAll をする方法 | MSeeeeN | 大阪発 IT メディア by MSEN

replaceAll() は ES2021 で追加されたかなり新しい関数となっています

String.prototype.replaceAll() - JavaScript | MDN

お客様のiPhoneがiOS13.3だったため、問題発生。。。
まあ、早めに問題がわかってよかった。
そしてそのお客様がとても良い人だったので救われた。
別の意味で『お客様は神様です』でした。ありがたや〜