バージョン: 4.6.1

エディタ

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

クイックリファレンス

コード要素	簡単設定設定	カスタマイズ可能	注意事項
`.nf-vwr-background`	背景画像	✅ はい	背景色/画像、パディング
`.nf-vwr-image3`	画像 3（主要UI背景）	✅ はい	背景色/画像、パディング、境界線半径
`.nf-vwr-image1`	画像 1	✅ はい	背景画像、サイズ、位置
`.nf-vwr-image2`	画像 2	✅ はい	背景画像、サイズ、位置
`.nf-vwr-title`	タイトル	✅ はい	テキスト、色、フォントサイズ、可視性
`#nf-vwr-live-message`	ライブメッセージのプレビュー	✅ はい	フォントサイズ、色、可視性
`#nf-vwr-metrics-event-time`	イベント時間（色カスタマイズ2次）	✅ はい	テキスト、色、フォントサイズ、可視性
`#nf-vwr-metrics-essential`	メトリクスコンテナ	⚠️ 制限的	レイアウトのみ（ID修正禁止）
`.nf-vwr-metrics-timer-container`	タイマーコンテナ	✅ はい	レイアウト、表示、可視性
`#nf-vwr-timer-day-value`	タイマー - 日	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-timer-hour-value`	タイマー - 時間	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-timer-minute-value`	タイマー - 分	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-timer-second-value`	タイマー - 秒	⚠️ 制限的	色のみ（値は動的）
`.nf-vwr-timer-unit-wrapper`	タイマーラッパー	✅ はい	タイマー単位のレイアウト、間隔
`.nf-vwr-timer-unit-dots`	タイマー点区切り	✅ はい	色、可視性
`:root` CSS変数	すべてのデザイン属性	✅ はい	変数値（名前は変更しないでください）
`#nf-vwr-entering-message`	進入メッセージ	✅ はい	テキスト、色、フォントサイズ、可視性
`.nf-vwr-description`	待合室の内容	✅ はい	テキスト、色、フォントサイズ、可視性
`#nf-vwr-cancel`	待機キャンセルボタン	✅ はい	テキスト、色、不透明度、URL属性
要素ID（例: `nf-vwr-*`）	-	❌ 修正禁止	システム機能に必要
クラス名（例: `nf-vwr-*`）	-	⚠️ 注意	一部のクラスはシステムで使用される

概要

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

エディタアクセス

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

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

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

エディタモードの制限

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

コード構造概要

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

CSS変数システム

コードは、さまざまなデザイン属性を制御するために:rootに定義されたCSSカスタムプロパティ（変数）を使用します。これらの変数を修正して外観をカスタマイズできます：

レイアウト変数: --nf-grid-template-areas, --nf-justify-content, --nf-align-items
タイポグラフィ変数: --nf-title-*, --nf-desc-*, --nf-live-message-*
色変数: --nf-main-text-color, --nf-main-point-color, --nf-*-color
画像変数: --nf-image1-*, --nf-image2-*, --nf-image3-*, --nf-bg-*
表示変数: --nf-*-display（displayプロパティを通じて可視性制御）

カスタマイズ: :rootセレクタでCSS変数値を修正して、デザイン属性をグローバルに変更できます。

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 id="nf-vwr-live-message" class="nf-vwr-live-message"></div>

簡単設定設定: ライブメッセージのプレビュー
カスタマイズ可能: フォントサイズ、色、可視性（display: noneまたはdisplay: flex使用）
⚠️ 重要: コンテンツは動的に埋められます - IDを修正しないでください
位置: 主要UIコンテナ内

イベント時間

<div id="nf-vwr-metrics-essential" class="nf-vwr-metrics-essential">
  <p id="nf-vwr-metrics-event-time" class="nf-vwr-metrics-event-time">2025年12月01日</p>
  <div class="nf-vwr-metrics-timer-container">
    <!-- タイマー単位 -->
  </div>
</div>

