この数年。すっかり自分でコーディングをする機会が減っていたのと、FONTPLUSやGoogle Fonts、モリサワのTypeSquareみたいなウェブフォントのサービスを利用することがほとんどで。久しぶりにこの自分のサイトでコーディングをしている(「ポートフォリオサイト」というよりは「自分のサイト」というのがよさそうだ)。コーディングをしていると言っても、Cursorを使っている。誰かが「AIはミシンみたいなもの」って書いていて、誰だったか。自分だけだと上手くできなかったものが、上手くいく。みたいなニュアンスだと思うし、まさにこの一週間くらいはそれ。実感している。
今の進捗として、6〜7割くらいできている。多分。多分というのは、Figmaでデザインを作ってないから。一旦の完成としてもよさそうな雰囲気まで、あと3割くらい。実装はAstroとSvelte。殆ど使ったことはない。AIが記述したコードを読み解けるくらいのスキル。全て自分で書いていたらもっと時間が掛かっていた。いや、多分、やらない。初手、どこから、どう、進めるのかが、一番大変でやらない。自分のアイデアがAIによって雑でも触れるものになると、手も動くのだ。
フィンガープリンティング
プライバシー保護や悪意あるトラッキングを防ぐために、いろんな仕組みがあることは何となく知っていた。AppleのOSがリリースされる度に、プライバシー云々は必ず(SGDs的なもののそばに)あったので、目にしていた。
そうじゃなくても、過去に作ったサイトで、デバイスの傾きを検知する機能や、音を流すのがユーザーの許可なしに取得できなくなったりしていたので、サイト側から参照できる情報が減っていった感じはあった。ただ、まさか、フォントを指定できなくなってたなんて。インストールしているフォントファイルはみんな違うから個人が特定できてしまう。なるほど。
仕事であれば「CSSのfont-familyはsystem-uiを指定しましょう」を採用すればいいけど、自分のサイトくらい色々なフォントを使ってもいいじゃない。という気持ちで最初はFONTPLUSを使って作っていたものの、フォントが再描写されるタイミングで、表示し続けている曜日別の記事一覧がチラつくのがどうしても解消できず。いや、解消できないかと色々試している際に、OSにデフォルトでインストールされているフォントでいい感じに組む方が、いい感じだろう。そう思って、FONTPLUSは曲名を表示している部分にだけ(UD角ゴC60 Pro R)。
テキストの元データはマークダウンファイル(これはObsidianで管理)で。ビルドのタイミングでHTMLやJSONに変換。ビルドの際、テキストに含まれる漢字と半角英数を<span>
タグで囲んで、それぞれ別のフォントやサイズを指定できるようにしている。昔もこの類の工夫はあった。それで、さて、フォントを当てて、Chromeでチェックしてなかなかいいぞ、と思って。フォントはレンダリングがブラウザによって違うからな、と、Safariで見たら、いや、フォント当たってないぞ、と。Claudeに聞いても解決せず。Googleで。フィンガープリンティングの影響で指定できるフォントがかなり限られている、と知る。なるほど。
それでもフォントを指定したい
文字主体のサイト。それでもどうにかフォントを指定したい。Safariのフィンガープリンティングの元でもいくつかのフォントは指定できることを知る。アクセスしたブラウザで読み取れたフォント名を一覧にしてくれるサイト。これと、100年ぶりのUser-Agentによるクラスの振り分け。サイトと実際にインストールされているフォントの差分を見る。字游工房の游ゴシック・游明朝体とかCommercial TypeのCanelaとか、あとappleのSan FranciscoとNew Yorkも(serif, sans-serifで指定せよということなのか)、隠されているよう。
Safariはこれで、Chromeはこれで、iOSは…と、ちまちま指定するのが、楽しい。自分のサイトを作ってる感じがある。仕事だったらアンチパターン。まだmacOSのSafariとChromeを指定しただけ。もう少しサイトができたら、WindowsとAndroidも動作検証ついでに、ちまちまと指定をしよう。
子が帰ってきたが、水筒を学校に置いてきたらしい。自分で取りに行くように言うが、テレビが見たいと駄々をこねる。仕方なく、散歩がてら取ってきた。ここにある、と言っていた場所にはなくて。近くで生徒3人に何か注意をしている先生が持っていた。