danoniplus 51.1.0 → 51.2.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/09/27
+ * Revised : 2026/10/03
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 51.1.0`;
-const g_revisedDate = `2026/09/27`;
+const g_version = `Ver 51.2.0`;
+const g_revisedDate = `2026/10/03`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -267,11 +267,7 @@ const g_workObj = {
 };
 
 // 歌詞制御
-let g_wordSprite;
-
 const g_wordObj = {
-	wordDir: 0,
-	wordDat: ``,
 	fadeInFlg0: false,
 	fadeInFlg1: false,
 	fadeOutFlg0: false,

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/09/27 (v51.1.0)
+ * Revised : 2026/10/03 (v51.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1386,7 +1386,6 @@ const g_gaugeOptionObj = {
     customFulls: {},
     defaultPlusList: [`survival`, `border`, `customDefault`],
 };
-let g_gaugeType;
 
 const g_autoPlaysBase = [C_FLG_OFF, C_FLG_ALL];
 
@@ -1581,6 +1580,29 @@ const g_transPriority = {
     scale: 200,
 };
 
+/**
+ * transform情報の連結
+ * - 優先度の降順 (同一優先度は登録順) で半角スペース区切りに連結
+ * - 要素数1・2 (矢印・フリーズアローの root / rootX) は配列生成・ソートを省略
+ * @param {Map} _transformMap
+ * @returns {string}
+ */
+const joinTransforms = _transformMap => {
+    if (_transformMap.size === 1) {
+        return _transformMap.values().next().value.transform;
+    }
+    if (_transformMap.size === 2) {
+        const it = _transformMap.values();
+        const a = it.next().value;
+        const b = it.next().value;
+        return b.priority > a.priority ? `${b.transform} ${a.transform}` : `${a.transform} ${b.transform}`;
+    }
+    return Array.from(_transformMap.values())
+        .sort((a, b) => b.priority - a.priority)
+        .map(v => v.transform)
+        .join(` `);
+};
+
 /**
  * idごとのtransformを追加・変更
  * - _transformIdごとに transform情報を管理
@@ -1590,14 +1612,18 @@ const g_transPriority = {
  * @param {number} [_priority=1000] transformの優先度（数値が小さいほど優先される。デフォルトは1000）
  */
 const addTransform = (_id, _transformId, _transform, _priority = 1000) => {
-    if (g_transforms[_id] === undefined) {
-        g_transforms[_id] = new Map();
+    let transforms = g_transforms[_id];
+    if (transforms === undefined) {
+        transforms = g_transforms[_id] = new Map();
     }
-    g_transforms[_id].set(_transformId, { transform: _transform, priority: _priority });
-    $id(_id).transform = Array.from(g_transforms[_id].values())
-        .sort((a, b) => b.priority - a.priority)
-        .map(v => v.transform)
-        .join(` `);
+    const current = transforms.get(_transformId);
+    if (current !== undefined && current.priority === _priority) {
+        // 既存エントリは値のみ更新 (登録順は変わらない)
+        current.transform = _transform;
+    } else {
+        transforms.set(_transformId, { transform: _transform, priority: _priority });
+    }
+    $id(_id).transform = joinTransforms(transforms);
 };
 
 /**
@@ -1606,17 +1632,15 @@ const addTransform = (_id, _transformId, _transform, _priority = 1000) => {
  * @param {string} _transformId 
  */
 const delTransform = (_id, _transformId) => {
-    if (g_transforms[_id]) {
-        g_transforms[_id].delete(_transformId);
-        if (g_transforms[_id].size === 0) {
+    const transforms = g_transforms[_id];
+    if (transforms) {
+        transforms.delete(_transformId);
+        if (transforms.size === 0) {
             delete g_transforms[_id];
             $id(_id).transform = ``;
             return;
         }
-        $id(_id).transform = Array.from(g_transforms[_id].values())
-            .sort((a, b) => b.priority - a.priority)
-            .map(v => v.transform)
-            .join(` `);
+        $id(_id).transform = joinTransforms(transforms);
     }
 };
 
@@ -1878,10 +1902,11 @@ const g_motionAlphaFunc = new Map([
 
 const motionAlphaToggle = (_obj, _property) => {
     const dir = (_property.y - _property.prevY) * _property.dir;
-    if (($id(_obj).opacity === ``) && dir > 0) {
-        $id(_obj).opacity = g_settings.motionAlpha;
-    } else if (Number($id(_obj).opacity) === g_settings.motionAlpha && dir < 0) {
-        $id(_obj).opacity = ``;
+    const style = $id(_obj);
+    if ((style.opacity === ``) && dir > 0) {
+        style.opacity = g_settings.motionAlpha;
+    } else if (Number(style.opacity) === g_settings.motionAlpha && dir < 0) {
+        style.opacity = ``;
     }
 };
 
@@ -5342,6 +5367,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/mainWindow.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/23 (v51.0.0)
+ * Revised : 2026/10/03 (v51.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -25,8 +25,6 @@ const mainInit = () => {
 
 	g_currentArrows = 0;
 	const wordMaxLen = g_scoreObj.wordMaxDepth + 1;
-	g_workObj.fadeInNo = fillArray(wordMaxLen);
-	g_workObj.fadeOutNo = fillArray(wordMaxLen);
 	g_workObj.lastFadeFrame = fillArray(wordMaxLen);
 	g_workObj.wordFadeFrame = fillArray(wordMaxLen);
 	const mainCommonPos = { w: g_headerObj.playingWidth, h: g_posObj.arrowHeight };
@@ -176,7 +174,6 @@ const mainInit = () => {
 	// 開始位置、楽曲再生位置の設定
 	const firstFrame = g_scoreObj.frameNum;
 	let musicStartFrame = firstFrame + g_headerObj.blankFrame;
-	const fadeFlgs = { fadein: [`In`, `Out`], fadeout: [`Out`, `In`] };
 	g_audio.volume = (firstFrame === 0 ? g_stateObj.volume / 100 : 0);
 
 	// 曲時間制御変数
@@ -675,7 +672,7 @@ const mainInit = () => {
 	const judgeObjDelete = {};
 	g_typeLists.arrow.forEach(type =>
 		judgeObjDelete[type] = (_j, _deleteName) => {
-			delTransform(_deleteName, `root`);
+			delete g_transforms[_deleteName];
 			g_workObj[`judg${toCapitalize(type)}Cnt`][_j]++;
 			document.getElementById(_deleteName).remove();
 			delete g_attrObj[_deleteName];
@@ -882,32 +879,60 @@ const mainInit = () => {
 	};
 
 	/**
-	 * 矢印生成
-	 * @param {object} _attrs 矢印個別の属性
+	 * 矢印・フリーズアロー種類別の処理関数
+	 * - AutoPlay設定(g_stateObj.autoAll)は譜面中に変わらないため、ここで解決しておき
+	 *   フレーム毎の文字列結合・プロパティ検索を避ける
+	 * - colorChangeKey: 全体色変化の判定キー (g_workObj[colorChangeKey][フレーム数])
+	 */
+	const objFuncs = {};
+	[`arrow`, `dummyArrow`].forEach(name => {
+		objFuncs[name] = {
+			colorChangeKey: `mk${toCapitalize(name)}ColorChangeAll`,
+			judgeMotion: judgeMotionFunc[`${name}${g_stateObj.autoAll}`],
+			judgeNext: judgeNextFunc[`${name}${g_stateObj.autoAll}`],
+		};
+	});
+	[`frz`, `dummyFrz`].forEach(name => {
+		objFuncs[name] = {
+			colorChangeKey: `mk${toCapitalize(name)}ColorChangeAll`,
+			judgeNext: judgeNextFunc[`${name}${g_stateObj.autoAll}`],
+			checkKeyUp: checkKeyUpFunc[`${name}${g_stateObj.autoAll}`],
+			judgeOK: judgeMotionFunc[`${name}OK`],
+			judgeNG: judgeMotionFunc[`${name}NG`],
+			judgeKeyUp: judgeMotionFunc[`${name}KeyUp`],
+			judgeDelete: judgeObjDelete[name],
+		};
+	});
+
+	/**
+	 * 全体色変化の実行
+	 * - 全体色変化があるフレームのみ処理を行う
+	 * @param {number} _j 
+	 * @param {number} _k 
+	 * @param {string} _name 矢印・フリーズアローの種類 (arrow, dummyArrow, frz, dummyFrz)
+	 * @param {string} _state Normal: 通常時, Hit: ヒット時 (フリーズアローのみ)
+	 */
+	const changeColorOnFrame = (_j, _k, _name, _state) => {
+		if (g_workObj[objFuncs[_name].colorChangeKey]?.[g_scoreObj.frameNum]) {
+			changeColorFunc[_name](_j, _k, _state);
+		}
+	};
+
+	/**
+	 * 矢印・フリーズアロー共通の属性情報の生成
+	 * - 初期表示位置(y)もここで算出する
+	 * @param {object} _attrs 矢印・フリーズアロー個別の属性
 	 *   (pos: 矢印種類, arrivalFrame: 到達フレーム数, initY: 初期表示位置, 
 	 *    initBoostY: Motion有効時の初期表示位置加算, motionFrame: アニメーション有効フレーム数)
-	 * @param {number} _arrowCnt 現在の判定矢印順
-	 * @param {string} _name 矢印名
-	 * @param {string} _color 矢印色
-	 * @param {string} _shadowColor 矢印塗りつぶし部分の色
+	 * @param {number} _j 矢印位置
+	 * @returns {object}
 	 */
-	const makeArrow = (_attrs, _arrowCnt, _name, _color, _shadowColor) => {
-		const _j = _attrs.pos;
+	const makeBaseAttr = (_attrs, _j) => {
 		const dividePos = g_workObj.dividePos[_j] % 2;
-		const colorPos = g_keyObj[`color${keyCtrlPtn}`][_j];
-
-		const arrowName = `${_name}${_j}_${_arrowCnt}`;
 		const stepY = C_STEP_Y + g_posObj.reverseStepY * dividePos;
 		const firstPosY = stepY + (_attrs.initY * _attrs.boostSpd +
 			_attrs.initBoostY * _attrs.boostDir) * g_workObj.scrollDir[_j];
-
-		const arrowRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], arrowName, {
-			x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH,
-		});
-		/**
-		 * 矢印毎の属性情報
-		 */
-		g_attrObj[arrowName] = {
+		return {
 			// 生存フレーム数
 			cnt: _attrs.arrivalFrame + 1,
 			// 生存フレーム数 (ストップ分除去、個別加速/Motionオプション用)
@@ -920,40 +945,105 @@ const mainInit = () => {
 			dir: g_workObj.scrollDir[_j],
 			// 個別加速方向 (1: 順方向加速, -1: 逆方向加速)
 			boostDir: _attrs.boostDir,
-			// 前フレーム時の位置 (判定で使用)
+			// 前フレーム時の位置 (判定、Motion適用中のアルファ値制御で使用)
 			prevY: firstPosY,
 			// 現フレーム時の位置
 			y: firstPosY,
 			// 移動ロックフラグ(矢印モーション設定後に再設定)
 			movLockFlg: false,
 		};
+	};
 
-		// 矢印色の設定
-		// - 枠/塗りつぶし色: g_attrObj[arrowName].Arrow / ArrowShadow
-		g_typeLists.arrowColor.forEach(val => g_attrObj[arrowName][`Arrow${val}`] = g_workObj[`${_name}${val}Colors`][_j]);
-
-		// g_attrObj定義後のカスタムイベント
-		safeExecuteCustomHooks(`g_customJsObj.preMakeArrow`, g_customJsObj.preMakeArrow, _attrs, arrowName, _name, _arrowCnt);
-
-		arrowSprite[g_workObj.dividePos[_j]].appendChild(arrowRoot);
-		const arrowSubRoot = createEmptySprite(arrowRoot, `sub${arrowName}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
-
+	/**
+	 * 矢印・フリーズアローのCSSモーション設定
+	 * @param {string} _name 矢印・フリーズアローの種類 (arrow, dummyArrow, frz, dummyFrz)
+	 * @param {number} _j 矢印位置
+	 * @param {number} _arrivalFrame 到達フレーム数
+	 * @param {HTMLDivElement} _subRoot 矢印・フリーズアローのサブルート
+	 * @param {HTMLDivElement[]} [_arrowRoots] フリーズアローの矢印部分のルート (開始矢印, 後発矢印)
+	 */
+	const setCssMotions = (_name, _j, _arrivalFrame, _subRoot, _arrowRoots = []) => {
+		const duration = `${_arrivalFrame / g_fps}s`;
 		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
-			arrowSubRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
-			arrowSubRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
+			_subRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
+			_subRoot.style.animationDuration = duration;
 		}
