書き出しHTMLをCDN非依存の完全自己完結型にする

[yoggydev]

概要

前PRで書き出しHTMLに tailwind.config とCSS変数を注入して色は出るようにしましたが、実CSSの生成は cdn.tailwindcss.com（Play CDN）に依存したままでした。

「1枚のHTMLで完結」と謳って売る商品が、開くたびに外部CDNを取りに行く状態です。オフライン・社内ネットワーク・CDN障害で色が消えます。Tailwind自身がPlay CDNを本番非推奨としている点も、販売物としては見過ごせません。

CDN参照そのものを削除し、コンパイル済みの実CSSを埋め込む方式に切り替えました。

変更

対象	変更
静的HTML 880件	生成後に各HTMLを content としてTailwindをコンパイルし、実CSSを <style> で埋め込む。CDN script とトークン注入は削除
スタジオのバニラ書き出し	ブラウザではコンパイルできないため、生成済みの /html/<id>.html を取得して返す方式に。スタジオでコピーしたHTMLとZIPの中身が同一の成果物になり、経路による食い違いが原理的に消える
検査	「注入文字列があるか」→ 「色が本当に出るか」の実測に変更

コンパイルは postcss + tailwindcss を JS API で同一プロセス内から880回まわしています（毎回プロセス起動しない）。圧縮はPostCSSの raws 潰しで実施（14.4KB→8.5KB、新規依存なし）。

検査を実測に変えた（今回の肝）

前回の欠陥は「検査していない経路があった」ことが原因でした。そこで検査自体を変えています。

offline: true のコンテキストで http/https を全て abort した遮断下で実ブラウザを開き、getComputedStyle で確認します。

offers-money-back-card       bg-card=rgb(255,255,255) / text-muted-foreground=rgb(113,113,122) / 外部要求 0件
pricing2-three-tier-minimal  bg-card=rgb(255,255,255) / text-muted-foreground=rgb(113,113,122) / 外部要求 0件
playful-playful-button-set   style 1枚 86ルール / 高さ336px / 外部要求 0件
bg2-spotlight-cone           style 2枚 87ルール / 高さ470px / 外部要求 0件
botanical-botanical-hero     style 1枚 120ルール / 高さ646px / 外部要求 0件
btn-fun-jelly                style 2枚 68ルール / 高さ116px / 外部要求 0件

この検査は実際に1件を落としました。 aww-hero-horizontal-scroll-gallery が最初NGになり、調べると仕様どおりの挙動（その部品は bg-card を使っていないので、1件ぶんコンパイルしたCSSにその定義が入らないのが正しい）でした。検査側を「そのページが実際にそのクラスを使っている時だけ判定する」よう修正しています。動く検査であることの裏付けになりました。

実測

外部参照の全件スキャン（880件）

• <script src= / <link href= / '<img src=' / 'url(http…)' / '@import' → **すべて0件**（Google Fonts含めゼロ。フォントはシステムスタック）·- 残る 'http://' 文字列はSVGの名前空間（2,926件）と本文テキスト（2件）のみで、リソース取得ではない

サイズ・時間

	旧	新
HTML 1件	10,266 B	15,300 B（+49%）
public/html/ 合計	約8.2 MB	12.57 MB
MCPデータ（無料100件）	1.54 MB	2.02 MB
配布ZIP	9.6 MB	14.4 MB
CSSコンパイル	—	87秒（1件99ms）
npm run html 全体	—	2m53s

事前見積もり（14MB / 2〜3分）とほぼ一致しました。

スタジオの書き出しを実操作で確認

• 「コードをコピー」を実クリック → クリップボードの内容が表示内容と完全一致
• 取得したHTMLが public/html/marketing-pricing-table.html と1バイトも違わない（24,222 / 24,222文字）
• /html/*.html を404に差し替えるとエラー表示が出て、解除して「再試行」で復帰

逸脱点

• studio/html をZIPに含めるよう変更（従来は除外）。スタジオの書き出しが /html/<id>.html を取りに行くようになったため、除外すると買った人のスタジオでバニラタブが壊れる。ZIP +3.4MB
• 動的版（generateDynamicVanillaHtml）は対象外。esm.sh + Babel で実際に動くReactを埋め込む別機能で、CDN依存は本質的。そちらのトークン注入は維持
• .dark ブロックは出力CSSに入らない（書き出しHTMLは常にライト。class="dark" を含む部品では自動的に復活する）

検証

• テスト 2666件グリーン、typecheck / build / prerender グリーン
• build-release.mjs → verify-release.mjs --samples 6 すべてOK
• 880件の外部参照ゼロ・実CSS埋め込みを全件走査で確認

🤖 Generated with Claude Code

https://claude.ai/code/session_01YXb6DP2sELzRyZkqpe15p4

---

Generated by Claude Code