esbuildでお手軽にbookmarkletを作る

bookmarkletをnpm scriptで簡単に作成できないか検討してみました。

前提

即時関数化

メインの話とはずれますが、
bookmarkletはglobal汚染してしまうので、即時関数化が必要です。
これはJS側に書いておくことにします。
(※即時関数もbookmarklet生成時に追加することは可能ですが、今回やってませんよという話。)

ご参考) IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

minify

esbuildはtsでの利用も可能で軽量なのと、minifyオプションが付いていて簡単に1liner化できます。
今回は、これを利用することにしました。

npm script

shellを書いてもよかったのですが、JSで完結したく、npm scriptでできないか検討しました。 当初 echo -n javascript: & esbuild ... で実施しようとしましたが、 npmでは複数コマンドを実行することができず、少しはまっていました。

最終的に

shell側でnestすることで対応しました。

  "scripts": {
    "bookmarkletize": "echo javascript:$(esbuild --bundle *.js --minify)"
  }

プロを目指す人のためのRuby入門 読了

cherry本、第二版読了。 初版も読んでいたのですが、第二版も読んでみました。 サンプルコードも書きながら楽しく読み進めれました。 最近RubyRails初めた人が2冊目、3冊目あたりに読むのが良いかなぁという印象を持ちました。

個人的には

第11章のパターンマッチングが追加されているのが非常によかったです。 とても勉強になりました。 パターンマッチングは使うこともありそうなので、ここで勉強できて良かったと思いました。

また、12章のRubyデバッグ技法を身につける、もRuby3.1で入ったdebug.gemにも触れられていて良いです。

あと、13章のRubyに関するその他のトピック、で今はTime使っておけばよいということや、 警告表示の「RUBYOPT=-W:deprecated」にも触れられていてとても良いです。

ちなみに、環境変数以外での設定は知りませんでした。

Warning[:deprecated] = true

Bootstrap5のPopoversが微妙なので少し頑張った

Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/

を使おうとしていたのですが、期待する動作にならずに少し困っていました。 

具体的には

data-bs-trigger というオプションが用意されていて、 click、hover、foucs 時にpopoverが発動するようになっています。

やりたいこと

  • リンクのhoverとclick時にpopoverを表示
  • popoverに表示された内容をコピペできる
  • popover以外をクリックするとpopoverを非表示にする

上記なのですが、デフォルトのoptionでは対応できないようでした。

問題点

hoverは欲しいので、これは入れる前提で、他のoptinoを組み合わせてみると、以下の問題が発生していました。

data-bs-trigger 問題点
hover focus popoverをコピペしようとするとpopoverが消えてしまう
hover click popoverのコピペはできるけど、popoverを消すために、リンクを再度クリックしないといけない

対応方法

hover clickを採用しつつ、mouseup時のtargetの要素を見て、popoverの外側をクリックしていたらpopoverを消すという対応を入れました。

document.addEventListener("mouseup", (event) => {
  const popoverElm = document.getElementsByClassName("popover")[0]
  if (popoverElm) {
    const target = event.target
    const isPopoverInsideClicked = target.closest(".popover")
    if (!isPopoverInsideClicked) {
      bootstrap.Popover.getInstance(popoverElm).hide()
    }
  }
});

jsfiddle

改良版はコメント外すと動きます。