簡単設定設定: イベント時間（色カスタマイズ2次）
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、フォント太さ、可視性
位置: 主要UIコンテナ内、タイマーが含まれたnf-vwr-metrics-essentialコンテナ内
⚠️ 重要:
- id="nf-vwr-metrics-essential"またはid="nf-vwr-metrics-event-time"を修正しないでください
- イベント時間はタイマーが含まれたメトリクスコンテナで包まれています

タイマー（日、時間、分、秒）

<div class="nf-vwr-timer-unit-wrapper">
  <div id="nf-vwr-timer-card-day" class="nf-vwr-timer-unit">
    <div id="nf-vwr-timer-day-value" class="nf-vwr-timer-unit-number"></div>
    <div class="nf-vwr-timer-unit-bottom"></div>
  </div>
  <span>日</span>
</div>
<span class="nf-vwr-timer-unit-dots">
  <svg>...</svg>
</span>

簡単設定設定: タイマートグル
カスタマイズ可能:
- タイマー単位スタイリング（背景、境界線、色）
- 値の色（#nf-vwr-timer-day-value, #nf-vwr-timer-hour-value, #nf-vwr-timer-minute-value, #nf-vwr-timer-second-value - 色のみ）
- ラベルテキスト（日、時、分、秒）- wrapper内の<span>テキスト
- タイマー単位間の点SVGスタイリング
- 可視性（コンテナにdisplay: none使用）
⚠️ 重要:
- 要素ID（id="nf-vwr-timer-*"）を修正しないでください
- 値テキストは動的に更新されます
- タイマー値は自動的に計算され更新されます
- タイマー単位はラベルspanがあるnf-vwr-timer-unit-wrapperで包まれています
- タイマー単位間の点はnf-vwr-timer-unit-dotsクラスを使用します

進入メッセージ

<div id="nf-vwr-entering-message" class="nf-vwr-entering-message">You will enter the site shortly.</div>

簡単設定設定: 進入メッセージ
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、可視性
位置: 主要UIコンテナ内

進入アニメーション

<div id="nf-vwr-entering" class="nf-vwr-entering">
  <div class="nf-vwr-entering-dot1"></div>
  <div class="nf-vwr-entering-dot2"></div>
  <div class="nf-vwr-entering-dot3"></div>
</div>

簡単設定設定: 進入アニメーション
カスタマイズ可能:
- 点の色（background-color）
- アニメーションタイミング（CSS animationプロパティを通じて）
- 可視性（display: none使用）
⚠️ 重要:
- 要素ID（id="nf-vwr-entering"）を修正しないでください
- @keyframes enteringアニメーションを修正しないでください

マーキーアニメーション

<div id="nf-vwr-marquee" class="nf-vwr-marquee-background">
  <div class="nf-vwr-marquee-object"></div>
</div>

簡単設定設定: マーキーアニメーション
カスタマイズ可能:
- 背景色
- オブジェクト色（background-color）
- アニメーションタイミング（CSS animationプロパティを通じて）
- 可視性（display: none使用）
⚠️ 重要:
- 要素ID（id="nf-vwr-marquee"）を修正しないでください
- @keyframes marqueeアニメーションを修正しないでください

待合室の内容

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

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

待機キャンセルボタン

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

簡単設定設定: 待機キャンセルボタン
カスタマイズ可能:
- ボタンテキスト（<span>タグ内）
- 色（background-color, color）
- 不透明度
- URL属性（data-nf-cancel-url=""）
⚠️ 重要:
- 要素ID（id="nf-vwr-cancel"）を修正しないでください
- data-nf-cancel-url属性を削除しないでください（リダイレクト機能に必要）
- ボタンテキストは<span>要素で包まれています

フッター情報

<div class="nf-vwr-info">Refreshing the page, going back, or closing the popup and reconnecting may reset your waiting time.</div>
<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）
イベント時間テキスト（#nf-vwr-metrics-event-time）
ラベルテキスト（例: "Day", "Hour", "Minute", "Sec"）
ボタンテキスト（例: "Close"）
進入メッセージテキスト（#nf-vwr-entering-message）

HTML属性:

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

CSS変数:

