#dev

プリミティブ東福寺の秋
プリミティブ東福寺の秋
「プリミティブな写真」について書いていく。
順序が逆になってしまった感がある。
要するに高画質な写真を元に作った幾何学的な模様のこと。
primitiveという素晴らしいGO製ライブラリを使うことで誰でも簡単にプリミティブな写真を手に入れることができる。
https://github.com/fogleman/primitive
このサイトで表示しているものは「最大100個の重なり合う三角形」という設定で生成されている。
とにかく軽量で、かつベクター画像なのでサイズも安定している。プレースホルダー画像として最適なフォーマットだと思う。
サイズは1つで大体8KBだが、SVGの最適化を噛ませばさらに小さくできるはず。
ちなみにMac向けのネイティブアプリケーションも提供されているらしいので、環境がない人はこちらで遊ぶと良いかも。
北杜市の夏
北杜市の夏
ブログを改修して、一風変わったプレースホルダー画像が表示されるようにした。
プレースホルダー画像というのは、サイト上の画像が読み込まれる前に先んじて表示される仮画像のこと (正式な名称が分からない……)
画像読み込み時、データ的に軽量な「プリミティブ北杜市の夏」写真が表示される。
読み込みが終わったら正式な「北杜市の夏」写真が表示される、という流れ。
Next.jsの画像最適化が優秀なせいで読み込みがすぐ終わり、ちょっとしか拝めないのが残念なので、何度でも拝めるgifを用意しておいた。
プリミティブ北杜市の夏と北杜市の夏
プリミティブ北杜市の夏と北杜市の夏.gif
Feedlyで配信されている様子
みなさんはRSSフィード、使ってますか?
僕は使ってないです。ブックマークから気が向いた時に訪問してまとめて読む派なので……。
さて、需要はともかくとして、ブログのRSS対応はたしなみ。仕組みにも関心があったので、このブログでも配信することにした。
公開したnpmパッケージ
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のスコア
Lighthouseのスコア
このブログのLighthouseスコアを貼っておく。
このサイトはAMP Validな実装になっているが、当のAMP scriptがUnused Javascriptとして検出されてしまう問題があり、Performanceのスコアが100にならないこともある。
AMPのissueにも同様の事象が報告されている。
対策する術は無いようなので仕方がないが、感覚的には満足の行く速度が出ているので良しとする。
記事を増やすといずれPerformanceスコアが落ちるはずなので、ページネーションには近いうちに対応したい。
なお、SEOがいくらか減点されているのは「Links do not have descriptive text」という怒られが発生しているため。
「説明がなく遷移先を予測できないリンクは良くない」ということだが、このサイトでいうと"続きを読む"のリンクがそれに引っかかる。
"記事タイトルの続きを読む"という形式のリンクに変更すれば解決することは分かっているが、シンプルな"続きを読む"のある古き良きブログのスタイルを守りたいので対応は見送ることにした。
あとヘッダー部分の「リンク」というリンクも良くないらしい。言われてみると確かに……(でも変えない)
"diaryタグの記事一覧"
diaryタグの記事一覧
記事ごとに好きなタグをつけられるようになった。
タグをつけると記事タイトルの下に表示され、クリックするとタグに応じた記事が抽出された一覧ページに飛ぶ。
また、要素の追加に合わせてデザインに若干の修正を加えている。
旧デザインだと、どうにもタグのおさまりが悪かった。
日付、タイトル、タグを左寄せにし、ひとかたまりのメタ情報に見えるよう統一感のあるスタイルに変更した。
このブログは日々の生活の記録が主目的なのだけど、絶賛転職活動中ということもあって、お仕事用のポートフォリオという側面も持たせてある。
プログラマーとしてどのような関心を持っているかをアピールする場合は#devを提示すればいいかな、と思っている。
逆にプログラミングに興味がない人は#diaryをブックマークしてもらえばいいかと思う。