バージョン: 4.6.1

エディタ

エディタは、事後待合室デザインに対する完全な制御が必要なユーザーのための高度な編集機能を提供します。このドキュメントでは、エディタでのコード修正がプレビューにどのような影響を与えるか、および変更がリアルタイムでどのように反映されるかを説明します。

クイックリファレンス

コード要素	簡単設定設定	カスタマイズ可能	注意事項
`.nf-vwr-background`	背景画像	✅ はい	背景色/画像、パディング
`.nf-vwr-image3`	画像 3（主要UI背景）	✅ はい	背景色/画像、パディング、境界線半径
`.nf-vwr-image1`	画像 1	✅ はい	背景画像、サイズ、位置
`.nf-vwr-image2`	画像 2	✅ はい	背景画像、サイズ、位置
`.nf-vwr-title`	タイトル	✅ はい	テキスト、色、フォントサイズ、可視性
`.nf-vwr-description`	待合室の内容	✅ はい	テキスト、色、フォントサイズ、可視性
`#nf-vwr-cancel`	推奨イベントボタン（閉じるボタン）	✅ はい	テキスト、色、不透明度、URL属性
要素ID（例: `nf-vwr-*`）	-	❌ 修正禁止	システム機能に必要
クラス名（例: `nf-vwr-*`）	-	⚠️ 注意	一部のクラスはシステムで使用される

概要

エディタを使用すると、コード形式（HTML/CSS）でデザイン属性を直接修正して、カスタマイズに最大限の柔軟性を提供できます。すべてのコード変更はプレビュー領域に即座に反映され、修正結果をリアルタイムで確認できます。

エディタアクセス

エディタモードへの切り替え

エディタにアクセスするには：

簡単設定で簡単設定からエディタモードに切り替え
コード編集のためのエディタが利用可能になる
簡単設定設定で生成されたコードが自動的にロードされる

エディタモードの制限

エディタモード（エディタ）に入ると、簡単設定が無効化されます。エディタモードから簡単設定モードに戻ることはできますが、簡単設定モードに再度切り替えると、エディタモードで入力したすべてのカスタムコードが自動的にリセットされ、失われます。

コード構造概要

エディタは、簡単設定で構成された設定に対応するHTML/CSSコードをロードします。コード構造を理解すると、目標とする修正を行うことができます。

CSS変数システム

新しいコード構造は、:rootに定義されたCSSカスタムプロパティ（変数）を広範囲に使用して、中央集約的なスタイル制御を提供します。すべてのデザイン属性はこれらの変数を通じて制御されるため、一貫した外観を簡単にカスタマイズできます。

主要CSS変数:

--nf-main-*: メインテーマ色およびフォント
--nf-title-*: タイトルスタイルオプション
--nf-desc-*: 待合室の内容スタイルオプション
--nf-image1-*, --nf-image2-*, --nf-image3-*: 画像表示およびスタイル
--nf-bg-*: 背景色および画像
--nf-close-*: 閉じるボタンスタイル
--nf-*-display: 可視性制御（block, none, flex, gridなど）

CSS変数の利点:

中央集約的な制御: :rootの値を変更して関連するすべての要素を更新
簡単なテーマ変更: 変数を修正して一貫した色スキームを作成
動的更新: JavaScriptを通じて変数を変更してランタイムカスタマイズ可能

HTML構造マッピング

HTML構造は、以下のように簡単設定設定にマッピングされます：

背景レイヤー

<div class="nf-vwr-background">

簡単設定設定: 背景画像
カスタマイズ可能: 背景色（background-color）、背景画像（background-image）、パディング
位置: 全画面背景（主要UI要素の外側）

主要UIコンテナ

<div class="nf-vwr-image3">

簡単設定設定: 画像 3（主要UI要素背景）
カスタマイズ可能: 背景色/画像、パディング、境界線半径、幅、最大幅
位置: 主要事後待合室UIコンテナ

画像

