Jeffrey Francesco (JF)

YouTube video by G-ground Channel Tea time (Rika's original) - G-ground Orchestra

「ブログなんか読みとうない曲だけ聴かせろ」という方のためにYouTubeのURLだけも貼っておきます😭
👇
youtu.be/VAN0EQBnsFM

Rika + G-ground Orchestra “Tea time” の MV（演奏動画）を公開しました 舞鶴のシンガー Rika が 2012 年にリリースしたオリジナルアルバム「りかのじかん」の収録曲 “Tea time” を、本人 + G-ground Orchestra の演奏で動画撮影、MV 風に編集して公開しました。いい曲なんでみんな聴いてね。

【ブログ書いたやで】 いったい何ヶ月ぶりやねん! っていうくらい久々の音楽活動報告記事は、昨晩ひとつ演奏動画を公開したよっていうお知らせと近況報告、それからちょっとだけ来年の活動についてです。
👇
Rika + G-ground Orchestra “Tea time” の MV（演奏動画）を公開しました jeffreyfrancesco.org/weblog/20251...

CSS: calc() 関数の infinity や -infinity を使用した数式はゼロ除算で短く書ける

【書いたやで】【課外活動】 知ってる人は知ってるけど知らない人は知らない（当たり前やんけ）<calc-keyword> の infinity & -infinity に関する小ネタを Zenn の方に書きました。
👇
zenn.dev/jforg/articl...

fnm を使うならシェルの設定ファイルにこの一行を指定しておくときっと幸せになれる（はず） Node.js のバージョン管理に fnm を使う場合、シェルの設定を公式のインストールスクリプト任せにしてるとまじで基本的な設定しかやってくれないので、最初に .zshrc などを開いてここ（どこ）をこう変更しておくといいぞ、という話です。

【ブログ書いたやで】 Node.js のバージョン管理ツール fnm の○○についておそらく初めて日本語で言及した記事です。何とかギリギリ冒頭のネタがネタとして機能する時間にアップできました😭
👇
fnm を使うならシェルの設定ファイルにこの一行を指定しておくときっと幸せになれる（はず） jeffreyfrancesco.org/weblog/20251...

CSS: 文字色が「最低限のコントラストに関する達成基準」を満たすためのメモ

【書いた】できた当時に作ったもののずっと放置していたZennのアカウントをちょっとは活用するかと思って、まずは手元に眠っていた8年くらい前のメモ書きの内容をほぼそのままアップしてみました。

zenn.dev/jforg/articl...

Chrome v140 に入った CSS 型付き算術 (typed arithmetic) で単位なし line-height 値の動的算出をわずか一行で書く Chrome v140 の calc() 関数で単位の付いた値同士を除算して単位のない数値を算出できるようになったので、その実践的なユースケースとして単位のない line-height 値を動的に算出する方法を書いてみました。

【ブログ書いたやで…を深夜にこっそり上げてみるテスト】 calc() 関数で単位の付いた値同士を除算して単位のない数値を算出できるようになったので、その実践的なユースケースをひとつ書いてみました。
👇
Chrome v140 に入った CSS 型付き算術 (typed arithmetic) で単位なし line-height 値の動的算出をわずか一行で書く jeffreyfrancesco.org/weblog/20250...

Safari にも実装が入ることだし、あらためて SVG ファビコンのベスト・プラクティスを考えよう 2025 晩夏（実験） Safari v26 でようやく SVG ファビコンのサポートが入りますが、β版で試したところ ICO ファイルの内容によってはそちらを優先する場合があるようでしたので、どうすれば確実に SVG の方が使われるのかを大量? の実験結果から探ってみました。

【ブログ書いたやで】 もう実装は入ってるはずの Safari v26（β版）で SVG ファビコンが表示できなかったのでその秘密を探るべく我々はジャングルのおk（ry
👇
Safari にも実装が入ることだし、あらためて SVG ファビコンのベスト・プラクティスを考えよう 2025 晩夏（実験） jeffreyfrancesco.org/weblog/20250...

Pocket から Raindrop.io に移行しました（自分のデータも記事下のシェアボタンも） Pocket のサービス終了に伴い記事下のシェアボタンをどうするかの件ですが、Raindrop.io というサービスに記事保存用の URL があり、サービス自体の使い勝手も悪くなさそうでしたので、とりあえずそれを後釜に据えてみましたよ、というご報告です。

【ブログ書いたやで】 Pocket の代替どうするかの件 Raindrop.io でだいたい解決したやで（意訳）という話を、無事 Pocket がサービス終了する前に書き終えました。涙
👇
Pocket から Raindrop.io に移行しました（自分のデータも記事下のシェアボタンも） jeffreyfrancesco.org/weblog/20250...

36 歳になりました（16 進数で） こなさんみんばんわ。 そんな訳で、本日 6 月 30 日をもちまして無事に 0x36 回目の誕生日を迎えることができました。人間の年齢に換算すると 54 歳になりますかね。いやお前人間違うんかい。

【ブログ書いたやで】 年一回恒例のやつと、もうすぐ Pocket が終わってしまうけどサイトに置いてる「Pocket に保存」ボタンの後釜には何を置くのがいいんでしょうかね🤔 という話を書きました。
👇
36 歳になりました（16 進数で） jeffreyfrancesco.org/weblog/20250...

死ぬのは嫌だが、消えていなくなりたいと思うことはよくある

ユーザーの iOS に入っているヒラギノ角ゴシックのウエイトに合わせて font-weight を調整するためのスクリプトを書いてみた iOS にヒラギノの W4 が入ったのは割と最近なので、サイト側で W4 指定をしてても iOS 17.x 以前の環境では W3 で表示されてしまいます。でもそれだと困る場面もあるので、閲覧環境に合わせてウエイトを調整したいと思って試行錯誤してみました。

【書いたやで】オレにしては早めに書けたので早めにアップして早めに告知しておきます…というてもこれ書き始めたの1週間ほど前のことなんですが。涙
👇
ユーザーの iOS に入っているヒラギノ角ゴシックのウエイトに合わせて font-weight を調整するためのスクリプトを書いてみた jeffreyfrancesco.org/weblog/20250...

右寄せやゼロ埋めを使わずに月リストのお尻のラインを揃える CSS 年月別アーカイブの月のリストがスマホなどで複数列になる場合には「月」の位置で縦列を合わせたいのだけど、デザイン上右寄せにはしたくないし頭に 0 も付けたくないので、どちらも使わずに揃える方法はないものか…と考えてたら思いついた CSS のコードです。

【書いたやで】こんな真夜中にこんなターゲット層の限られたブログ記事のアップ告知を出しても誰も読まないとは思いますが、せっかく書いたので出しておきます。涙
👇
右寄せやゼロ埋めを使わずに月リストのお尻のラインを揃える CSS jeffreyfrancesco.org/weblog/20250...

CSS カスケード・レイヤーのサポート有無を判別して、非対応ブラウザにも最低限のスタイルを当てる方法を（それをやる必要があるかどうかはともかく）考えてみた カスケード・レイヤーを使って CSS を書くと、非対応ブラウザには一切のスタイルが当たらなくなってしまうので、せめて最低限のスタイルだけでも当てたいんだけど、その仕様上 CSS だけではどうにもならないので、何とかする方法を考えてみました。

【書いたやで】 がんばって考えて試してみてよしこれでうまく行きそうやってなったので公開したんですが、読んだ人は多分「ふーん」てなるだけの記事を書きました。涙
👇
CSS カスケード・レイヤーのサポート有無を判別して、非対応ブラウザにも最低限のスタイルを当てる方法を（それをやる必要があるかどうかはともかく）考えてみた jeffreyfrancesco.org/weblog/20250...

Noto CJK のバリアブルフォントを Web ブラウザがバリアブルフォントとして扱ってくれるようがんばってみたが、いちユーザーではどうにもできない問題があってあきらめた Noto CJK ファミリーのバリアブルフォントをインストールして CSS の font-family にただ指定しても普通のフォントとしてしか扱ってくれないのを何とかしようとがんばってみた顛末記です。ちなみに最終的な結論は「無駄な作業だった」です。涙

【書いたやで】僕の Web サイトはフォントについて語るサイトではないはずですが、なぜか今回もフォントの話です。でもみんな大好き Noto CJK フォントの話だよ! 実践上では役に立たないと思うけどね!! 涙

（あと最後にちょっとネタを仕込んでおいたのですが、気が付いていただけるかどうか少し心配です😭）
👇
Noto CJK のバリアブルフォントを Web ブラウザがバリアブルフォントとして扱ってくれるようがんばってみたが、いちユーザーではどうにもできない問題があってあきらめた jeffreyfrancesco.org/weblog/20250...

全部トランプのせい

一瞬で戻った

胃もたれ感

人生詰んだ

フォントに関する色々な情報を調べるのにコマンドラインで使える otinfo が便利 フォントファイルのフルネームや PostScript 名、どんな OpenType 機能が使えるか…などの情報をコマンドラインで調べられる otfinfo というツールがけっこう便利だったので、インストール方法やその使い方などを軽く解説してみました。

【書いたやで】コマンドラインツールを紹介する軽めの記事です。よし今回は中一日で新しい記事が出せたぞ。涙
👇
フォントに関する色々な情報を調べるのにコマンドラインで使える otinfo が便利 jeffreyfrancesco.org/weblog/20250...

Inter の Web フォントをセルフホストして Google Fonts 経由では使えない豊富な OpenType 機能を有効にするまでの手順 Google Fonts にある Inter は、元のフォントに実装されているせっかくの OpenType 機能がほぼ無効になっています。それはあまりにももったいないので、自前でホストしたフォントを使ってその実力を十分に発揮させてあげようと思います。

【書いたやで】なんか気が付いたら前回の記事から1ヶ月以上経過してた訳ですが、全部トランプとイーロン・マスクが悪いということにしておいてください。涙
👇
Inter の Web フォントをセルフホストして Google Fonts 経由では使えない豊富な OpenType 機能を有効にするまでの手順 jeffreyfrancesco.org/weblog/20250...

まじでトランプしね

Reason Studios No music without sounds. Reason comes with a huge sound bank of more than 30000 patches, loops, and samples. From in style, to out of style, to back in style—Reason’s library consists of over 20 years...

俺くらいの年代のやつらはきっと誰もが使ってたであろう、あのReCycleが無料でDLできるようになったそうな。あとビートチャレンジ ‘ReCycle the Beat’ の話。〆切は4/16。
👇
www.reasonstudios.com/recycle

みんなは気付いてた? 同じウエイト指定でもブラウザによってヒラギノ角ゴシック (Hiragino Sans) のウエイトが異なる話と、その解決方法 フォント指定をヒラギノ角ゴ ProN からヒラギノ角ゴシックに変えたら Safari と Firefox で適用されるウエイトが異なってるのに気付いたことから始まった壮大な（大げさ）調査結果の報告書です。解決策も書いておきましたのでご自由にお使いください。

【書いたやで】 みんなは気付いてた? 同じウエイト指定でもブラウザによってヒラギノ角ゴシック (Hiragino Sans) のウエイトが異なる話と、その解決方法
👇
jeffreyfrancesco.org/weblog/20250...

font-family: system-ui; しようと思ってちょっと試してみたけどやっぱりやめました（その理由も） system-ui（新しい総称フォント・ファミリー名）のブラウザ実装が揃ったのでテスト的に導入してみたものの、あまり良くなさそうだと思って採用を見送った理由と、OS 既定の UI フォントを Web サイトに使うことについて思うことなどを書いてみました。

【書いたやで】 font-family: system-ui; しようと思ってちょっと試してみたけどやっぱりやめました（その理由も）
👇
jeffreyfrancesco.org/weblog/20250...

list-style-type: <string> を使った、おれおれリストマーカーの位置調整（小ネタ） ::marker 擬似要素は限られた CSS プロパティにしか対応してないので margin や inset 系のプロパティで位置調整ができなくて困ってたら、ものすごい単純な方法で文字とマーカーの間隔を空けることができたという、ただそれだけの話です。

【書いたやで】 list-style-type: <string> を使った、おれおれリストマーカーの位置調整（小ネタ）
👇
jeffreyfrancesco.org/weblog/20250...

Jekyll プラグイン内で Markdown to HTML 変換したい場合は require "kramdown" ではなく find_converter_instance を使った方がよさそう Jekyll の自作プラグインの中で Markdown から HTML への変換をしたくなることはよくあると思いますが、その際にちゃんと自分とこの環境で使ってる Markdown レンダラーで変換するにはどうしたらええのん? と思って調べてみた内容です。

【書いたやで】 Jekyll プラグイン内で Markdown to HTML 変換したい場合は require "kramdown" ではなく find_converter_instance を使った方がよさそう
👇
jeffreyfrancesco.org/weblog/20250...

先日の拡大縮小できる画像一覧に auto-fill と auto-fit の切り替え機能を付けてみた + この 2 つの挙動の違いについて 前回作ったサンプルに auto-fill と auto-fit の切り替え機能を追加したので（有言実行してえら〜い!）その作業内容まとめと、完成したものを使って作成したスクリーンショットを交えながら 2 つのキーワードの挙動の違いを解説してみました。

【書いたやで】 先日の拡大縮小できる画像一覧に auto-fill と auto-fit の切り替え機能を付けてみた + この 2 つの挙動の違いについて
👇
jeffreyfrancesco.org/weblog/20250...

CSS カスタム・プロパティ（変数）を JavaScript で取得 & 設定する方法を知るために、スライダーで拡大縮小ができる画像一覧を作ってみた CSS グリッドを使った画像一覧にスライダーで拡大縮小できる機能を実装する中で JavaScript から CSS カスタム・プロパティを扱う方法を学んだので、その方法も含めて一連の手順をステップ by ステップ形式のチュートリアルっぽくまとめてみました。

【書いたやで】 CSS カスタム・プロパティ（変数）を JavaScript で取得 & 設定する方法を知るために、スライダーで拡大縮小ができる画像一覧を作ってみた
👇
jeffreyfrancesco.org/weblog/20250...

意図せず GSL を v2.8 にしてしまったがためにローカル環境の Jekyll が死にかけた 何の気なしに homebrew で入れたライブラリのアップデート作業をしたらローカルの開発環境が死にかけてしまって生き返らせるのにけっこう苦労したので、その顛末を残しておきます。ちなみに今回も Jekyll の人にしか参考にならない話となっております。涙

【ブログ書いたやで】正直一瞬あっ ＼(^o^)／ｵﾜﾀ と思ったけど何とか回復させました😭
👇
意図せず GSL を v2.8 にしてしまったがためにローカル環境の Jekyll が死にかけた jeffreyfrancesco.org/weblog/20250...

Jekyll のブログ記事に目次を付けられるようにした話と、関連して details 要素周りのフォーカス・リングのスタイリングに関する話など色々 記事テキスト中に決まった記述を入れるとその記事の目次が出るようにしてみたので、直近一年くらいの記事と古いけど今でもよく読まれている記事に遡って目次を付けてみました。機能追加にあたって色々と試行錯誤もしましたので、例によってその作業メモを残しておきます。

【ブログ書いたやで】 よぉ4日ぶり…という訳でやっとブログ記事に目次が付いたよという話なんですが、さっそくこの記事がめっちゃ長い記事になってしまったので、きっとその目次がみなさんのお役に立つことでしょう。涙
👇
Jekyll のブログ記事に目次を付けられるようにした話と、関連して details 要素周りのフォーカス・リングのスタイリングに関する話など色々 jeffreyfrancesco.org/weblog/20250...