ブログの見た目などをよい感じにした

このブログをちょっとずつ手直しした。きっかけは大きく二つあって、ひとつは記事を書いているときのプレビューがやたら遅かったこと、もうひとつは記事一覧や本文の見た目をもう少し整えたくなったこと。どちらも前から気になっていたが、手元のマシンでせっせと記事を書いていると遅さのほうが先に我慢できなくなった。

このブログはMiddlemanでつくっている。記事はMarkdownで書いていて、ローカルで middleman server を起動するとブラウザでプレビューできる。ブログのソースコード自体はGitHubで公開しているので詳細が気になる人はそっちを見てもらえればいいのだけど、執筆する部分とMiddlemanの部分は分けていて、ページの動的生成、frontmatterの解釈などは自前でやっている。そんな自前ブログシステムでプレビューが遅いという問題があった。

ざっくりプロファイルを取ってみると、記事のフルページの描画でだいたい6.3秒。内訳を見ていくと、記事本文をMarkdownからHTMLに変換する処理（自分のコードでは rendered_body と呼んでいる）が、1ページを表示するだけで6回も呼ばれていた。本文の表示で1回、OGPやTwitterカード用のメタタグを組み立てるところで、リード文の生成に3回、画像URLの取得に2回といった具合で、同じ変換を何度も最初からやり直していた。メモ化が一切入っていなかったのが原因だった。

本文中の [embed:...] というタグは、リンク先のタイトルや説明をMetaInspectorで取りに行く仕組みになっているのだが、このメタ情報をキャッシュするはずのS3まわりがローカルでは設定していなくて、毎回ライブでURLを取得していた。取得するときに外部のサイトの表示速度に依存するのでそこで律速すると遅くなる。

直し方はふつうで、まず rendered_body とその周辺をメモ化して、1ページの描画で本文の変換が1回で済むようにした。次に、S3が使えない開発環境のために、embedのメタ情報をローカルのファイルにキャッシュする小さな仕組みを足した。一度取りに行った結果はローカルに残るので、2回目以降のリロードではネットワークに出ていかなくなる。ついでに、embedがそもそもない記事ではS3クライアントを生成しないようにして、認証情報を探しに行ってタイムアウトを待つという無駄も消した。

見た目もいくつか手を入れた。こちらは大きなリニューアルではなく、細かい調整をした。

記事一覧は年ごとにグループ化して、日付を本文の左側のガターに寄せるレイアウトにした。ぱっと見でいつの記事なのかがわかりやすくなったと思う。記事の本文ページには、前後の記事へのナビゲーションと一覧へ戻るリンクを足した。グローバルナビは今いるページに対応するリンクをハイライトするようにして、自分がサイトのどこにいるのかがわかるようにした。

本文の読みやすさのために、読み幅を40remに制限した。横に長すぎる行は読みにくいので、ちょうどいい幅で折り返すようにしている。スマホで見たときの見た目を修正したり、Tailwindのv4と名前がぶつかっていたCSSクラスをリネームしたりと盆栽に勤しんでいた。

少しサイトの色味も考えてたんだけど、 randoma11y.com をザッピングしててこれかな〜と思う色をベースにしてみた。 https://randoma11y.com/rgb(96.078%25%2096.078%25%2095.686%25)/rgb(16.078%25%2014.51%25%2014.118%25)