ついにApple Silicon Mac（Mac mini 2024）を買ったので、 ブログの開発環境を整えるついでにバグフィックスとかをした。

画像比較スライダーが反応しない不具合を修正

↓のような画像比較スライダーを表示したときに、 スライダーをクリックしたりタップしても反応がない不具合を修正した。

原因は至極シンプルで、イベントリスナーの書き方を間違えてた。

- window.addEventListener("DOMContentLoaded", () => {
+ document.addEventListener("DOMContentLoaded", () => {
  const cocoenElements = document.querySelectorAll < HTMLElement > ".cocoen";
  for (const cocoenElement of cocoenElements) {
    create(cocoenElement);
  }
});

DOMContentLoaded イベントは document に対して発火するので、 window に対して発火させても意味がない。あほか。

厄介なのは、 window に対して発火させてたのに、 微妙に動いてたところなんだよな。 原因不明。

さよならFont Awesome。こんにちはIconify。

Font Awesome をやめて Iconify にした。

Font Awesomeはさすがの使いやすさなんだけど、無料アカウントで利用制限があるのがイマイチ。 メールの案内を信じるなら10,000 PV/Monthまで無料だけど、これが心許ない。 60%である6,000PVを超えたときのアラートメールが毎月届く状況だった。

もう一点のイマイチポイントは動的にアイコンをロードすること。 JavaScriptでアイコンをロードするので、ページの初期表示が遅くなる。 SSGで生成してるのに、もったいないなって思ってた。

で、代替案を探したら Iconify が見つかった。 これが良い。素晴らしい。

アイコンブラウザ でアイコンが探せる。 Iconify自体がアイコンを作ってるわけではなくて、 アイコンセットの統合検索＆利用サービスという位置付けのようだ。

本ブログは Mage Icons が気に入ったので使わせてもらうことに。 これ、Lineの企業ロゴも入ってたので助かった。

また、IconifyはAstroのコンポーネントも提供してくれているので、めっちゃ楽。 ↓のような <Icon> コンポーネントで name 属性を指定するだけで使える。すごい。

<Icon name="mage:arrow-up-right-circle" size="1.25em" />

ちなみに、SVGデータはHTMLへインラインで埋め込まれるようだ。 シンプルな実装だ。 ただ、同じアイコンを使い回す場合でも、 常にSVGがインラインで埋め込まれるので、ちょっと無駄があるかも。