<div class="nf-vwr-image1"></div>
<div class="nf-vwr-image2"></div>

簡単設定設定: 画像 1、画像 2
カスタマイズ可能: 背景画像URL、サイズ、位置、可視性（display: none使用）
位置: 主要UIコンテナ内

タイトル

<div class="nf-vwr-title">Please enter the title</div>

簡単設定設定: タイトル
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、フォント太さ、可視性
位置: 主要UIコンテナ内

待合室の内容

<div class="nf-vwr-description nf-vwr-pause-hidden">内容を入力してください。</div>

簡単設定設定: 待合室の内容
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、可視性
位置: 主要UIコンテナ内
注意: nf-vwr-pause-hiddenクラスはシステムで一時停止状態管理に使用される場合があります

推奨イベントボタン（閉じるボタン）

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">
  <span>閉じる</span>
</button>

簡単設定設定: 推奨イベントボタン（閉じるボタン）動作
カスタマイズ可能:
- ボタンテキスト（<span>タグ内）
- 色（background-color, color, border-color）
- 不透明度
- URL属性（data-nf-cancel-url=""）
⚠️ 重要:
- 要素ID（id="nf-vwr-cancel"）を修正しないでください
- data-nf-cancel-url属性を削除しないでください（リダイレクト機能に必要）
- 注意: 事後待合室はdata-nf-cancel-url属性を使用します

フッター情報

<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>

簡単設定設定: フッターテキスト（色カスタマイズを通じて）
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、可視性
位置: 主要UIコンテナ内

安全なカスタマイズ領域

✅ 修正可能

CSSプロパティ:

色（color, background-color）
フォントプロパティ（font-size, font-weight, font-family）
間隔（padding, margin, gap）
レイアウト（display, flex-direction, align-items, justify-content）
サイズ調整（width, max-width, min-width, height）
視覚効果（border-radius, opacity, box-shadow）
背景画像（background-image, background-size, background-position）

HTMLコンテンツ:

IDがない要素のテキストコンテンツ（例: .nf-vwr-title, .nf-vwr-description）
ボタンテキスト（例: "Close"）
フッターテキスト

HTML属性:

data-nf-cancel-url属性値（リダイレクトURL用）
<html>タグのlang属性（言語用）
<title>タグコンテンツ
<link rel="icon"> href属性（ファビコン用）

CSS変数:

:rootのすべての--nf-* CSSカスタムプロパティ修正可能
変数値は色、フォント、間隔、可視性を制御します

⚠️ 注意して修正

要素ID:

id="nf-vwr-*"があるすべての要素はシステムで使用されます
IDを修正すると機能が損なわれます
ルール: 要素IDを変更または削除しないでください

クラス名:

一部のクラスはシステムで参照される場合があります
ルール: 確実でない場合は、保存する前にプレビューで変更をテストしてください

❌ 修正禁止

重要な要素ID:

id="nf-vwr-cancel"

重要な属性:

data-nf-cancel-url属性名（ボタン機能に必要）
動的コンテンツコンテナの要素構造
:rootのCSS変数名（変数名変更時、機能が損なわれる）

一般的なカスタマイズ例

タイトルテキストおよびスタイル変更

方法1: CSS変数使用（推奨）

:root {
  --nf-title-color: #ff0000;        /* タイトル色変更 */
  --nf-title-font-size: 28px;        /* フォントサイズ増加 */
}

方法2: 直接CSS上書き

.nf-vwr-title {
  color: #ff0000;           /* タイトル色変更 */
  font-size: 28px;          /* フォントサイズ増加 */
  font-weight: 700;         /* より太く */
}

<div class="nf-vwr-title">Thank You for Waiting</div>

要素非表示

方法1: CSS変数使用（推奨）

:root {
  --nf-desc-display: none;  /* 待合室の内容非表示 */
}

方法2: CSS Display

.nf-vwr-description {
  display: none;            /* 待合室の内容非表示 */
}