:rootのすべてのCSSカスタムプロパティ（例: --nf-title-color, --nf-bg-color）
変数値を修正してデザイン属性をグローバルにカスタマイズできます

⚠️ 注意して修正

要素ID:

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

動的コンテンツ:

動的値を表示するIDがある要素：
- #nf-vwr-timer-day-value（日カウントダウン）
- #nf-vwr-timer-hour-value（時間カウントダウン）
- #nf-vwr-timer-minute-value（分カウントダウン）
- #nf-vwr-timer-second-value（秒カウントダウン）
- #nf-vwr-live-message（ライブメッセージコンテンツ）
ルール: CSSスタイリング（色、フォントサイズなど）のみ修正してください - 要素構造またはIDを修正しないでください

アニメーション:

@keyframes marquee - マーキーアニメーション
@keyframes entering - 進入アニメーション
ルール: 必要な場合にのみアニメーションタイミングを修正してください - アニメーション構造を削除または大幅に変更しないでください

クラス名:

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

❌ 修正禁止

重要な要素ID:

id="nf-vwr-live-message"
id="nf-vwr-entering-message"
id="nf-vwr-entering"
id="nf-vwr-marquee"
id="nf-vwr-metrics-essential"
id="nf-vwr-metrics-event-time"
id="nf-vwr-timer-card-day"
id="nf-vwr-timer-card-hour"
id="nf-vwr-timer-card-minute"
id="nf-vwr-timer-card-second"
id="nf-vwr-timer-day-value"
id="nf-vwr-timer-hour-value"
id="nf-vwr-timer-minute-value"
id="nf-vwr-timer-second-value"
id="nf-vwr-cancel"

重要な属性:

data-nf-cancel-url属性名（ボタン機能に必要）
タイマーコンテナの要素構造
動的コンテンツコンテナの要素構造
タイマー計算ロジック
:rootのCSS変数名（変数値は修正可能ですが、名前は変更しないでください）

一般的なカスタマイズ例

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

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

<div class="nf-vwr-title">Event Starting Soon</div>

タイマースタイリングカスタマイズ

タイマー単位背景:

.nf-vwr-timer-unit {
  background: #1a1a1a;      /* 暗い背景 */
  border: 2px solid #3354ff; /* 青い境界線 */
}

タイマー値の色:

#nf-vwr-timer-day-value,
#nf-vwr-timer-hour-value,
#nf-vwr-timer-minute-value,
#nf-vwr-timer-second-value {
  color: #ff0000;           /* 赤いタイマー値 */
}

アクティブタイマー単位:

.unit-active {
  background: #00ff00;      /* アクティブ時緑色 */
  border: 2px solid #00ff00;
}

タイマー単位ラッパー:

.nf-vwr-timer-unit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

タイマー単位点:

.nf-vwr-timer-unit-dots {
  color: #4c4c4c;           /* 点の色カスタマイズ */
}

要素非表示

方法1: CSS Display

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

#nf-vwr-entering {
  display: none;            /* 進入アニメーション非表示 */
}

方法2: HTMLコメント

<!-- <div class="nf-vwr-description">Please enter the content</div> -->

色変更

背景色:

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

主要UI背景:

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

テキスト色:

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

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

#nf-vwr-metrics-event-time {
  color: #ff6600;            /* オレンジ色のイベント時間 */
}

ボタン修正

ボタンテキスト:

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

ボタンスタイリング:

