バージョン: 4.6.1

エディタ

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

Code Editor

クイックリファレンス

コード要素	簡単設定設定	カスタマイズ可能	注意事項
`.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-ahead-count-value`	前の待機人数（数値）	⚠️ 制限的	色のみ（値は動的）
`.nf-vwr-metrics-progress`	進捗バー	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-metrics-progress-value`	待機進行率	⚠️ 制限的	可視性のみ（値は動的）
`#nf-vwr-metrics-process-status`	進入処理の状態	⚠️ 制限的	可視性のみ（システム制御）
`#nf-vwr-metrics-process-message`	進入状況の案内メッセージ	⚠️ 制限的	テキストプレースホルダー、可視性（コンテンツは動的）
`#nf-vwr-metrics-wait-time-value`	予想待ち時間（値）	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-metrics-enter-time-value`	アクセス可能時間（値）	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-metrics-behind-count-value`	後ろの待機人数（値）	⚠️ 制限的	色のみ（値は動的）
`#nf-vwr-marquee`	区間制御プログレスバー	⚠️ 制限的	可視性、色（システム制御）
`.nf-vwr-description`	待合室の内容	✅ はい	テキスト、色、フォントサイズ、可視性
`#nf-vwr-cancel`	待機キャンセルボタン	✅ はい	テキスト、色、不透明度、URL属性
要素ID（例: `nf-vwr-*`）	-	❌ 修正禁止	システム機能に必要
クラス名（例: `nf-vwr-*`）	-	⚠️ 注意	一部のクラスはシステムで使用される

概要

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

エディタアクセス

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

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

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

エディタモードの制限

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

コード構造概要

エディタは、簡単設定で構成された設定に対応するHTML/CSSコードをロードします。コードは:rootに定義されたCSSカスタムプロパティ（CSS変数）を使用して、さまざまなデザイン属性を制御します。コード構造を理解すると、目標とする修正を行うことができます。

CSS変数システム

コードは:rootセレクタでCSSカスタムプロパティ（変数）を使用してデザイン属性を制御します。これらの変数を修正して待合室の外観をカスタマイズできます：

レイアウト変数: グリッド位置指定、整列（--nf-grid-template-areas, --nf-justify-content, --nf-align-items）
タイポグラフィ変数: フォントファミリー、サイズ、色（--nf-title-font-family, --nf-title-font-size, --nf-title-color）
画像変数: 表示、背景色、URL（--nf-image1-display, --nf-image1-bg-color, --nf-image1-url）
機能オプション変数: さまざまな機能に対する表示トグル（--nf-progress-value-display, --nf-wait-time-display, --nf-enter-time-display）
色変数: ポイント色、メトリクス色（--nf-main-point-color, --nf-ahead-count-value-color）

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 class="nf-vwr-metrics-key">前の待機人数</p>
  <p id="nf-vwr-metrics-ahead-count-value" class="nf-vwr-metrics-ahead-count-value"></p>
</div>
<div id="nf-vwr-metrics-progress-container-wrapper" class="nf-vwr-metrics-progress-container-wrapper">
  <div class="nf-vwr-metrics-progress-container">
    <progress id="nf-vwr-metrics-progress" class="nf-vwr-metrics-progress" max="100" value="0"></progress>
    <span id="nf-vwr-metrics-progress-value" class="nf-vwr-metrics-progress-value" data-nf-enable="false"></span>
  </div>
  <div id="nf-vwr-metrics-process-status" class="nf-vwr-metrics-process-status fast" data-nf-enable="false"></div>
</div>

簡単設定設定: 前の待機人数、進捗バー、待機進行率、進入処理の状態
カスタマイズ可能:
- ラベルテキスト（.nf-vwr-metrics-key）
- 値の色（#nf-vwr-metrics-ahead-count-value - 色のみ）
- 進捗バー色（CSS変数--nf-main-point-colorまたは.nf-vwr-metrics-progress::-webkit-progress-value）
- 待機進行率表示（CSS変数--nf-progress-value-display）
- 進入処理の状態表示（CSS変数--nf-progress-status-display）
⚠️ 重要:
- 要素ID（id="nf-vwr-metrics-*"）を修正しないでください
- 進捗バーのvalueまたはmax属性を修正しないでください（動的に更新される）
- data-nf-enable属性を修正しないでください（システムで制御される）
- 値テキストは動的に更新されます

選択的メトリクス（予想待ち時間、アクセス可能時間、後ろの待機人数）