方法3: HTMLコメント

<!-- <div class="nf-vwr-description nf-vwr-pause-hidden">内容を入力してください。</div> -->

色変更

CSS変数使用（推奨）:

:root {
  /* 背景色 */
  --nf-bg-color: #1a1a1a;              /* 暗い背景 */
  --nf-image3-bg-color: #ffffff;       /* 白い主要UI背景 */
  
  /* テキスト色 */
  --nf-title-color: #3354ff;           /* 青いタイトル */
  --nf-desc-color: #666666;            /* 灰色の待合室の内容 */
}

直接CSS上書き:

.nf-vwr-background {
  background-color: #1a1a1a;  /* 暗い背景 */
}

.nf-vwr-image3 {
  background-color: #ffffff;  /* 白い背景 */
}

.nf-vwr-title {
  color: #3354ff;            /* 青いタイトル */
}

.nf-vwr-description {
  color: #666666;            /* 灰色の待合室の内容 */
}

ボタン修正

ボタンテキスト:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>Continue</span>
</button>

ボタンスタイリング（CSS変数使用）:

:root {
  --nf-close-bg-color: #ff0000;       /* 赤い背景 */
  --nf-close-text-color: #ffffff;     /* 白いテキスト */
  --nf-close-border-color: #cc0000;    /* より暗い赤い境界線 */
}

ボタンスタイリング（直接CSS）:

.nf-vwr-cancel {
  background-color: #ff0000;  /* 赤い背景 */
  color: #ffffff;              /* 白いテキスト */
  border-color: #cc0000;       /* より暗い赤い境界線 */
  border-radius: 12px;         /* より丸く */
}

ボタンURL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">
  <span>Close</span>
</button>

背景画像追加

CSS変数使用（推奨）:

:root {
  --nf-bg-url: url('https://example.com/background.jpg');
  --nf-image1-url: url('https://example.com/image1.png');
  --nf-image2-url: url('https://example.com/image2.png');
  --nf-image3-url: url('https://example.com/image3.png');
}

直接CSS上書き:

.nf-vwr-background {
  background-image: url('https://example.com/background.jpg');
  background-size: cover;
  background-position: center;
}

.nf-vwr-image1 {
  background-image: url('https://example.com/image1.png');
  background-size: contain;
}

高度なプログラミング事例

事例1: 動的言語切り替え

シナリオ: ユーザーロケールに応じて異なる言語で事後待合室を表示。

実装:

ユーザーロケール検出（ブラウザ言語、URLパラメータなど）
JavaScriptを使用してテキストコンテンツを動的に修正
必要に応じて言語別フォントのCSS更新

例:

// ロケール検出およびテキスト更新
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Thank You for Waiting', description: 'Enjoy the event!' },
  'ko': { title: '대기해 주셔서 감사합니다', description: '이벤트를 즐겨보세요!' },
  'ja': { title: 'お待ちいただきありがとうございます', description: 'イベントをお楽しみください' }
};

const title = document.querySelector('.nf-vwr-title');
const description = document.querySelector('.nf-vwr-description');
title.textContent = translations[locale]?.title || translations['en'].title;
description.textContent = translations[locale]?.description || translations['en'].description;

ルール:

✅ IDがない要素のテキストコンテンツ修正可能
✅ 動的コンテンツのためのJavaScript追加可能
❌ 要素ID修正禁止
⚠️ さまざまなロケールで徹底的にテスト

事例2: カスタムアセット追加

シナリオ: カスタムフォント、画像、またはその他のアセットをロード。

実装:

外部リソースに対して<head>に<link>タグを追加
画像に対してCSSでurl()を使用
アセットがアクセス可能であることを確認（CORS、HTTPS）

例 - カスタムフォント:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

.nf-vwr-title {
  font-family: 'Roboto', sans-serif;
}

例 - カスタム画像:

.nf-vwr-image1 {
  background-image: url('https://cdn.example.com/custom-image.png');
}