-		g_attrObj[arrowName].movLockFlg = g_workObj[`${_name}MovLock`][_j] || g_workObj.movLockEnabled;
+		if (_arrowRoots.length > 0 && g_workObj[`${_name}ArrowCssMotions`][_j] !== ``) {
+			_arrowRoots.forEach(obj => {
+				obj.classList.add(g_workObj[`${_name}ArrowCssMotions`][_j]);
+				obj.style.animationDuration = duration;
+			});
+		}
+	};
+
+	/**
+	 * 矢印・フリーズアローの初期位置設定
+	 * - 移動ロックフラグの確定、初期Y位置・X位置の設定を行う
+	 * @param {string} _objName 矢印・フリーズアローのオブジェクト名
+	 * @param {string} _name 矢印・フリーズアローの種類 (arrow, dummyArrow, frz, dummyFrz)
+	 * @param {number} _j 矢印位置
+	 * @param {number} _firstPosY 初期表示位置
+	 * @param {number} _dividePos ステップゾーン位置 (0: デフォルト, 1: リバース)
+	 */
+	const setInitArrowPos = (_objName, _name, _j, _firstPosY, _dividePos) => {
+		const stepY = C_STEP_Y + g_posObj.reverseStepY * _dividePos;
+		const movLockFlg = g_workObj[`${_name}MovLock`][_j] || g_workObj.movLockEnabled;
 		const initManualFlg = g_workObj[`${_name}InitManual`][_j] || g_workObj.initManualEnabled;
-		const setArrowYCondition = `${String(g_attrObj[arrowName].movLockFlg)}_${String(initManualFlg)}`;
-		setArrowY.get(setArrowYCondition)(arrowName, firstPosY, stepY);
+		g_attrObj[_objName].movLockFlg = movLockFlg;
+		setArrowY.get(`${String(movLockFlg)}_${String(initManualFlg)}`)(_objName, _firstPosY, stepY);
 		if (!initManualFlg) {
-			addTransform(arrowName, `rootX`, `translateX(${wUnit(g_workObj.stepX[_j])})`);
+			addTransform(_objName, `rootX`, `translateX(${wUnit(g_workObj.stepX[_j])})`);
+		}
+	};
+
+	/**
+	 * 矢印・フリーズアロー(移動中)の位置更新
+	 * - 個別加速・Motion、移動ロック、Motion適用中のアルファ値制御を含む
+	 * - 速度が0(ストップ中)のときは何もしない
+	 * @param {string} _objName 矢印・フリーズアローのオブジェクト名
+	 * @param {object} _attr g_attrObj[_objName]
+	 */
+	const updateArrowPos = (_objName, _attr) => {
+		if (g_workObj.currentSpeed === 0) {
+			return;
 		}
+		_attr.prevY = _attr.y;
+		_attr.y -= (g_workObj.currentSpeed * _attr.boostSpd +
+			(g_workObj.motionOnFrames[_attr.boostCnt] || 0) * _attr.boostDir) * _attr.dir;
+		movArrowY.get(_attr.movLockFlg)(_objName, _attr.y);
+		g_motionAlphaFunc.get(g_stateObj.motion)(_objName, _attr);
+		_attr.boostCnt--;
+	};
+
+	/**
+	 * 矢印属性情報の生成
+	 * @param {object} _attrs 矢印個別の属性
+	 * @param {string} _name 矢印名
+	 * @param {number} _j 矢印位置
+	 * @returns {object}
+	 */
+	const makeArrowAttr = (_attrs, _name, _j) => {
+		const attr = makeBaseAttr(_attrs, _j);
+
+		// 矢印色の設定
+		// - 枠/塗りつぶし色: attr.Arrow / ArrowShadow
+		g_typeLists.arrowColor.forEach(val => attr[`Arrow${val}`] = g_workObj[`${_name}${val}Colors`][_j]);
+		return attr;
+	};
+
+	/**
+	 * 矢印オブジェクトの生成
+	 * - 後で生成されたものが手前に表示されるため、塗りつぶし ⇒ 枠の順で作成
+	 * @param {HTMLDivElement} _arrowSubRoot 矢印のサブルート
+	 * @param {string} _name 矢印名
+	 * @param {number} _j 矢印位置
+	 * @param {number} _arrowCnt 現在の判定矢印順
+	 * @param {string} _color 矢印色
+	 * @param {string} _shadowColor 矢印塗りつぶし部分の色
+	 */
+	const makeArrowSprites = (_arrowSubRoot, _name, _j, _arrowCnt, _color, _shadowColor) => {
+		const colorPos = g_keyObj[`color${keyCtrlPtn}`][_j];
 
-		/**
-		 * 矢印オブジェクトの生成
-		 * - 後で生成されたものが手前に表示されるため、塗りつぶし ⇒ 枠の順で作成
-		 */
 		// 矢印の内側を塗りつぶすか否か
 		if (g_headerObj.setShadowColor[colorPos] !== ``) {
 			// 矢印 (塗りつぶし)
@@ -964,13 +1054,49 @@ const mainInit = () => {
 			if (_shadowColor === `Default`) {
 				arrShadow.style.opacity = 0.5;
 			}
-			arrowSubRoot.appendChild(arrShadow);
+			_arrowSubRoot.appendChild(arrShadow);
 		}
 
 		// 矢印 (枠)
-		arrowSubRoot.appendChild(createColorObject2(`${_name}Top${_j}_${_arrowCnt}`, {
+		_arrowSubRoot.appendChild(createColorObject2(`${_name}Top${_j}_${_arrowCnt}`, {
 			background: _color, rotate: g_workObj.arrowRtn[_j],
 		}));
+	};
+
+	/**
+	 * 矢印生成
+	 * @param {object} _attrs 矢印個別の属性
+	 *   (pos: 矢印種類, arrivalFrame: 到達フレーム数, initY: 初期表示位置, 
+	 *    initBoostY: Motion有効時の初期表示位置加算, motionFrame: アニメーション有効フレーム数)
+	 * @param {number} _arrowCnt 現在の判定矢印順
+	 * @param {string} _name 矢印名
+	 * @param {string} _color 矢印色
+	 * @param {string} _shadowColor 矢印塗りつぶし部分の色
+	 */
+	const makeArrow = (_attrs, _arrowCnt, _name, _color, _shadowColor) => {
+		const _j = _attrs.pos;
+		const arrowName = `${_name}${_j}_${_arrowCnt}`;
+
+		const arrowRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], arrowName, {
+			x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH,
+		});
+
+		// 矢印毎の属性情報
+		g_attrObj[arrowName] = makeArrowAttr(_attrs, _name, _j);
+
+		// 初期位置の設定用に、カスタムイベント実行前の値を保持
+		const { dividePos, y: firstPosY } = g_attrObj[arrowName];
+
+		// g_attrObj定義後のカスタムイベント
+		safeExecuteCustomHooks(`g_customJsObj.preMakeArrow`, g_customJsObj.preMakeArrow, _attrs, arrowName, _name, _arrowCnt);
+
+		arrowSprite[g_workObj.dividePos[_j]].appendChild(arrowRoot);
+		const arrowSubRoot = createEmptySprite(arrowRoot, `sub${arrowName}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+
+		setCssMotions(_name, _j, _attrs.arrivalFrame, arrowSubRoot);
+		setInitArrowPos(arrowName, _name, _j, firstPosY, dividePos);
+		makeArrowSprites(arrowSubRoot, _name, _j, _arrowCnt, _color, _shadowColor);
+
 		safeExecuteCustomHooks(`g_customJsObj.makeArrow`, g_customJsObj.makeArrow, _attrs, arrowName, _name, _arrowCnt);
 	};
 
@@ -983,22 +1109,109 @@ const mainInit = () => {
 	const movArrow = (_j, _k, _name) => {
 		const arrowName = `${_name}${_j}_${_k}`;
 		const currentArrow = g_attrObj[arrowName];
+		const funcs = objFuncs[_name];
 
 		// 全体色変化 (移動時)
-		changeColorFunc[_name](_j, _k);
+		changeColorOnFrame(_j, _k, _name);
 
 		// 移動
-		if (g_workObj.currentSpeed !== 0) {
-			const boostCnt = currentArrow.boostCnt;
-			currentArrow.prevY = currentArrow.y;
-			currentArrow.y -= (g_workObj.currentSpeed * currentArrow.boostSpd +
-				(g_workObj.motionOnFrames[boostCnt] || 0) * currentArrow.boostDir) * currentArrow.dir;
-			movArrowY.get(currentArrow.movLockFlg)(arrowName, currentArrow.y);
-			g_motionAlphaFunc.get(g_stateObj.motion)(arrowName, currentArrow);
-			currentArrow.boostCnt--;
-		}
-		judgeMotionFunc[`${_name}${g_stateObj.autoAll}`](_j, arrowName, --currentArrow.cnt);
-		judgeNextFunc[`${_name}${g_stateObj.autoAll}`](_j, _k, currentArrow.cnt);
+		updateArrowPos(arrowName, currentArrow);
+
+		funcs.judgeMotion(_j, arrowName, --currentArrow.cnt);
+		funcs.judgeNext(_j, _k, currentArrow.cnt);
+	};
+
+	/**
+	 * フリーズアロー属性情報の生成
+	 * @param {object} _attrs フリーズアロー個別の属性
+	 * @param {string} _name フリーズアロー名
+	 * @param {number} _j 矢印位置
+	 * @param {number} _firstBarLength 初期のフリーズアロー(帯)の長さ
+	 * @returns {object}
+	 */
+	const makeFrzAttr = (_attrs, _name, _j, _firstBarLength) => {
+		const attr = makeBaseAttr(_attrs, _j);
+		Object.assign(attr, {
+			// 判定終了フラグ (false: 未判定, true: 判定済)
+			judgEndFlg: false,
+			// 移動中フラグ (false: 押しっぱなしの状態, true: 移動中)
+			isMoving: true,
+			// フリーズアローの長さ
+			frzBarLength: _firstBarLength,
+			// キーを離していたフレーム数 (基準値超えでNG判定)
+			keyUpFrame: 0,
+			// フリーズアロー(帯)の相対位置
+			barY: C_ARW_WIDTH / 2 - _firstBarLength * attr.dividePos,
+			// フリーズアロー(対矢印)の相対位置
+			btmY: _firstBarLength * attr.dir,
+		});
+
+		// フリーズアロー色の設定
+		// - 通常時 (矢印枠/矢印塗りつぶし/帯): attr.Normal / NormalShadow / NormalBar
+		// - ヒット時 (矢印枠/矢印塗りつぶし/帯): attr.Hit / HitShadow / HitBar
+		// - ヒット時（矢印枠/矢印塗りつぶし/帯別の生成時全体色）: attr.HitAll / HitShadowAll / HitBarAll
+		g_typeLists.frzColor.forEach(val => {
+			attr[val] = g_workObj[`${_name}${val}Colors`][_j];
+			if (val.startsWith(`Hit`)) {
+				attr[`${val}All`] = g_workObj[`${_name}${val}ColorsAll`][_j];
+			}
+		});
+		return attr;
+	};
+
+	/**
+	 * フリーズアローオブジェクトの生成
+	 * @param {HTMLDivElement} _frzSubRoot フリーズアローのサブルート
+	 * @param {object} _attr フリーズアロー属性情報
+	 * @param {string} _frzNo 位置_順 (例: 0_1)
+	 * @param {string} _name フリーズアロー名
+	 * @param {number} _j 矢印位置
+	 * @param {number} _firstBarLength 初期のフリーズアロー(帯)の長さ
+	 * @param {object} _colors 色 (normal: 矢印, bar: 帯, shadow: 塗りつぶし)
+	 * @returns {{frzBar: HTMLDivElement, frzTopRoot: HTMLDivElement, frzBtmRoot: HTMLDivElement}}
+	 */
+	const makeFrzSprites = (_frzSubRoot, _attr, _frzNo, _name, _j, _firstBarLength, _colors) => {
+		const shadowColor = _colors.shadow === `Default` ? _colors.normal : _colors.shadow;
+		const rotate = g_workObj.frzArrowInitRtn[_j];
+
+		// フリーズアロー帯(frzBar)
+		const frzBar = createColorObject2(`${_name}Bar${_frzNo}`, {
+			x: 5, y: _attr.barY, w: C_ARW_WIDTH - 10, h: _firstBarLength, background: _colors.bar, styleName: `frzBar`,
+			opacity: 0.75,
+		});
+		multiAppend(_frzSubRoot, frzBar);
+
+		const frzTopRoot = createEmptySprite(_frzSubRoot, `${_name}TopRoot${_frzNo}`,
+			{ x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+		const frzBtmRoot = createEmptySprite(_frzSubRoot, `${_name}BtmRoot${_frzNo}`,
+			{ x: 0, y: _attr.btmY, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+
+		multiAppend(frzTopRoot,
+
+			// 開始矢印の塗り部分。ヒット時は前面に表示
+			createColorObject2(`${_name}TopShadow${_frzNo}`, {
+				background: shadowColor, rotate: rotate, styleName: `Shadow`,
+			}, g_cssObj.main_objShadow),
+
+			// 開始矢印。ヒット時は非表示
+			createColorObject2(`${_name}Top${_frzNo}`, {
+				background: _colors.normal, rotate: rotate,
+			}),
+		);
+
+		multiAppend(frzBtmRoot,
+
+			// 後発矢印の塗り部分
+			createColorObject2(`${_name}BtmShadow${_frzNo}`, {
+				background: shadowColor, rotate: rotate, styleName: `Shadow`,
+			}, g_cssObj.main_objShadow),
+
+			// 後発矢印
+			createColorObject2(`${_name}Btm${_frzNo}`, {
+				background: _colors.normal, rotate: rotate,
+			}),
+		);
+		return { frzBar, frzTopRoot, frzBtmRoot };
 	};
 
 	/**
@@ -1014,12 +1227,8 @@ const mainInit = () => {
 	 */
 	const makeFrzArrow = (_attrs, _arrowCnt, _name, _normalColor, _barColor, _shadowColor) => {
 		const _j = _attrs.pos;
-		const dividePos = g_workObj.dividePos[_j] % 2;
 		const frzNo = `${_j}_${_arrowCnt}`;
 		const frzName = `${_name}${frzNo}`;
-		const stepY = C_STEP_Y + g_posObj.reverseStepY * dividePos;
-		const firstPosY = stepY + (_attrs.initY * _attrs.boostSpd +
-			_attrs.initBoostY * _attrs.boostDir) * g_workObj.scrollDir[_j];
 		const firstBarLength = g_workObj[`mk${toCapitalize(_name)}Length`][_j][(_arrowCnt - 1) * 2] * _attrs.boostSpd;
 
 		const frzRoot = createEmptySprite(arrowSprite[g_workObj.dividePos[_j]], frzName, {
@@ -1031,120 +1240,106 @@ const mainInit = () => {
 			_barColor = `#00000000`;
 		}
 
-		/**
-		 * フリーズアロー毎の属性情報
-		 */
-		g_attrObj[frzName] = {
-			// 生存フレーム数
-			cnt: _attrs.arrivalFrame + 1,
-			// 生存フレーム数 (ストップ分除去、個別加速/Motionオプション用)
-			boostCnt: _attrs.motionFrame,
-			// 判定終了フラグ (false: 未判定, true: 判定済)
-			judgEndFlg: false,
-			// 移動中フラグ (false: 押しっぱなしの状態, true: 移動中)
-			isMoving: true,
-			// フリーズアローの長さ
-			frzBarLength: firstBarLength,
-			// キーを離していたフレーム数 (基準値超えでNG判定)
-			keyUpFrame: 0,
-			// 個別加速量
-			boostSpd: _attrs.boostSpd,
-			// ステップゾーン位置 (0: デフォルト, 1: リバース)
-			dividePos: dividePos,
-			// スクロール方向 (1: デフォルト, -1: リバース)
-			dir: g_workObj.scrollDir[_j],
-			// 個別加速方向 (1: 順方向加速, -1: 逆方向加速)
-			boostDir: _attrs.boostDir,
-			// 現フレーム時のフリーズアロー本体の位置
-			y: firstPosY,
-			// フリーズアロー(帯)の相対位置
-			barY: C_ARW_WIDTH / 2 - firstBarLength * dividePos,
-			// フリーズアロー(対矢印)の相対位置
-			btmY: firstBarLength * g_workObj.scrollDir[_j],
-			// 移動ロックフラグ(矢印モーション設定後に再設定)
-			movLockFlg: false,
-		};
+		// フリーズアロー毎の属性情報
+		g_attrObj[frzName] = makeFrzAttr(_attrs, _name, _j, firstBarLength);
+		const frzAttr = g_attrObj[frzName];
 
-		// フリーズアロー色の設定
-		// - 通常時 (矢印枠/矢印塗りつぶし/帯): g_attrObj[frzName].Normal / NormalShadow / NormalBar
-		// - ヒット時 (矢印枠/矢印塗りつぶし/帯): g_attrObj[frzName].Hit / HitShadow / HitBar
-		// - ヒット時（矢印枠/矢印塗りつぶし/帯別の生成時全体色）: g_attrObj[frzName].HitAll / HitShadowAll / HitBarAll
-		g_typeLists.frzColor.forEach(val => {
-			g_attrObj[frzName][val] = g_workObj[`${_name}${val}Colors`][_j];
-			if (val.startsWith(`Hit`)) {
-				g_attrObj[frzName][`${val}All`] = g_workObj[`${_name}${val}ColorsAll`][_j];
-			}
-		});
+		// 初期位置の設定用に、カスタムイベント実行前の値を保持
+		const { dividePos, y: firstPosY } = frzAttr;
 
 		// g_attrObj定義後のカスタムイベント
 		safeExecuteCustomHooks(`g_customJsObj.preMakeFrzArrow`, g_customJsObj.preMakeFrzArrow, _attrs, frzName, _name, _arrowCnt);
 
 		arrowSprite[g_workObj.dividePos[_j]].appendChild(frzRoot);
-		let shadowColor = _shadowColor === `Default` ? _normalColor : _shadowColor;
 		const frzSubRoot = createEmptySprite(frzRoot, `sub${frzName}`, { x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH + firstBarLength });
+		const { frzBar, frzTopRoot, frzBtmRoot } = makeFrzSprites(frzSubRoot, frzAttr, frzNo, _name, _j, firstBarLength,
+			{ normal: _normalColor, bar: _barColor, shadow: _shadowColor });
 
-		/**
-		 * フリーズアローオブジェクトの生成
-		 * - 後で生成されたものが手前に表示されるため、以下の順で作成
-		 */
-		multiAppend(frzSubRoot,
+		// ヒット中の描画更新(movFrzHolding)用に、帯・後発矢印の style を保持
+		frzAttr.barStyle = frzBar.style;
+		frzAttr.btmRootStyle = frzBtmRoot.style;
 
-			// フリーズアロー帯(frzBar)
-			createColorObject2(`${_name}Bar${frzNo}`, {
-				x: 5, y: g_attrObj[frzName].barY, w: C_ARW_WIDTH - 10, h: firstBarLength, background: _barColor, styleName: `frzBar`,
-				opacity: 0.75,
-			}),
-		);
-		const frzTopRoot = createEmptySprite(frzSubRoot, `${_name}TopRoot${frzNo}`,
-			{ x: 0, y: 0, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
-		const frzBtmRoot = createEmptySprite(frzSubRoot, `${_name}BtmRoot${frzNo}`,
-			{ x: 0, y: g_attrObj[frzName].btmY, w: C_ARW_WIDTH, h: C_ARW_WIDTH });
+		setCssMotions(_name, _j, _attrs.arrivalFrame, frzSubRoot, [frzTopRoot, frzBtmRoot]);
+		setInitArrowPos(frzName, _name, _j, firstPosY, dividePos);
 
-		multiAppend(frzTopRoot,
+		safeExecuteCustomHooks(`g_customJsObj.makeFrzArrow`, g_customJsObj.makeFrzArrow, _attrs, frzName, _name, _arrowCnt);
+	};
 
-			// 開始矢印の塗り部分。ヒット時は前面に表示
-			createColorObject2(`${_name}TopShadow${frzNo}`, {
-				background: shadowColor, rotate: g_workObj.frzArrowInitRtn[_j], styleName: `Shadow`,
-			}, g_cssObj.main_objShadow),
+	/**
+	 * フリーズアロー処理: 移動中 (未ヒット)
+	 * @param {number} _j 
+	 * @param {number} _k 
+	 * @param {string} _name 
+	 * @param {string} _frzName 
+	 * @param {object} _frz g_attrObj[_frzName]
+	 */
+	const movFrzMoving = (_j, _k, _name, _frzName, _frz) => {
 
-			// 開始矢印。ヒット時は非表示
-			createColorObject2(`${_name}Top${frzNo}`, {
-				background: _normalColor, rotate: g_workObj.frzArrowInitRtn[_j],
-			}),
-		);
+		// 全体色変化 (通常時)
+		changeColorOnFrame(_j, _k, _name, `Normal`);
 
-		multiAppend(frzBtmRoot,
+		// 移動
+		updateArrowPos(_frzName, _frz);
+		_frz.cnt--;
 
-			// 後発矢印の塗り部分
-			createColorObject2(`${_name}BtmShadow${frzNo}`, {
-				background: shadowColor, rotate: g_workObj.frzArrowInitRtn[_j], styleName: `Shadow`,
-			}, g_cssObj.main_objShadow),
+		// 次フリーズアローへ判定を移すかチェック
+		objFuncs[_name].judgeNext(_j, _k, _frz.cnt);
+	};
 
-			// 後発矢印
-			createColorObject2(`${_name}Btm${frzNo}`, {
-				background: _normalColor, rotate: g_workObj.frzArrowInitRtn[_j],
-			}),
+	/**
+	 * フリーズアロー処理: ヒット中 (押しっぱなし)
+	 * @param {number} _j 
+	 * @param {number} _k 
+	 * @param {string} _name 
+	 * @param {string} _frzName 
+	 * @param {object} _frz g_attrObj[_frzName]
+	 * @param {number} _movY 1フレームあたりの移動量
+	 */
+	const movFrzHolding = (_j, _k, _name, _frzName, _frz, _movY) => {
+		const funcs = objFuncs[_name];
 
-		);
-		if (g_workObj[`${_name}CssMotions`][_j] !== ``) {
-			frzSubRoot.classList.add(g_workObj[`${_name}CssMotions`][_j]);
-			frzSubRoot.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
+		// 全体色変化 (ヒット時)
+		changeColorOnFrame(_j, _k, _name, `Hit`);
+
+		if (_frz.frzBarLength <= 0) {
+			funcs.judgeOK(_j, _k, _frzName, _frz.cnt);
+			return;
 		}
-		if (g_workObj[`${_name}ArrowCssMotions`][_j] !== ``) {
-			[frzTopRoot, frzBtmRoot].forEach(obj => {
-				obj.classList.add(g_workObj[`${_name}ArrowCssMotions`][_j]);
-				obj.style.animationDuration = `${_attrs.arrivalFrame / g_fps}s`;
-			});
+
+		// 帯の短縮 (ストップ中は変化しないため描画更新を省略)
+		if (_movY !== 0) {
+			_frz.frzBarLength -= _movY * _frz.dir;
+			_frz.barY -= _movY * _frz.dividePos;
+			_frz.btmY -= _movY;
+
+			_frz.barStyle.height = wUnit(_frz.frzBarLength);
+			_frz.barStyle.top = wUnit(_frz.barY);
+			_frz.btmRootStyle.top = wUnit(_frz.btmY);
 		}
-		g_attrObj[frzName].movLockFlg = g_workObj[`${_name}MovLock`][_j] || g_workObj.movLockEnabled;
-		const initManualFlg = g_workObj[`${_name}InitManual`][_j] || g_workObj.initManualEnabled;
-		const setArrowYCondition = `${String(g_attrObj[frzName].movLockFlg)}_${String(initManualFlg)}`;
-		setArrowY.get(setArrowYCondition)(frzName, firstPosY, stepY);
-		if (!initManualFlg) {
-			addTransform(frzName, `rootX`, `translateX(${wUnit(g_workObj.stepX[_j])})`);
+
+		// キーを離したときの処理
+		if (!funcs.checkKeyUp(_j)) {
+			_frz.keyUpFrame++;
+			funcs.judgeKeyUp(_j, _k, _frzName, _frz.cnt);
 		}
+	};
 
-		safeExecuteCustomHooks(`g_customJsObj.makeFrzArrow`, g_customJsObj.makeFrzArrow, _attrs, frzName, _name, _arrowCnt);
+	/**
+	 * フリーズアロー処理: 判定終了後 (枠外へ流れるまで)
+	 * @param {number} _j 
+	 * @param {string} _name 
+	 * @param {string} _frzName 
+	 * @param {object} _frz g_attrObj[_frzName]
+	 * @param {number} _movY 1フレームあたりの移動量
+	 */
+	const movFrzEnded = (_j, _name, _frzName, _frz, _movY) => {
+		_frz.frzBarLength -= _movY * _frz.dir;
+		if (_frz.frzBarLength > 0) {
+			_frz.y -= _movY;
+			movArrowY.get(_frz.movLockFlg)(_frzName, _frz.y);
+		} else {
+			objFuncs[_name].judgeDelete(_j, _frzName);
+		}
 	};
 
 	/**
@@ -1154,65 +1349,99 @@ const mainInit = () => {
 	 * @param {string} _name 
 	 */
 	const movFrzArrow = (_j, _k, _name) => {
-		const frzNo = `${_j}_${_k}`;
-		const frzName = `${_name}${frzNo}`;
+		const frzName = `${_name}${_j}_${_k}`;
 		const currentFrz = g_attrObj[frzName];
 		const movY = g_workObj.currentSpeed * currentFrz.boostSpd * currentFrz.dir;
 
-		if (!currentFrz.judgEndFlg) {
-			if (currentFrz.isMoving) {
+		if (currentFrz.judgEndFlg) {
+			movFrzEnded(_j, _name, frzName, currentFrz, movY);
+			return;
+		}
 
-				// 全体色変化 (通常時)
-				changeColorFunc[_name](_j, _k, `Normal`);
+		if (currentFrz.isMoving) {
+			movFrzMoving(_j, _k, _name, frzName, currentFrz);
+		} else {
+			movFrzHolding(_j, _k, _name, frzName, currentFrz, movY);
+		}
 
-				// 移動
-				if (g_workObj.currentSpeed !== 0) {
-					currentFrz.prevY = currentFrz.y;
-					currentFrz.y -= movY + (g_workObj.motionOnFrames[currentFrz.boostCnt] || 0) * currentFrz.dir * currentFrz.boostDir;
-					movArrowY.get(currentFrz.movLockFlg)(frzName, currentFrz.y);
-					g_motionAlphaFunc.get(g_stateObj.motion)(frzName, currentFrz);
-					currentFrz.boostCnt--;
-				}
-				currentFrz.cnt--;
+		// フリーズアローが枠外に出たときの処理
+		objFuncs[_name].judgeNG(_j, _k, frzName, currentFrz.cnt);
+	};
 
-				// 次フリーズアローへ判定を移すかチェック
-				judgeNextFunc[`${_name}${g_stateObj.autoAll}`](_j, _k, currentFrz.cnt);
+	/**
+	 * 歌詞表示の更新
+	 * - 歌詞データは [深度, 歌詞 or 制御コマンド, (フェード時間フレーム)] の形式
+	 * - 制御コマンド: [fadein], [fadeout], [left], [center], [right], [fontSize=n]
+	 *   制御コマンド以外は歌詞として表示する
+	 * @param {Array} _wordData 歌詞データ
+	 * @param {number} _currentFrame 現在のフレーム数
+	 */
+	const updateWord = (_wordData, _currentFrame) => {
+		const [wordDir, wordDat, wordFadeFrame] = _wordData;
+		const wordDepth = Number(wordDir);
+		const targetId = `lblword${wordDepth}`;
+		const styWord = $id(targetId);
+
+		const wordFadeCmds = new Map([
+			[`[fadein]`, [`In`, `Out`]],
+			[`[fadeout]`, [`Out`, `In`]],
+		]);
+		const alignCmds = [`[left]`, `[center]`, `[right]`];
+
+		const fadeTypes = wordFadeCmds.get(wordDat);
+		if (fadeTypes !== undefined) {
+
+			// フェードイン・アウト開始（フェードイン中はフェードアウト処理を無効にする。その逆も同様）
+			const [onType, offType] = fadeTypes;
+			g_wordObj[`fade${onType}Flg${wordDepth}`] = true;
+			g_wordObj[`fade${offType}Flg${wordDepth}`] = false;
+
+			const animationName = `fade${onType}0`;
+			const isRepeatedFade =
+				styWord.animationName === animationName &&
+				g_workObj.lastFadeFrame[wordDepth] !== _currentFrame;
+
+			if (isRepeatedFade) {
+				styWord.animationName = `none`;
+
+				// 幅の読み取りにより、未反映のスタイル・レイアウトを更新する
+				// 幅の値そのものは使わない
+				void document.getElementById(targetId).offsetWidth;
+			}
+			styWord.animationName = animationName;
 
-			} else {
+			const fadeFrame = setIntVal(wordFadeFrame, C_WOD_FRAME);
+			g_workObj.lastFadeFrame[wordDepth] = _currentFrame;
+			g_workObj.wordFadeFrame[wordDepth] = fadeFrame;
 
-				// 全体色変化 (ヒット時)
-				changeColorFunc[_name](_j, _k, `Hit`);
+			styWord.animationDuration = `${fadeFrame / g_fps}s`;
+			styWord.animationTimingFunction = `linear`;
+			styWord.animationFillMode = `forwards`;
 
-				// フリーズアローがヒット中の処理
-				if (currentFrz.frzBarLength > 0) {
+		} else if (alignCmds.includes(wordDat)) {
 
-					currentFrz.frzBarLength -= movY * currentFrz.dir;
-					currentFrz.barY -= movY * currentFrz.dividePos;
-					currentFrz.btmY -= movY;
+			// 歌詞位置変更
+			styWord.textAlign = wordDat.slice(1, -1);
 
-					$id(`${_name}Bar${frzNo}`).height = wUnit(currentFrz.frzBarLength);
-					$id(`${_name}Bar${frzNo}`).top = wUnit(currentFrz.barY);
-					$id(`${_name}BtmRoot${frzNo}`).top = wUnit(currentFrz.btmY);
+		} else if (/\[fontSize=\d+\]/.test(wordDat)) {
 
-					if (!checkKeyUpFunc[`${_name}${g_stateObj.autoAll}`](_j)) {
-						currentFrz.keyUpFrame++;
-						judgeMotionFunc[`${_name}KeyUp`](_j, _k, frzName, currentFrz.cnt);
-					}
-				} else {
-					judgeMotionFunc[`${_name}OK`](_j, _k, frzName, currentFrz.cnt);
-				}
-			}
-			// フリーズアローが枠外に出たときの処理
-			judgeMotionFunc[`${_name}NG`](_j, _k, frzName, currentFrz.cnt);
+			// フォントサイズ変更
+			const fontSize = setIntVal(wordDat.match(/\d+/)[0], g_limitObj.mainSiz);
+			styWord.fontSize = wUnit(fontSize);
 
 		} else {
-			currentFrz.frzBarLength -= movY * currentFrz.dir;
-			if (currentFrz.frzBarLength > 0) {
-				currentFrz.y -= movY;
-				movArrowY.get(currentFrz.movLockFlg)(frzName, currentFrz.y);
-			} else {
-				judgeObjDelete[_name](_j, frzName);
+
+			// フェードイン・アウトが完了していれば、アニメーションを解除してから歌詞を表示
+			const fadeFinished = _currentFrame - g_workObj.lastFadeFrame[wordDepth] >= g_workObj.wordFadeFrame[wordDepth];
+			if (fadeFinished) {
+				[`Out`, `In`].forEach(type => {
+					if (g_wordObj[`fade${type}Flg${wordDepth}`]) {
+						styWord.animationName = `none`;
+						g_wordObj[`fade${type}Flg${wordDepth}`] = false;
+					}
+				});
 			}
+			document.getElementById(targetId).innerHTML = wordDat;
 		}
 	};
 
@@ -1365,52 +1594,7 @@ const mainInit = () => {
 		}
 
 		// 歌詞表示
-		g_scoreObj.wordData[currentFrame]?.forEach(tmpObj => {
-			g_wordObj.wordDir = tmpObj[0];
-			g_wordObj.wordDat = tmpObj[1];
-			g_wordSprite = document.getElementById(`lblword${g_wordObj.wordDir}`);
-
-			const wordDepth = Number(g_wordObj.wordDir);
-			if (g_wordObj.wordDat.substring(0, 5) === `[fade`) {
-
-				// フェードイン・アウト開始
-				const fkey = fadeFlgs[Object.keys(fadeFlgs).find(flg => g_wordObj.wordDat === `[${flg}]`)];
-				g_wordObj[`fade${fkey[0]}Flg${wordDepth}`] = true;
-				g_wordObj[`fade${fkey[1]}Flg${wordDepth}`] = false;
-				g_wordSprite.style.animationName =
-					`fade${fkey[0]}${(++g_workObj[`fade${fkey[0]}No`][wordDepth] % 2)}`;
-
-				g_workObj.lastFadeFrame[wordDepth] = currentFrame;
-				g_workObj.wordFadeFrame[wordDepth] = (tmpObj.length > 2 ?
-					setIntVal(tmpObj[2], C_WOD_FRAME) : C_WOD_FRAME);
-
-				g_wordSprite.style.animationDuration = `${g_workObj.wordFadeFrame[wordDepth] / g_fps}s`;
-				g_wordSprite.style.animationTimingFunction = `linear`;
-				g_wordSprite.style.animationFillMode = `forwards`;
-
-			} else if ([`[center]`, `[left]`, `[right]`].includes(g_wordObj.wordDat)) {
-
-				// 歌詞位置変更
-				g_wordSprite.style.textAlign = g_wordObj.wordDat.slice(1, -1);
-
-			} else if (/\[fontSize=\d+\]/.test(g_wordObj.wordDat)) {
-
-				// フォントサイズ変更
-				const fontSize = setIntVal(g_wordObj.wordDat.match(/\d+/)[0], g_limitObj.mainSiz);
-				g_wordSprite.style.fontSize = wUnit(fontSize);
-
-			} else {
-
-				// フェードイン・アウト処理後、表示する歌詞を表示
-				const fadingFlg = currentFrame - g_workObj.lastFadeFrame[wordDepth] >= g_workObj.wordFadeFrame[wordDepth];
-				[`Out`, `In`].filter(pattern => g_wordObj[`fade${pattern}Flg${g_wordObj.wordDir}`] && fadingFlg).forEach(pattern => {
-					g_wordSprite.style.animationName = `none`;
-					g_wordObj[`fade${pattern}Flg${g_wordObj.wordDir}`] = false;
-				});
-				g_workObj[`word${g_wordObj.wordDir}Data`] = g_wordObj.wordDat;
-				g_wordSprite.innerHTML = g_wordObj.wordDat;
-			}
-		});
+		g_scoreObj.wordData[currentFrame]?.forEach(wordData => updateWord(wordData, currentFrame));
 
 		// 判定キャラクタ消去
 		jdgGroups.forEach(jdg => {

package/js/lib/settings.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/27 (v51.1.0)
+ * 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,35 +2157,25 @@ const setReverseView = _btn => {
 	}
 };
 
-// ============================================================
-// ゲージ設定の適用パイプライン（wiki: ゲージ設定適用順仕様）
-// 優先度は「低→高」= 基本設定(g_gaugeDefObj) → 譜面ヘッダー(初期ゲージのみ) → ゲージ個別設定。
-// 下記のapply*/resolve*はsetGaugeから“この順番のまま”呼ばれ、後段が前段を上書きすることで
-// 優先度を表現する。順序の変更は仕様変更を意味する。
-// ============================================================
-
 /**
- * ゲージ設定メイン
- * @param {number} _scrollNum
+ * ゲージ設定切替後の設定処理
  */
-const setGauge = (_scrollNum, _gaugeInitFlg = false) => {
-	const resolved = g_gaugeResolvedObj[g_stateObj.scoreId];
-
-	g_settings.gauges = structuredClone(resolved.__order);
-	g_settings.gaugeNum = (_gaugeInitFlg ? 0 : getCurrentNo(g_settings.gauges, g_stateObj.gauge));
-	g_stateObj.gauge = g_settings.gauges[g_settings.gaugeNum];
-	setSetting(_scrollNum, `gauge`);
-
-	const value = resolved[g_stateObj.gauge];
+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;
-
-	lblGauge2.innerHTML = gaugeFormat(g_stateObj.lifeMode,
-		g_stateObj.lifeBorder, g_stateObj.lifeRcv, g_stateObj.lifeDmg, g_stateObj.lifeInit, g_stateObj.lifeVariable);
+	gaugeFormat(
+		g_stateObj.lifeMode,
+		g_stateObj.lifeBorder,
+		g_stateObj.lifeRcv,
+		g_stateObj.lifeDmg,
+		g_stateObj.lifeInit,
+		g_stateObj.lifeVariable
+	);
 };
 
 /**
@@ -2203,7 +2186,7 @@ const setGauge = (_scrollNum, _gaugeInitFlg = false) => {
  * @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;
@@ -2237,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.1.0",
+  "version": "51.2.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "jsdelivr": "./js/danoni_main.js",