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">

<!-- ✅ フォントを同梱 -->
<link href="./fonts/inter.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('./fonts/inter.woff2') format('woff2');
  }
</style>

<!-- ✅ バンドラで 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 は `https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css` を `<link rel="stylesheet">` で読み込んでください (= `cdn.tailwindcss.com` は briefroom で 503 になるため禁止)。フォントを使う場合は 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, use https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css via <link rel="stylesheet"> — do not use cdn.tailwindcss.com (it returns 503 from briefroom domains). For other JS libs, jsdelivr / cdnjs / unpkg / esm.sh are allowed. Google Fonts are allowed.

このコードの Tailwind CSS は `cdn.tailwindcss.com` で書かれていますが、briefroom では動きません (Tailwind 側で 503 reject)。以下に書き換えてください:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

検出範囲 + 警告挙動

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

• <link rel="stylesheet" href="https://...">
• <script src="https://..."></script>
• <style>@import url("https://...")</style>
• style="background:url(https://...)"

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

• CSP allowlist の 7 origin = 動作する (= 警告でも実際は動く、ガイダンスとして表示)
• それ以外 = block される (= 動かない、書き換え必要)
• Tailwind Play CDN = CSP では許可されているが Tailwind 側で 503 reject (= 警告でも実際は動かない、書き換え必要)