danoniplus 51.0.3 → 51.1.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/09/26
+ * Revised : 2026/09/29
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 51.0.3`;
-const g_revisedDate = `2026/09/26`;
+const g_version = `Ver 51.1.1`;
+const g_revisedDate = `2026/09/29`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/09/25 (v51.0.2)
+ * Revised : 2026/09/29 (v51.1.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1340,6 +1340,12 @@ const g_gaugeDefObj = {
     Easy: { Border: 70, Recovery: 4, Damage: 7, Init: 25, Variable: C_FLG_ON, headerOverridable: true, deriveRecoveryFrom: `Normal` },
 };
 
+/**
+ * 譜面ヘッダー由来のゲージ設定をまとめて定義
+ * - 定義方法はg_gaugeSelObjと類似しており、ゲージ名プロパティがない以外はほぼ同じ構造。
+ */
+const g_gaugeHeaderObj = {};
+
 /**
  * カスタムゲージの選択状態・個別上書き値
  * - g_gaugeSelObj[scoreId] = {
@@ -1368,11 +1374,10 @@ const g_gaugeDefObj = {
  */
 const g_gaugeSelObj = {};
 
-/**
- * 譜面ヘッダー由来のゲージ設定をまとめて定義
- * - 定義方法はg_gaugeSelObjと類似しており、ゲージ名プロパティがない以外はほぼ同じ構造。
+/** 
+ * 最終的に適用するゲージ設定値のサマリー
  */
-const g_gaugeHeaderObj = {};
+const g_gaugeResolvedObj = {};
 
 /** どの名前をどの順で選択肢に出すかだけを持つ。詳細値はg_gaugeDefObj、g_gaugeHeaderObj, g_gaugeSelObjを参照 */
 const g_gaugeOptionObj = {
@@ -1381,7 +1386,6 @@ const g_gaugeOptionObj = {
     customFulls: {},
     defaultPlusList: [`survival`, `border`, `customDefault`],
 };
-let g_gaugeType;
 
 const g_autoPlaysBase = [C_FLG_OFF, C_FLG_ALL];
 
@@ -1537,7 +1541,8 @@ const g_settings = {
     settingWindowNum: 0,
 
     preconditions: [`g_rootObj`, `g_headerObj`, `g_keyObj`, `g_scoreObj`, `g_workObj`,
-        `g_detailObj`, `g_stateObj`, `g_attrObj`, `g_gaugeDefObj`, `g_gaugeHeaderObj`, `g_gaugeSelObj`, `g_editorTmp`, `g_editorTmp2`],
+        `g_detailObj`, `g_stateObj`, `g_attrObj`,
+        `g_gaugeDefObj`, `g_gaugeHeaderObj`, `g_gaugeSelObj`, `g_gaugeResolvedObj`, `g_editorTmp`, `g_editorTmp2`],
     preconditionNum: 0,
     preconditionNumSub: 0,
 };
@@ -5336,6 +5341,7 @@ const g_root = {
     get g_gaugeDefObj() { return g_gaugeDefObj },
     get g_gaugeHeaderObj() { return g_gaugeHeaderObj },
     get g_gaugeSelObj() { return g_gaugeSelObj },
+    get g_gaugeResolvedObj() { return g_gaugeResolvedObj },
 };
 const getPathVal = _path => _path.split(`.`).reduce((o, k) => o?.[k], g_root);
 const setPathVal = (_path, _value) => {

package/js/lib/dosConverter.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/26 (v51.0.3)
+ * Revised : 2026/09/27 (v51.1.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -262,6 +262,10 @@ const initialControl = async () => {
 				getGaugeSetting(g_rootObj, gaugePtn, { scoreId: j }));
 		}
 	}
+	// g_loadObj.mainがfalseで上のブロックが丸ごとスキップされた場合でも、
+	// setGaugeが必ずg_gaugeResolvedObjを引けるよう毎回解決し直す
+	resolveGaugeValuesAll();
+
 	safeExecuteCustomHooks(`g_customJsObj.preTitle`, g_customJsObj.preTitle);
 	const queryMusicId = getQueryParamVal(`musicId`);
 	g_settings.musicIdxNum = queryMusicId !== null ? Number(queryMusicId) :
@@ -2068,7 +2072,7 @@ const resetCustomGauge = (_dosObj, { scoreId = 0 } = {}) => {
 
 	const scoreIdHeader = (scoreId === 0 && hasVal(_dosObj[`customGauge1`]))
 		? 1 : setScoreIdHeader(scoreId, g_stateObj.scoreLockFlg, false);
-	const dosCustomGauge = _dosObj[`customGauge${scoreIdHeader}`];
+	const dosCustomGauge = _dosObj[`customGauge${scoreIdHeader}`] ?? _dosObj.customGauge;
 	if (!hasVal(dosCustomGauge)) return;
 
 	g_gaugeSelObj[scoreId] = structuredClone(g_gaugeSelObj.default ?? { __order: [] });
@@ -2126,6 +2130,70 @@ const getGaugeSetting = (_dosObj, _name, { scoreId = 0 } = {}) => {
 	g_gaugeSelObj[scoreId][_name] = { ...g_gaugeSelObj[scoreId][_name], Border: border, Recovery: recovery, Damage: damage, Init: init };
 };
 
+/**
+ * 全ゲージ名の最終値（Border/Recovery/Damage/Init/Variable）を決定する関数
+ */
+const resolveGaugeValuesAll = () => {
+	for (let j = 0; j < g_headerObj.difLabels.length; j++) {
+		resolveGaugeValues(j);
+	}
+}
+
+/**
+ * (scoreId)単位で、その譜面の全ゲージ名の最終値（Border/Recovery/Damage/Init/Variable）を
+ * 事前に解決し、g_gaugeResolvedObj[scoreId]として保持する。
+ * カーソル位置には依存しない、譜面が決まれば決まる値なので、getGaugeSetting(j)の直後に1回だけ呼ぶ
+ * @param {number} _scoreId
+ */
+const resolveGaugeValues = (_scoreId) => {
+	const getGaugeCalc = (_val, _defaultVal) => setVal(convertStrToVal(
+		replaceStr(_val, g_escapeStr.gaugeParamName)?.split(`{0}`).join(_scoreId)
+	), _defaultVal, C_TYP_CALC);
+	const resolveBorder = (_border, _defaultVal) => (_border === `x` ? `x` : getGaugeCalc(_border, _defaultVal));
+
+	const currentGaugeSel = g_gaugeSelObj[_scoreId] || g_gaugeSelObj[0] || g_gaugeSelObj.default;
+	const header = g_gaugeHeaderObj[_scoreId];
+	const isCustom = currentGaugeSel?.__order?.length > 0;
+	const order = isCustom
+		? currentGaugeSel.__order
+		: g_gaugeOptionObj[header.Border === `x` ? `survival` : `border`];
+
+	// __order内で最初に出てくるheaderOverridable「系統」だけにdifDataを適用する（Light/EasyはOriginal/Normalの系統扱い）
+	const getGaugeRoot = _name => g_gaugeDefObj[_name]?.deriveRecoveryFrom ?? _name;
+	const firstOverridableRoot = getGaugeRoot(order.find(name => g_gaugeDefObj[name]?.headerOverridable));
+
+	const resolved = { __order: order.concat(), __custom: isCustom };
+	order.forEach(name => {
+		const def = g_gaugeDefObj[name] ?? {};
+
+		// Step1：基本設定（g_gaugeDefObj）をまず適用
+		const value = { Border: def.Border, Recovery: def.Recovery, Damage: def.Damage, Init: def.Init };
+
+		// Step2：譜面ヘッダー（headerOverridable、系統一致のみ）
+		if (def.headerOverridable && (!isCustom || getGaugeRoot(name) === firstOverridableRoot)) {
+			value.Border = resolveBorder(header.Border, value.Border);
+			value.Recovery = getGaugeCalc(header.Recovery, value.Recovery) * (hasVal(def.deriveRecoveryFrom) ? 2 : 1);
+			value.Damage = getGaugeCalc(header.Damage, value.Damage);
+			value.Init = getGaugeCalc(header.Init, value.Init);
+		}
+
+		// Step3：ゲージ個別設定（最優先）
+		const override = currentGaugeSel?.[name];
+		if (override?.Recovery !== undefined) {
+			if (hasVal(override.Border)) {
+				value.Border = resolveBorder(override.Border, value.Border);
+			}
+			value.Recovery = getGaugeCalc(override.Recovery, value.Recovery);
+			value.Damage = getGaugeCalc(override.Damage, value.Damage);
+			value.Init = getGaugeCalc(override.Init, value.Init);
+		}
+
+		value.Variable = override?.Variable ?? def.Variable ?? C_FLG_OFF;
+		resolved[name] = value;
+	});
+	g_gaugeResolvedObj[_scoreId] = resolved;
+};
+
 /**
  * 【参照用】g_gaugeOptionObjの旧プロパティを参照できるようにする関数
  * （initXXX/rcvXXX/dmgXXX/clearXXX/typeXXX/varXXX）
@@ -2162,11 +2230,21 @@ const restoreLegacyGaugeHeaderReference = () => {
 	})
 };
 
+/**
+ * 【反映用】カスタムスクリプトが旧形式で作った個別ゲージ設定の適用
+ * - g_gaugeOptionObj[`gauge${name}s`]（旧形式）で用意した各ゲージ名の個別設定を
+ * まとめてg_gaugeSelObjへ反映し、影響する全譜面分のg_gaugeResolvedObjを再計算する。
+ * - カスタムJS側はこの1関数を呼ぶだけでよく、applyLegacyGaugeOverride単体での呼び出しは不要
+ */
+const applyLegacyGaugeOverrides = () => {
+	Object.keys(g_gaugeOptionObj.customFulls).forEach(name => applyLegacyGaugeOverride(name));
+	resolveGaugeValuesAll();
+};
+
 /**
  * 【反映用】カスタムスクリプトが旧形式で作った個別ゲージ設定
  * - g_gaugeOptionObj[`gauge${_name}s`] = { lifeBorders, lifeRecoverys, lifeDamages, lifeInits }
  * （それぞれscoreId順の配列）を、新プロパティ g_gaugeSelObj[scoreId][_name] へ変換して反映する
- * - 本体からの呼び出しは無いため、カスタムスクリプト側で呼び出しする想定
  * @param {string} _name ゲージ名
  */
 const applyLegacyGaugeOverride = (_name) => {

package/js/lib/settings.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/25 (v51.0.2)
+ * Revised : 2026/09/29 (v51.1.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1421,15 +1421,16 @@ const setDifficulty = (_chartChangeFlg) => {
 			: g_autoPlaysBase.concat()
 	);
 
-	// ゲージ設定及びカーソル位置調整
-	setGauge(0, !g_initialFlg);
+	// ゲージ設定配列の入れ替え
+	g_settings.gauges = structuredClone(g_gaugeResolvedObj[scoreId].__order);
 
-	// 速度、スクロール、アシスト設定のカーソル位置調整
+	// 速度、スクロール、ゲージ、アシスト設定のカーソル位置調整
 	if (_chartChangeFlg) {
 		g_stateObj.speed = g_headerObj.initSpeeds[scoreId];
 		g_settings.speedNum = getCurrentNo(g_settings.speeds, g_stateObj.speed);
 	}
 	g_settings.scrollNum = getCurrentNo(g_settings.scrolls, g_stateObj.scroll);
+	g_settings.gaugeNum = (g_initialFlg ? getCurrentNo(g_settings.gauges, g_stateObj.gauge) : 0);
 	g_settings.autoPlayNum = getCurrentNo(g_settings.autoPlays, g_stateObj.autoPlay);
 
 
@@ -1493,6 +1494,11 @@ const setDifficulty = (_chartChangeFlg) => {
 		setSetting(0, `reverse`);
 	}
 
+	// ゲージ設定
+	g_stateObj.gauge = g_settings.gauges[g_settings.gaugeNum];
+	setSetting(0, `gauge`);
+	setGauge();
+
 	// オート・アシスト設定 (AutoPlay)
 	g_stateObj.autoPlay = g_settings.autoPlays[g_settings.autoPlayNum];
 	lnkAutoPlay.textContent = getStgDetailName(g_stateObj.autoPlay);
@@ -1845,35 +1851,22 @@ const createOptionWindow = _sprite => {
 	// ---------------------------------------------------
 	// ゲージ設定 (Gauge)
 	// 縦位置: 7.5
-	spriteList.gauge.appendChild(createLblSetting(`Gauge`));
-
-	// ゲージ設定詳細 縦位置: ゲージ設定+1
-	spriteList.gauge.appendChild(createDivCss2Label(`lblGauge2`, ``, g_lblPosObj.lblGauge2));
-
-	if (g_headerObj.gaugeUse) {
-		multiAppend(spriteList.gauge,
-			makeSettingLblCssButton(`lnkGauge`, ``, 0, () => setGauge(1), { cxtFunc: () => setGauge(-1) }),
-			makeMiniCssButton(`lnkGauge`, `R`, 0, () => setGauge(1)),
-			makeMiniCssButton(`lnkGauge`, `L`, 0, () => setGauge(-1)),
-		);
-		createScText(spriteList.gauge, `Gauge`);
-	} else {
-		lblGauge.classList.add(g_cssObj.settings_Disabled);
-		spriteList.gauge.appendChild(makeDisabledLabel(`lnkGauge`, 0, getStgDetailName(g_stateObj.gauge)));
-	}
+	createGeneralSetting(spriteList.gauge, `gauge`, {
+		addRFunc: () => setGauge(),
+	});
+	multiAppend(spriteList.gauge,
+		// ゲージ設定詳細 縦位置: ゲージ設定+1
+		createDivCss2Label(`lblGauge2`, ``, g_lblPosObj.lblGauge2),
 
-	// 空押し判定設定 (Excessive)
-	spriteList.gauge.appendChild(
+		// 空押し判定設定 (Excessive)
 		createDivCss2Label(`lblExcessive`, `${g_lblNameObj.Excessive}:${C_FLG_ON}`,
 			g_lblPosObj.lblExcessive, g_cssObj[`button_Disabled${C_FLG_ON}`]
-		)
-	);
-	spriteList.gauge.appendChild(
+		),
 		createCss2Button(`lnkExcessive`, g_lblNameObj.Excessive, evt => setExcessive(evt.target), {
 			...g_lblPosObj.btnExcessive,
 			title: g_msgObj.excessive, cxtFunc: evt => setExcessive(evt.target),
-		}, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.excessive}`])
-	);
+		}, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.excessive}`]),
+	)
 	createScText(lnkExcessive, `Excessive`, { x: -13, targetLabel: `lnkExcessive` });
 
 	// ---------------------------------------------------
@@ -2164,121 +2157,26 @@ const setReverseView = _btn => {
 	}
 };
 
-// ============================================================
-// ゲージ設定の適用パイプライン（wiki: ゲージ設定適用順仕様）
-// 優先度は「低→高」= 基本設定(g_gaugeDefObj) → 譜面ヘッダー(初期ゲージのみ) → ゲージ個別設定。
-// 下記のapply*/resolve*はsetGaugeから“この順番のまま”呼ばれ、後段が前段を上書きすることで
-// 優先度を表現する。順序の変更は仕様変更を意味する。
-// ============================================================
-
 /**
- * ゲージ設定メイン
- * @param {number} _scrollNum
+ * ゲージ設定切替後の設定処理
  */
-const setGauge = (() => {
-
-	const getGaugeCalc = (_val, _defaultVal) => setVal(convertStrToVal(
-		replaceStr(_val, g_escapeStr.gaugeParamName)?.split(`{0}`).join(g_stateObj.scoreId)
-	), _defaultVal, C_TYP_CALC);
-
-	/** Border値からライフ制／ノルマ制を切り替える */
-	const applyLifeModeSwitch = (_border) => {
-		if (_border === `x`) {
-			g_stateObj.lifeBorder = 0;
-			g_stateObj.lifeMode = C_LFE_SURVIVAL;
-		} else {
-			g_stateObj.lifeBorder = getGaugeCalc(_border, g_stateObj.lifeBorder);
-			g_stateObj.lifeMode = C_LFE_BORDER;
-		}
-	};
-
-	let currentGaugeSel = null;
-
-	const resolveCustomGaugeSel = () => {
-		currentGaugeSel = g_gaugeSelObj[g_stateObj.scoreId] || g_gaugeSelObj[0] || g_gaugeSelObj.default;
-	};
-
-	/**
-	 * 【Step1】ゲージ種別(g_gaugeType)を確定し、ゲージ配列とカーソル位置を入れ替える
-	 * @param {number} _scrollNum
-	 * @param {boolean} _gaugeInitFlg true時は前回選択していたゲージ名を引き継がず、配列の先頭を強制的に使う
-	 */
-	const resolveGaugeType = (_scrollNum, _gaugeInitFlg) => {
-		applyLifeModeSwitch(g_gaugeHeaderObj[g_stateObj.scoreId].Border);
-		g_gaugeType = (currentGaugeSel?.__order?.length > 0 ? C_LFE_CUSTOM : g_stateObj.lifeMode);
-
-		g_settings.gauges = structuredClone(g_gaugeType === C_LFE_CUSTOM
-			? currentGaugeSel.__order
-			: g_gaugeOptionObj[g_gaugeType.toLowerCase()]);
-		g_settings.gaugeNum = (_gaugeInitFlg ? 0 : getCurrentNo(g_settings.gauges, g_stateObj.gauge));
-		g_stateObj.gauge = g_settings.gauges[g_settings.gaugeNum];
-
-		setSetting(_scrollNum, `gauge`);
-		g_stateObj.lifeVariable = currentGaugeSel?.[g_stateObj.gauge]?.Variable
-			?? g_gaugeDefObj[g_stateObj.gauge]?.Variable
-			?? C_FLG_OFF;
-	};
-
-	/** 【Step2：基本設定】g_gaugeDefObjのカーソル位置に対応する初期設定を適用 */
-	const applyBaseGaugeSettings = () => {
-		const def = g_gaugeDefObj[g_stateObj.gauge];
-		if (!hasVal(def)) return;
-		g_stateObj.lifeMode = (def.Border === `x` ? C_LFE_SURVIVAL : C_LFE_BORDER);
-		g_stateObj.lifeBorder = (def.Border === `x` ? 0 : def.Border);
-		g_stateObj.lifeInit = def.Init;
-		g_stateObj.lifeRcv = def.Recovery;
-		g_stateObj.lifeDmg = def.Damage;
-	};
-
-	/** 【Step3：譜面ヘッダー】headerOverridable指定ゲージのみ、difData由来の値で上書き */
-	const applyHeaderGaugeSettings = () => {
-		const def = g_gaugeDefObj[g_stateObj.gauge];
-		if (!def?.headerOverridable) return;
-		if (g_gaugeType === C_LFE_CUSTOM) {
-			// カスタム選択でOriginal/Normal等headerOverridable対象が複数混在する場合、
-			// difDataは1つしか値を持たないため、選択順で最初に出てきた「系統」だけに適用する。
-			// Light/EasyはOriginal/Normalの系統として扱う（deriveRecoveryFromで判定）
-			const getGaugeRoot = _name => g_gaugeDefObj[_name]?.deriveRecoveryFrom ?? _name;
-			const firstOverridableRoot = getGaugeRoot(
-				g_settings.gauges.find(name => g_gaugeDefObj[name]?.headerOverridable)
-			);
-			if (getGaugeRoot(g_stateObj.gauge) !== firstOverridableRoot) return;
-		}
-		const header = g_gaugeHeaderObj[g_stateObj.scoreId];
-		applyLifeModeSwitch(header.Border);
-		g_stateObj.lifeInit = getGaugeCalc(header.Init, g_stateObj.lifeInit);
-		g_stateObj.lifeRcv = getGaugeCalc(header.Recovery, g_stateObj.lifeRcv)
-			* (hasVal(def.deriveRecoveryFrom) ? 2 : 1);
-		g_stateObj.lifeDmg = getGaugeCalc(header.Damage, g_stateObj.lifeDmg);
-	};
-
-	/**
-	 * 【Step4：ゲージ個別設定（最優先）】gaugeXXXで明示的に設定された値があれば上書き。
-	 * g_gaugeSelObj[scoreId][name]は既に単一譜面分の値なので、g_headerObj用の
-	 * applyLifeModeSwitch/applyLifeCategory（配列アクセス版）は使わず直接適用する
-	 */
-	const applyIndividualGaugeSettings = () => {
-		const override = currentGaugeSel?.[g_stateObj.gauge];
-		if (override?.Recovery === undefined) return; // gaugeXXXヘッダー由来の上書きが無い（overrideが無い/Variableのみの場合を含む）
-		if (hasVal(override.Border)) {
-			applyLifeModeSwitch(override.Border);
-		}
-		g_stateObj.lifeInit = getGaugeCalc(override.Init, g_stateObj.lifeInit);
-		g_stateObj.lifeRcv = getGaugeCalc(override.Recovery, g_stateObj.lifeRcv);
-		g_stateObj.lifeDmg = getGaugeCalc(override.Damage, g_stateObj.lifeDmg);
-	};
-
-	return (_scrollNum, _gaugeInitFlg = false) => {
-		resolveCustomGaugeSel();
-		resolveGaugeType(_scrollNum, _gaugeInitFlg);
-		applyBaseGaugeSettings();
-		applyHeaderGaugeSettings();
-		applyIndividualGaugeSettings();
-
-		lblGauge2.innerHTML = gaugeFormat(g_stateObj.lifeMode,
-			g_stateObj.lifeBorder, g_stateObj.lifeRcv, g_stateObj.lifeDmg, g_stateObj.lifeInit, g_stateObj.lifeVariable);
-	};
-})();
+const setGauge = () => {
+	const value = g_gaugeResolvedObj[g_stateObj.scoreId][g_stateObj.gauge];
+	g_stateObj.lifeMode = (value.Border === `x` ? C_LFE_SURVIVAL : C_LFE_BORDER);
+	g_stateObj.lifeBorder = (value.Border === `x` ? 0 : value.Border);
+	g_stateObj.lifeInit = value.Init;
+	g_stateObj.lifeRcv = value.Recovery;
+	g_stateObj.lifeDmg = value.Damage;
+	g_stateObj.lifeVariable = value.Variable;
+	gaugeFormat(
+		g_stateObj.lifeMode,
+		g_stateObj.lifeBorder,
+		g_stateObj.lifeRcv,
+		g_stateObj.lifeDmg,
+		g_stateObj.lifeInit,
+		g_stateObj.lifeVariable
+	);
+};
 
 /**
  * ゲージ設定の詳細表示を整形
@@ -2288,7 +2186,7 @@ const setGauge = (() => {
  * @param {number} _dmg 
  * @param {number} _init 
  * @param {string} _lifeValFlg 
- * @returns {string}
+ * @param {string} ゲージ詳細表示用のhtml（互換のため。利用なしでも作成される）
  */
 const gaugeFormat = (_mode, _border, _rcv, _dmg, _init, _lifeValFlg) => {
 	const initVal = g_headerObj.maxLifeVal * _init / 100;
@@ -2322,44 +2220,42 @@ const gaugeFormat = (_mode, _border, _rcv, _dmg, _init, _lifeValFlg) => {
 	const [rateText, allowableCntsText] = getAccuracy(borderVal, realRcv, realDmg, initVal, allCnt);
 	g_workObj.requiredAccuracy = rateText;
 
+	// createDiv が付与するインラインの配置・サイズ指定を解除し、CSSクラス側のレイアウトを使う
+	const reset = { position: ``, left: ``, top: ``, width: ``, height: `` };
+	const labelReset = { ...reset, fontSize: ``, fontFamily: ``, textAlign: `` };
+
 	// このテーブルのみpointer-eventsを有効にする（オンマウス許可）
-	return `<div id="gaugeDivCover" class="settings_gaugeDivCover" style="pointer-events: auto;">
-		<div id="lblGaugeDivTable" class="settings_gaugeDivTable">
-			<div id="lblGaugeStart" class="settings_gaugeDivTableCol settings_gaugeStart">
-				${g_lblNameObj.g_start}
-			</div>
-			<div id="lblGaugeBorder" class="settings_gaugeDivTableCol settings_gaugeEtc">
-				${g_lblNameObj.g_border}
-			</div>
-			<div id="lblGaugeRecovery" class="settings_gaugeDivTableCol settings_gaugeEtc">
-				${g_lblNameObj.g_recovery}
-			</div>
-			<div id="lblGaugeDamage" class="settings_gaugeDivTableCol settings_gaugeEtc">
-				${g_lblNameObj.g_damage}
-			</div>
-			<div id="lblGaugeRate" class="settings_gaugeDivTableCol settings_gaugeEtc">
-				${g_lblNameObj.g_rate}
-			</div>
-		</div>
-		<div id="dataGaugeDivTable" class="settings_gaugeDivTable">
-			<div id="dataGaugeStart" class="settings_gaugeDivTableCol settings_gaugeVal settings_gaugeStart">
-				${init}/${g_headerObj.maxLifeVal}
-			</div>
-			<div id="dataGaugeBorder" class="settings_gaugeDivTableCol settings_gaugeVal settings_gaugeEtc">
-				${borderText}
-			</div>
-			<div id="dataGaugeRecovery" class="settings_gaugeDivTableCol settings_gaugeVal settings_gaugeEtc">
-				${rcvText}
-			</div>
-			<div id="dataGaugeDamage" class="settings_gaugeDivTableCol settings_gaugeVal settings_gaugeEtc">
-				${dmgText}
-			</div>
-			<div id="dataGaugeRate" class="settings_gaugeDivTableCol settings_gaugeVal settings_gaugeEtc" style="line-height: 12px;">
-				${rateText}<br><span style="font-size: 10px;">${allowableCntsText}</span>
-			</div>
-		</div>
-	</div>
-	`;
+	deleteChildspriteAll(`lblGauge2`);
+	const cover = createEmptySprite(lblGauge2, `gaugeDivCover`,
+		{ ...reset, pointerEvents: C_DIS_AUTO }, `settings_gaugeDivCover`);
+
+	const cell = (_id, _text, _classes, _style = {}) =>
+		createDivCss2Label(_id, _text, { ...labelReset, ..._style }, `settings_gaugeDivTableCol`, ..._classes);
+
+	// ラベル行
+	const lblTable = createEmptySprite(cover, `lblGaugeDivTable`, reset, `settings_gaugeDivTable`);
+	const lblBaseClass = [`settings_gaugeEtc`];
+	multiAppend(lblTable,
+		cell(`lblGaugeStart`, g_lblNameObj.g_start, [`settings_gaugeStart`]),
+		cell(`lblGaugeBorder`, g_lblNameObj.g_border, lblBaseClass),
+		cell(`lblGaugeRecovery`, g_lblNameObj.g_recovery, lblBaseClass),
+		cell(`lblGaugeDamage`, g_lblNameObj.g_damage, lblBaseClass),
+		cell(`lblGaugeRate`, g_lblNameObj.g_rate, lblBaseClass),
+	)
+
+	// 値行
+	const dataTable = createEmptySprite(cover, `dataGaugeDivTable`, reset, `settings_gaugeDivTable`);
+	const dataBaseClass = [`settings_gaugeVal`, `settings_gaugeEtc`];
+	multiAppend(dataTable,
+		cell(`dataGaugeStart`, `${init}/${g_headerObj.maxLifeVal}`,
+			[`settings_gaugeVal`, `settings_gaugeStart`]),
+		cell(`dataGaugeBorder`, `${borderText}`, dataBaseClass),
+		cell(`dataGaugeRecovery`, `${rcvText}`, dataBaseClass),
+		cell(`dataGaugeDamage`, `${dmgText}`, dataBaseClass),
+		cell(`dataGaugeRate`, `${rateText}<br><span style="font-size: 10px;">${allowableCntsText}</span>`,
+			dataBaseClass, { lineHeight: `12px` }),
+	)
+	return lblGauge2.innerHTML;
 };
 
 /**

package/js/lib/title.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/23 (v51.0.0)
+ * Revised : 2026/09/29 (v51.1.1)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -471,46 +471,51 @@ const drawTitle = (_titleName = g_headerObj.musicTitleForView, _scoreId = ``) =>
 	// 変数 titlelineheight の定義 (使用例： |titlelineheight=50|)
 	const titlelineheight = (g_headerObj.titlelineheight !== `` ? g_headerObj.titlelineheight - (titlefontsize2 + 10) : 0);
 
-	const txtAnimations = [``, ``];
+	const txtAnimStyles = [{}, {}];
 	if (!g_headerObj.customTitleAnimationUse) {
-		for (let j = 0; j < txtAnimations.length; j++) {
-			txtAnimations[j] = `animation-name:${g_headerObj.titleAnimationName[j]};
-			animation-duration:${g_headerObj.titleAnimationDuration[j]}s;
-			animation-delay:${g_headerObj.titleAnimationDelay[j]}s;
-			animation-timing-function:${g_headerObj.titleAnimationTimingFunction[j]};`;
+		for (let j = 0; j < txtAnimStyles.length; j++) {
+			txtAnimStyles[j] = {
+				animationName: g_headerObj.titleAnimationName[j],
+				animationDuration: `${g_headerObj.titleAnimationDuration[j]}s`,
+				animationDelay: `${g_headerObj.titleAnimationDelay[j]}s`,
+				animationTimingFunction: g_headerObj.titleAnimationTimingFunction[j],
+			};
 		}
 	}
-	return createDivCss2Label(`lblmusicTitle`,
-		`<div id="lblmusicTitle1" style="
-			font-family:${g_headerObj.titlefonts[0]};
-			background: ${titlegrds[0]};
-			background-clip: text;
-			-webkit-background-clip: text;
-			color: rgba(255,255,255,0.0);
-			${txtAnimations[0]}
-		" class="${g_headerObj.titleAnimationClass[0]}">
-			${_titleName[0]}
-		</div>
-		<div id="lblmusicTitle2" style="
-			font-size:${wUnit(titlefontsize2)};
-			position:relative;left:${wUnit(g_headerObj.titlepos[1][0])};
-			top:${wUnit(g_headerObj.titlepos[1][1] + titlelineheight)};
-			font-family:${g_headerObj.titlefonts[1]};
-			background: ${titlegrds[1]};
-			background-clip: text;
-			-webkit-background-clip: text;
-			color: rgba(255,255,255,0.0);
-			${txtAnimations[1]}
-		" class="${g_headerObj.titleAnimationClass[1]}">
-			${_titleName[1] ?? ``}
-		</div>
-		`,
-		{
-			x: Number(g_headerObj.titlepos[0][0]), y: Number(g_headerObj.titlepos[0][1]),
-			w: g_sWidth, h: g_sHeight - 40, siz: titlefontsize1,
-			display: `flex`, flexDirection: `column`, justifyContent: `center`, alignItems: `center`,
-		}
-	);
+	const titleDiv = createDivCss2Label(`lblmusicTitle`, ``, {
+		x: Number(g_headerObj.titlepos[0][0]), y: Number(g_headerObj.titlepos[0][1]),
+		w: g_sWidth, h: g_sHeight - 40, siz: titlefontsize1,
+		display: `flex`, flexDirection: `column`, justifyContent: `center`, alignItems: `center`,
+	});
+
+	// createDivCss2Label が付与するインラインの配置・文字設定を解除する
+	const reset = { position: ``, left: ``, top: ``, width: ``, height: ``, fontSize: ``, textAlign: `` };
+	const gradStyle = {
+		backgroundClip: `text`, webkitBackgroundClip: `text`, color: `rgba(255,255,255,0.0)`,
+	};
+	// 空文字・スペース区切りの複数クラスに対応
+	const toClasses = _cls => (_cls ?? ``).split(` `).filter(Boolean);
+	multiAppend(titleDiv,
+		createDivCss2Label(`lblmusicTitle1`, `${_titleName[0]}`, {
+			...reset,
+			fontFamily: g_headerObj.titlefonts[0],
+			background: titlegrds[0],
+			...gradStyle,
+			...txtAnimStyles[0],
+		}, ...toClasses(g_headerObj.titleAnimationClass[0])),
+		createDivCss2Label(`lblmusicTitle2`, `${_titleName[1] ?? ``}`, {
+			...reset,
+			position: `relative`,
+			fontSize: wUnit(titlefontsize2),
+			left: wUnit(g_headerObj.titlepos[1][0]),
+			top: wUnit(g_headerObj.titlepos[1][1] + titlelineheight),
+			fontFamily: g_headerObj.titlefonts[1],
+			background: titlegrds[1],
+			...gradStyle,
+			...txtAnimStyles[1],
+		}, ...toClasses(g_headerObj.titleAnimationClass[1])),
+	)
+	return titleDiv;
 };
 
 /**
@@ -830,7 +835,7 @@ const changeMSelect = (_num, _initFlg = false) => {
 		if (j === 0) {
 		} else {
 			document.getElementById(`btnMusicSelect${j}`).style.fontSize =
-				getFontSize2(g_headerObj.musicTitles[idx].slice(0, limitedMLength), g_btnWidth(1 / 2));
+				wUnit(getFontSize2(g_headerObj.musicTitles[idx].slice(0, limitedMLength), g_btnWidth(1 / 2)));
 			document.getElementById(`btnMusicSelect${j}`).innerHTML =
 				`${g_headerObj.musicTitles[idx].slice(0, limitedMLength)}${g_headerObj.musicTitles[idx].length > limitedMLength ? '...' : ''}<br>` +
 				`<span style="font-size:0.7em;line-height:9px"> / ${g_headerObj.artistNames[idx]}</span>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "51.0.3",
+  "version": "51.1.1",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",