danoniplus 51.2.2 → 51.4.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/10/07
+ * Revised : 2026/10/12
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 51.2.2`;
-const g_revisedDate = `2026/10/07`;
+const g_version = `Ver 51.4.0`;
+const g_revisedDate = `2026/10/12`;
 
 // カスタム用バージョン (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/10/03 (v51.2.0)
+ * Revised : 2026/10/12 (v51.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1406,7 +1406,7 @@ const g_settings = {
     },
     environments: [`adjustment`, `volume`, `colorType`, `appearance`, `opacity`, `hitPosition`,
         `arrowJdgX`, `arrowJdgY`, `frzJdgX`, `frzJdgY`, `shortcutX`, `shortcutY`],
-    keyStorages: [`reverse`, `keyCtrl`, `keyCtrlPtn`, `shuffle`, `color`, `stepRtn`],
+    keyStorages: [`reverse`, `keyCtrl`, `keyCtrlPtn`, `shuffle`, `color`, `stepRtn`, `shortcut`],
     colorStorages: [`setColor`, `setShadowColor`, `frzColor`, `frzShadowColor`],
 
     mSelectableTerms: 3,
@@ -1551,6 +1551,12 @@ g_settings.volumeNum = g_settings.volumes.length - 1;
 g_settings.bgmVolumeNum = roundZero(g_settings.volumes.findIndex(v => v === g_stateObj.bgmVolume));
 g_settings.opacityNum = g_settings.opacitys.length - 1;
 
+const g_settingWindowTitleKeys = new Map([
+    [optionInit, `Option`],
+    [settingsDisplayInit, `Display`],
+    [exSettingInit, `Settings`],
+]);
+
 /**
  * 設定画面間移動
  */
@@ -2353,6 +2359,9 @@ const g_keycons = {
     cursorNum: 0,
     keySwitchNum: 0,
     colorCursorNum: 0,
+
+    shortcutTypes: [`Retry`, `TitleBack`, `Pause`],
+    defaultShortCuts: { Retry: C_KEY_RETRY, TitleBack: C_KEY_TITLEBACK, Pause: C_KEY_PAUSE },
 };
 
 let g_displays = [`stepZone`, `judgment`, `lifeGauge`, `score`, `musicInfo`, `filterLine`,
@@ -2913,7 +2922,7 @@ const g_shortcutObj = {
         NumpadEnter: { id: `btnPlay` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnDisplay` },
