新エディターのテキスト要素はAI生成コードの貼り付けに対応
発燒互動のエディターは豊富な標準要素に対応していますが、標準要素だけでは実現できないビジュアル表現が必要な場合、AIの力を借りてレイアウトを組み、必要なHTMLコードを生成することができます。発燒互動の新エディターのテキスト要素は、AI生成コードの貼り付けに対応していますが、安全な開発規範に準拠している必要があります。以下の記事を参照のうえ、AIに生成時にこの規範に従うよう指示してください。
エディター－AI生成HTML/CSS 中核開発ガイドライン
コードの貼り付け方法
エディターが提供するテキスト要素を使用します
テキスト要素のツールバーで <> アイコンをクリックすると、そのままAI生成コードを貼り付けられます。システムが安全規範に従い、リスクのあるコードを自動的にフィルタリングします。
高度なカスタムアニメーションへの対応方法
ご注意ください！安全規範のもとでは、サードパーティ製パッケージやJavaScriptの使用は禁止されています。コンテンツにどうしても動的なコードが必要な場合は、次の2つの方法があります。
エディター内で提供されているEmbed要素を使用する
方式の一覧と比較
実装経路 | 適した状況 | メリット | デメリット |
1. 発燒ウェブページ規範に準拠したネイティブAIスニペット | 一般的なUI要素、登場アニメーション、静的コンテンツ | 最良のSEO効果、読み込みが速い、追加設定不要、システムによる保護あり。 | カスタムJavaScriptロジックには対応していません。 |
2. GTMでSDKをインストール | Lucideアイコン、Lottieアニメーション、サードパーティ分析パッケージが必要な場合。 | 専門的な管理、コードがシンプル、グローバルJS SDKに対応、SEO効果あり。 | CNAME連携が必要、GTMの管理権限が必要。 |
3. Embed要素 | 複雑なJSインタラクション（計算機やカスタムプレーヤーなど）が必要だが、GTMが使えない場合。 | 自由度が高く、JS／HTML／CSSに完全対応。 | SEO効果が失われる、コンテンツがメインドメインではなくCDNドメインに保存される。 |
詳細な方式の説明
方式一：AI生成規範に従う（ネイティブコードスニペット）
最もおすすめの方法で、ウェブページのビジュアル要素の90%に適用できます。AIが生成したコードをそのままテキスト編集要素に貼り付けられます。
技術的特徴：純粋なHTMLとCSSを使用し、アニメーションは内蔵の
USAL.jsまたはCSSの@keyframesで実現します。SEO効果：優秀。コンテンツはウェブページのHTML構造に直接存在するため、検索エンジンが完全に取得できます。
開発上の制限：
<script>の使用は禁止です。動的なロジックが必要な場合は、CSSの状態（:hover、:checkedなど）のみに頼ることができます。
拡張可能：サードパーティSDKの指定（GTM経由）
Lucide、FontAwesomeやその他のJS駆動のビジュアルパッケージが必要な場合。
技術的特徴：GTMでSDKをインストールし、エディター内にはトリガータグ（
<i>など）のみを貼り付けます。SEO効果：優秀。本体のHTMLは引き続きページ上に存在し、アイコンなどはJSによってレンダリングされます。
開発上の制限：CNAME連携を完了している必要があります。URLがまだFeversocialのネイティブURLのままの場合、GTMをトリガーできません。
方式二：Embed要素を使用（JavaScriptの代替案）
API連携や複雑な計算など、カスタムJavaScriptの実行がどうしても必要で、GTMが使えない場合。エディターが提供するソースコード要素を使用できます。
技術的特徴：エディターのEmbed機能を通じてコードを埋め込みます。
SEO効果：低い。コードは
fevercdn.comドメインに保存され、埋め込み形式で表示されるため、検索エンジンが本文をインデックスしにくくなります。開発上の制限：そのブロック内でのみ動作し、メインページとのスタイルの完全な統一が難しくなります。
AIへの指示のおすすめ（プロンプト戦略）
方式を決めたら、対応する指示文をAIに提示してください：
方式一を選ぶ場合：
「Feversocialの中核規範に従い、
fs-custom-命名を使用し、JSと擬似要素は禁止、アニメーションはUSAL.jsを使用してください。」拡張方式を選ぶ場合：
「Lucideのタグ形式を使用してください。環境はすでにGTM経由でパッケージをインストール済みです。それ以外はFeversocialの中核規範に従ってください。」
方式三を選ぶ場合：
「このコードはEmbed要素で使用します。JavaScriptを使用しても構いませんが、すべての内容を1つの独立したコンテナ内に封じ込めてください。」