サイトのワークフローを整備した

ギャラリーページを作ったあと、しばらく使ってみると「ここもう少し楽になるな」という箇所がいくつか出てきたので、まとめて直した。機能追加・UI 改善・開発ツール強化がごちゃまぜになっているのだけれど、書いておく。

LQIP（ぼかしプレースホルダー）

画像が読み込まれるまでの間、真っ白や真っ黒だった部分にぼかしたプレビュー画像が表示されるようになった。

blurhash を使っている。generate-works.js が画像処理時に blurhash を生成して _works-data.json の lqip フィールドに書き出す。OptimizedImage コンポーネントはその lqip 文字列を受け取り、CSS の background-image として敷いた上に本画像を重ねる。本画像が読み込まれれば自然に上書きされる。

blog-ui でアップロードするブログ用の画像にも同じ仕組みが入った。_blog-data.json 側でも lqip を管理している。

OptimizedImage に title と description という prop を追加した。渡すと GLightbox の data-title / data-description 属性になり、ライトボックスを開いたときにキャプションとして表示される。ギャラリーの各写真のメタデータをそのまま流し込む形にしたので、管理ファイルを二重に更新する必要がない。

works-ui（Gallery Manager）に Site タブを追加した。ここでまとめて管理できるようになった：

  • ヒーロー画像：トップページの背景に使う大きな写真。UI から差し替えられる。
  • アバター画像：OG image など <head> で使うアイコン相当。
  • Featured 画像：トップページに並ぶ代表作を最大3枚。ギャラリーの写真一覧からクリックして選ぶ形で、選択順が表示順になる。

以前はどれもコードを直接書き換えて対応していたので、UI から完結できるようになったのはシンプルに楽だ。

Generate 後に diff を表示

「Generate Gallery」ボタンを押したあと、ログ欄に git status と git diff --stat の結果が追記されるようになった。どのファイルが新しく生成・更新されたかがその場でわかる。変換をスキップした画像（タイムスタンプが変わっていないもの）もログに出るので、確認が楽になった。

blog-ui：ドラフト切替・OG 画像・description

blog-ui (Blog Manager) にいくつか機能を足した。

ドラフト切替ボタン：各記事カードに「公開する / 下書きに戻す」ボタンがついた。以前はファイルを開いて draft: false に書き換えていたのが、ボタン一発になった。

OG 画像の設定：記事の画像一覧から「OG に設定」を押すと、その画像がフロントマターの ogImage フィールドに書き込まれる。SNS でシェアしたときのサムネイルが変わる。

description の編集：description フィールドも UI 上で入力・保存できるようにした。

開発の並列起動

npm run dev:all で Astro 開発サーバー・Gallery Manager・blog-ui の3つを同時に起動できるようになった。concurrently を入れて package.json に定義しただけだけれど、毎回3つのターミナルを立ち上げていた手間がなくなった。

細かい改善の積み重ねなので記事にするほどでもないかとも思ったが、自分が忘れるので書いておく。ツールに手を入れるのは楽しいのだが、こういう整備を終えてやっと「写真を撮って出す」という本来のことに集中できる気がする。