<div id="nf-vwr-metrics-optional" class="nf-vwr-metrics-optional">
  <div id="nf-vwr-metrics-wait-time" class="nf-vwr-metrics-optional-box wait-time">
    <span class="nf-vwr-metrics-optional-title">予想待ち時間</span>
    <span id="nf-vwr-metrics-wait-time-value" class="nf-vwr-metrics-value wait-time-value"></span>
  </div>
  <div id="nf-vwr-metrics-enter-time" class="nf-vwr-metrics-optional-box enter-time" data-nf-enable="true">
    <span class="nf-vwr-metrics-optional-title">アクセス可能時間</span>
    <span id="nf-vwr-metrics-enter-time-value" class="nf-vwr-metrics-value enter-time-value"></span>
  </div>
  <div id="nf-vwr-metrics-behind-count" class="nf-vwr-metrics-optional-box behind-count">
    <span class="nf-vwr-metrics-optional-title">後ろの待機人数</span>
    <span id="nf-vwr-metrics-behind-count-value" class="nf-vwr-metrics-value behind-count-value"></span>
  </div>
</div>

簡単設定設定: 予想待ち時間、アクセス可能時間、後ろの待機人数
カスタマイズ可能:
- ラベルテキスト（.nf-vwr-metrics-optional-title）
- 値の色（CSS変数または直接スタイリング）
- 可視性（CSS変数: --nf-wait-time-display, --nf-enter-time-display, --nf-behind-count-display）
⚠️ 重要:
- 要素IDを修正しないでください
- data-nf-enable属性を修正しないでください（システムで制御される）
- 値テキストは動的に更新されます

進入状況の案内メッセージ

<div id="nf-vwr-metrics-process-message" class="nf-vwr-metrics-process-message nf-vwr-pause-hidden" data-nf-enable="false">
  まもなくサイトに進入します。
</div>

簡単設定設定: 進入状況の案内メッセージ
カスタマイズ可能:
- テキストコンテンツ（プレースホルダーテキスト）
- フォントファミリー、サイズ、色（CSS変数）
- 可視性（CSS変数--nf-entering-message-display）
⚠️ 重要:
- 要素IDを修正しないでください
- コンテンツはシステムで動的に更新されます
- data-nf-enable属性を修正しないでください

区間制御プログレスバー（マーキー）

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

簡単設定設定: 区間制御（該当する場合）
カスタマイズ可能:
- 可視性（CSS変数--nf-marquee-display）
- 色（CSS変数--nf-marquee-color）
⚠️ 重要:
- 要素IDを修正しないでください
- マーキーアニメーション構造を修正しないでください

待合室の内容

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

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

待機キャンセルボタン

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

簡単設定設定: 待機キャンセルボタン
カスタマイズ可能:
- ボタンテキスト（<span>タグ内）
- 色（CSS変数: --nf-close-bg-color, --nf-close-text-color, --nf-close-border-color）
- 可視性（CSS変数--nf-close-display）
- URL属性（data-nf-cancel-url=""）
⚠️ 重要:
- 要素ID（id="nf-vwr-cancel"）を修正しないでください
- data-nf-cancel-url属性を削除しないでください（リダイレクト機能に必要）

フッター情報

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

CSS変数（カスタムプロパティ）:

:rootに定義されたすべてのCSS変数を修正してデザイン属性をカスタマイズできます
変数は表示トグル、色、フォント、レイアウト設定を制御します
例: --nf-title-display, --nf-title-color, --nf-progress-value-display

HTMLコンテンツ:

IDがない要素のテキストコンテンツ（例: .nf-vwr-title, .nf-vwr-description）
ラベルテキスト（例: "My waiting number", "Estimated Wait Time"）
ボタンテキスト（例: "Close"）

HTML属性:

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

⚠️ 注意して修正

要素ID:

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

動的コンテンツ:

動的値を表示するIDがある要素：
- #nf-vwr-metrics-ahead-count-value（待機番号）
- #nf-vwr-metrics-progress-value（待機進行率）
- #nf-vwr-metrics-wait-time-value（予想時間）
- #nf-vwr-metrics-enter-time-value（アクセス可能時間）
- #nf-vwr-metrics-behind-count-value（後ろの待機人数）
- #nf-vwr-live-message（ライブメッセージコンテンツ）
- #nf-vwr-metrics-process-message（進入状況の案内メッセージコンテンツ）
ルール: CSSスタイリング（色、フォントサイズ、CSS変数を通じた可視性）のみ修正してください - 要素構造またはIDを修正しないでください

システム制御属性:

さまざまな要素のdata-nf-enable属性はシステムで制御されます
ルール: data-nf-enable属性を修正しないでください

進捗バー:

valueおよびmax属性は動的に更新されます
ルール: CSSスタイリングのみ修正してください - HTML属性を修正しないでください

クラス名:

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

❌ 修正禁止

重要な要素ID:

id="nf-vwr-live-message"
id="nf-vwr-metrics-essential"
id="nf-vwr-metrics-ahead-count-value"
id="nf-vwr-metrics-progress"
id="nf-vwr-metrics-progress-value"
id="nf-vwr-metrics-process-status"
id="nf-vwr-metrics-process-message"
id="nf-vwr-marquee"
id="nf-vwr-metrics-optional"
id="nf-vwr-metrics-wait-time"
id="nf-vwr-metrics-wait-time-value"
id="nf-vwr-metrics-enter-time"
id="nf-vwr-metrics-enter-time-value"
id="nf-vwr-metrics-behind-count"
id="nf-vwr-metrics-behind-count-value"
id="nf-vwr-cancel"
id="nf-vwr-popup"
id="nf-vwr-popup-confirm"