.nf-vwr-cancel {
  background-color: #ff0000;  /* 赤い背景 */
  color: #ffffff;              /* 白いテキスト */
  opacity: 0.9;                /* やや透明 */
  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>

背景画像追加

背景画像:

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

画像 1:

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

CSS変数使用

CSS変数値修正:

:root {
  --nf-title-color: #ff0000;        /* タイトル色変更 */
  --nf-title-font-size: 28px;        /* タイトルフォントサイズ変更 */
  --nf-bg-color: #1a1a1a;            /* 背景色変更 */
  --nf-main-point-color: #00ff00;    /* ポイント色変更 */
}

注意: CSS変数は:rootに定義されており、値を修正してデザイン属性をグローバルに変更できます。変数名は変更しないでください。値のみカスタマイズできます。

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

事例1: カスタムタイマースタイリング

シナリオ: 残り時間に応じてタイマー単位に異なるスタイルを適用。

実装:

CSSを使用してタイマー単位スタイリング
JavaScriptがタイマー状態に応じてクラスを追加/削除できる
アクティブタイマー単位に.unit-activeクラスを使用

例:

.nf-vwr-timer-unit {
  background: #4c4c4c;
  transition: all 0.3s ease;
}

.unit-active {
  background: #3354ff;
  border: 1px solid #EEE;
  transform: scale(1.05);
}

ルール:

✅ タイマー単位に対するCSS修正可能
✅ トランジションおよび効果追加可能
❌ タイマー値ID修正禁止
⚠️ スタイリング変更後タイマー機能をテスト

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

シナリオ: カスタムアニメーション追加または既存アニメーション修正。

実装:

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

例 - カスタムフェードイン:

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

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

ルール:

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

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

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

実装:

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

例:

// ロケール検出およびテキスト更新
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Event Starting Soon', description: 'Please wait' },
  '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修正禁止
⚠️ さまざまなロケールで徹底的にテスト

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

✅ 許可された作業

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

⚠️ 制限された作業

要素ID: nf-vwr-*で始まるIDを修正または削除しないでください
タイマー値: タイマー値要素IDまたは構造を修正しないでください
必須属性: data-nf-cancel-url属性名削除禁止
コアアニメーション: 既存の@keyframes修正禁止（marquee、entering）
要素構造: タイマーまたは動的コンテンツコンテナの構造修正時に注意
CSS変数名: :rootのCSS変数名を変更しないでください（値は修正可能）

❌ 禁止された作業

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

ベストプラクティス

コード構成

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

プレビューモニタリング

各変更後確認: 各修正後プレビューで変更を確認
タイマー機能テスト: タイマーが正しく表示され更新されることを確認
機能検証: すべての対話要素が正しく動作することを確認

安全ガイドライン

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

重要

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

タイマーカスタマイズ

タイマーは事前待合室のコア機能です。タイマースタイリング（色、境界線、背景）をカスタマイズできますが、正しい機能のためにタイマー値要素IDを保持する必要があります。

クイックリファレンス​

概要​

エディタアクセス​

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

コード構造概要​

CSS変数システム​

HTML構造マッピング​

背景レイヤー​

主要UIコンテナ​

画像​

タイトル​

ライブメッセージ​

イベント時間​

タイマー（日、時間、分、秒）​

進入メッセージ​

進入アニメーション​

マーキーアニメーション​

待合室の内容​

待機キャンセルボタン​

フッター情報​

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

✅ 修正可能​

⚠️ 注意して修正​

❌ 修正禁止​

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

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

タイマースタイリングカスタマイズ​

要素非表示​

色変更​

ボタン修正​

背景画像追加​

CSS変数使用​

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

事例1: カスタムタイマースタイリング​

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

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

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

✅ 許可された作業​

⚠️ 制限された作業​

❌ 禁止された作業​

ベストプラクティス​

コード構成​

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

安全ガイドライン​

クイックリファレンス

概要

エディタアクセス

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

コード構造概要

CSS変数システム

HTML構造マッピング

背景レイヤー

主要UIコンテナ

画像

タイトル

ライブメッセージ

イベント時間

タイマー（日、時間、分、秒）

進入メッセージ

進入アニメーション

マーキーアニメーション

待合室の内容

待機キャンセルボタン

フッター情報

安全なカスタマイズ領域

✅ 修正可能

⚠️ 注意して修正

❌ 修正禁止

一般的なカスタマイズ例

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

タイマースタイリングカスタマイズ

要素非表示

色変更

ボタン修正

背景画像追加

CSS変数使用

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

事例1: カスタムタイマースタイリング

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

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

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

✅ 許可された作業

⚠️ 制限された作業

❌ 禁止された作業

ベストプラクティス

コード構成

プレビューモニタリング

安全ガイドライン