ルール:

✅ <head>に<link>タグ追加可能
✅ CSS url()で外部URL使用可能
⚠️ アセットがアクセス可能であることを確認（CORS有効化、HTTPS）
⚠️ ローディングパフォーマンスを考慮

事例3: カスタムロジック追加

シナリオ: 強化された機能のためのカスタムJavaScript追加。

実装:

</body>タグの前に<script>タグを追加
既存の要素IDを使用して待合室要素と相互作用
NetFUNNELのコア機能を上書きしないでください

例 - カスタム分析:

<body>
  <!-- ... 既存コード ... -->
  
  <script>
    // カスタム分析追跡
    document.getElementById('nf-vwr-cancel').addEventListener('click', function() {
      // 推奨イベントボタン（閉じるボタン）クリック追跡
      console.log('Close button clicked');
      // 分析サービスに送信
    });
  </script>
</body>

ルール:

✅ カスタム<script>タグ追加可能
✅ 既存要素にイベントリスナー追加可能
❌ 必須要素ID削除または修正禁止
⚠️ 互換性を確保するために徹底的にテスト

事例4: 条件付きスタイリング

シナリオ: 条件（タイムゾーン、ユーザータイプなど）に応じて異なるスタイルを適用。

実装:

JavaScriptを使用して条件検出
CSS変数修正またはCSSクラス追加/削除
CSS変数は中央集約的な制御とより良いパフォーマンスを提供します

例 - 時間ベーススタイリング（CSS変数使用）:

<script>
  const hour = new Date().getHours();
  const root = document.documentElement;
  
  if (hour >= 6 && hour < 18) {
    // ライトモード
    root.style.setProperty('--nf-bg-color', '#f0f0f0');
    root.style.setProperty('--nf-image3-bg-color', '#ffffff');
    root.style.setProperty('--nf-title-color', '#2F3033');
  } else {
    // ダークモード
    root.style.setProperty('--nf-bg-color', '#1a1a1a');
    root.style.setProperty('--nf-image3-bg-color', '#2a2a2a');
    root.style.setProperty('--nf-title-color', '#ffffff');
  }
</script>

例 - 直接スタイル修正:

<script>
  const hour = new Date().getHours();
  const background = document.querySelector('.nf-vwr-background');
  
  if (hour >= 6 && hour < 18) {
    background.style.backgroundColor = '#f0f0f0'; // ライトモード
  } else {
    background.style.backgroundColor = '#1a1a1a'; // ダークモード
  }
</script>

ルール:

✅ JavaScriptを通じてCSS変数修正可能（推奨）
✅ JavaScriptを通じてCSSクラスおよびインラインスタイル修正可能
✅ 条件付きロジック追加可能
⚠️ 変更がコア機能を損なわないことを確認
⚠️ さまざまな条件でテスト

事例5: カスタムアニメーション

シナリオ: カスタムアニメーションまたはトランジション追加。

実装:

CSSで@keyframes定義
要素にアニメーション適用
既存のアニメーションと干渉しないことを確認

例:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nf-vwr-title {
  animation: fadeIn 1s ease-in;
}

ルール:

✅ カスタム@keyframes追加可能
✅ CSSアニメーション追加可能
⚠️ 既存の@keyframes修正禁止（ある場合marquee、entering）
⚠️ アニメーションパフォーマンステスト

プログラミングルール要約

✅ 許可された作業

CSS修正: すべてのCSSプロパティ修正可能（色、フォント、間隔、レイアウトなど）
CSS変数: :rootのすべての--nf-* CSSカスタムプロパティ修正可能（中央集約的なスタイリング）
HTMLコンテンツ: IDがない要素のテキストコンテンツ修正可能（<span>タグ内テキストを含む）
HTML属性: 安全な属性修正可能（data-nf-cancel-url, lang, title, href）
リソース追加: フォント、スタイルシートなどのための<link>タグ追加可能
スクリプト追加: 追加機能のためのカスタム<script>タグ追加可能
要素追加: 新しいHTML要素追加可能（注意 - レイアウトに影響を与える可能性がある）

