こんにちは。あのちっくです。
commmune Advent Calendar 2023 3日目の記事は『vercel/satoriでfavicon時計を作る』です。
どうぞよろしくお願いします。
作ったもの
https://pg.anochick.com/ac/2023/commmune/3
ページを開くと上の画像のようにfaviconが時計になり、都度更新されます。
ブラウザによっては正しく動作しません。Firefox, Chromeのみ動作を確認しています。
ソースコードはこちらで公開しています。
構成要素
細かい話は箇条書きで記載します。
- faviconにはSVGを使うことが出来る
- faviconは
<link rel="icon" href="..." />のhrefを変更するだけで簡単に動的変更が適用される - faviconの最短更新間隔はブラウザとブラウザの状態によって異なる
- Data URL形式でも扱えるので、SVGテキストのままhrefに与えられる
- faviconは
- favicon画像の生成にはvercel/satoriを使っている
- およそhtml2svgなので軽量・高速で高頻度の描画要求に耐えられる
- vercel/satoriはIntl.Segmenterに依存するが、Firefoxにはまだないので、polyfillの対応が必要
- アニメーションはsetIntervalを使う
- タブがバックグラウンドに行くとスロットリングされる
詳しい話はあのちっくに直接聞いて貰えれば可能な限り回答します。
終わりに
ネタ9割の気持ちで作りましたが、頻繁に変更されるfaviconはなかなか存在感があるので、なにか面白い使い方ができそうな気がしています。
ありがとうございました。