#dev

プリミティブな写真をプレースホルダー画像に使う の続き。

「プリミティブな写真」について書いていく。
順序が逆になってしまった感がある。

要するに高画質な写真を元に作った幾何学的な模様のこと。
primitiveという素晴らしいGO製ライブラリを使うことで誰でも簡単にプリミティブな写真を手に入れることができる。
https://github.com/fogleman/primitive

このサイトで表示しているものは「最大100個の重なり合う三角形」という設定で生成されている。
とにかく軽量で、かつベクター画像なのでサイズも安定している。プレースホルダー画像として最適なフォーマットだと思う。
サイズは1つで大体8KBだが、SVGの最適化を噛ませばさらに小さくできるはず。

ちなみにMac向けのネイティブアプリケーションも提供されているらしいので、環境がない人はこちらで遊ぶと良いかも。

ブログを改修して、一風変わったプレースホルダー画像が表示されるようにした。
プレースホルダー画像というのは、サイト上の画像が読み込まれる前に先んじて表示される仮画像のこと (正式な名称が分からない……)

画像読み込み時、データ的に軽量な「プリミティブ北杜市の夏」写真が表示される。
読み込みが終わったら正式な「北杜市の夏」写真が表示される、という流れ。

Next.jsの画像最適化が優秀なせいで読み込みがすぐ終わり、ちょっとしか拝めないのが残念なので、何度でも拝めるgifを用意しておいた。

いや〜師走師走。
最近の年末年始は配信イベントが目白押しで忙しいですわ〜。

もはや説明不要なまでに恒例で盛り上がっているRTA in Japanに加えて、今年は獣道とかTOPANGAコンセプトマッチとか色々あってもう脳が処理しきれません。

でも頑張る。

みなさんはRSSフィード、使ってますか？
僕は使ってないです。ブックマークから気が向いた時に訪問してまとめて読む派なので……。

さて、需要はともかくとして、ブログのRSS対応はたしなみ。仕組みにも関心があったので、このブログでも配信することにした。

rehype-probe-image-sizeというRehype Pluginをnpmパッケージとして公開した。
記事内の画像URLから画像サイズを取得し、imgタグにwidth/heightをセットしてくれる。

すでにrehype-img-sizeというnpmパッケージが存在していたのだけど、こちらはCDNなどの外部画像には対応していなかったので使えなかった。
rehype-probe-image-sizeでは、外部画像の場合はサイズ取得のためreadFileの代わりにfetchが走るようになっている。
ビルド時に画像サーバーへリクエストが必要なのは若干気になるが、サイズの取得だけであれば画像全体をダウンロードする必要はないので、大きな負荷になることはないはず。
その辺りの処理は、rehype-probe-image-sizeが依存しているprobe-image-sizeがよしなにやってくれている。

imgタグのwidth/height指定はHTML標準でも推奨されており、画像読み込みによるレイアウトシフトを避けるためには出来れば押さえておきたい項目。
なお、このブログはAMPに対応しているので必須要件だったりする。

このブログのLighthouseスコアを貼っておく。

このサイトはAMP Validな実装になっているが、当のAMP scriptがUnused Javascriptとして検出されてしまう問題があり、Performanceのスコアが100にならないこともある。
AMPのissueにも同様の事象が報告されている。
対策する術は無いようなので仕方がないが、感覚的には満足の行く速度が出ているので良しとする。
記事を増やすといずれPerformanceスコアが落ちるはずなので、ページネーションには近いうちに対応したい。

なお、SEOがいくらか減点されているのは「Links do not have descriptive text」という怒られが発生しているため。
「説明がなく遷移先を予測できないリンクは良くない」ということだが、このサイトでいうと"続きを読む"のリンクがそれに引っかかる。
"記事タイトルの続きを読む"という形式のリンクに変更すれば解決することは分かっているが、シンプルな"続きを読む"のある古き良きブログのスタイルを守りたいので対応は見送ることにした。

あとヘッダー部分の「リンク」というリンクも良くないらしい。言われてみると確かに……(でも変えない)

記事ごとに好きなタグをつけられるようになった。
タグをつけると記事タイトルの下に表示され、クリックするとタグに応じた記事が抽出された一覧ページに飛ぶ。

また、要素の追加に合わせてデザインに若干の修正を加えている。
旧デザインだと、どうにもタグのおさまりが悪かった。
日付、タイトル、タグを左寄せにし、ひとかたまりのメタ情報に見えるよう統一感のあるスタイルに変更した。

このブログは日々の生活の記録が主目的なのだけど、絶賛転職活動中ということもあって、お仕事用のポートフォリオという側面も持たせてある。
プログラマーとしてどのような関心を持っているかをアピールする場合は#devを提示すればいいかな、と思っている。
逆にプログラミングに興味がない人は#diaryをブックマークしてもらえばいいかと思う。

このウェブサイトのシンボルとなるアイコンを作った。
去年ぐらいに各ブラウザがSVG形式のfaviconに対応したらしいので、SVGで出力し設定してみた。
SVGはベクターデータなので、faviconが目に見えてシャープになって嬉しい。