⚠️ 制限された作業

要素ID: nf-vwr-*で始まるIDを修正または削除しないでください
必須属性: data-nf-cancel-url属性名削除禁止
CSS変数名: CSS変数名修正禁止（例: --nf-title-color）、値のみ修正可能
コアアニメーション: 既存の@keyframes修正禁止（ある場合marquee、entering）
要素構造: 動的コンテンツコンテナの構造修正時に注意
システムクラス: nf-vwr-pause-hiddenなどのシステムで使用するクラスに注意

❌ 禁止された作業

必須要素削除: IDがある要素削除禁止
機能損傷: 待合室機能を損なう変更禁止
セキュリティリスク: セキュリティリスクを引き起こすスクリプト追加禁止

ベストプラクティス

コード構成

コメント使用: カスタムセクションを識別するためのコメント追加
構造維持: コードを体系的で読みやすく維持
段階的テスト: 小さな変更を行い、頻繁にテスト

プレビューモニタリング

各変更後確認: 各修正後プレビューで変更を確認
さまざまなシナリオテスト: プレビューコントロールを使用してさまざまな解像度でテスト
機能検証: すべての対話要素が正しく動作することを確認

安全ガイドライン

コードバックアップ: 主要な変更前にコードバックアップを保存
徹底的なテスト: 修正後すべての機能をテスト
変更文書化: 修正内容と理由に関するメモを維持

重要

主要な変更を行う前に、常にコードをバックアップしてください。簡単設定モードにリセットした後は、コード変更を復元できません。

事後待合室カスタマイズ

事後待合室は事前待合室と一般待合室よりもシンプルで、感謝メッセージとイベント推奨に重点を置いています。コア機能を維持しながら、すべての視覚要素をカスタマイズできます。

クイックリファレンス​

概要​

エディタアクセス​

エディタモードへの切り替え​

コード構造概要​

CSS変数システム​

HTML構造マッピング​

背景レイヤー​

主要UIコンテナ​

画像​

タイトル​

待合室の内容​

推奨イベントボタン（閉じるボタン）​

フッター情報​

安全なカスタマイズ領域​

✅ 修正可能​

⚠️ 注意して修正​

❌ 修正禁止​

一般的なカスタマイズ例​

タイトルテキストおよびスタイル変更​

要素非表示​

色変更​

ボタン修正​

背景画像追加​

高度なプログラミング事例​

事例1: 動的言語切り替え​

事例2: カスタムアセット追加​

事例3: カスタムロジック追加​

事例4: 条件付きスタイリング​

事例5: カスタムアニメーション​

プログラミングルール要約​

✅ 許可された作業​

⚠️ 制限された作業​

❌ 禁止された作業​

ベストプラクティス​

コード構成​

プレビューモニタリング​

安全ガイドライン​

クイックリファレンス

概要

エディタアクセス

エディタモードへの切り替え

コード構造概要

CSS変数システム

HTML構造マッピング

背景レイヤー

主要UIコンテナ

画像

タイトル

待合室の内容

推奨イベントボタン（閉じるボタン）

フッター情報

安全なカスタマイズ領域

✅ 修正可能

⚠️ 注意して修正

❌ 修正禁止

一般的なカスタマイズ例

タイトルテキストおよびスタイル変更

要素非表示

色変更

ボタン修正

背景画像追加

高度なプログラミング事例

事例1: 動的言語切り替え

事例2: カスタムアセット追加

事例3: カスタムロジック追加

事例4: 条件付きスタイリング

事例5: カスタムアニメーション

プログラミングルール要約

✅ 許可された作業

⚠️ 制限された作業

❌ 禁止された作業

ベストプラクティス

コード構成

プレビューモニタリング

安全ガイドライン