リファレンス: 脅威レベル視覚表示システム(TLVDS)
このページはリファレンスページです
3.0.0
これは何?
これは脅威レベル視覚表示システム(TLVDS)1 コンポーネントです。
例
TLVDSはこのような見た目です。
-
- _
Penumbraテーマはインクルードしていません。
-
- _
これが指定されているアノマリーは予測することが困難もしくは不可能で大規模な被害をもたらす能力を保有しています。通常では対象アノマリーはKクラスシナリオの代名詞で、収容クラスがEuclidもしくはKeterに指定されていいます。
ここで表示しきれていないすべての種類のデモはデモ: 脅威レベル視覚表示システム(TLVDS)2で閲覧することができます。
使い方
全てのオプションは小文字の半角英数字で入力してください。全角や漢字、大文字では使用できません。使用しないパラメータは省略可能です。
まず以下のコードをページの上部に1回だけ挿入して下さい:
[[include :scp-jp:user-component:tlvds-common-css]]
以下のコードを使用したい部分に挿入してください:
[[include :scp-jp:user-component:tlvds
|threat-level= /* 必須 white/blue/green/yellow/orange/red/black/undeterminedのいずれかを選択 */
| branch= /* 任意 jp/en/cn/zh/ko/frのいずれかを選択 */
| id= /* 必須 他と被らないユニークな単語を指定 */
| mode= /* 任意 light/darkのいずれかを選択 */
| footnote= /* 任意 脅威レベルの説明文を入力 */
]]
脅威レベル
以下の記事をもとに記述されています: SCPオブジェクトの脅威レベル| 引数 | 色 | 説明 |
|---|---|---|
| white | 白 | これが指定されているアノマリーは財団にとって有益な存在で、通常では収容クラスがSafeに指定されています。 |
| blue | 青 | これが指定されているアノマリーは財団にとって有益な存在である可能性があり3、通常では収容クラスがSafeまたはEuclidに指定されています。 |
| green | 緑 | これが指定されているアノマリーは適切に運用されていれば有益でも有害でもなく、通常では収容クラスがSafeもしくはEuclidに指定されています。 |
| yellow | 黄 | これが指定されているアノマリーは単独かつ特定の状況下において効果を発動させることができ、有害ですが、特定の方法によってその条件を満たさないようにすることによって安定化を行うことができ、容易に制御することができます。通常では収容クラスがSafe、Euclid、Keterに指定されています。 |
| orange | 橙 | これが指定されているアノマリーは容易に制御することができません。通常では収容クラスがEuclidもしくはKeterに指定されており、ヒト(Homo sapiens)型実体において最低限の脅威レベルとなっています。 |
| red | 赤 | これが指定されているアノマリーは予測することが困難もしくは不可能で大規模な被害をもたらす能力を保有しています。通常では対象アノマリーはKクラスシナリオの代名詞で、収容クラスがEuclidもしくはKeterに指定されていいます。 |
| black | 黒 | これが指定されているアノマリーは世界規模での被害を引き起こすことができ、その収容違反は直接的にXK-クラス世界終焉シナリオを引き起こします。通常では収容クラスがKeter、Esoteric/Apollyon、Esoteric/Ainに指定されています。 |
| undetermined | 未定 | 脅威レベルがアノマリーに指定されていません。 |
ジェネレーター
これを使用すると簡単にコードを作成することができます。
-
- _
<!-- TLVDS Generator v.2 [2026 Wikidot Syntax Generator] Created by takion00 --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>脅威レベル視覚表示システム(TLVDS)ジェネレーター</title> <meta name="language" content="ja"> <meta http-equiv="content-language" content="ja"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <meta name="author" content="takion00"> <meta name="robots" content="noindex, nofollow"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/config/app-config.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/windows-ui.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/icons/winui-icons.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> <style> :root { --tlvds-bright-color: 241, 241, 241; --tlvds-dark-color: 28, 28, 28; --tlvds-background-white: 230, 230, 230; --tlvds-background-blue: 0, 60, 180; --tlvds-background-green: 7, 100, 3; --tlvds-background-yellow: 251, 229, 0; --tlvds-background-orange: 215, 66, 0; --tlvds-background-red: 180, 0, 0; --tlvds-background-black: 22, 22, 22; --tlvds-background-undetermined: 96, 58, 58; --tlvds-border-color-light: var(--tlvds-dark-color); --tlvds-border-color-dark: var(--tlvds-bright-color); --tlvds-border-radius: 0; --tlvds-border-style: solid; --tlvds-border-width: 0.125rem; --tlvds-font-weight: 450; --tlvds-footnote-background-light: var(--tlvds-bright-color); --tlvds-footnote-background-dark: var(--tlvds-dark-color); --tlvds-footnote-text-color-light: var(--tlvds-dark-color); --tlvds-footnote-text-color-dark: var(--tlvds-bright-color); --tlvds-text-color-white: var(--tlvds-dark-color); --tlvds-text-color-blue: var(--tlvds-bright-color); --tlvds-text-color-green: var(--tlvds-bright-color); --tlvds-text-color-yellow: var(--tlvds-dark-color); --tlvds-text-color-orange: var(--tlvds-bright-color); --tlvds-text-color-red: var(--tlvds-bright-color); --tlvds-text-color-black: var(--tlvds-bright-color); --tlvds-text-color-undetermined: var(--tlvds-bright-color); --tlvds-level-text-jp: "脅威レベル:"; --tlvds-level-content-white-jp: "白"; --tlvds-level-content-blue-jp: "青"; --tlvds-level-content-green-jp: "緑"; --tlvds-level-content-yellow-jp: "黄"; --tlvds-level-content-orange-jp: "橙"; --tlvds-level-content-red-jp: "赤"; --tlvds-level-content-black-jp: "黒"; --tlvds-level-content-undetermined-jp: "未定"; --tlvds-level-text-en: "Threat Level:"; --tlvds-level-content-white-en: "White"; --tlvds-level-content-blue-en: "Blue"; --tlvds-level-content-green-en: "Green"; --tlvds-level-content-yellow-en: "Yellow"; --tlvds-level-content-orange-en: "Orange"; --tlvds-level-content-red-en: "Red"; --tlvds-level-content-black-en: "Black"; --tlvds-level-content-undetermined-en: "Undetermined"; --tlvds-level-text-cn: "威胁等级:"; --tlvds-level-content-white-cn: "白"; --tlvds-level-content-blue-cn: "蓝"; --tlvds-level-content-green-cn: "绿"; --tlvds-level-content-yellow-cn: "黄"; --tlvds-level-content-orange-cn: "橙"; --tlvds-level-content-red-cn: "红"; --tlvds-level-content-black-cn: "黑"; --tlvds-level-content-undetermined-cn: "未确定"; --tlvds-level-text-zh: "威脅等級:"; --tlvds-level-content-white-zh: "白"; --tlvds-level-content-blue-zh: "藍"; --tlvds-level-content-green-zh: "綠"; --tlvds-level-content-yellow-zh: "黃"; --tlvds-level-content-orange-zh: "橙"; --tlvds-level-content-red-zh: "紅"; --tlvds-level-content-black-zh: "黑"; --tlvds-level-content-undetermined-zh: "未確定"; --tlvds-level-text-ko: "위협 등급:"; --tlvds-level-content-white-ko: "백색"; --tlvds-level-content-blue-ko: "청색"; --tlvds-level-content-green-ko: "녹색"; --tlvds-level-content-yellow-ko: "황색"; --tlvds-level-content-orange-ko: "주황색"; --tlvds-level-content-red-ko: "적색"; --tlvds-level-content-black-ko: "흑색"; --tlvds-level-content-undetermined-ko: "미확정"; --tlvds-level-text-fr: "Niveaux de Menace des:"; --tlvds-level-content-white-fr: "Blanc"; --tlvds-level-content-blue-fr: "Bleu"; --tlvds-level-content-green-fr: "Vert"; --tlvds-level-content-yellow-fr: "Jaune"; --tlvds-level-content-orange-fr: "Orange"; --tlvds-level-content-red-fr: "Rouge"; --tlvds-level-content-black-fr: "Noir"; --tlvds-level-content-undetermined-fr: "Indéterminé"; } :where(.tlvds) { font-family: "Noto Sans JP","Noto Sans","Noto Sans SC","Noto Sans TC","Noto Sans KR",sans-serif; font-weight: var(--tlvds-font-weight); text-align: center; } :where(.tlvds) a:is(.newpage,:any-link,:hover,:active,:focus) { aspect-ratio: 80 / 3; background: rgb(var(--tlvds-background)); border: var(--tlvds-border-width) var(--tlvds-border-style) rgb(var(--tlvds-border-color)); border-radius: var(--tlvds-border-radius); color: rgb(var(--tlvds-text-color)); display: block; font-size: 0; margin: 1rem 0; padding: 2rem 0; text-decoration: none !important; width: 100%; } :where(.tlvds) a::before { content: var(--tlvds-level-text); font-size: 1.3rem; margin-right: 0.3rem; text-decoration: none; } :where(.tlvds) a::after { content: var(--tlvds-level-content); font-size: 1.3rem; text-decoration: none; } :where(.tlvds) .tlvds-footnote { background: rgb(var(--tlvds-footnote-background)); border: var(--tlvds-border-width) var(--tlvds-border-style) rgb(var(--tlvds-border-color)); color: rgb(var(--tlvds-footnote-text-color)); display: none; font-size: 1.2rem; left: 25%; padding: 0.25rem; position: relative; right: 25%; text-align: cneter; top: -1.4rem; width: 50%; z-index: 9; } :where(.tlvds):has(:is(a,.tlvds-footnote):hover) .tlvds-footnote { display: block } .fixed-grid { grid-template-rows: 1fr 1fr; } #codeResult { resize: none; } </style> </head> <body onload="codeMake();"> <main class="box"> <div class="fixed-grid"> <div class="grid"> <form class="box"> <div class="has-text-centered"> <h1>ジェネレーター</h1> </div> <label class="label" for="tlSelector">脅威レベル</label> <div class="app-select-menu" id="tlSelector"> <span class="app-dropdown-title" data-win-toggle="dropdown" data-win-target="#tlSelect">白</span> <ul class="app-dropdown-list" id="tlSelect"> <li class="app-dropdown-list-item selected"><span>白</span></li> <li class="app-dropdown-list-item"><span>青</span></li> <li class="app-dropdown-list-item"><span>緑</span></li> <li class="app-dropdown-list-item"><span>黄</span></li> <li class="app-dropdown-list-item"><span>橙</span></li> <li class="app-dropdown-list-item"><span>赤</span></li> <li class="app-dropdown-list-item"><span>黒</span></li> <li class="app-dropdown-list-item"><span>未定</span></li> </ul> </div> <label class="label" for="langSelector">言語</label> <div class="app-select-menu" id="langSelector"> <span class="app-dropdown-title" data-win-toggle="dropdown" data-win-target="#langSelect">日本語</span> <ul class="app-dropdown-list" id="langSelect"> <li class="app-dropdown-list-item selected"><span>日本語</span></li> <li class="app-dropdown-list-item"><span>English</span></li> <li class="app-dropdown-list-item"><span>簡体中文</span></li> <li class="app-dropdown-list-item"><span>繁体中文</span></li> <li class="app-dropdown-list-item"><span>한국어</span></li> <li class="app-dropdown-list-item"><span>Français</span></li> </ul> </div> <label class="label" for="modeSelector">テーマモード</label> <div class="app-select-menu" id="modeSelector"> <span class="app-dropdown-title" data-win-toggle="dropdown" data-win-target="#modeSelect">ライトモード</span> <ul class="app-dropdown-list" id="modeSelect"> <li class="app-dropdown-list-item selected"><span>ライトモード</span></li> <li class="app-dropdown-list-item"><span>ダークモード</span></li> </ul> </div> <label class="label" for="componentIdInput">コンポーネントID</label> <div class="app-input-container" id="componentIdInput"> <input class="app-input-text" type="text" value="tlvds-default" id="componentId" oninput="codeMake();"> </div> <label class="label" for="footnoteSelector">脚注</label> <label class="app-switch" id="footnoteSelector"> <input type="checkbox" id="footnoteSwitch" onchange="footnoteChange();codeMake();"> <div class="app-switch-view"></div> <span class="app-switch-label" data-on="有効" data-off="無効"></span> </label> <div class="app-input-container" id="footnoteContent" style="display:none;"> <input class="app-input-text" type="text" placeholder="脅威レベル説明文を入力" id="footnoteContentInput" oninput="codeMake();"> <button class="app-btn app-btn-primary" type="button" onclick="insertDefaultTlText();codeMake();"> <span>デフォルト説明文を挿入</span> </button> </div> </form> <div class="box"> <div class="has-text-centered"> <h1>コード</h1> </div> <textarea class="textarea is-info" id="codeResult" rows="10" readonly></textarea> <button class="app-btn" id="copyButton" onclick="codeCopy();"> <span id="copyButtonContent">コードをコピー</span> </button> </div> </div> </div> <div class="box"> <div class="has-text-centered"> <h1>プレビュー</h1> <div class="preview-box"> <div class="tlvds"> <a href="http://scp-jp.wikidot.com/reference:tlvds" target="_blank">tlvds</a> <div class="tlvds-footnote"></div> </div> </div> </div> </div> </main> <footer class="footer"> <div class="content has-text-centered"> <p>© 2026 takion00 <a href="https://creativecommons.org/licenses/by/4.0/deed.ja" target="_blank">CC 表示 4.0 国際</a></p> <p> <button class="app-btn" type="button" data-win-toggle="modal" data-win-target="#useLicense"> <span>使用したライブラリのライセンスを開く</span> </button> </p> </div> </footer> <components> <div class="app-dialog" id="useLicense" data-win-toggle="modal" data-win-target="#useLicense" tabindex="-1"> <div class="app-dialog-modal" aria-modal="true" role="dialog"> <div class="app-dialog-header"> <h3>使用ライブラリライセンス</h3> </div> <div class="app-dialog-body"> <li class="app-list-item"> <a tabview="-1">Windows UI</a> <a href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/LICENSE" target="_blank">MIT ライセンス</a> </li> <li class="app-list-item"> <a tabview="-1">Bulma</a> <a href="https://opensource.org/licenses/mit-license.php">MIT ライセンス</a> </li> </div> <div class="app-dialog-footer"> <button class="app-btn" type="button" data-win-toggle="modal" data-win-target="#useLicense"> <span>閉じる</span> </button> </div> </div> </div> </components> <script src="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/windows-ui.min.js"></script> <script src="https://lik.wdfiles.com/local--code/component%3Awikidot-compiler/1"></script> <script> function footnoteChange() { let footnoteSwitch = document.getElementById("footnoteSwitch"); if (footnoteSwitch.checked) { document.getElementById("footnoteContent").style.display = "block"; } else { document.getElementById("footnoteContent").style.display = "none"; } } function insertDefaultTlText() { let selectTl = document.querySelector("#tlSelect .app-dropdown-list-item.selected span").textContent; let tlText = ""; switch (selectTl) { case "白": tlText = "これが指定されているアノマリーは財団にとって**有益な存在**で、通常では収容クラスがSafeに指定されています。"; break; case "青": tlText = "これが指定されているアノマリーは財団にとって**有益な存在である可能性**があり、通常では収容クラスがSafeまたはEuclidに指定されています。"; break; case "緑": tlText = "これが指定されているアノマリーは**適切に**運用されていれば**有益でも有害でもなく**、通常では収容クラスがSafeもしくはEuclidに指定されています。"; break; case "黄": tlText = "これが指定されているアノマリーは単独かつ特定の状況下において効果を発動させることができ、**有害**ですが、特定の方法によってその条件を満たさないようにすることによって安定化を行うことができ、容易に制御することが**できます**。通常では収容クラスがSafe、Euclid、Keterに指定されています。"; break; case "橙": tlText = "これが指定されているアノマリーは容易に制御することが**できません**。通常では収容クラスがEuclidもしくはKeterに指定されており、ヒト(//Homo sapiens//)型実体において最低限の脅威レベルとなっています。"; break; case "赤": tlText = "これが指定されているアノマリーは予測することが**困難**もしくは**不可能**で大規模な被害をもたらす能力を保有しています。通常では対象アノマリーは**Kクラスシナリオの代名詞**で、収容クラスがEuclidもしくはKeterに指定されていいます。"; break; case "黒": tlText = "これが指定されているアノマリーは**世界規模**での被害を引き起こすことができ、その収容違反は直接的に**XK-クラス世界終焉シナリオ**を引き起こします。通常では収容クラスがKeter、Esoteric/Apollyon、Esoteric/Ainに指定されています。"; break; case "未定": tlText = "脅威レベルがアノマリーに指定されていません。"; break; } document.getElementById("footnoteContentInput").value = tlText; } function codeMake() { let selectTl = document.querySelector("#tlSelect .app-dropdown-list-item.selected span").textContent; let selectlang = document.querySelector("#langSelect .app-dropdown-list-item.selected span").textContent; let selectMode = document.querySelector("#modeSelect .app-dropdown-list-item.selected span").textContent; let footnoteSwitch = document.getElementById("footnoteSwitch"); let tl = ""; let lang = ""; let mode = ""; let componentId = document.getElementById("componentId").value; switch (selectTl) { case "白": tl = "white"; break; case "青": tl = "blue"; break; case "緑": tl = "green"; break; case "黄": tl = "yellow"; break; case "橙": tl = "orange"; break; case "赤": tl = "red"; break; case "黒": tl = "black"; break; case "未定": tl = "undetermined"; break; } switch (selectlang) { case "日本語": lang = "jp"; break; case "English": lang = "en"; break; case "簡体中文": lang = "cn"; break; case "繁体中文": lang = "zh"; break; case "한국어": lang = "ko"; break; case "Français": lang = "fr"; break; } switch (selectMode) { case "ライトモード": mode = "light"; break; case "ダークモード": mode = "dark"; break; } let footnoteContent = ""; if (footnoteSwitch.checked) { footnoteContent = document.getElementById("footnoteContentInput").value; } else { footnoteContent = "false"; } let tlvdsCode = "[[include :scp-jp:user-component:tlvds\n| threat-level= " + tl + "\n| branch= " + lang + "\n| id= " + componentId + "\n| mode= " + mode + "\n| footnote= " + footnoteContent + "\n]]"; document.getElementById("codeResult").value = tlvdsCode; let tlvdsDom = document.querySelector(".tlvds"); let footnoteDom = document.querySelector(".tlvds .tlvds-footnote"); tlvdsDom.setAttribute("data-module-id",componentId); tlvdsDom.style = "--tlvds-background:var(--tlvds-background-" + tl + ");--tlvds-border-color:var(--tlvds-border-color-" + mode + ");--tlvds-text-color:var(--tlvds-text-color-" + tl + ");--tlvds-level-text:var(--tlvds-level-text-" + lang + ");--tlvds-level-content:var(--tlvds-level-content-" + tl + "-" + lang + ");--tlvds-footnote-background:var(--tlvds-footnote-background-" + mode + ");--tlvds-footnote-text-color:var(--tlvds-footnote-text-color-" + mode + ");"; if (footnoteContent === "false") { footnoteDom.style.display = "none"; } else { footnoteDom.style.display = ""; footnoteDom.innerHTML = compileWikidotToHtml(footnoteContent); } if (mode === "light") { Appearance.setLightScheme(); } else if (mode === "dark") { Appearance.setDarkScheme(); } } function codeCopy() { let copybtn = document.getElementById("copyButton"); let copybtncnt = document.getElementById("copyButtonContent"); let codes = document.getElementById("codeResult"); navigator.clipboard.writeText(codes.value); let copybtnicon = document.createElement('i'); copybtnicon.className = "icons10-checkmark"; copybtnicon.id = "copyIcon"; copybtn.prepend(copybtnicon); copybtn.classList.add("app-btn-outline-success"); copybtncnt.textContent = "コピーしました"; setTimeout(function () { copybtnicon.remove(); copybtn.className = "app-btn"; copybtncnt.textContent = "コードをコピー"; },3000); } document.addEventListener('DOMContentLoaded', () => { const tlMenu = document.getElementById('tlSelector'); tlMenu?.addEventListener('click', (e) => { const li = e.target.closest('#tlSelect li.app-dropdown-list-item'); if (!li) return; requestAnimationFrame(codeMake); }); const langMenu = document.getElementById('langSelector'); langMenu?.addEventListener('click', (e) => { const li = e.target.closest('#langSelect li.app-dropdown-list-item'); if (!li) return; requestAnimationFrame(codeMake); }); const modeMenu = document.getElementById('modeSelector'); modeMenu?.addEventListener('click', (e) => { const li = e.target.closest('#modeSelect li.app-dropdown-list-item'); if (!li) return; requestAnimationFrame(codeMake); }); }); </script> </body> </html>
ページリビジョン: 81, 最終更新: 20 Jul 2026 01:19