briefroom CDN ポリシー

✅ 許可済の主要 CDN (7 origin)

以下の CDN は briefroom 配信ドメインから読み込めます (judge #45-D + サブ判断 4):

• jsDelivr — https://cdn.jsdelivr.net/npm/... ✅
• cdnjs — https://cdnjs.cloudflare.com/ajax/libs/... ✅
• unpkg — https://unpkg.com/... ✅
• esm.sh — https://esm.sh/... ✅
• Google Fonts (CSS) — https://fonts.googleapis.com/css?... ✅
• Google Fonts (file) — https://fonts.gstatic.com/s/... ✅
• Tailwind Play CDN — https://cdn.tailwindcss.com ⚠️ (不安定、後述)

推奨アプローチ 1: 相対パス bundle 同梱 (最も確実)

CDN 障害 / 仕様変更の影響を受けず、長期保管にも強い。

<!-- ✅ Tailwind bundle (npx tailwindcss で生成した static CSS) -->
<link href="./styles.css" rel="stylesheet">

<!-- ✅ バンドラで build した相対パス JS -->
<script src="./app.js" type="module"></script>

Tailwind を「相対パス」で使う Quick Start

1. ローカルで npx tailwindcss -i src/input.css -o styles.css --minify を実行
2. 生成された styles.css を HTML と同じフォルダに置く
3. <link href="./styles.css" rel="stylesheet"> で読み込む
4. これを ZIP にして briefroom にアップロード

推奨アプローチ 2: 許可済 CDN 経由 (簡便、ただし CDN 依存)

軽量 demo / モックアップで素早く確認したい場合:

<!-- ✅ Tailwind v3 (jsdelivr 経由、CSS のみ) -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

<!-- ✅ Tailwind v4 (jsdelivr 経由、JIT) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- ✅ Vue 3 (jsdelivr 経由) -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

<!-- ✅ Alpine.js (jsdelivr 経由) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- ✅ React + ReactDOM (esm.sh 経由) -->
<script type="module">
  import React from 'https://esm.sh/react@18';
  import ReactDOM from 'https://esm.sh/react-dom@18/client';
</script>

<!-- ✅ Google Fonts (Inter family) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<!-- ✅ Font Awesome (cdnjs 経由) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

AI への指示テンプレ

briefroom 用の HTML を作って。Tailwind CSS は `npx tailwindcss` で生成したビルド済み CSS を同梱するか `<style>` にインライン化してください (`cdn.tailwindcss.com` = Tailwind Play CDN は公式が本番非推奨・briefroom で「不安定」分類のため禁止)。ビルド不可なら CDN fallback として `https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css` (jsDelivr 経由) を使ってください。フォントを使う場合は Google Fonts `https://fonts.googleapis.com/...` 経由、または system-ui で OK。他の JS ライブラリも jsdelivr / cdnjs / unpkg / esm.sh 経由なら使えます。

Output as a single self-contained HTML folder for briefroom. For Tailwind CSS, bundle a pre-built CSS file or inline it in a <style> tag — do not use cdn.tailwindcss.com (Play CDN is discouraged for production, classified "unstable"). If a CDN is required, use https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css. For other JS libs, jsdelivr / cdnjs / unpkg / esm.sh are allowed. Google Fonts are allowed.

このコードの Tailwind CSS は `cdn.tailwindcss.com` (Tailwind Play CDN) を使っていますが、briefroom では「不安定」分類 (公式が本番非推奨・過去に遮断実績あり、予告なく表示できなくなる可能性) です。以下のいずれかに書き換えてください:

<!-- 推奨: ビルド済み CSS を同梱 -->
<link href="./styles.css" rel="stylesheet">

<!-- 代替: jsDelivr 経由 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

検出範囲 + 警告挙動

briefroom はアップロード時の entry HTML 内 5 箇所を検出して警告 panel に表示します:

• <link rel="stylesheet" href="https://...">
• <script src="https://..."></script>
• <style>@import url("https://...")</style>
• style="background:url(https://...)"
• <iframe src="https://..."> (判断 #96 — 対応 embed の allowlist 一致分は除外して警告なし)

警告 panel に表示された URL のうち:

• CSP allowlist の 7 origin = 動作する (= 警告でも実際は動く、ガイダンスとして表示)
• それ以外 = block される (= 動かない、書き換え必要)
• Tailwind Play CDN = CSP でも Tailwind 側でも通り現在は動作するが、公式が本番非推奨・過去に選択的遮断された実績 → 「不安定 (unstable)」分類として警告継続 (ビルド済み CSS 同梱を推奨)