+        Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
     difSelector: {
@@ -2948,7 +2957,7 @@ const g_shortcutObj = {
         NumpadEnter: { id: `lnkDifficulty` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnDisplay` },
+        Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
     scoreDetail: {
@@ -2997,7 +3006,7 @@ const g_shortcutObj = {
         NumpadEnter: { id: `btnPlay` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnDisplay` },
+        Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
     settingsDisplay: {
@@ -3094,7 +3103,7 @@ const g_shortcutObj = {
         NumpadEnter: { id: `btnPlay` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnSettings` },
+        Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
     displayPreview: {
@@ -3113,7 +3122,7 @@ const g_shortcutObj = {
         NumpadEnter: { id: `btnPlay` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnSettings` },
+        Tab: { id: `btnNextSetting` },
     },
     exSetting: {
         ShiftLeft_KeyP: { id: `lnkPlayWindowL` },
@@ -3154,7 +3163,7 @@ const g_shortcutObj = {
         Enter: { id: `btnPlay` },
         ShiftLeft_Tab: { id: `btnBack` },
         ShiftRight_Tab: { id: `btnBack` },
-        Tab: { id: `btnexSetting` },
+        Tab: { id: `btnNextSetting` },
         KeyU: { id: `btnSettingSummary` },
     },
     keyConfig: {
@@ -3217,11 +3226,11 @@ const g_btnPatterns = {
     title: { Start: 0, Comment: -10, MusicSelectRandom: -10 },
     dataMgt: { Back: 0, Environment: -35, Highscores: -35, CustomKey: -35, Others: -35 },
     precondition: { Back: 0 },
-    option: { Back: 0, KeyConfig: 0, Play: 0, Display: -5, Save: -10, Graph: -25, SettingSummary: -10 },
+    option: { Back: 0, KeyConfig: 0, Play: 0, NextSetting: -5, Save: -10, Graph: -25, SettingSummary: -10 },
     difSelector: {},
     scoreDetail: {},
-    settingsDisplay: { Back: 0, KeyConfig: 0, Play: 0, Save: -10, Settings: -5, SettingSummary: -10 },
-    exSetting: { Back: 0, KeyConfig: 0, Play: 0, exSetting: -5, Save: -10, SettingSummary: -10 },
+    settingsDisplay: { Back: 0, KeyConfig: 0, Play: 0, Save: -10, NextSetting: -5, SettingSummary: -10 },
+    exSetting: { Back: 0, KeyConfig: 0, Play: 0, NextSetting: -5, Save: -10, SettingSummary: -10 },
     loadingIos: { Play: 0 },
     keyConfig: { Back: -3, Play: 0 },
     result: { Back: -5, Copy: -5, Tweet: -5, Gitter: -5, Retry: 0, GaugeTransition: -15 },
@@ -4655,6 +4664,7 @@ const g_lblNameObj = {
     b_cReset: `Reset`,
     b_precond: `Precondition`,
     b_keyLock: `KeyLock`,
+    b_kbLane: `Group Color`,
 
     Difficulty: `Difficulty`,
     Speed: `Speed`,
@@ -5087,6 +5097,7 @@ const g_lang_msgObj = {
 
         graph: `譜面密度や速度変化状況、\n譜面の難易度などの情報を表示します。`,
         dataSave: `ハイスコア、リバース設定、\nキーコンフィグの保存の有無を設定します。`,
+        toOption: `譜面、速度、ゲージなどの基本設定を設定します。`,
         toDisplay: `プレイ画面上のオブジェクトの\n表示・非表示（一部透明度）を設定します。`,
         toSettings: `その他の拡張設定を設定します。`,
 
@@ -5197,6 +5208,7 @@ const g_lang_msgObj = {
 
         graph: `Displays detailed information about the chart, such as chart's density status, sequences' velocity changes, and chart's difficulty.`,
         dataSave: `Set whether to save the high score, reverse setting, and key config.`,
+        toOption: `Set basic settings such as chart, speed, and gauge.`,
         toDisplay: `Set the display or non-display (partial transparency) of objects on the play screen.`,
         toSettings: `Set other extended settings.`,
 

package/js/lib/dataLoader.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/10/07 (v51.2.2)
+ * Revised : 2026/10/10 (v51.3.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -2580,10 +2580,22 @@ const getArrowSettings = (_retryFlg = false) => {
 		storageObj[`keyCtrl${addKey}`] = setKeyCtrl(g_localKeyStorage, keyNum, keyCtrlPtn);
 		if (g_keyObj.currentPtn !== -1) {
 			storageObj[`keyCtrlPtn${addKey}`] = g_keyObj.currentPtn;
+			g_keyObj.storagePtn = g_keyObj.currentPtn;
 			g_keyCtrlBackup[keyCtrlPtn] = structuredClone(g_keyObj[`keyCtrl${keyCtrlPtn}`]);
 			g_keyObj[`keyCtrl${keyCtrlPtn}`] = structuredClone(g_keyObj[`keyCtrl${keyCtrlPtn}d`]);
 		}
 
+		// ショートカットキーの保存（基盤パターンのデフォルトと異なるものだけ）
+		const savedShortcut = {};
+		const isDefaultShortcut = _type => g_headerObj[`key${_type}`] === getDefaultShortcut(_type);
+		g_keycons.shortcutTypes.filter(type => !isDefaultShortcut(type))
+			.forEach(type => savedShortcut[type] = g_headerObj[`key${type}`]);
+		if (Object.keys(savedShortcut).length > 0) {
+			storageObj[`shortcut${addKey}`] = savedShortcut;
+		} else {
+			delete storageObj[`shortcut${addKey}`];
+		}
+
 		// カラーセットの保存（キー別）
 		if (!g_keycons.colorDefTypes.includes(g_colorType)) {
 

package/js/lib/dosConverter.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/27 (v51.1.0)
+ * Revised : 2026/10/12 (v51.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1182,13 +1182,10 @@ const headerConvert = _dosObj => {
 
 	// プレイ中のショートカットキー
 	obj.keyRetry = setIntVal(getKeyCtrlVal(_dosObj.keyRetry), C_KEY_RETRY);
-	obj.keyRetryDef = obj.keyRetry;
 	obj.keyRetryDef2 = obj.keyRetry;
 	obj.keyTitleBack = setIntVal(getKeyCtrlVal(_dosObj.keyTitleBack), C_KEY_TITLEBACK);
-	obj.keyTitleBackDef = obj.keyTitleBack;
 	obj.keyTitleBackDef2 = obj.keyTitleBack;
 	obj.keyPause = setIntVal(getKeyCtrlVal(_dosObj.keyPause), C_KEY_PAUSE);
-	obj.keyPauseDef = obj.keyPause;
 	obj.keyPauseDef2 = obj.keyPause;
 
 	// フリーズアローの許容フレーム数設定
@@ -1668,6 +1665,14 @@ const headerConvert = _dosObj => {
 	g_canDisabledSettings.forEach(option =>
 		obj[`${option}Use`] = setBoolVal(_dosObj[`${option}Use`] ?? g_presetObj.settingUse?.[option], true));
 
+	// 拡張機能の無効設定
+	if (!setBoolVal(_dosObj.displayWindowUse, true)) {
+		g_settings.settingWindows = g_settings.settingWindows.filter(option => option !== settingsDisplayInit);
+	}
+	if (!setBoolVal(_dosObj.exSettingWindowUse, true)) {
+		g_settings.settingWindows = g_settings.settingWindows.filter(option => option !== exSettingInit);
+	}
+
 	let interlockingErrorFlg = false;
 	g_displays.forEach((option, j) => {
 

package/js/lib/keyconfig.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/23 (v51.0.0)
+ * Revised : 2026/10/12 (v51.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -33,6 +33,7 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 	if (_initFlg) {
 		g_stateObj.keyLockFlg = false;
 		g_stateObj.kbPreviewFlg = false;
+		g_stateObj.kbLaneFlg = false;
 	}
 
 	multiAppend(divRoot,
@@ -400,6 +401,9 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 		viewGroup(_type);
 		if (_type === `stepRtn`) {
 			keyConfigInit(g_kcType);
+		} else if (_type === `color`) {
+			// カラーグループ変更時はレーン色分けプレビューへ反映
+			keyconfigKeyboardPreview.refresh();
 		}
 	};
 
@@ -480,6 +484,21 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 		viewGroup(_type);
 	};
 
+	/**
+	 * ショートカットキーボタンの表示更新
+	 * @param {string} _type Retry / TitleBack / Pause
+	 */
+	const updateScButton = _type => {
+		const siz = wUnit(getFontSize2(getScMsg[_type](), g_btnWidth(1 / 4) - 40, { maxSiz: g_limitObj.mainSiz }));
+		document.getElementById(`sc${_type}`).textContent = getScMsg[_type]();
+		document.getElementById(`sc${_type}`).style.fontSize = siz;
+		if (g_isMac) {
+			scTitleBack.textContent = getScMsg.TitleBack();
+			scTitleBack.style.fontSize = wUnit(getFontSize2(getScMsg.TitleBack(), g_btnWidth(1 / 4) - 40, { maxSiz: g_limitObj.mainSiz }));
+		}
+		changeConfigColor(document.getElementById(`sc${_type}`), getScButtonColor(_type));
+	};
+
 	const kcSubX = parseFloat(keyconSprite.style.width) * ((1 - g_keyObj.scale) / 4);
 	const kcSubY = parseFloat(keyconSprite.style.height) / ((1 + g_keyObj.scale) / 2) - parseFloat(keyconSprite.style.height);
 	multiAppend(divRoot,
@@ -494,27 +513,21 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 				cursor.style.top = wUnit(g_sHeight - 160 + kcSubY);
 				selectedKc = `TitleBack`;
 			}
-		}, g_lblPosObj.scTitleBack, g_cssObj.button_Default_NoColor,
-			g_headerObj.keyTitleBack === g_headerObj.keyTitleBackDef2 ?
-				g_cssObj.title_base : g_cssObj.keyconfig_Changekey),
+		}, g_lblPosObj.scTitleBack, g_cssObj.button_Default_NoColor, getScButtonColor(`TitleBack`)),
 
 		// リトライのショートカットキー変更
 		createCss2Button(`scRetry`, getScMsg.Retry(), () => {
 			cursor.style.left = wUnit(g_btnX(1 / 2) + kcSubX);
 			cursor.style.top = wUnit(g_sHeight - 160 + kcSubY);
 			selectedKc = `Retry`;
-		}, g_lblPosObj.scRetry, g_cssObj.button_Default_NoColor,
-			g_headerObj.keyRetry === g_headerObj.keyRetryDef2 ?
-				g_cssObj.title_base : g_cssObj.keyconfig_Changekey),
+		}, g_lblPosObj.scRetry, g_cssObj.button_Default_NoColor, getScButtonColor(`Retry`)),
 
 		// ポーズのショートカットキー変更
 		createCss2Button(`scPause`, getScMsg.Pause(), () => {
 			cursor.style.left = wUnit(g_btnX(3 / 4) + kcSubX);
 			cursor.style.top = wUnit(g_sHeight - 160 + kcSubY);
 			selectedKc = `Pause`;
-		}, g_lblPosObj.scPause, g_cssObj.button_Default_NoColor,
-			g_headerObj.keyPause === g_headerObj.keyPauseDef2 ?
-				g_cssObj.title_base : g_cssObj.keyconfig_Changekey),
+		}, g_lblPosObj.scPause, g_cssObj.button_Default_NoColor, getScButtonColor(`Pause`)),
 
 		// 別キーモード警告メッセージ
 		createDivCss2Label(
@@ -571,6 +584,11 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 
 		// 次の位置が見えなくなったらkeyconSpriteの位置を調整する
 		adjustScrollPoint(nextLeft);
+
+		// レーン色分けプレビュー中はカーソルレーンの強調を更新
+		if (g_stateObj.kbLaneFlg) {
+			keyconfigKeyboardPreview.refresh();
+		}
 	};
 
 	/**
@@ -973,6 +991,10 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 						changeKeyConfigColor(j, k, g_keyObj.currentPtn === -1 ? g_cssObj.keyconfig_Defaultkey : g_cssObj.title_base);
 					}
 				}
+				g_keycons.shortcutTypes.forEach(type => {
+					g_headerObj[`key${type}`] = getDefaultShortcut(type);
+					updateScButton(type);
+				});
 				changeConfigCursor(0);
 			}
 		}, g_lblPosObj.btnKcReset, g_cssObj.button_Reset),
@@ -1035,17 +1057,7 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 			}
 			// プレイ中ショートカットキー変更
 			g_headerObj[`key${selectedKc}`] = setKey;
-			g_headerObj[`key${selectedKc}Def`] = setKey;
-			document.getElementById(`sc${selectedKc}`).textContent = getScMsg[selectedKc]();
-			document.getElementById(`sc${selectedKc}`).style.fontSize =
-				wUnit(getFontSize2(getScMsg[selectedKc](), g_btnWidth(1 / 4) - 40, { maxSiz: g_limitObj.mainSiz }));
-			if (g_isMac) {
-				scTitleBack.textContent = getScMsg.TitleBack();
-				scTitleBack.style.fontSize = wUnit(getFontSize2(getScMsg.TitleBack(), g_btnWidth(1 / 4) - 40, { maxSiz: g_limitObj.mainSiz }));
-			}
-			changeConfigColor(document.getElementById(`sc${selectedKc}`),
-				g_headerObj[`key${selectedKc}`] === g_headerObj[`key${selectedKc}Def2`] ?
-					g_cssObj.title_base : g_cssObj.keyconfig_Changekey);
+			updateScButton(selectedKc);
 			return;
 		}
 
@@ -1131,6 +1143,61 @@ const completeTransKeyPtn = (_keyList) => {
 	});
 };
 
+/**
+ * 別キーモード時、移行先キーが保持するSelf保存パターンの取得可否チェック
+ * @param {string} _keyCtrlPtn 例: "7_2"
+ * @returns {number[][]|undefined} 適用可能な場合はSelf保存済みkeyCtrl配列、不可ならundefined
+ */
+const getTransKeySelfCtrl = (_keyCtrlPtn) => {
+	const transKeyName = g_keyObj[`transKey${_keyCtrlPtn}`];
+	const transKeyPtn = g_keyObj[`transKeyPtn${_keyCtrlPtn}`];
+	if (!hasVal(transKeyName) || transKeyPtn === undefined) {
+		return undefined;
+	}
+	const [storageObj, addKey] = getKeyStorageObjByName(transKeyName);
+	const savedCtrl = storageObj[`keyCtrl${addKey}`];
+	const savedPtn = storageObj[`keyCtrlPtn${addKey}`];
+
+	if (savedPtn !== transKeyPtn) {
+		return undefined;
+	}
+
+	// 現在のキー配置(基準形状)とレーン数・各レーン長が完全一致することを確認
+	const baseCtrl = g_keyObj[`keyCtrl${_keyCtrlPtn}`];
+	const isValidShape = hasArrayList(savedCtrl, baseCtrl.length) &&
+		savedCtrl.length === baseCtrl.length &&
+		baseCtrl.every((lane, j) => hasArrayList(savedCtrl[j], lane.length) && savedCtrl[j].length === lane.length);
+
+	return isValidShape ? savedCtrl : undefined;
+};
+
+/**
+ * 別キーモードの移行先Selfパターンを現在のキー配置へ反映（保存はしない）
+ */
+const applyTransKeySelfPattern = () => {
+	const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
+	const savedCtrl = getTransKeySelfCtrl(keyCtrlPtn);
+	if (savedCtrl === undefined) {
+		return;
+	}
+	const baseKeyNum = g_keyObj[`${g_keyObj.defaultProp}${keyCtrlPtn}`].length;
+	for (let j = 0; j < baseKeyNum; j++) {
+		for (let k = 0; k < (savedCtrl[j]?.length ?? 0); k++) {
+			g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setIntVal(savedCtrl[j][k], 0);
+		}
+	}
+	// ショートカットも取込元の保存内容で上書き（レーンキーと重複するものは無視）
+	const [storageObj, addKey] = getKeyStorageObjByName(g_keyObj[`transKey${keyCtrlPtn}`]);
+	const savedShortcut = storageObj[`shortcut${addKey}`] ?? {};
+	const usedKeys = g_keyObj[`keyCtrl${keyCtrlPtn}`].flat();
+	g_keycons.shortcutTypes.forEach(type => {
+		const savedKey = savedShortcut[type];
+		g_headerObj[`key${type}`] = (savedKey !== undefined && !usedKeys.includes(savedKey))
+			? savedKey : getDefaultShortcut(type);
+	});
+	keyConfigInit();
+};
+
 // KeyLockボタンを押したときの表示切替
 const toggleKcDesc = () => {
 	if (document.getElementById(`kcDesc`) !== null) {
@@ -1152,6 +1219,44 @@ const getKcDescMsg = () =>
 const getKeyLockName = () =>
 	`${g_lblNameObj.b_keyLock}${g_stateObj.keyLockFlg ? g_emojiObj.locked : g_emojiObj.unlocked}`;
 
+/** 保存・Self時に基準とするキーパターン番号 */
+const getBasePtn = () => g_keyObj.currentPtn === -1 ? g_keyObj.storagePtn : g_keyObj.currentPtn;
+
+/**
+ * ショートカットキーのデフォルト値（基盤パターン基準）
+ * 優先順: ヘッダー指定 > パターン別定義(keyRetryX_Y等) > 定数
+ * @params {string} _type Retry / TitleBack / Pause
+ * @returns {number}
+ */
+const getDefaultShortcut = _type => {
+	const baseVal = g_keycons.defaultShortCuts[_type];
+	const headerVal = g_headerObj[`key${_type}Def2`];
+	if (headerVal !== baseVal) {
+		return headerVal;
+	}
+	return setIntVal(getKeyCtrlVal(g_keyObj[`key${_type}${g_keyObj.currentKey}_${getBasePtn()}`]), headerVal);
+};
+
+/**
+ * ショートカットキーボタンの色クラスを取得
+ * - ロード済みの保存値(Self)と同じ: Defaultkey
+ * - 基準値(保存値 or パターンのデフォルト)と違う: Changekey
+ * - 通常パターンでデフォルトのまま: title_base
+ * @param {string} _type Retry / TitleBack / Pause
+ * @returns {string}
+ */
+const getScButtonColor = _type => {
+	const current = g_headerObj[`key${_type}`];
+	const loaded = g_keyObj.currentPtn === -1
+		? g_keyObj[`shortcut${g_keyObj.currentKey}_-1`]?.[_type] : undefined;
+
+	// ロード済みの保存値のまま
+	if (loaded !== undefined && current === loaded) {
+		return g_cssObj.keyconfig_Defaultkey;
+	}
+	// 本当のデフォルト(BackSpace/Delete/Pause)と違う場合は、変更の経緯を問わずChangekey
+	return current !== g_keycons.defaultShortCuts[_type] ? g_cssObj.keyconfig_Changekey : g_cssObj.title_base;
+};
 /**
  * キーボードレイアウトプレビュー（Canvas版）
  *
@@ -1215,11 +1320,22 @@ const keyconfigKeyboardPreview = (() => {
 		},
 		bgFill: `#0d0d1a`,        // Canvas 背景
 		legendText: `#cccccc`,    // 凡例テキスト
+
+		// レーン色分けモード用（凡例と文字色。レーン色自体は g_dfColorObj.setColorType2 を使用）
+		// 枠線は未割当キーと同色に統一し、メイン/代替は塗りのアルファのみで区別する
+		laneMain: { fill: `#cccccc`, stroke: `#555577` },
+		laneAlt: { fill: `rgba(204,204,204,0.35)`, stroke: `#555577` },
+		laneAltBright: { fill: `rgba(204,204,204,0.6)`, stroke: `#555577` },
+		laneStroke: `#555577`,
+		laneText: `#111111`,
 	};
 
 	// 凡例エリアの高さ
 	const LEGEND_H = 25;
 
+	// レーン色分けモードで、同一キーに割り当てられた色を分割描画する上限数
+	const C_LANE_SPLIT_MAX = 3;
+
 	// -------------------------------------------------------------------------
 	// キーレイアウト定義
 	//
@@ -1379,6 +1495,7 @@ const keyconfigKeyboardPreview = (() => {
 		mappedSet: new Set(),     // メインキー（code文字列）
 		altSet: new Set(),        // 代替キー（code文字列）
 		shortcutSet: new Set(),   // ショートカットキー（code文字列）
+		laneMap: new Map(),       // code文字列 → { entries: [{ colorPos, alt }], cursor: boolean }
 		canvasBase: null,
 		canvasMap: null,
 		keyDataList: [],          // { code, x, y, w, h, label } — drawMap で照合するキャッシュ
@@ -1524,13 +1641,16 @@ const keyconfigKeyboardPreview = (() => {
 	 * @param {Object} keyData - 位置・サイズ・キーコードを含むキー情報
 	 * @param {Object} style   - fill, stroke, text 等の色セット
 	 * @param {number} lw      - 枠線の太さ(lineWidth)
+	 * @param {boolean} shapeFlg - 枠線・背景を描画するかどうか（false の場合はテキストのみ描画）
 	 */
-	const drawOneKey = (ctx, { keyData, style, lw = 1 }) => {
+	const drawOneKey = (ctx, { keyData, style, lw = 1, shapeFlg = true }) => {
 		const { x, y, w: keyW, h: keyH, code, label } = keyData;
 
 		// 1. キーの枠線・背景を描画
-		roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
-		fillStrokeShape(ctx, { fill: style.fill, stroke: style.stroke, lineWidth: lw });
+		if (shapeFlg) {
+			roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
+			fillStrokeShape(ctx, { fill: style.fill, stroke: style.stroke, lineWidth: lw });
+		}
 
 		// 2. キー内部のテキスト（メイン・サブ）を描画
 		const [primary, sub] = getKeyLabels(code, label);
@@ -1648,9 +1768,13 @@ const keyconfigKeyboardPreview = (() => {
 
 		const legends = [
 			{ style: C_COLOR.normal, label: g_lblNameObj.unallocated },
-			{ style: C_COLOR.mapped, label: g_lblNameObj.allocated },
-			{ style: C_COLOR.alt, label: g_lblNameObj.altAllocated },
-			{ style: C_COLOR.shortcut, label: g_lblNameObj.shortcutKey }
+			{ style: g_stateObj.kbLaneFlg ? C_COLOR.laneMain : C_COLOR.mapped, label: g_lblNameObj.allocated },
+			{
+				style: g_stateObj.kbLaneFlg
+					? (g_headerObj.baseBrightFlg ? C_COLOR.laneAltBright : C_COLOR.laneAlt) : C_COLOR.alt,
+				label: g_lblNameObj.altAllocated,
+			},
+			{ style: C_COLOR.shortcut, label: g_lblNameObj.shortcutKey },
 		];
 
 		let lx = 8;
@@ -1665,6 +1789,111 @@ const keyconfigKeyboardPreview = (() => {
 		});
 	};
 
+	/**
+	 * 明度が低い色を、未割当キーと区別できる下限まで持ち上げる
+	 * @param {string} _hex #rrggbb 形式の色
+	 * @param {number} _minLum 下限値（RGBの最大成分で判定）
+	 * @returns {string}
+	 */
+	const liftDarkColor = (_hex, _minLum = 0x66) => {
+		const n = parseInt(_hex.slice(1, 7), 16);
+		const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+		const lum = Math.max(r, g, b);
+		if (lum >= _minLum) {
+			return _hex;
+		}
+		const d = _minLum - lum;
+		return `#${[r, g, b].map(v => (v + d).toString(16).padStart(2, `0`)).join(``)}`;
+	};
+
+	/**
+	 * #rrggbb 形式の色にアルファ値を付与する
+	 * @param {string} _hex
+	 * @param {number} _alpha
+	 * @returns {string}
+	 */
+	const hexToRgba = (_hex, _alpha) => {
+		const n = parseInt(_hex.slice(1, 7), 16);
+		return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${_alpha})`;
+	};
+
+	/**
+	 * レーン色分けモードのスタイル取得（色は譜面ミニマップと同じ setColorType2 固定）
+	 * @param {number} _colorPos カラーグループ番号
+	 * @param {boolean} _altFlg 代替キーか
+	 */
+	const getLaneStyle = (_colorPos, _altFlg) => {
+		const brightFlg = g_headerObj.baseBrightFlg;
+		const baseColor = g_dfColorObj.setColorType2[_colorPos] ?? `#ffffff`;
+
+		// 明背景のみ、黒に近い色を未割当キーと区別できる明るさまで持ち上げる
+		const color = brightFlg ? liftDarkColor(baseColor) : baseColor;
+		// 明背景では暗色セットが使われるため、文字は白にする
+		const mainText = brightFlg ? `#ffffff` : C_COLOR.laneText;
+		if (!_altFlg) {
+			return { fill: color, text: mainText };
+		}
+		return brightFlg
+			? { fill: hexToRgba(color, 0.6), text: `#ffffff` }
+			: { fill: hexToRgba(color, 0.35), text: color };
+	};
+
+	/**
+	 * レーン色分けモードでの単一キー描画
+	 * - 複数色の場合は縦方向に等分割して塗り分ける
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {Object} keyData
+	 * @param {{colorPos: number, alt: boolean}[]} entries
+	 * @param {boolean} cursorFlg カーソル中のレーンか
+	 */
+	const drawLaneKey = (ctx, keyData, entries, cursorFlg) => {
+		const { x, y, w: keyW, h: keyH } = keyData;
+		const styles = entries.map(val => getLaneStyle(val.colorPos, val.alt));
+		const segW = keyW / styles.length;
+
+		styles.forEach((style, i) => {
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(x + segW * i, y, segW, keyH);
+			ctx.clip();
+			roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
+			fillStrokeShape(ctx, { fill: style.fill });
+			ctx.restore();
+		});
+
+		// 枠線はキー全体に対して1回だけ、全キー共通の色で描画
+		roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
+		fillStrokeShape(ctx, { stroke: C_COLOR.laneStroke, lineWidth: 1.5 });
+
+		// 文字は全体に1回だけ描画（メインが含まれる場合はメインの文字色）
+		const mainIdx = entries.findIndex(val => !val.alt);
+		const textColor = styles[mainIdx >= 0 ? mainIdx : 0].text;
+		drawOneKey(ctx, { keyData, style: { text: textColor }, shapeFlg: false });
+
+		// カーソル中のレーンは白枠で強調
+		if (cursorFlg) {
+			roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
+			fillStrokeShape(ctx, { stroke: `#ffffff`, lineWidth: 2.5 });
+		}
+	};
+
+	/**
+	 * レーン色分けモードのマッピング描画（ショートカットキーは専用色で最優先）
+	 * @param {CanvasRenderingContext2D} ctx
+	 */
+	const drawLaneMap = ctx => {
+		_state.keyDataList.forEach(keyData => {
+			if (_state.shortcutSet.has(keyData.code)) {
+				drawOneKey(ctx, { keyData, style: C_COLOR.shortcut, lw: 1.5 });
+				return;
+			}
+			const info = _state.laneMap.get(keyData.code);
+			if (info !== undefined) {
+				drawLaneKey(ctx, keyData, info.entries, info.cursor);
+			}
+		});
+	};
+
 	/**
 	 * マッピング強調レイヤーを再描画する。
 	 * メインキー（mappedSet）を青系、代替キー（altSet）を黄系で色分けする。
@@ -1675,6 +1904,11 @@ const keyconfigKeyboardPreview = (() => {
 
 		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
 
+		if (g_stateObj.kbLaneFlg) {
+			drawLaneMap(ctx);
+			return;
+		}
+
 		// キー状態に応じた色取得ロジック（優先度: ショートカット > メイン > 代替）
 		const getKeyStyle = (code) => {
 			if (_state.shortcutSet.has(code)) return C_COLOR.shortcut;
@@ -1719,6 +1953,16 @@ const keyconfigKeyboardPreview = (() => {
 			pointerEvents: C_DIS_AUTO, background: `#00000080`, display: C_DIS_NONE, overflow: `hidden`,
 		});
 
+		// レーン色分け表示の切替ボタン（プレビューエリア内の上部余白に配置）
+		const getLaneBtnName = () => `${g_lblNameObj.b_kbLane ?? `Lane Color`}: ${boolToSwitch(!!g_stateObj.kbLaneFlg)}`;
+		const btnLane = createCss2Button(`btnKbLane`, getLaneBtnName(), () => {
+			g_stateObj.kbLaneFlg = !g_stateObj.kbLaneFlg;
+			btnLane.textContent = getLaneBtnName();
+			drawBase();   // 凡例の切替
+			refresh();
+		}, { x: _state.cvsW - 130, y: 10, w: 120, h: 22, siz: 12 }, g_cssObj.button_Mini);
+		areaDiv.appendChild(btnLane);
+
 		/**
 		 * プレビュー用canvasを生成しareaDivに追加、_stateに登録する
 		 * @param {string} _id
@@ -1777,6 +2021,33 @@ const keyconfigKeyboardPreview = (() => {
 			[g_headerObj.keyRetry, g_headerObj.keyTitleBack, g_headerObj.keyPause, 34, 33].map(toCodeStr).filter(v => v !== ``)
 		);
 
+		// レーン色分け用: キーコード → 割り当て先レーンのカラーグループ情報
+		const colorList = g_keyObj[`color${tkObj.keyCtrlPtn}`];
+		_state.laneMap = new Map();
+		g_keyObj[`keyCtrl${tkObj.keyCtrlPtn}`].forEach((arr, j) => {
+			if (!tkObj.keyGroupMaps[j].includes(configKeyGroupList[g_keycons.keySwitchNum])) {
+				return;
+			}
+			arr.forEach((num, k) => {
+				const code = toCodeStr(num);
+				if (code === ``) {
+					return;
+				}
+				const info = _state.laneMap.get(code) ?? { entries: [], cursor: false };
+				const [colorPos, alt] = [colorList[j], k > 0];
+				if (!info.entries.some(val => val.colorPos === colorPos && val.alt === alt)) {
+					info.entries.push({ colorPos, alt });
+				}
+				info.cursor ||= (j === g_currentj);
+				_state.laneMap.set(code, info);
+			});
+		});
+		// メイン優先で並べ、分割数は上限まで
+		_state.laneMap.forEach(info => {
+			info.entries.sort((a, b) => Number(a.alt) - Number(b.alt));
+			info.entries = info.entries.slice(0, C_LANE_SPLIT_MAX);
+		});
+
 		if (_state.visible) drawMap();
 	};
 
@@ -1789,6 +2060,7 @@ const keyconfigKeyboardPreview = (() => {
 		_state.mappedSet = new Set();
 		_state.altSet = new Set();
 		_state.shortcutSet = new Set();
+		_state.laneMap = new Map();
 		_state.keyDataList = [];
 		_state.canvasBase = null;
 		_state.canvasMap = null;
@@ -1826,19 +2098,18 @@ const getShadowColor = (_colorPos, _arrowColor) => g_headerObj.setShadowColor[_c
 
 /**
  * デフォルトの曲中ショートカットをキー数・キーパターンにより切り替え
- * - キーコンフィグ画面で個別に変えていた場合は変更しない
+ * - Self(-1)のときは保存済みの値を優先（レーンキーと重複する場合は無視）
+ * - それ以外はパターンのデフォルトへ戻す
  */
 const setPlayingShortcut = () => {
 	const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
-	if (g_headerObj.keyRetryDef === C_KEY_RETRY) {
-		g_headerObj.keyRetry = setIntVal(getKeyCtrlVal(g_keyObj[`keyRetry${keyCtrlPtn}`]), g_headerObj.keyRetryDef);
-	}
-	if (g_headerObj.keyTitleBackDef === C_KEY_TITLEBACK) {
-		g_headerObj.keyTitleBack = setIntVal(getKeyCtrlVal(g_keyObj[`keyTitleBack${keyCtrlPtn}`]), g_headerObj.keyTitleBackDef);
-	}
-	if (g_headerObj.keyPauseDef === C_KEY_PAUSE) {
-		g_headerObj.keyPause = setIntVal(getKeyCtrlVal(g_keyObj[`keyPause${keyCtrlPtn}`]), g_headerObj.keyPauseDef);
-	}
+	const saved = g_keyObj.currentPtn === -1 ? g_keyObj[`shortcut${g_keyObj.currentKey}_-1`] : undefined;
+	const usedKeys = (g_keyObj[`keyCtrl${keyCtrlPtn}`] ?? []).flat();
+	g_keycons.shortcutTypes.forEach(type => {
+		const savedKey = saved?.[type];
+		g_headerObj[`key${type}`] = (savedKey !== undefined && !usedKeys.includes(savedKey))
+			? savedKey : getDefaultShortcut(type);
+	});
 };
 
 /**

package/js/lib/settings.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/29 (v51.1.1)
+ * Revised : 2026/10/12 (v51.4.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -14,7 +14,7 @@
 /* Scene : SETTINGS [lime] */
 /*-----------------------------------------------------------*/
 
-const commonSettingBtn = _labelName => {
+const commonSettingBtn = () => {
 
 	const switchSave = evt => {
 		const from = boolToSwitch(g_stateObj.dataSaveFlg);
@@ -24,6 +24,8 @@ const commonSettingBtn = _labelName => {
 		const to = boolToSwitch(g_stateObj.dataSaveFlg);
 		evt.target.classList.replace(g_cssObj[`button_${from}`], g_cssObj[`button_${to}`]);
 	};
+	const nextPageNum = nextPos(g_settings.settingWindowNum, 1, g_settings.settingWindows.length);
+	const labelName = g_settingWindowTitleKeys.get(g_settings.settingWindows[nextPageNum]);
 
 	multiAppend(divRoot,
 
@@ -42,18 +44,19 @@ const commonSettingBtn = _labelName => {
 		// プレイ開始
 		makePlayButton(() => loadMusic()),
 
-		// Display設定へ移動
-		createCss2Button(`btn${_labelName}`, `>`, () => true, {
+		// 次の設定へ移動
+		createCss2Button(`btnNextSetting`, `>`, () => true, {
 			...g_lblPosObj.btnSwitchSetting,
-			title: g_msgObj[`to${_labelName}`], resetFunc: () => g_moveSettingWindow(),
+			title: g_msgObj[`to${labelName}`], resetFunc: () => g_moveSettingWindow(),
 			cxtFunc: () => g_moveSettingWindow(true, -1),
+			display: g_settings.settingWindows.length > 1 ? C_DIS_INHERIT : C_DIS_NONE,
 		}, g_cssObj.button_Mini),
 
 		// データセーブフラグの切替
 		createCss2Button(`btnSave`, g_lblNameObj.dataSave, evt => switchSave(evt), {
 			...g_lblPosObj.btnSave,
 			cxtFunc: evt => switchSave(evt),
-			visibility: g_langStorage.safeMode === C_FLG_OFF ? C_DIS_INHERIT : `hidden`,
+			display: g_langStorage.safeMode === C_FLG_OFF ? C_DIS_INHERIT : C_DIS_NONE,
 		}, g_cssObj.button_Default, (g_stateObj.dataSaveFlg ? g_cssObj.button_ON : g_cssObj.button_OFF)),
 
 		// データ管理画面へ移動
@@ -170,7 +173,7 @@ const optionInit = () => {
 	safeExecuteCustomHooks(`g_customJsObj.option`, g_customJsObj.option);
 
 	// ボタン描画
-	commonSettingBtn(`Display`);
+	commonSettingBtn();
 
 	// キー操作イベント（デフォルト）
 	setShortcutEvent(g_currentPage, () => true, { dfEvtFlg: true });
@@ -1274,52 +1277,6 @@ const getKeyStorageObjByName = (_keyName) => {
 	}), ``];
 };
 
-/**
- * 別キーモード時、移行先キーが保持するSelf保存パターンの取得可否チェック
- * @param {string} _keyCtrlPtn 例: "7_2"
- * @returns {number[][]|undefined} 適用可能な場合はSelf保存済みkeyCtrl配列、不可ならundefined
- */
-const getTransKeySelfCtrl = (_keyCtrlPtn) => {
-	const transKeyName = g_keyObj[`transKey${_keyCtrlPtn}`];
-	const transKeyPtn = g_keyObj[`transKeyPtn${_keyCtrlPtn}`];
-	if (!hasVal(transKeyName) || transKeyPtn === undefined) {
-		return undefined;
-	}
-	const [storageObj, addKey] = getKeyStorageObjByName(transKeyName);
-	const savedCtrl = storageObj[`keyCtrl${addKey}`];
-	const savedPtn = storageObj[`keyCtrlPtn${addKey}`];
-
-	if (savedPtn !== transKeyPtn) {
-		return undefined;
-	}
-
-	// 現在のキー配置(基準形状)とレーン数・各レーン長が完全一致することを確認
-	const baseCtrl = g_keyObj[`keyCtrl${_keyCtrlPtn}`];
-	const isValidShape = hasArrayList(savedCtrl, baseCtrl.length) &&
-		savedCtrl.length === baseCtrl.length &&
-		baseCtrl.every((lane, j) => hasArrayList(savedCtrl[j], lane.length) && savedCtrl[j].length === lane.length);
-
-	return isValidShape ? savedCtrl : undefined;
-};
-
-/**
- * 別キーモードの移行先Selfパターンを現在のキー配置へ反映（保存はしない）
- */
-const applyTransKeySelfPattern = () => {
-	const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
-	const savedCtrl = getTransKeySelfCtrl(keyCtrlPtn);
-	if (savedCtrl === undefined) {
-		return;
-	}
-	const baseKeyNum = g_keyObj[`${g_keyObj.defaultProp}${keyCtrlPtn}`].length;
-	for (let j = 0; j < baseKeyNum; j++) {
-		for (let k = 0; k < (savedCtrl[j]?.length ?? 0); k++) {
-			g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setIntVal(savedCtrl[j][k], 0);
-		}
-	}
-	keyConfigInit();
-};
-
 /**
  * 譜面初期化処理
  * - 譜面の基本設定（キー数、初期速度、リバース、ゲージ設定）をここで行う
@@ -1371,6 +1328,7 @@ const setDifficulty = (_chartChangeFlg) => {
 				storageObj[`keyCtrlPtn${addKey}`] = 0;
 			}
 			getKeyCtrl(storageObj, addKey);
+			g_keyObj[`shortcut${g_keyObj.currentKey}_-1`] = structuredClone(storageObj[`shortcut${addKey}`] ?? {});
 
 			// カラーセット初期値設定
 			if (storageObj[`setColor${addKey}`] === undefined) {
@@ -1401,10 +1359,9 @@ const setDifficulty = (_chartChangeFlg) => {
 					g_keyObj[`${type}${keyCtrlPtn}`] = structuredClone(g_keyObj[`${type}${keyCtrlPtn}_0`]);
 				}
 			});
-
+			// 曲中ショートカットキーの切り替え
+			setPlayingShortcut();
 		}
-		// 曲中ショートカットキーの切り替え
-		setPlayingShortcut();
 	}
 
 	// スクロール設定用の配列を入れ替え
@@ -2449,7 +2406,7 @@ const settingsDisplayInit = () => {
 	safeExecuteCustomHooks(`g_customJsObj.settingsDisplay`, g_customJsObj.settingsDisplay);
 
 	// ボタン描画
-	commonSettingBtn(`Settings`);
+	commonSettingBtn();
 
 	// キー操作イベント（デフォルト）
 	setShortcutEvent(g_currentPage);
@@ -3288,7 +3245,7 @@ const exSettingInit = () => {
 	safeExecuteCustomHooks(`g_customJsObj.exSetting`, g_customJsObj.exSetting);
 
 	// 設定系のボタン群をまとめて作成（Data Save, Display切替, Back, KeyConfig, Playボタン）
-	commonSettingBtn(g_currentPage);
+	commonSettingBtn();
 
 	// キー操作イベント（デフォルト）
 	setShortcutEvent(g_currentPage, () => true, { dfEvtFlg: true });

package/package.json

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