Web
Astro を中心としたフロントエンド、SEO、Web サイトの構築と運用についてまとめています。
satoriの禁則処理とフォント収録範囲を自前のロジックで直した
satoriはCSSのlineBreakを実装しておらず、Noto Sans JPの収録範囲もメタデータ通りではありませんでした。OGP画像で実際に起きた2つの見落としと、それぞれを自前のロジックで直した記録です。
来店できない会社の営業時間をマークアップしていた
labee.jpの全ページにLocalBusinessの構造化データを出していましたが、営業時間も対応エリアもページのどこにも表示していませんでした。Googleのポリシーが禁じている状態です。schema.orgの定義まで戻って、型ごと消した記録です。
プロダクトサイト群を 1 つの pnpm workspace に集約した
複数のプロダクトサイトを別リポジトリで運用していたところを、`sites/` と `packages/` の2層構成を持つ単一の pnpm workspace モノレポに集約しました。catalog で依存バージョンを揃え、共有パッケージはロジックと構造だけを渡してデザインは各サイトに残す設計、仮移植のサイトを抱えたまま動かす運用までを扱います。
Cloudflare Pages で llms.txt が文字化けしたので _headers で charset を書いた
Cloudflare Pages は配信ファイルの拡張子から `Content-Type` を推測しますが、`text/plain` などには `charset` が付きません。`public/_headers` で `/llms.txt` `/robots.txt` `/sitemap.xml` `/docs/*.md` などに `charset=utf-8` を明示して、日本語の文字化けを直した手順をまとめます。
Cloudflare Workers で @vercel/og が使えなかったので Satori と Resvg WASM で OGP を組んだ
Astroプロジェクトで動的OGP画像を自動生成する方法を解説します。Cloudflare Workers環境の制約から@vercel/ogではなくSatoriと@resvg/resvg-wasmの組み合わせを選び、ビルド時に1200x630pxのPNG画像を静的生成する設計を紹介します。
Astro の Mermaid を rehype-mermaid から動的 import に切り替えた
AstroプロジェクトでMermaidダイアグラムを表示する方法を解説します。rehype-mermaidによるビルド時変換ではなくクライアントサイドレンダリングを選んだ理由、動的インポートでライブラリをページ単位で読み込む設計を紹介します。
100件超の用語を正規表現でマッチングしていたら遅くなったのでAho-Corasickに変えた
Astroのremarkプラグインで実装した用語自動リンク機能を、正規表現ベースからAho-Corasickアルゴリズムに変更した経緯を解説します。なぜ形態素解析を使わなかったのか、日本語と英語の混在テキストでの単語境界の扱いについても紹介します。
ビルドのたびにOGPを取りに行くリンクカード、CIからDoSになりかけた話
Astroのremarkプラグインでリンクカードを自作しました。ビルド時にOGPメタデータを毎回fetchする設計にしたところ、GitHub ActionsからのビルドがDoS的な負荷になりかけたため、キャッシュをリポジトリにコミットする方式に切り替えた経緯を紹介します。
labee.devは48時間で段階移行し、labee.jpは一括でAstroへ移した
ラビー合同会社のコーポレートサイト（labee.jp）と開発者ツールサイト（labee.dev）をNext.jsからAstroへ移行しました。labee.devは48時間で3段階の段階移行、labee.jpはその経験を踏まえた一括移行です。Tailwind CSSの廃止とCSSカスタムプロパティへの移行についても紹介します。
Labee Dev Toolbox 公開しました
ラビー合同会社が公開したWebツール集「Labee Dev Toolbox」の紹介。Color Picker、Cron Expression Tester、DNS Records Checker、Sitemap Viewerなど主要機能と今後の展望について。
Tailwind CSSでカラーテーマの切り替えを簡単に実装する
CSSカスタムプロパティとTailwind CSSを組み合わせて、data-theme属性の切り替えだけでカラーテーマを変更できる実装方法を紹介します。
DartでUDP通信の結果を同期的に待つ方法
DartでUDP通信の結果を同期的に待つために、FutureとCompleterを組み合わせる方法を紹介します。