Knowledge
Notes
得意領域の TIPS を不定期で掲載しています。
AI 活用、仕事の設計、Web 技術、プロジェクト運営の 4 カテゴリで、実務から立ち上がる知見をまとめています。
WorkspaceのSPAMフィルタがSES系の業務メールを弾く。catch-all SMTP + Fastmailで受信統合する3層構成
SESや人材紹介の業務で、案件情報や人材登録メールがGoogle Workspaceの強力なSPAMフィルタに弾かれる現象に遭遇しました。Workspaceの個別アカウントやグループメールで受けると、Googleの感度高い判定が業務メールを誤検知して隔離します。Workspaceを主受信に残しつつ、業務カテゴリ別の窓口アドレスはレンタルサーバーのcatch-all SMTPで受けて、Fastmail等のサードパーティクライアントで受信統合する3層構成の手順。
CSP違反レポートのendpointを自前で持つ。Cloudflare Workerで最小構成を組む
CSPをサイトに入れる時、違反レポートをどこで受けるか。report-uri.comのようなSaaSを使うか、自前でendpointを立てるか、それともendpointなしで運用するか。3つの選択肢を比較して、Cloudflare Workerで30行程度の自前endpointを立てる手順とCORSの挙動。
mail-tester 7/10の真因はSPF includeのTEMPERROR。1行消して10/10に
Google Workspace + Xサーバー環境でmail-testerを回すと7/10になり「You are not allowed to use one of your sender email addresses (-3)」と指摘される。SPFレコード内のincludeがDNS lookupタイムアウトしている時のTEMPERRORが真因で、不要なincludeを1行削るだけで10/10になる、移行直後によくある落とし穴。
Tailwind v4と@fontsourceの落とし穴。@import同居でwoff2が404になる
Tailwind v4と@fontsourceを同じCSSファイルで@import同居させると、ビルド済みCSSのfont-faceは作られるのに、対応するwoff2ファイルがdistに出力されません。本番で日本語フォントが全部404、ブラウザはHiraginoにフォールバック。Lighthouse緑、Playwright緑のまま見逃される構造と、@import分離による解決。
View Transitionsとstrict CSPの不可避な衝突。Astro security.cspの限界
AstroのClientRouterはランタイムでdata:URI scriptを生成して前ページのinline scriptを再評価する設計。これがstrict CSPと正面衝突します。Astro security.csp + strict-dynamicを試したが頓挫した経緯と、現実的な選択肢の整理。
XサーバーからWebだけCloudflare Pagesへ移す。ドメインとメールは残したまま
旧WordPressをAstroに書き換えてCloudflare Pagesに置いた。ドメインはXドメインで契約継続、メールはXサーバー経由のGoogle Workspaceで運用継続したい。WebだけをCloudflareに移すDNS移行の手順を、CloudflareのZone追加から伝播完了まで実機操作で記録する。
AIエージェントに「今のプロジェクト名」を書くと失敗する
AIエージェントを設計するとき、何を埋め込み、何を埋め込まないか。プロジェクト名を入れた瞬間にエージェントが「使い捨て」になる理由と、不変の役割、運用SOP、プロジェクト状態を分離する三層原則。
AIレビューをクリティカルに読む。定量的指摘の誇張を見抜く
AIコードレビュー(Codex、GitHub Copilot Code Review等)は構造と網羅性に優れる一方、定量的な数値解釈で誤読することがあります。「CSS 446KBがFCP直撃」のような指摘を分解し、重要な観点とノイズを切り分ける読み方。
Astro View Transitionsとイベントリスナーの累積。AbortControllerでクリーンアップする
AstroのView Transitionsを有効化すると、ページ遷移のたびに astro:page-load が発火します。セットアップ系の処理を書いていると、イベントリスナーが累積する。AbortControllerと astro:before-swap を使ったクリーンアップパターン。
ブラウザ単独の不具合をどこで切るか。特定ブラウザ限定問題と判定する判断軸
「Safari/Chromeでは問題ない、Braveだけで不具合が出る」。この事象に何時間費やすか。特定ブラウザ限定問題と判定してサイト側fixを断念する判断軸と、ユーザーへの案内方法。
静的サイトでも_headersで防御層を揃える。Cloudflare Pages 5ヘッダーとCSPの段階導入
「静的サイトだからHTTPセキュリティヘッダーは不要」というのは、よくある誤解。HTTPヘッダーが提供する防御層はSSGとSSRを問わず必要です。Cloudflare Pagesの_headersで5つの基本ヘッダーを設定し、CSPをReport-Onlyから段階導入する手順。
CJK Variable Fontの"CSSが大きい"は罠。unicode-range サブセットの実態
コーポレートサイトのCSSバンドルが446KBに膨れる。「フォントロードがレンダリングをブロックしてFCPやLCPに直撃」というレビュー指摘の妥当性を分解します。@fontsource-variableの unicode-range サブセット仕組みと、定義サイズとペイロードの違い。
AIは"個人のハック"で終わらせない
個人でAIを使うところまでは誰でも届きます。問題はそこから先、組織としてAIを運用する仕組みを作れるか。PM・リーダーが担うべき4つの説明責任について。
hidden inputで公開されるAPIキーのabuse制御。秘密鍵と公開識別子の違い
フォームのhidden inputにAPIキーを入れるSaaS(Web3Forms等)は珍しくありません。「鍵が公開されている」とAIレビューが指摘してくることもありますが、これは秘密鍵漏洩リスクではなく abuse(乱用)制御の話。識別子としての公開鍵と、防御策の整理。
iOSで"1段下にカクっと落ちる"スクロール。JS制御スクロールとWebKit rubber-bandの競合
スムーズスクロールライブラリを入れた途端、iPhoneで奇妙な現象が起きました。下方向にスクロールして指を離した瞬間、画面がさらに1段下にカクっと落ちる。JS制御スクロールとiOSの rubber-band や慣性スクロールの競合と、サイト側でできる対策、ブラウザ単独問題の切り分け方。
Lighthouseモバイルスコアの読み方。CPU 4× slowdownプロファイルを分解する
Lighthouseモバイル Performance 80 を見て「遅い」と即断する前に、計測プロファイルを分解します。CPU 4× slowdown、1.6 Mbps throttling、Moto G Power 想定の意味と、実機Mid-tierとの乖離。実数で判断する習慣。
公開リポジトリで漏れがちな情報3種。generator meta、旧HTML残骸、hidden input
GitHubに上げているサイトのリポジトリで、攻撃対象面を広げる情報が漏れがちです。生成器メタタグ、移行作業で残った旧HTML、フォームのhidden input。3パターンとそれぞれの対処。
React Islandは本当に必要か。小さな図解のための180KB
Astro Islandsは必要な部分だけJSを動かせる仕組みです。一方で、何気なくReactをインポートすると、たった一つのインタラクティブな図解のためにReact + ReactDOMのバンドル全体がページに混ざる。「Astroなら速いはず」を裏切られる原因と、React不要時の代替案。
Three.jsを遅延ロードする。動的インポートとrequestIdleCallbackで720KBを3.6KBに
コーポレートサイトの背景にThree.jsを置いたら、モバイルの初期ロードが10秒近くかかりました。原因はトップレベルのインポートでThree.js全体が初期チャンクに同梱されていたこと。動的インポートとrequestIdleCallbackで別チャンクに分ける手順。