重要な属性:

data-nf-cancel-url属性名（ボタン機能に必要）
data-nf-enable属性（システムで制御され、修正しないでください）
<progress>要素のmaxおよびvalue属性
動的コンテンツコンテナの要素構造

一般的なカスタマイズ例

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

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

<div class="nf-vwr-title">Welcome to Our Service</div>

要素非表示

方法1: CSS Display

.nf-vwr-description {
  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-ahead-count-value {
  color: #ff0000;            /* 赤い待機番号 */
}

#nf-vwr-metrics-wait-time-value {
  color: #00ff00;            /* 緑の予想時間 */
}

#nf-vwr-metrics-enter-time-value {
  color: #0000ff;            /* 青いアクセス可能時間 */
}

#nf-vwr-metrics-behind-count-value {
  color: #ff00ff;            /* マゼンタの後ろの待機人数 */
}

CSS変数使用:

:root {
  --nf-ahead-count-value-color: #ff0000;  /* 待機番号色 */
  --nf-wait-time-value-color: #00ff00;     /* 予想時間色 */
  --nf-enter-time-value-color: #0000ff;    /* アクセス可能時間色 */
  --nf-behind-count-value-color: #ff00ff;  /* 後ろの待機人数色 */
}

ボタン修正

ボタンテキスト:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>待機列を退出</span>
</button>

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

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

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

:root {
  --nf-close-display: flex;           /* ボタン表示 */
  --nf-close-bg-color: #ff0000ff;     /* 赤い背景 */
  --nf-close-text-color: #ffffffff;   /* 白いテキスト */
  --nf-close-border-color: #cc0000ff; /* 境界線色 */
}

ボタンURL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">Close</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;
}

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

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

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

実装:

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

例:

// ロケール検出およびテキスト更新
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Please Wait', description: 'You are in queue' },
  '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('Cancel button clicked');
      // 分析サービスに送信
    });
  </script>
</body>

ルール:

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

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

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

実装:

JavaScriptを使用して条件検出
CSSクラス追加/削除またはインラインスタイル修正
直接スタイル修正ではなくCSSクラスを使用してスタイリング

例 - 時間ベーススタイリング:

<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クラスおよびインラインスタイル修正可能
✅ 条件付きロジック追加可能
⚠️ 変更がコア機能を損なわないことを確認
⚠️ さまざまな条件でテスト

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

⚠️ 制限された作業

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

❌ 禁止された作業

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

ベストプラクティス

コード構成

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

プレビューモニタリング

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

安全ガイドライン

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

重要

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

多言語サービス

ユーザーロケールに応じた動的言語切り替えの場合、JavaScriptを使用してロケール検出およびコンテンツ更新を実装してください。実装詳細については高度なプログラミング事例の例を参照してください。

クイックリファレンス​

概要​

エディタアクセス​

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

コード構造概要​

CSS変数システム​

HTML構造マッピング​

背景レイヤー​

主要UIコンテナ​

画像​

タイトル​

ライブメッセージ​

メトリクス（待機番号、進捗バー）​

選択的メトリクス（予想待ち時間、アクセス可能時間、後ろの待機人数）​

進入状況の案内メッセージ​

区間制御プログレスバー（マーキー）​

待合室の内容​

待機キャンセルボタン​

フッター情報​

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

✅ 修正可能​

⚠️ 注意して修正​

❌ 修正禁止​

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

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

要素非表示​

色変更​

ボタン修正​

背景画像追加​

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

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

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

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

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

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

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

✅ 許可された作業​

⚠️ 制限された作業​

❌ 禁止された作業​

ベストプラクティス​

コード構成​

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

安全ガイドライン​

クイックリファレンス

概要

エディタアクセス

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

コード構造概要

CSS変数システム

HTML構造マッピング

背景レイヤー

主要UIコンテナ

画像

タイトル

ライブメッセージ

メトリクス（待機番号、進捗バー）

選択的メトリクス（予想待ち時間、アクセス可能時間、後ろの待機人数）

進入状況の案内メッセージ

区間制御プログレスバー（マーキー）

待合室の内容

待機キャンセルボタン

フッター情報

安全なカスタマイズ領域

✅ 修正可能

⚠️ 注意して修正

❌ 修正禁止

一般的なカスタマイズ例

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

要素非表示

色変更

ボタン修正

背景画像追加

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

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

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

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

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

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

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

✅ 許可された作業

⚠️ 制限された作業

❌ 禁止された作業

ベストプラクティス

コード構成

プレビューモニタリング

安全ガイドライン