Web
Astro を中心としたフロントエンド、SEO、Web サイトの構築と運用についてまとめています。
Email Worker の受信箱のキーを To ヘッダーではなくエンベロープの宛先にした
AI エージェント用の受信専用アドレスを Cloudflare Email Routing と Email Worker で作りました。リファレンス実装 agentic-inbox から外れて受信箱のキーをエンベロープの宛先から取った判断を軸に、ドキュメントにあって型に無い canBeForwarded、25 MiB の受信上限と 2 MB の行上限の差、Worker からは 550 を返せないこと、「受信専用」を決めているのはこの構成だということを、一次資料と実測で確かめます。
satoriの禁則処理とフォント収録範囲を自前のロジックで直した
satoriはCSSのlineBreakを実装しておらず、Noto Sans JPの収録範囲もメタデータ通りではありませんでした。OGP画像で実際に起きた2つの見落としと、それぞれを自前のロジックで直した記録です。
来店できない会社の営業時間をマークアップしていた
labee.jpの全ページにLocalBusinessの構造化データを出していましたが、営業時間も対応エリアもページのどこにも表示していませんでした。Googleのポリシーが禁じている状態です。schema.orgの定義まで戻って、型ごと消した記録です。
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カスタムプロパティへの移行についても紹介します。
パスワードに大文字と記号、まだ必要？
パスワードに大文字・小文字・数字・記号を混ぜろという要件について、公的なガイドラインの原文を読みました。文字種を混ぜさせるかどうかは、その文書が誰に向けて書かれているかで分かれます。最低文字数は、資料によって8から15まで開きがあります。定期変更を求めるなという点だけは、読んだ資料が一致していました。
ログイン失敗、何回でロックアウト？
ログイン失敗が続いたらアカウントをロックする定番の対策について、何回でロックするのかを公的なガイドラインに探しました。回数を書いている資料と書いていない資料に分かれ、書いてある数字も3回から100回までばらついています。
ハッシュの使い分けは、値のエントロピーで決まる
Argon2はソルトが呼び出しごとに変わり、メモリーと時間を意図的に食うハッシュです。SHA3-256は決定的で、速く終わります。どちらを選ぶかは、ハッシュ化する値が乱数で作られているかどうかで決まります。
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を組み合わせる方法を紹介します。