バージョン: 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変数システム

ブロックルームコードは、スタイリングを制御するために--nf-*プレフィックスが付いたCSSカスタムプロパティ（変数）を使用します。これにより、:rootセレクタを通じた中央集約的なカスタマイズが可能です。クラススタイルを直接編集せずに、これらの変数を修正して要素の外観を変更できます。

主要CSS変数カテゴリ:

レイアウト変数: --nf-grid-template-*, --nf-justify-content, --nf-align-items
フォント変数: --nf-main-font-family, --nf-title-font-familyなど
色変数: --nf-main-text-color, --nf-title-color, --nf-bg-colorなど
表示変数: --nf-title-display, --nf-desc-display, --nf-close-displayなど
画像変数: --nf-image1-url, --nf-image2-url, --nf-bg-urlなど

例 - CSS変数による修正:

:root {
  --nf-title-color: #ff0000;        /* タイトル色変更 */
  --nf-title-font-size: 28px;        /* タイトルフォントサイズ変更 */
  --nf-bg-color: #1a1a1a;           /* 背景色変更 */
  --nf-close-display: none;          /* 待機キャンセルボタン非表示 */
}

例 - 直接CSS上書き:

.nf-vwr-title {
  color: #ff0000;                     /* 直接上書き */
  font-size: 28px;
}

CSS変数 vs 直接CSS

CSS変数: 中央集約的な制御と一貫性のために:rootで修正
直接CSS: 特定の変更のために特定のクラスを上書き
直接CSS上書きは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 class="nf-vwr-description nf-vwr-pause-hidden">Please enter the content</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属性を削除しないでください（リダイレクト機能に必要）
- <span>タグ構造はシステムで使用されます

フッター情報

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

簡単設定設定: フッターテキスト（色カスタマイズを通じて）
カスタマイズ可能: テキストコンテンツ、色、フォントサイズ、可視性
位置: 主要UIコンテナ内
注意: .nf-vwr-infoクラスはCSSに定義されていますが、構成に応じてHTML構造に表示されない場合があります

安全なカスタマイズ領域

✅ 修正可能

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属性（ファビコン用）

⚠️ 注意して修正

要素ID:

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

クラス名:

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

アニメーション:

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

❌ 修正禁止

重要な要素ID:

id="nf-vwr-cancel"

重要な属性:

data-nf-cancel-url属性名（ボタン機能に必要）
動的コンテンツコンテナの要素構造

一般的なカスタマイズ例

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

方法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">Access Denied</div>

要素非表示

方法1: CSS変数使用

:root {
  --nf-desc-display: none;          /* 内容非表示 */
  --nf-title-display: none;         /* タイトル非表示 */
  --nf-close-display: none;          /* 待機キャンセルボタン非表示 */
}

方法2: 直接CSS Display

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

方法3: HTMLコメント

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

色変更

CSS変数使用（推奨）:

:root {
  --nf-bg-color: #1a1a1a;           /* 暗い背景 */
  --nf-image3-bg-color: #ffffff;    /* 白い主要UI背景 */
  --nf-title-color: #ff0000;        /* 赤いタイトル */
  --nf-desc-color: #666666;         /* 灰色の内容 */
  --nf-info-color: #99999980;       /* 明るい灰色の警告メッセージ */
  --nf-copyright-color: #99999980;   /* 明るい灰色のフッター */
  --nf-close-bg-color: #ffffffff;   /* 白いボタン背景 */
  --nf-close-text-color: #4B4C4Fff;  /* ボタンテキスト色 */
  --nf-close-border-color: #D4D5D8ff; /* ボタン境界線色 */
}

直接CSS上書き:

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

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

.nf-vwr-title {
  color: #ff0000;            /* 赤いタイトル */
}

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

.nf-vwr-copyright {
  color: #999999;            /* 明るい灰色のフッター */
}

待機キャンセルボタン修正

ボタンテキスト:

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

CSS変数によるボタンスタイリング:

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

直接CSSによるボタンスタイリング:

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

ボタンURL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">
  <span>閉じる</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: 'Access Denied', description: 'You do not have permission to access this page.' },
  '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('Exit waiting room 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を修正または削除しないでください
必須属性: data-nf-cancel-url属性名削除禁止
コアアニメーション: 既存の@keyframes修正禁止（ある場合marquee、entering）
要素構造: 動的コンテンツコンテナの構造修正時に注意

❌ 禁止された作業

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

ベストプラクティス

コード構成

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

プレビューモニタリング

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

安全ガイドライン

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

重要

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

ブロックルームカスタマイズ

ブロックルームは、アクセスが制限されたときにユーザーに通知するように設計されています。コア機能を維持しながら、すべての視覚要素をカスタマイズできます。デザインがブロック状態を明確に伝えながら、ユーザーに適切な次のステップを提供するようにしてください。

クイックリファレンス​

概要​

エディタアクセス​

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

コード構造概要​

CSS変数システム​

HTML構造マッピング​

背景レイヤー​

主要UIコンテナ​

画像​

タイトル​

内容​

待機キャンセルボタン​

フッター情報​

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

✅ 修正可能​

⚠️ 注意して修正​

❌ 修正禁止​

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

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

要素非表示​

色変更​

待機キャンセルボタン修正​

背景画像追加​

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

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

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

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

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

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

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

✅ 許可された作業​

⚠️ 制限された作業​

❌ 禁止された作業​

ベストプラクティス​

コード構成​

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

安全ガイドライン​

クイックリファレンス

概要

エディタアクセス

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

コード構造概要

CSS変数システム

HTML構造マッピング

背景レイヤー

主要UIコンテナ

画像

タイトル

内容

待機キャンセルボタン

フッター情報

安全なカスタマイズ領域

✅ 修正可能

⚠️ 注意して修正

❌ 修正禁止

一般的なカスタマイズ例

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

要素非表示

色変更

待機キャンセルボタン修正

背景画像追加

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

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

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

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

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

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

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

✅ 許可された作業

⚠️ 制限された作業

❌ 禁止された作業

ベストプラクティス

コード構成

プレビューモニタリング

安全ガイドライン