danoniplus 34.4.1 → 34.5.0

package/css/danoni_main.css

@@ -4,7 +4,7 @@
   本体cssファイル
 
   Created : 2018/10/08
-  Revised : 2023/08/20 (v33.2.0)
+  Revised : 2023/11/05 (v34.5.0)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -475,6 +475,15 @@ input[type="color"] {
 	color: var(--settings-lifeVal-x, #ff9966);
 }
 
+/* 設定画面：レーンごとの矢印数 */
+.settings_maxArrowCnts {
+	color: var(--settings-maxArrowCnts-x, var(--common-uwan));
+}
+
+.settings_minArrowCnts {
+	color: var(--settings-maxArrowCnts-x, var(--common-ii));
+}
+
 /* キーコンフィグ */
 .keyconfig_warning {
 	color: var(--keyconfig-warning-x, #ffff99);

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2023/10/31
+ * Revised : 2023/11/05
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 34.4.1`;
-const g_revisedDate = `2023/10/31`;
+const g_version = `Ver 34.5.0`;
+const g_revisedDate = `2023/11/05`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -209,7 +209,7 @@ let g_canLoadDifInfoFlg = false;
  * div要素のstyleを取得
  * @param {string} _id 
  */
-const $id = _id => document.getElementById(`${_id}`).style;
+const $id = _id => document.getElementById(_id).style;
 
 /**
  * 複数のdiv子要素を親要素へ接続
@@ -360,7 +360,7 @@ const hasValInArray = (_val, _array, _pos = 0) =>
  * @param {array} _data 
  * @param {integer} _length
  */
-const hasArrayList = (_data, _length = 1) => _data !== undefined && _data.length >= _length;
+const hasArrayList = (_data, _length = 1) => _data?.length >= _length;
 
 /**
  * 改行コード区切りの配列展開
@@ -431,13 +431,12 @@ const padArray = (_array, _baseArray) => {
  * @param {number} _num
  */
 const getMaxValIdxs = (_array, _num = 1) => {
-	const getMaxVal = (_a, _b) => Math.max(_a, _b);
 	let baseArray = _array.concat();
 	const maxIdxs = [];
 
 	for (let j = 0; j < _num; j++) {
 		maxIdxs[j] = [];
-		const maxVal = baseArray.reduce((a, b) => getMaxVal(a, b));
+		const maxVal = baseArray.reduce((a, b) => Math.max(a, b));
 		_array.map((val, idx) => {
 			if (val === maxVal) {
 				maxIdxs[j].push(idx);
@@ -569,11 +568,8 @@ const commonKeyDown = (_evt, _displayName, _func = _code => { }, _dfEvtFlg) => {
 	switchKeyHit(_evt, true);
 
 	// 対象ボタンを検索
-	const scLists = Object.keys(g_shortcutObj[_displayName]).filter(keys => {
-		const keyset = keys.split(`_`);
-		return (keyset.length > 2 ? keyIsDown(keyset[0]) && keyIsDown(keyset[1]) && keyIsDown(keyset[2]) :
-			(keyset.length > 1 ? keyIsDown(keyset[0]) && keyIsDown(keyset[1]) : keyIsDown(keyset[0])));
-	});
+	const scLists = Object.keys(g_shortcutObj[_displayName])
+		.filter(keys => keys.split(`_`).every(key => keyIsDown(key)));
 	if (scLists.length > 0) {
 		// リンク先にジャンプする場合はonkeyUpイベントが動かないため、事前にキー状態をリセット
 		if (g_shortcutObj[_displayName][scLists[0]].reset) {
@@ -597,7 +593,7 @@ const commonKeyDown = (_evt, _displayName, _func = _code => { }, _dfEvtFlg) => {
 const commonKeyUp = _evt => {
 	g_inputKeyBuffer[g_kCdNameObj.metaLKey] = false;
 	g_inputKeyBuffer[g_kCdNameObj.metaRKey] = false;
-	g_inputKeyBuffer[_evt.code] = false;
+	switchKeyHit(_evt);
 };
 
 /**
@@ -612,7 +608,7 @@ const createScText = (_obj, _settingLabel, { displayName = `option`, dfLabel = `
 	if (scKey.length > 0) {
 		multiAppend(_obj,
 			createDivCss2Label(`sc${_settingLabel}`,
-				g_scViewObj.format.split(`{0}`).join(dfLabel !== `` ? `${dfLabel}` : `${g_kCd[g_kCdN.findIndex(kCd => kCd === scKey[0])] ?? ''}`), {
+				g_scViewObj.format.split(`{0}`).join(dfLabel || (`${g_kCd[g_kCdN.findIndex(kCd => kCd === scKey[0])] ?? ''}`)), {
 				x, y, w, siz, fontWeight: `bold`, opacity: 0.75, pointerEvents: C_DIS_NONE,
 			})
 		);
@@ -694,11 +690,7 @@ const preloadFile = (_as, _href, _type = ``, _crossOrigin = `anonymous`) => {
 
 	if (preloadFlg === undefined) {
 		g_preloadFiles.all.push(_href);
-
-		if (g_preloadFiles[_as] === undefined) {
-			g_preloadFiles[_as] = [];
-		}
-		g_preloadFiles[_as].push(_href);
+		g_preloadFiles[_as]?.push(_href) || (g_preloadFiles[_as] = [_href]);
 
 		if (g_userAgent.indexOf(`firefox`) !== -1 && _as === `image`) {
 			// Firefoxの場合のみpreloadが効かないため、画像読込形式にする
@@ -895,7 +887,7 @@ const colorNameToCode = _color => {
  * 10進 -> 16進数変換 (カラーコード形式になるよう0埋め)
  * @param {number} _num 
  */
-const byteToHex = _num => (`${_num.toString(16).padStart(2, '0')}`);
+const byteToHex = _num => _num.toString(16).padStart(2, '0');
 
 /**
  * カラーコードかどうかを判定 (簡易版)
@@ -1163,13 +1155,11 @@ const createColorObject2 = (_id,
 	const style = div.style;
 
 	// 矢印・オブジェクト判定
-	let charaStyle;
+	let charaStyle = `arrow${styleName}`;
 	if (isNaN(parseFloat(rotate))) {
 		const objData = rotate.split(`:`);
 		rotate = setVal(objData[1], 0, C_TYP_FLOAT);
 		charaStyle = `${objData[0]}${styleName}`;
-	} else {
-		charaStyle = `arrow${styleName}`;
 	}
 	if (g_stateObj.rotateEnabled) {
 		style.transform = `rotate(${rotate}deg)`;
@@ -1214,7 +1204,7 @@ const createEmptySprite = (_parentObj, _newObjId, { x = 0, y = 0, w = g_sWidth,
  * @param {number} _num 
  */
 const createMultipleSprite = (_baseName, _num, { x = 0 } = {}) => {
-	const sprite = createEmptySprite(divRoot, `${_baseName}`);
+	const sprite = createEmptySprite(divRoot, _baseName);
 	for (let j = 0; j <= _num; j++) {
 		createEmptySprite(sprite, `${_baseName}${j}`, { x });
 	}
@@ -1258,7 +1248,7 @@ const g_handler = (_ => {
  */
 const deleteChildspriteAll = _parentObjName => {
 
-	const parentsprite = document.querySelector(`#${_parentObjName}`);
+	const parentsprite = document.getElementById(_parentObjName);
 	while (parentsprite.hasChildNodes()) {
 		g_handler.removeListener(parentsprite.firstChild.getAttribute(`lsnrkey`));
 		g_handler.removeListener(parentsprite.firstChild.getAttribute(`lsnrkeyTS`));
@@ -1357,7 +1347,7 @@ const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight
  * @param {object} _obj (x, y, w, h, siz, align, title, ...rest) 
  */
 const changeStyle = (_id, { x, y, w, h, siz, align, title, ...rest } = {}) => {
-	const div = document.querySelector(`#${_id}`);
+	const div = document.getElementById(_id);
 	const style = div.style;
 
 	const obj = {
@@ -1436,12 +1426,12 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		return ctx;
 	};
 
-	if (document.querySelector(`#layer0`) !== null) {
+	if (document.getElementById(`layer0`) !== null) {
 
 		// レイヤー情報取得
 		const l0ctx = getLayerWithClear(`layer0`);
 
-		if (document.querySelector(`#layer1`) !== null) {
+		if (document.getElementById(`layer1`) !== null) {
 			const l1ctx = getLayerWithClear(`layer1`);
 
 			// 線画 (title-line)
@@ -1457,7 +1447,7 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 			l1ctx.lineTo(layer1.width, g_sHeight);
 			l1ctx.stroke();
 		}
-		if (document.querySelector(`#layer2`) !== null) {
+		if (document.getElementById(`layer2`) !== null) {
 			getLayerWithClear(`layer2`);
 		}
 
@@ -1478,7 +1468,7 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		g_cxtAddFunc = {};
 		g_cxtDeleteFlg = {};
 
-		if (document.querySelector(`#layer0`) === null ||
+		if (document.getElementById(`layer0`) === null ||
 			(!g_headerObj[`customBack${_customDisplayName}Use`] && !g_headerObj.defaultSkinFlg)) {
 
 			$id(`canvas-frame`).width = wUnit(g_sWidth + diffX);
@@ -1501,11 +1491,9 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
  * @param {string} _propData 
  */
 const getCssCustomProperty = (_prop, _propData) =>
-	document.documentElement.style.getPropertyValue(_propData) !== `` ?
-		document.documentElement.style.getPropertyValue(_propData) :
-		g_cssBkProperties[_propData] !== undefined ?
-			g_cssBkProperties[_propData] :
-			_prop.endsWith(`-x`) ? _propData : reviseCssText(makeColorGradation(_propData, { _defaultColorgrd: false }));
+	document.documentElement.style.getPropertyValue(_propData) || (g_cssBkProperties[_propData] ?? (
+		_prop.endsWith(`-x`) ? _propData : reviseCssText(makeColorGradation(_propData, { _defaultColorgrd: false }))
+	));
 
 /**
  * CSSカスタムプロパティの値をオブジェクトへ退避
@@ -1738,11 +1726,11 @@ const getSpriteJumpFrame = _frames => {
  * @param {boolean} _condition 
  */
 const drawBaseSpriteData = (_spriteData, _name, _condition = true) => {
-	const baseSprite = document.querySelector(`#${_name}Sprite${_spriteData.depth}`);
+	const baseSprite = document.getElementById(`${_name}Sprite${_spriteData.depth}`);
 	if (_spriteData.command === ``) {
 		if (_spriteData.depth === C_FLG_ALL) {
 			for (let j = 0; j <= g_scoreObj[`${_name}MaxDepth`]; j++) {
-				document.querySelector(`#${_name}Sprite${j}`).textContent = ``;
+				document.getElementById(`${_name}Sprite${j}`).textContent = ``;
 			}
 		} else {
 			baseSprite.textContent = ``;
@@ -1896,10 +1884,7 @@ class AudioPlayer {
 	}
 
 	addEventListener(_type, _listener) {
-		if (this._eventListeners[_type] === undefined) {
-			this._eventListeners[_type] = [];
-		}
-		this._eventListeners[_type].push(_listener);
+		this._eventListeners[_type]?.push(_listener) || (this._eventListeners[_type] = [_listener]);
 	}
 
 	removeEventListener(_type, _listener) {
@@ -1996,12 +1981,12 @@ const transTimerToFrame = _str => {
 
 const initialControl = async () => {
 
-	const stage = document.querySelector(`#canvas-frame`);
+	const stage = document.getElementById(`canvas-frame`);
 	const divRoot = createEmptySprite(stage, `divRoot`, g_windowObj.divRoot);
 
 	// 背景の表示
-	if (document.querySelector(`#layer0`) !== null) {
-		const layer0 = document.querySelector(`#layer0`);
+	if (document.getElementById(`layer0`) !== null) {
+		const layer0 = document.getElementById(`layer0`);
 		makeBgCanvas(layer0.getContext(`2d`));
 	} else {
 		createEmptySprite(divRoot, `divBack`, g_windowObj.divBack);
@@ -2014,8 +1999,8 @@ const initialControl = async () => {
 	g_canLoadDifInfoFlg = true;
 
 	// 譜面データの読み込みオプション
-	g_enableAmpersandSplit = setBoolVal(document.querySelector(`#enableAmpersandSplit`)?.value, true);
-	g_enableDecodeURI = setBoolVal(document.querySelector(`#enableDecodeURI`)?.value);
+	g_enableAmpersandSplit = setBoolVal(document.getElementById(`enableAmpersandSplit`)?.value, true);
+	g_enableDecodeURI = setBoolVal(document.getElementById(`enableDecodeURI`)?.value);
 
 	// 作品別ローカルストレージの読み込み
 	loadLocalStorage();
@@ -2041,7 +2026,7 @@ const initialControl = async () => {
 	Object.assign(g_headerObj, preheaderConvert(g_rootObj));
 
 	// CSSファイル内のbackgroundを取得するために再描画
-	if (document.querySelector(`#layer0`) === null) {
+	if (document.getElementById(`layer0`) === null) {
 		deleteDiv(divRoot, `divBack`);
 		createEmptySprite(divRoot, `divBack`);
 	} else if (!g_headerObj.defaultSkinFlg && !g_headerObj.customBackUse) {
@@ -2148,8 +2133,8 @@ const initialControl = async () => {
 	if (g_loadObj.main) {
 
 		// 譜面分割、譜面番号固定かどうかをチェック
-		g_stateObj.dosDivideFlg = setBoolVal(document.querySelector(`#externalDosDivide`)?.value ?? getQueryParamVal(`dosDivide`));
-		g_stateObj.scoreLockFlg = setBoolVal(document.querySelector(`#externalDosLock`)?.value ?? getQueryParamVal(`dosLock`));
+		g_stateObj.dosDivideFlg = setBoolVal(document.getElementById(`externalDosDivide`)?.value ?? getQueryParamVal(`dosDivide`));
+		g_stateObj.scoreLockFlg = setBoolVal(document.getElementById(`externalDosLock`)?.value ?? getQueryParamVal(`dosLock`));
 
 		for (let j = 1; j < g_headerObj.keyLabels.length; j++) {
 
@@ -2257,10 +2242,10 @@ const dosConvert = (_dos = ``) => {
  */
 const loadChartFile = async (_scoreId = g_stateObj.scoreId) => {
 
-	const dosInput = document.querySelector(`#dos`);
-	const divRoot = document.querySelector(`#divRoot`);
+	const dosInput = document.getElementById(`dos`);
+	const divRoot = document.getElementById(`divRoot`);
 	const queryDos = getQueryParamVal(`dos`) !== null ?
-		`dos/${getQueryParamVal('dos')}.txt` : encodeURI(document.querySelector(`#externalDos`)?.value ?? ``);
+		`dos/${getQueryParamVal('dos')}.txt` : encodeURI(document.getElementById(`externalDos`)?.value ?? ``);
 
 	if (dosInput === null && queryDos === ``) {
 		makeWarningWindow(g_msgInfoObj.E_0023);
@@ -2281,7 +2266,7 @@ const loadChartFile = async (_scoreId = g_stateObj.scoreId) => {
 
 	// 外部dos読み込み
 	if (queryDos !== ``) {
-		const charset = document.querySelector(`#externalDosCharset`)?.value ?? document.characterSet;
+		const charset = document.getElementById(`externalDosCharset`)?.value ?? document.characterSet;
 		const fileBase = queryDos.match(/.+\..*/)[0];
 		const fileExtension = fileBase.split(`.`).pop();
 		const fileCommon = fileBase.split(`.${fileExtension}`)[0];
@@ -2602,7 +2587,7 @@ const calcLevel = _scoreObj => {
 		// 3つ押し数
 		push3cnt: push3Cnt,
 		// 3つ押しリスト
-		push3: push3List,
+		push3: makeDedupliArray(push3List),
 	};
 };
 
@@ -3064,8 +3049,11 @@ const headerConvert = _dosObj => {
 
 	// 初期表示する部分キーの設定
 	obj.keyGroupOrder = [];
-	_dosObj.keyGroupOrder?.split(`$`).filter(val => val !== ``)
-		.forEach((val, j) => obj.keyGroupOrder[j] = val.split(`,`));
+	_dosObj.keyGroupOrder?.split(`$`).forEach((val, j) => {
+		if (val !== ``) {
+			obj.keyGroupOrder[j] = val.split(`,`);
+		}
+	});
 
 	// 最終演出表示有無（noneで無効化）
 	obj.finishView = _dosObj.finishView ?? ``;
@@ -3169,14 +3157,14 @@ const headerConvert = _dosObj => {
 
 		// Display使用可否設定を分解 |displayUse=false,ON|
 		const displayTempUse = _dosObj[`${option}Use`] ?? g_presetObj.settingUse?.[option] ?? `true`;
-		const displayUse = (displayTempUse !== undefined ? displayTempUse.split(`,`) : [true, C_FLG_ON]);
+		const displayUse = displayTempUse?.split(`,`) ?? [true, C_FLG_ON];
 
 		// displayUse -> ボタンの有効/無効, displaySet -> ボタンの初期値(ON/OFF)
 		obj[`${option}Use`] = setBoolVal(displayUse[0], true);
 		obj[`${option}Set`] = setVal(displayUse.length > 1 ? displayUse[1] :
 			boolToSwitch(obj[`${option}Use`]), ``, C_TYP_SWITCH);
 		g_stateObj[`d_${option.toLowerCase()}`] = setVal(obj[`${option}Set`], C_FLG_ON, C_TYP_SWITCH);
-		obj[`${option}ChainOFF`] = (_dosObj[`${option}ChainOFF`] !== undefined ? _dosObj[`${option}ChainOFF`].split(`,`) : []);
+		obj[`${option}ChainOFF`] = _dosObj[`${option}ChainOFF`]?.split(`,`) ?? [];
 
 		// Displayのデフォルト設定で、双方向に設定されている場合は設定をブロック
 		g_displays.filter((option2, k) =>
@@ -3254,7 +3242,7 @@ const headerConvert = _dosObj => {
 	obj.commentVal = tmpComment.split(`\n`).join(newlineTag);
 
 	// クレジット表示
-	if (document.querySelector(`#webMusicTitle`) !== null) {
+	if (document.getElementById(`webMusicTitle`) !== null) {
 		webMusicTitle.innerHTML =
 			`<span style="font-size:${wUnit(32)}">${obj.musicTitleForView.join(`<br>`)}</span><br>
 			<span style="font-size:${wUnit(16)}">(Artist: <a href="${obj.artistUrl}" target="_blank">${obj.artistName}</a>)</span>`;
@@ -3417,7 +3405,7 @@ const resetBaseColorList = (_baseObj, _dosObj, { scoreId = `` } = {}) => {
 
 		// フリーズアロー色
 		const tmpFrzColors = (frzColorTxt !== undefined ? splitLF2(frzColorTxt) : []);
-		const firstFrzColors = (tmpFrzColors[0] !== undefined ? tmpFrzColors[0].split(`,`) : []);
+		const firstFrzColors = tmpFrzColors[0]?.split(`,`) ?? [];
 
 		for (let j = 0; j < _baseObj.setColorInit.length; j++) {
 
@@ -3744,8 +3732,7 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList?.split(`,`)
 				// |keyCtrl9j=Tab,7_0,Enter| -> |keyCtrl9j=Tab,S,D,F,Space,J,K,L,Enter| のように補完
 				g_keyObj[`${keyheader}_${k + dfPtn}`] =
 					tmpArray[k].split(`,`).map(n =>
-						g_keyObj[`${_name}${getKeyPtnName(n)}`] !== undefined ?
-							structuredClone(g_keyObj[`${_name}${getKeyPtnName(n)}`]) : [_convFunc(n)]
+						structuredClone(g_keyObj[`${_name}${getKeyPtnName(n)}`]) ?? [_convFunc(n)]
 					).flat();
 				if (baseCopyFlg) {
 					g_keyObj[`${keyheader}_${k + dfPtn}d`] = structuredClone(g_keyObj[`${keyheader}_${k + dfPtn}`]);
@@ -3796,9 +3783,8 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList?.split(`,`)
 						// 部分的にキーパターン指定があった場合は既存パターンを展開 (例: |shuffle9j=2,7_0_0,2|)
 						g_keyObj[`${keyheader}_${k + dfPtn}_${ptnCnt}`] =
 							makeBaseArray(list.split(`,`).map(n =>
-								g_keyObj[`${_name}${getKeyPtnName(n)}`] !== undefined ?
-									structuredClone(g_keyObj[`${_name}${getKeyPtnName(n)}`]) :
-									[isNaN(parseInt(n)) ? n : parseInt(n, 10)]
+								structuredClone(g_keyObj[`${_name}${getKeyPtnName(n)}`]) ??
+								[isNaN(parseInt(n)) ? n : parseInt(n, 10)]
 							).flat(), g_keyObj[`${g_keyObj.defaultProp}${_key}_${k + dfPtn}`].length, 0);
 						ptnCnt++;
 					}
@@ -3873,9 +3859,8 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList?.split(`,`)
 					const tmpParamPair = pairs.split(`::`);
 					g_keyObj[pairName][tmpParamPair[0]] =
 						makeBaseArray(tmpParamPair[1]?.split(`,`).map(n =>
-							g_keyObj[`${_pairName}${getKeyPtnName(n)}`] !== undefined ?
-								structuredClone(g_keyObj[`${_pairName}${getKeyPtnName(n)}`][tmpParamPair[0]]) :
-								[n === `-` ? -1 : parseInt(n, 10)]
+							structuredClone(g_keyObj[`${_pairName}${getKeyPtnName(n)}`]?.[tmpParamPair[0]]) ??
+							[n === `-` ? -1 : parseInt(n, 10)]
 						).flat(), g_keyObj[`${g_keyObj.defaultProp}${_key}_${k + dfPtn}`].length, _defaultVal);
 				}
 			});
@@ -4046,7 +4031,7 @@ const titleInit = _ => {
 	if (!g_stateObj.dataSaveFlg || hasVal(g_keyObj[`transKey${keyCtrlPtn}`])) {
 		g_canLoadDifInfoFlg = false;
 	}
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 
 	// 曲時間制御変数
 	let thisTime;
@@ -4099,7 +4084,7 @@ const titleInit = _ => {
 		}
 
 		// 変数 titlesize の定義 (使用例： |titlesize=40$20|)
-		const titlefontsizes = (g_headerObj.titlesize !== `` ? g_headerObj.titlesize.split(`$`).join(`,`).split(`,`) : [titlefontsize, titlefontsize]);
+		const titlefontsizes = (g_headerObj.titlesize?.split(`$`).join(`,`).split(`,`) || [titlefontsize, titlefontsize]);
 		const titlefontsize1 = setIntVal(titlefontsizes[0], titlefontsize);
 		const titlefontsize2 = setIntVal(titlefontsizes[1], titlefontsize1);
 
@@ -4251,7 +4236,7 @@ const titleInit = _ => {
 		// コメント文の加工
 		const convCommentVal = convertStrToVal(g_headerObj.commentVal);
 		if (g_headerObj.commentExternal) {
-			if (document.querySelector(`#commentArea`) !== null) {
+			if (document.getElementById(`commentArea`) !== null) {
 				commentArea.innerHTML = convCommentVal;
 			}
 		} else {
@@ -4444,7 +4429,7 @@ const makePlayButton = _func => createCss2Button(`btnPlay`, g_lblNameObj.b_play,
 const optionInit = _ => {
 
 	clearWindow(true);
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 	g_baseDisp = `Settings`;
 	g_currentPage = `option`;
 	g_stateObj.filterKeys = ``;
@@ -4499,7 +4484,7 @@ const inputSlider = (_slider, _link) => {
  * 譜面変更セレクターの削除
  */
 const resetDifWindow = _ => {
-	if (document.querySelector(`#difList`) !== null) {
+	if (document.getElementById(`difList`) !== null) {
 		deleteChildspriteAll(`difList`);
 		[`difList`, `difCover`, `btnDifU`, `btnDifD`].forEach(obj => document.getElementById(obj).remove());
 		g_currentPage = `option`;
@@ -4624,7 +4609,7 @@ const createDifWindow = (_key = ``) => {
 const changeDifficulty = (_num = 1) => {
 	if (g_headerObj.difSelectorUse) {
 		g_stateObj.filterKeys = ``;
-		if (document.querySelector(`#difList`) === null) {
+		if (document.getElementById(`difList`) === null) {
 			g_keyObj.prevKey = g_keyObj.currentKey;
 			createDifWindow();
 		} else {
@@ -4667,20 +4652,18 @@ const drawSpeedGraph = _scoreId => {
 		const speed = speedObj[speedType].speed;
 		const speedData = g_detailObj[`${speedType}Data`][_scoreId];
 
-		if (speedData !== undefined) {
-			for (let i = 0; i < speedData.length; i += 2) {
-				if (speedData[i] >= startFrame) {
-					frame.push(speedData[i] - startFrame);
-					speed.push(speedData[i + 1]);
-				}
-				speedObj[speedType].cnt++;
+		for (let i = 0; i < speedData?.length; i += 2) {
+			if (speedData[i] >= startFrame) {
+				frame.push(speedData[i] - startFrame);
+				speed.push(speedData[i + 1]);
 			}
-			frame.push(playingFrame);
-			speed.push(speed.at(-1));
+			speedObj[speedType].cnt++;
 		}
+		frame.push(playingFrame);
+		speed.push(speed.at(-1));
 	});
 
-	const canvas = document.querySelector(`#graphSpeed`);
+	const canvas = document.getElementById(`graphSpeed`);
 	const context = canvas.getContext(`2d`);
 	drawBaseLine(context);
 
@@ -4734,7 +4717,7 @@ const drawSpeedGraph = _scoreId => {
  */
 const drawDensityGraph = _scoreId => {
 
-	const canvas = document.querySelector(`#graphDensity`);
+	const canvas = document.getElementById(`graphDensity`);
 	const context = canvas.getContext(`2d`);
 	drawBaseLine(context);
 	for (let j = 0; j < g_limitObj.densityDivision; j++) {
@@ -4780,16 +4763,16 @@ const drawDensityGraph = _scoreId => {
  */
 const updateScoreDetailLabel = (_name, _label, _value, _pos = 0, _labelname = _label) => {
 	const baseLabel = (_bLabel, _bLabelname, _bAlign) =>
-		document.querySelector(`#detail${_name}`).appendChild(
-			createDivCss2Label(`${_bLabel}`, `${_bLabelname}`, {
+		document.getElementById(`detail${_name}`).appendChild(
+			createDivCss2Label(_bLabel, _bLabelname, {
 				x: 10, y: 105 + _pos * 20, w: 100, h: 20, siz: g_limitObj.difSelectorSiz, align: _bAlign,
 			})
 		);
-	if (document.querySelector(`#data${_label}`) === null) {
+	if (document.getElementById(`data${_label}`) === null) {
 		baseLabel(`lbl${_label}`, `${_labelname}`, C_ALIGN_LEFT);
 		baseLabel(`data${_label}`, `${_value}`, C_ALIGN_RIGHT);
 	} else {
-		document.querySelector(`#data${_label}`).textContent = `${_value}`;
+		document.getElementById(`data${_label}`).textContent = `${_value}`;
 	}
 };
 
@@ -4824,7 +4807,7 @@ const drawLine = (_context, _y, _lineType, _fixed = 0) => {
 	_context.lineWidth = 1;
 
 	if (_lineType === `main`) {
-		const textBaseObj = document.querySelector(`#lnkDifficulty`);
+		const textBaseObj = document.getElementById(`lnkDifficulty`);
 		const textColor = window.getComputedStyle(textBaseObj, ``).color;
 		_context.strokeStyle = textColor;
 		_context.font = `${wUnit(12)} ${getBasicFont()}`;
@@ -4843,7 +4826,7 @@ const drawLine = (_context, _y, _lineType, _fixed = 0) => {
 const makeDifInfoLabels = _scoreId => {
 
 	// ツール難易度
-	const detailToolDif = document.querySelector(`#detailToolDif`);
+	const detailToolDif = document.getElementById(`detailToolDif`);
 	/**
 	 * 譜面の難易度情報ラベルの作成
 	 * @param {string} _lbl 
@@ -4905,20 +4888,48 @@ const makeDifInfo = _scoreId => {
 
 	const arrowCnts = sumData(g_detailObj.arrowCnt[_scoreId]);
 	const frzCnts = sumData(g_detailObj.frzCnt[_scoreId]);
-	const push3CntStr = (g_detailObj.toolDif[_scoreId].push3.length === 0 ? `None` : `(${g_detailObj.toolDif[_scoreId].push3})`);
+	const push3CntStr = (g_detailObj.toolDif[_scoreId].push3.length === 0 ? `None` : `(${g_detailObj.toolDif[_scoreId].push3.join(', ')})`);
 
-	if (document.querySelector(`#lblTooldif`) === null) {
+	if (document.getElementById(`lblTooldif`) === null) {
 		makeDifInfoLabels(_scoreId);
 	}
 	dataTooldif.textContent = g_detailObj.toolDif[_scoreId].tool;
 	dataDouji.textContent = g_detailObj.toolDif[_scoreId].douji;
 	dataTate.textContent = g_detailObj.toolDif[_scoreId].tate;
-	lblArrowInfo2.innerHTML = g_lblNameObj.s_linecnts.split(`{0}`).join(g_detailObj.toolDif[_scoreId].push3cnt);
+	lblArrowInfo2.innerHTML = g_lblNameObj.s_linecnts.split(`{0}`)
+		.join(`${makeDedupliArray(g_detailObj.toolDif[_scoreId].push3).length} /cnt:${g_detailObj.toolDif[_scoreId].push3cnt}`);
 	dataArrowInfo.innerHTML = `${arrowCnts + frzCnts * (g_headerObj.frzStartjdgUse ? 2 : 1)} 
 	<span style="font-size:${wUnit(g_limitObj.difSelectorSiz)};">(${arrowCnts} + ${frzCnts}${g_headerObj.frzStartjdgUse ? ' <span class="common_bold">x 2</span>' : ''})</span>`;
-	dataArrowInfo2.innerHTML = `<br>(${g_detailObj.arrowCnt[_scoreId]})<br><br>
-			(${g_detailObj.frzCnt[_scoreId]})<br><br>
-			${push3CntStr}`.split(`,`).join(`/`);
+
+	const makeArrowCntsView = (_cntlist) => {
+		const targetKey = g_headerObj.keyLabels[_scoreId];
+		const cntlist = [
+			_cntlist.filter((val, j) =>
+				g_keyObj[`pos${targetKey}_0`][j] < g_keyObj[`div${targetKey}_0`]),
+			_cntlist.filter((val, j) =>
+				g_keyObj[`pos${targetKey}_0`][j] >= g_keyObj[`div${targetKey}_0`])
+		];
+
+		let cntlistStr = ``;
+		cntlist.filter(array => array.length > 0).forEach(array => {
+			const maxVal = array.reduce((a, b) => Math.max(a, b));
+			const minVal = array.reduce((a, b) => Math.min(a, b));
+
+			cntlistStr += `[ `;
+			array.forEach((val, j) => {
+				if (maxVal !== minVal) {
+					array[j] = (val === minVal ? `<span class="settings_minArrowCnts">${val}</span>` :
+						(val === maxVal ? `<span class="settings_maxArrowCnts common_bold">${val}</span>` : val));
+				}
+			});
+			cntlistStr += array.join(`, `) + ` ]`;
+		});
+
+		return cntlistStr;
+	}
+
+	dataArrowInfo2.innerHTML = `<br>${makeArrowCntsView(g_detailObj.arrowCnt[_scoreId])}<br><br>
+			${makeArrowCntsView(g_detailObj.frzCnt[_scoreId])}<br><br>${push3CntStr}`;
 };
 
 /**
@@ -5084,7 +5095,7 @@ const setDifficulty = (_initFlg) => {
 			g_shortcutObj.option.KeyR.exId : g_shortcutObj.option.KeyR.dfId;
 
 		if (g_settings.scrolls.length > 1) {
-			setReverseView(document.querySelector(`#btnReverse`));
+			setReverseView(document.getElementById(`btnReverse`));
 		}
 	} else {
 		g_settings.scrolls = structuredClone(g_keyObj.scrollName_def);
@@ -5157,7 +5168,7 @@ const createOptionWindow = _sprite => {
 
 		if (_graphUseFlg) {
 			const graphObj = document.createElement(`canvas`);
-			const textBaseObj = document.querySelector(`#lnkDifficulty`);
+			const textBaseObj = document.getElementById(`lnkDifficulty`);
 			const bkColor = window.getComputedStyle(textBaseObj, ``).backgroundColor;
 
 			graphObj.id = `graph${_name}`;
@@ -5234,8 +5245,8 @@ const createOptionWindow = _sprite => {
 			g_stateObj.scoreDetailViewFlg = false;
 			g_shortcutObj.difSelector.KeyQ.id = g_settings.scoreDetailCursors[0];
 		}
-		const scoreDetail = document.querySelector(`#scoreDetail`);
-		const detailObj = document.querySelector(`#detail${g_stateObj.scoreDetail}`);
+		const scoreDetail = document.getElementById(`scoreDetail`);
+		const detailObj = document.getElementById(`detail${g_stateObj.scoreDetail}`);
 		const visibles = [`hidden`, `visible`];
 
 		g_stateObj.scoreDetailViewFlg = !g_stateObj.scoreDetailViewFlg;
@@ -5355,7 +5366,7 @@ const createOptionWindow = _sprite => {
 
 	);
 
-	const fadeinSlider = document.querySelector(`#fadeinSlider`);
+	const fadeinSlider = document.getElementById(`fadeinSlider`);
 	fadeinSlider.addEventListener(`input`, _ =>
 		g_stateObj.fadein = inputSlider(fadeinSlider, lnkFadein), false);
 
@@ -5443,7 +5454,7 @@ const createGeneralSetting = (_obj, _settingName, { unitName = ``,
 		createScText(_obj, settingUpper, { displayName: displayName, dfLabel: scLabel });
 
 	} else {
-		document.querySelector(`#lbl${settingUpper}`).classList.add(g_cssObj.settings_Disabled);
+		document.getElementById(`lbl${settingUpper}`).classList.add(g_cssObj.settings_Disabled);
 		_obj.appendChild(makeDisabledLabel(linkId, 0, initName));
 	}
 };
@@ -5497,7 +5508,7 @@ const setSetting = (_scrollNum, _settingName, _unitName = ``, _roundNum = 0) =>
 	}
 	g_stateObj[_settingName] = settingList[settingNum];
 	g_settings[`${_settingName}Num`] = settingNum;
-	document.querySelector(`#lnk${toCapitalize(_settingName)}`).textContent =
+	document.getElementById(`lnk${toCapitalize(_settingName)}`).textContent =
 		`${getStgDetailName(g_stateObj[_settingName])}${_unitName}${g_localStorage[_settingName] === g_stateObj[_settingName] ? ' *' : ''}`;
 };
 
@@ -5507,11 +5518,10 @@ const setSetting = (_scrollNum, _settingName, _unitName = ``, _roundNum = 0) =>
  * @param {number} _heightPos 
  * @param {string} _defaultStr 
  */
-const makeDisabledLabel = (_id, _heightPos, _defaultStr) => {
-	return createDivCss2Label(_id, _defaultStr, {
+const makeDisabledLabel = (_id, _heightPos, _defaultStr) =>
+	createDivCss2Label(_id, _defaultStr, {
 		x: g_limitObj.setLblLeft, y: g_limitObj.setLblHeight * _heightPos,
 	}, g_cssObj.settings_Disabled);
-};
 
 /**
  * 保存済みリバース取得処理
@@ -5769,7 +5779,7 @@ const getKeyCtrl = (_localStorage, _extraKeyName = ``) => {
 	const basePtn = `${g_keyObj.currentKey}_${g_keyObj.storagePtn}`;
 	const baseKeyNum = g_keyObj[`${g_keyObj.defaultProp}${basePtn}`].length;
 
-	if (_localStorage[`keyCtrl${_extraKeyName}`] !== undefined && _localStorage[`keyCtrl${_extraKeyName}`][0].length > 0) {
+	if (_localStorage[`keyCtrl${_extraKeyName}`]?.[0].length > 0) {
 		const prevPtn = g_keyObj.currentPtn;
 		g_keyObj.currentPtn = -1;
 		const copyPtn = `${g_keyObj.currentKey}_-1`;
@@ -5811,12 +5821,12 @@ const getKeyCtrl = (_localStorage, _extraKeyName = ``) => {
  */
 const makeSettingLblCssButton = (_id, _name, _heightPos, _func, { x, y, w, h, siz, cxtFunc = _ => true, ...rest } = {}, ..._classes) => {
 	const tmpObj = {
-		x: x !== undefined ? x : g_limitObj.setLblLeft,
-		y: y !== undefined ? y : g_limitObj.setLblHeight * _heightPos,
-		w: w !== undefined ? w : g_limitObj.setLblWidth,
-		h: h !== undefined ? h : g_limitObj.setLblHeight,
-		siz: siz !== undefined ? siz : g_limitObj.setLblSiz,
-		cxtFunc: cxtFunc !== undefined ? cxtFunc : _ => true,
+		x: x ?? g_limitObj.setLblLeft,
+		y: y ?? g_limitObj.setLblHeight * _heightPos,
+		w: w ?? g_limitObj.setLblWidth,
+		h: h ?? g_limitObj.setLblHeight,
+		siz: siz ?? g_limitObj.setLblSiz,
+		cxtFunc: cxtFunc ?? (_ => true),
 	};
 	return createCss2Button(_id, _name, _func, { ...tmpObj, ...rest }, g_cssObj.button_Default, ..._classes);
 };
@@ -5828,14 +5838,13 @@ const makeSettingLblCssButton = (_id, _name, _heightPos, _func, { x, y, w, h, si
  * @param {number} _heightPos 上からの配置順
  * @param {function} _func
  */
-const makeDifLblCssButton = (_id, _name, _heightPos, _func, { x = 0, w = g_limitObj.difSelectorWidth, btnStyle = `Default` } = {}) => {
-	return createCss2Button(_id, _name, _func, {
-		x: x, y: g_limitObj.setLblHeight * _heightPos,
-		w: w, h: g_limitObj.setLblHeight,
+const makeDifLblCssButton = (_id, _name, _heightPos, _func, { x = 0, w = g_limitObj.difSelectorWidth, btnStyle = `Default` } = {}) =>
+	createCss2Button(_id, _name, _func, {
+		x, y: g_limitObj.setLblHeight * _heightPos,
+		w, h: g_limitObj.setLblHeight,
 		siz: g_limitObj.difSelectorSiz,
 		borderStyle: `solid`,
 	}, g_cssObj[`button_${btnStyle}`], g_cssObj.button_ON);
-};
 
 /**
  * 設定・オプション用の設定変更ミニボタン
@@ -5844,14 +5853,13 @@ const makeDifLblCssButton = (_id, _name, _heightPos, _func, { x = 0, w = g_limit
  * @param {number} _heightPos 上からの配置順
  * @param {function} _func 
  */
-const makeMiniCssButton = (_id, _directionFlg, _heightPos, _func, { dx = 0, dy = 0, dw = 0, dh = 0, dsiz = 0, visibility = `visible` } = {}) => {
-	return createCss2Button(`${_id}${_directionFlg}`, g_settingBtnObj.chara[_directionFlg], _func, {
+const makeMiniCssButton = (_id, _directionFlg, _heightPos, _func, { dx = 0, dy = 0, dw = 0, dh = 0, dsiz = 0, visibility = `visible` } = {}) =>
+	createCss2Button(`${_id}${_directionFlg}`, g_settingBtnObj.chara[_directionFlg], _func, {
 		x: g_settingBtnObj.pos[_directionFlg] + dx,
 		y: g_limitObj.setLblHeight * _heightPos + dy,
 		w: g_limitObj.setMiniWidth + dw, h: g_limitObj.setLblHeight + dh, siz: g_limitObj.setLblSiz + dsiz,
 		visibility: visibility
 	}, g_cssObj.button_Mini);
-};
 
 /**
  * カラーグループ、シャッフルグループの再設定
@@ -5864,7 +5872,7 @@ const resetGroupList = (_type, _keyCtrlPtn) => {
 	if (g_keyObj.currentPtn === -1) {
 		g_keycons[`${_type}Groups`] = addValtoArray(g_keycons[`${_type}Groups`], -1);
 	}
-	g_keycons[`${_type}GroupNum`] = (g_keyObj.currentPtn === -1 ? -1 : 0);
+	g_keycons[`${_type}GroupNum`] = Math.min(g_keyObj.currentPtn, 0);
 	while (g_keyObj[`${_type}${_keyCtrlPtn}_${k}`] !== undefined) {
 		g_keycons[`${_type}Groups`].push(k);
 		k++;
@@ -5878,7 +5886,7 @@ const resetGroupList = (_type, _keyCtrlPtn) => {
 const settingsDisplayInit = _ => {
 
 	clearWindow(true);
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 	g_baseDisp = `Display`;
 	g_currentPage = `settingsDisplay`;
 
@@ -5925,21 +5933,6 @@ const createSettingsDisplayWindow = _sprite => {
 		const list = [C_FLG_OFF, C_FLG_ON];
 		const linkId = `lnk${_name}`;
 
-		/**
-		 * 無効化用ラベル作成
-		 * @param {string} _id 
-		 * @param {number} _heightPos 
-		 * @param {number} _widthPos
-		 * @param {string} _defaultStr 
-		 * @param {string} _flg
-		 */
-		const makeDisabledDisplayLabel = (_id, _heightPos, _widthPos, _defaultStr, _flg) => {
-			return createDivCss2Label(_id, _defaultStr, {
-				x: 30 + 180 * _widthPos, y: 3 + g_limitObj.setLblHeight * _heightPos,
-				w: 170, siz: g_limitObj.difSelectorSiz,
-			}, g_cssObj[`button_Disabled${flg}`]);
-		};
-
 		if (g_headerObj[`${_name}Use`]) {
 			const switchDisplay = evt => {
 				const displayFlg = g_stateObj[`d_${_name.toLowerCase()}`];
@@ -5960,8 +5953,12 @@ const createSettingsDisplayWindow = _sprite => {
 			createScText(document.getElementById(linkId), `${toCapitalize(_name)}`,
 				{ displayName: g_currentPage, targetLabel: linkId, x: -5 });
 		} else {
-			displaySprite.appendChild(makeDisabledDisplayLabel(linkId, _heightPos, _widthPos,
-				g_lblNameObj[`d_${toCapitalize(_name)}`] + `:${g_headerObj[`${_name}Set`]}`, g_headerObj[`${_name}Set`]));
+			displaySprite.appendChild(
+				createDivCss2Label(linkId, g_lblNameObj[`d_${toCapitalize(_name)}`] + `:${g_headerObj[`${_name}Set`]}`, {
+					x: 30 + 180 * _widthPos, y: 3 + g_limitObj.setLblHeight * _heightPos,
+					w: 170, siz: g_limitObj.difSelectorSiz,
+				}, g_cssObj[`button_Disabled${flg}`])
+			);
 		}
 	};
 
@@ -6003,7 +6000,7 @@ const createSettingsDisplayWindow = _sprite => {
 			g_cssObj[`button_Rev${g_stateObj.filterLock}`]);
 	};
 
-	const appearanceSlider = document.querySelector(`#appearanceSlider`);
+	const appearanceSlider = document.getElementById(`appearanceSlider`);
 	appearanceSlider.addEventListener(`input`, _ =>
 		g_hidSudObj.filterPos = inputSlider(appearanceSlider, lblAppearancePos), false);
 
@@ -6061,9 +6058,9 @@ const interlockingButton = (_headerObj, _name, _current, _next, _buttonFlg = fal
 					let txtDisabled = ``;
 					if (!g_headerObj[`${defaultOption}Use`]) {
 						txtDisabled = `Disabled`;
-						document.querySelector(`#lnk${defaultOption}`).textContent = `${toCapitalize(defaultOption)}:${_next}`;
+						document.getElementById(`lnk${defaultOption}`).textContent = `${toCapitalize(defaultOption)}:${_next}`;
 					}
-					document.querySelector(`#lnk${defaultOption}`).classList.replace(g_cssObj[`button_${txtDisabled}${_current}`], g_cssObj[`button_Disabled${_next}`]);
+					document.getElementById(`lnk${defaultOption}`).classList.replace(g_cssObj[`button_${txtDisabled}${_current}`], g_cssObj[`button_Disabled${_next}`]);
 				}
 				// さらに連動する場合は設定を反転
 				interlockingButton(_headerObj, defaultOption, _next, _current, _buttonFlg);
@@ -6081,7 +6078,7 @@ const interlockingButton = (_headerObj, _name, _current, _next, _buttonFlg = fal
 const keyConfigInit = (_kcType = g_kcType) => {
 
 	clearWindow(true);
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 	g_kcType = _kcType;
 	g_currentPage = `keyConfig`;
 
@@ -6150,7 +6147,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {string} _cssName 
 	 */
 	const changeKeyConfigColor = (_j, _k, _cssName) =>
-		changeConfigColor(document.querySelector(`#keycon${_j}_${_k}`), _cssName);
+		changeConfigColor(document.getElementById(`keycon${_j}_${_k}`), _cssName);
 
 	/**
 	 * 一時的に矢印色・シャッフルグループを変更（共通処理）
@@ -6741,7 +6738,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 					const j = g_keycons.cursorNumList[m];
 					for (let k = 0; k < g_keyObj[`keyCtrl${keyCtrlPtn}`][j].length; k++) {
 						g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setIntVal(g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k]);
-						document.querySelector(`#keycon${j}_${k}`).textContent = g_kCd[g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k]];
+						document.getElementById(`keycon${j}_${k}`).textContent = g_kCd[g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k]];
 						changeKeyConfigColor(j, k, g_keyObj.currentPtn === -1 ? g_cssObj.keyconfig_Defaultkey : g_cssObj.title_base);
 					}
 				}
@@ -6756,7 +6753,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 	// キーボード押下時処理
 	setShortcutEvent(g_currentPage, (kbCode, kbKey) => {
-		const keyCdObj = document.querySelector(`#keycon${g_currentj}_${g_currentk}`);
+		const keyCdObj = document.getElementById(`keycon${g_currentj}_${g_currentk}`);
 		let setKey = g_kCdN.findIndex(kCd => kCd === kbCode);
 
 		// 右シフトキー対応
@@ -6779,7 +6776,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 			return;
 		}
 
-		if (setKey === C_KEY_RETRY && (!g_isMac || (g_isMac && g_currentk === 0))) {
+		if (setKey === C_KEY_RETRY && (!g_isMac || g_currentk === 0)) {
 			// スキップ
 		} else {
 			// キー割り当て処理
@@ -6826,8 +6823,7 @@ const getShadowColor = (_colorPos, _arrowColor) => g_headerObj.setShadowColor[_c
 const getKeyInfo = _ => {
 	const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
 	const keyNum = g_keyObj[`${g_keyObj.defaultProp}${keyCtrlPtn}`].length;
-	const posMax = (g_keyObj[`divMax${keyCtrlPtn}`] !== undefined ?
-		g_keyObj[`divMax${keyCtrlPtn}`] : Math.max(...g_keyObj[`pos${keyCtrlPtn}`]) + 1);
+	const posMax = g_keyObj[`divMax${keyCtrlPtn}`] ?? Math.max(...g_keyObj[`pos${keyCtrlPtn}`]) + 1;
 	const divideCnt = g_keyObj[`div${keyCtrlPtn}`] - 1;
 	const keyGroupMaps = setVal(g_keyObj[`keyGroup${keyCtrlPtn}`], [...Array(keyNum)].fill([`0`]), C_TYP_STRING);
 	const keyGroupList = makeDedupliArray(keyGroupMaps.flat()).sort((a, b) => parseInt(a) - parseInt(b));
@@ -6953,7 +6949,7 @@ const loadMusic = _ => {
 
 	// 進捗時
 	request.addEventListener(`progress`, _event => {
-		const lblLoading = document.querySelector(`#lblLoading`);
+		const lblLoading = document.getElementById(`lblLoading`);
 
 		if (_event.lengthComputable) {
 			const rate = _event.loaded / _event.total;
@@ -6967,8 +6963,8 @@ const loadMusic = _ => {
 	});
 
 	// エラー処理
-	request.addEventListener(`timeout`, _ => makeWarningWindow(`${g_msgInfoObj.E_0033}`, { backBtnUse: true }));
-	request.addEventListener(`error`, _ => makeWarningWindow(`${g_msgInfoObj.E_0034}`, { backBtnUse: true }));
+	request.addEventListener(`timeout`, _ => makeWarningWindow(g_msgInfoObj.E_0033, { backBtnUse: true }));
+	request.addEventListener(`error`, _ => makeWarningWindow(g_msgInfoObj.E_0034, { backBtnUse: true }));
 
 	request.send();
 };
@@ -7147,12 +7143,8 @@ const loadingScoreInit = async () => {
 	// シャッフルグループを扱いやすくする
 	// [0, 0, 0, 1, 0, 0, 0] -> [[0, 1, 2, 4, 5, 6], [3]]
 	const shuffleGroupMap = {};
-	g_keyObj[`shuffle${keyCtrlPtn}`].forEach((_val, _i) => {
-		if (shuffleGroupMap[_val] === undefined) {
-			shuffleGroupMap[_val] = [];
-		}
-		shuffleGroupMap[_val].push(_i);
-	});
+	g_keyObj[`shuffle${keyCtrlPtn}`].forEach((_val, _i) =>
+		shuffleGroupMap[_val]?.push(_i) || (shuffleGroupMap[_val] = [_i]));
 
 	// Mirror,Random,S-Randomの適用
 	g_shuffleFunc[g_stateObj.shuffle](keyNum, Object.values(shuffleGroupMap));
@@ -7907,7 +7899,7 @@ const setSpeedOnFrame = (_speedData, _lastFrame) => {
 	let currentSpeed = g_stateObj.speed * 2;
 
 	for (let frm = 0, s = 0; frm <= _lastFrame; frm++) {
-		while (_speedData !== undefined && frm >= _speedData[s]) {
+		while (frm >= _speedData?.[s]) {
 			currentSpeed = _speedData[s + 1] * g_stateObj.speed * 2;
 			s += 2;
 		}
@@ -7992,11 +7984,7 @@ const pushArrows = (_dataObj, _speedOnFrame, _motionOnFrame, _firstArrivalFrame)
 
 	const setNotes = (_j, _k, _data, _startPoint, _header, _frzFlg = false) => {
 		if (_startPoint >= 0) {
-			if (g_workObj[`mk${_header}Arrow`][_startPoint] === undefined) {
-				g_workObj[`mk${_header}Arrow`][_startPoint] = [];
-			}
-			g_workObj[`mk${_header}Arrow`][_startPoint].push(_j);
-
+			g_workObj[`mk${_header}Arrow`][_startPoint]?.push(_j) || (g_workObj[`mk${_header}Arrow`][_startPoint] = [_j]);
 			if (_frzFlg) {
 				g_workObj[`mk${_header}Length`][_j][_k] = getFrzLength(_speedOnFrame, _data[_k], _data[_k + 1]);
 			}
@@ -8239,12 +8227,10 @@ const pushArrows = (_dataObj, _speedOnFrame, _motionOnFrame, _firstArrivalFrame)
 	g_workObj.speedData.push(g_scoreObj.frameNum);
 	g_workObj.speedData.push(_speedOnFrame[g_scoreObj.frameNum]);
 
-	if (_dataObj.speedData !== undefined) {
-		for (let k = 0; k < _dataObj.speedData.length; k += 2) {
-			if (_dataObj.speedData[k] >= g_scoreObj.frameNum) {
-				g_workObj.speedData.push(_dataObj.speedData[k]);
-				g_workObj.speedData.push(_speedOnFrame[_dataObj.speedData[k]]);
-			}
+	for (let k = 0; k < _dataObj?.speedData.length; k += 2) {
+		if (_dataObj.speedData[k] >= g_scoreObj.frameNum) {
+			g_workObj.speedData.push(_dataObj.speedData[k]);
+			g_workObj.speedData.push(_speedOnFrame[_dataObj.speedData[k]]);
 		}
 	}
 };
@@ -8334,17 +8320,6 @@ const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
 	const addAll = Number(_allFlg) * 1000;
 	const allUseTypes = [];
 
-	/**
-	 * 色変化用配列（フレーム別）の初期化
-	 * @param {string} _baseStr 
-	 */
-	const initialize = (_baseStr) => {
-		if (g_workObj[_baseStr][_frame] === undefined) {
-			g_workObj[_baseStr][_frame] = [];
-			g_workObj[`${_baseStr}Cd`][_frame] = [];
-		}
-	};
-
 	/**
 	 * 全体色変化の有効化（フレーム別）
 	 * @param  {...any} _types 
@@ -8361,8 +8336,8 @@ const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
 	 * @param {number} _cVal 
 	 */
 	const pushColor = (_baseStr, _cVal) => {
-		g_workObj[_baseStr][_frame].push(_cVal);
-		g_workObj[`${_baseStr}Cd`][_frame].push(colorCd);
+		g_workObj[_baseStr][_frame]?.push(_cVal) || (g_workObj[_baseStr][_frame] = [_cVal]);
+		g_workObj[`${_baseStr}Cd`][_frame]?.push(colorCd) || (g_workObj[`${_baseStr}Cd`][_frame] = [colorCd]);
 	};
 
 	if (_val < 30 || _val >= 1000) {
@@ -8378,8 +8353,6 @@ const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
 
 		// 矢印の色変化 (追随指定時はフリーズアローも色変化)
 		baseHeaders.forEach(baseHeader => {
-			initialize(baseHeader);
-
 			if (_val < 20 || _val >= 1000) {
 				pushColor(baseHeader, g_workObj.replaceNums[_val % 1000] + addAll);
 			} else if (_val >= 20) {
@@ -8417,7 +8390,6 @@ const pushColors = (_header, _frame, _val, _colorCd, _allFlg) => {
 
 			g_keyObj[`color${tkObj.keyCtrlPtn}`].forEach((cpattern, k) => {
 				if (colorPos === cpattern) {
-					initialize(baseHeader + ctype);
 					pushColor(baseHeader + ctype, k + addAll);
 				}
 			});
@@ -8474,30 +8446,24 @@ const pushScrollchs = (_header, _frameArrow, _val, _frameStep, _scrollDir) => {
 
 	const frameArrow = Math.max(_frameArrow, g_scoreObj.frameNum);
 	const frameStep = Math.max(_frameStep, g_scoreObj.frameNum);
+	const pushData = (_pattern, _frame, _val) =>
+		g_workObj[`mkScrollch${_pattern}`][_frame]?.push(_val) || (g_workObj[`mkScrollch${_pattern}`][_frame] = [_val]);
 
-	if (g_workObj.mkScrollchArrow[frameArrow] === undefined) {
-		g_workObj.mkScrollchArrow[frameArrow] = [];
-		g_workObj.mkScrollchArrowDir[frameArrow] = [];
-	}
-	if (g_workObj.mkScrollchStep[frameStep] === undefined) {
-		g_workObj.mkScrollchStep[frameStep] = [];
-		g_workObj.mkScrollchStepDir[frameStep] = [];
-	}
 	if (_val < 20 || _val >= 1000) {
 		const realVal = g_workObj.replaceNums[_val % 1000];
-		g_workObj.mkScrollchArrow[frameArrow].push(realVal);
-		g_workObj.mkScrollchArrowDir[frameArrow].push(_scrollDir);
-		g_workObj.mkScrollchStep[frameStep].push(realVal);
-		g_workObj.mkScrollchStepDir[frameStep].push(_scrollDir);
+		pushData(`Arrow`, frameArrow, realVal);
+		pushData(`ArrowDir`, frameArrow, _scrollDir);
+		pushData(`Step`, frameStep, realVal);
+		pushData(`StepDir`, frameStep, _scrollDir);
 
 	} else {
 		const colorNum = _val - 20;
 		for (let j = 0; j < tkObj.keyNum; j++) {
 			if (g_keyObj[`color${tkObj.keyCtrlPtn}`][j] === colorNum) {
-				g_workObj.mkScrollchArrow[frameArrow].push(j);
-				g_workObj.mkScrollchArrowDir[frameArrow].push(_scrollDir);
-				g_workObj.mkScrollchStep[frameStep].push(j);
-				g_workObj.mkScrollchStepDir[frameStep].push(_scrollDir);
+				pushData(`Arrow`, frameArrow, j);
+				pushData(`ArrowDir`, frameArrow, _scrollDir);
+				pushData(`Step`, frameStep, j);
+				pushData(`StepDir`, frameStep, _scrollDir);
 			}
 		}
 	}
@@ -8566,8 +8532,7 @@ const getArrowSettings = _ => {
 	// モーション管理
 	g_typeLists.arrow.forEach(type => g_workObj[`${type}CssMotions`] = [...Array(keyNum)].fill(``));
 
-	const scrollDirOptions = (g_keyObj[`scrollDir${keyCtrlPtn}`] !== undefined ?
-		g_keyObj[`scrollDir${keyCtrlPtn}`][g_stateObj.scroll] : [...Array(keyNum)].fill(1));
+	const scrollDirOptions = g_keyObj[`scrollDir${keyCtrlPtn}`]?.[g_stateObj.scroll] ?? [...Array(keyNum)].fill(1);
 
 	g_stateObj.autoAll = boolToSwitch(g_stateObj.autoPlay === C_FLG_ALL);
 	g_workObj.hitPosition = (g_stateObj.autoAll === C_FLG_ON ? 0 : g_stateObj.hitPosition);
@@ -8713,7 +8678,7 @@ const setKeyCtrl = (_localStorage, _keyNum, _keyCtrlPtn) => {
  */
 const mainInit = _ => {
 	clearWindow(true, `Main`);
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 	document.oncontextmenu = _ => false;
 	g_currentPage = `main`;
 
@@ -8899,31 +8864,27 @@ const mainInit = _ => {
 	g_scoreObj.fadeOutTerm = C_FRM_AFTERFADE;
 
 	// フェードアウト時間指定の場合、その7秒(=420フレーム)後に終了する
-	if (g_headerObj.fadeFrame !== undefined) {
-		let fadeNo = -1;
-		if (g_headerObj.fadeFrame.length >= g_stateObj.scoreId + 1) {
-			fadeNo = (isNaN(parseInt(g_headerObj.fadeFrame[g_stateObj.scoreId][0])) ? -1 : g_stateObj.scoreId);
-		}
-		if (fadeNo !== -1) {
-			// フェードアウト指定の場合、曲長(フェードアウト開始まで)は FadeFrame - (本来のblankFrame)
-			duration = parseInt(g_headerObj.fadeFrame[fadeNo][0]) - g_headerObj.blankFrameDef;
-			g_scoreObj.fadeOutFrame = Math.ceil(duration / g_headerObj.playbackRate + g_headerObj.blankFrame + g_stateObj.adjustment);
+	let fadeNo = -1;
+	if (g_headerObj.fadeFrame?.length >= g_stateObj.scoreId + 1) {
+		fadeNo = (isNaN(parseInt(g_headerObj.fadeFrame[g_stateObj.scoreId][0])) ? -1 : g_stateObj.scoreId);
+	}
+	if (fadeNo !== -1) {
+		// フェードアウト指定の場合、曲長(フェードアウト開始まで)は FadeFrame - (本来のblankFrame)
+		duration = parseInt(g_headerObj.fadeFrame[fadeNo][0]) - g_headerObj.blankFrameDef;
+		g_scoreObj.fadeOutFrame = Math.ceil(duration / g_headerObj.playbackRate + g_headerObj.blankFrame + g_stateObj.adjustment);
 
-			if (g_headerObj.fadeFrame[fadeNo].length > 1) {
-				g_scoreObj.fadeOutTerm = Number(g_headerObj.fadeFrame[fadeNo][1]);
-			}
+		if (g_headerObj.fadeFrame[fadeNo].length > 1) {
+			g_scoreObj.fadeOutTerm = Number(g_headerObj.fadeFrame[fadeNo][1]);
 		}
 	}
 
 	// 終了時間指定の場合、その値を適用する
 	let endFrameUseFlg = false;
-	if (g_headerObj.endFrame !== undefined) {
-		const tmpEndFrame = g_headerObj.endFrame[g_stateObj.scoreId] || g_headerObj.endFrame[0];
-		if (!isNaN(parseInt(tmpEndFrame))) {
-			// 終了時間指定の場合、曲長は EndFrame - (本来のblankFrame)
-			duration = parseInt(tmpEndFrame) - g_headerObj.blankFrameDef;
-			endFrameUseFlg = true;
-		}
+	const tmpEndFrame = g_headerObj.endFrame?.[g_stateObj.scoreId] || g_headerObj.endFrame?.[0];
+	if (!isNaN(parseInt(tmpEndFrame))) {
+		// 終了時間指定の場合、曲長は EndFrame - (本来のblankFrame)
+		duration = parseInt(tmpEndFrame) - g_headerObj.blankFrameDef;
+		endFrameUseFlg = true;
 	}
 
 	let fullFrame = Math.ceil(duration / g_headerObj.playbackRate + g_headerObj.blankFrame + g_stateObj.adjustment);
@@ -9100,14 +9061,14 @@ const mainInit = _ => {
 
 	// Ready?表示
 	if (!g_headerObj.customReadyUse) {
-		const readyColor = (g_headerObj.readyColor !== `` ? g_headerObj.readyColor : g_headerObj.setColorOrg[0]);
+		const readyColor = g_headerObj.readyColor || g_headerObj.setColorOrg[0];
 		let readyDelayFrame = 0;
 		if (g_stateObj.fadein === 0 && g_headerObj.readyDelayFrame > 0 &&
 			g_headerObj.readyDelayFrame + g_stateObj.adjustment > 0) {
 			readyDelayFrame = g_headerObj.readyDelayFrame + g_stateObj.adjustment;
 		}
-		const readyHtml = (g_headerObj.readyHtml !== `` ? g_headerObj.readyHtml :
-			`<span style='color:${readyColor};font-size:${wUnit(60)};'>R</span>EADY<span style='font-size:${wUnit(50)};'>?</span>`);
+		const readyHtml = g_headerObj.readyHtml ||
+			`<span style='color:${readyColor};font-size:${wUnit(60)};'>R</span>EADY<span style='font-size:${wUnit(50)};'>?</span>`;
 
 		divRoot.appendChild(
 			createDivCss2Label(`lblReady`, readyHtml, {
@@ -9134,7 +9095,7 @@ const mainInit = _ => {
 	const mainKeyDownActFunc = {
 
 		OFF: (_code, _key) => {
-			const convCode = (_code === `` ? (_key === `Shift` ? g_kCdNameObj.shiftRKey : g_kCdNameObj.unknownKey) : _code);
+			const convCode = _code || (_key === `Shift` ? g_kCdNameObj.shiftRKey : g_kCdNameObj.unknownKey);
 			const matchKeys = g_workObj.keyCtrlN;
 
 			for (let j = 0; j < keyNum; j++) {
@@ -9234,7 +9195,7 @@ const mainInit = _ => {
 		if (g_workObj[`mk${toCapitalize(_name)}ColorChangeAll`][g_scoreObj.frameNum]) {
 			const colorSelf = g_workObj[`${_name}Colors`][_j];
 			const colorAll = g_workObj[`${_name}ColorsAll`][_j];
-			const arrowTop = document.querySelector(`#${_name}Top${_j}_${_k}`);
+			const arrowTop = document.getElementById(`${_name}Top${_j}_${_k}`);
 
 			if (arrowTop.getAttribute(`color`) !== colorSelf && colorAll === colorSelf) {
 				arrowTop.style.background = colorAll;
@@ -9253,9 +9214,9 @@ const mainInit = _ => {
 	const changeFrzColor = (_j, _k, _name, _state) => {
 
 		if (g_workObj[`mk${toCapitalize(_name)}ColorChangeAll`][g_scoreObj.frameNum]) {
-			const frzTop = document.querySelector(`#${_name}Top${_j}_${_k}`);
-			const frzBar = document.querySelector(`#${_name}Bar${_j}_${_k}`);
-			const frzBtm = document.querySelector(`#${_name}Btm${_j}_${_k}`);
+			const frzTop = document.getElementById(`${_name}Top${_j}_${_k}`);
+			const frzBar = document.getElementById(`${_name}Bar${_j}_${_k}`);
+			const frzBtm = document.getElementById(`${_name}Btm${_j}_${_k}`);
 			const frzName = `${_name}${_state}`;
 
 			// 矢印部分の色変化
@@ -9330,7 +9291,7 @@ const mainInit = _ => {
 		// 矢印(オート、AutoPlay: ON)
 		arrowON: (_j, _arrowName, _cnt) => {
 			if (_cnt === 0) {
-				const stepDivHit = document.querySelector(`#stepHit${_j}`);
+				const stepDivHit = document.getElementById(`stepHit${_j}`);
 
 				judgeIi(_cnt);
 				stepDivHit.style.opacity = 1;
@@ -9342,7 +9303,7 @@ const mainInit = _ => {
 		// ダミー矢印(オート、AutoPlay: OFF)
 		dummyArrowOFF: (_j, _arrowName, _cnt) => {
 			if (_cnt === 0) {
-				const stepDivHit = document.querySelector(`#stepHit${_j}`);
+				const stepDivHit = document.getElementById(`stepHit${_j}`);
 
 				g_customJsObj.dummyArrow.forEach(func => func());
 				stepDivHit.style.top = wUnit(-15);
@@ -9759,11 +9720,11 @@ const mainInit = _ => {
 		g_customJsObj.mainEnterFrame.forEach(func => func());
 
 		// 速度変化 (途中変速, 個別加速)
-		while (g_workObj.speedData !== undefined && currentFrame >= g_workObj.speedData[speedCnts]) {
+		while (currentFrame >= g_workObj.speedData?.[speedCnts]) {
 			g_workObj.currentSpeed = g_workObj.speedData[speedCnts + 1];
 			speedCnts += 2;
 		}
-		while (g_workObj.boostData !== undefined && currentFrame >= g_workObj.boostData[boostCnts]) {
+		while (currentFrame >= g_workObj.boostData?.[boostCnts]) {
 			g_workObj.boostSpd = g_workObj.boostData[boostCnts + 1];
 			g_workObj.boostDir = (g_workObj.boostSpd > 0 ? 1 : -1);
 			boostCnts += 2;
@@ -9819,7 +9780,7 @@ const mainInit = _ => {
 
 		// 矢印・フリーズアロー移動＆消去
 		for (let j = 0; j < keyNum; j++) {
-			const stepDivHit = document.querySelector(`#stepHit${j}`);
+			const stepDivHit = document.getElementById(`stepHit${j}`);
 
 			// ダミー矢印
 			for (let k = g_workObj.judgDummyArrowCnt[j]; k <= dummyArrowCnts[j]; k++) {
@@ -9855,7 +9816,7 @@ const mainInit = _ => {
 		g_scoreObj.wordData[currentFrame]?.forEach(tmpObj => {
 			g_wordObj.wordDir = tmpObj[0];
 			g_wordObj.wordDat = tmpObj[1];
-			g_wordSprite = document.querySelector(`#lblword${g_wordObj.wordDir}`);
+			g_wordSprite = document.getElementById(`lblword${g_wordObj.wordDir}`);
 
 			const wordDepth = Number(g_wordObj.wordDir);
 			if (g_wordObj.wordDat.substring(0, 5) === `[fade`) {
@@ -9901,13 +9862,13 @@ const mainInit = _ => {
 
 		// 判定キャラクタ消去
 		jdgGroups.forEach(jdg => {
-			let charaJCnt = document.querySelector(`#chara${jdg}`).getAttribute(`cnt`);
+			let charaJCnt = document.getElementById(`chara${jdg}`).getAttribute(`cnt`);
 			if (charaJCnt > 0) {
-				document.querySelector(`#chara${jdg}`).setAttribute(`cnt`, --charaJCnt);
+				document.getElementById(`chara${jdg}`).setAttribute(`cnt`, --charaJCnt);
 				if (charaJCnt === 0) {
-					document.querySelector(`#chara${jdg}`).textContent = ``;
-					document.querySelector(`#combo${jdg}`).textContent = ``;
-					document.querySelector(`#diff${jdg}`).textContent = ``;
+					document.getElementById(`chara${jdg}`).textContent = ``;
+					document.getElementById(`combo${jdg}`).textContent = ``;
+					document.getElementById(`diff${jdg}`).textContent = ``;
 				}
 			}
 		});
@@ -10209,7 +10170,7 @@ const judgeArrow = _j => {
 	const judgeTargetArrow = _difFrame => {
 		const _difCnt = Math.abs(_difFrame);
 		const stepHitTargetArrow = _resultJdg => {
-			const stepDivHit = document.querySelector(`#stepHit${_j}`);
+			const stepDivHit = document.getElementById(`stepHit${_j}`);
 			stepDivHit.style.top = wUnit(currentArrow.prevY - parseFloat($id(`stepRoot${_j}`).top) - 15 + g_workObj.hitPosition * g_workObj.scrollDir[_j]);
 			stepDivHit.style.opacity = 0.75;
 			stepDivHit.classList.value = ``;
@@ -10306,8 +10267,8 @@ const displayDiff = (_difFrame, _fjdg = ``, _justFrames = g_headerObj.justFrames
  * @param {string} _state 
  */
 const changeLifeColor = (_state = ``) => {
-	const lblLife = document.querySelector(`#lblLife`);
-	const lifeBar = document.querySelector(`#lifeBar`);
+	const lblLife = document.getElementById(`lblLife`);
+	const lifeBar = document.getElementById(`lifeBar`);
 	if (_state !== ``) {
 		const lifeCss = g_cssObj[`life_${_state}`];
 		lblLife.classList.remove(g_cssObj.life_Max, g_cssObj.life_Cleared, g_cssObj.life_Failed);
@@ -10357,9 +10318,9 @@ const lifeDamage = (_excessive = false) => {
 const changeJudgeCharacter = (_name, _character, _fjdg = ``) => {
 	g_resultObj[_name]++;
 	g_currentArrows++;
-	document.querySelector(`#chara${_fjdg}J`).innerHTML = `<span class="common_${_name}">${_character}</span>`;
-	document.querySelector(`#chara${_fjdg}J`).setAttribute(`cnt`, C_FRM_JDGMOTION);
-	document.querySelector(`#lbl${toCapitalize(_name)}`).textContent = g_resultObj[_name];
+	document.getElementById(`chara${_fjdg}J`).innerHTML = `<span class="common_${_name}">${_character}</span>`;
+	document.getElementById(`chara${_fjdg}J`).setAttribute(`cnt`, C_FRM_JDGMOTION);
+	document.getElementById(`lbl${toCapitalize(_name)}`).textContent = g_resultObj[_name];
 };
 
 /**
@@ -10489,7 +10450,7 @@ const makeFinishView = _text => {
 	finishView.innerHTML = _text;
 	finishView.style.opacity = 1;
 	[`charaJ`, `comboJ`, `diffJ`, `charaFJ`, `comboFJ`, `diffFJ`].forEach(label =>
-		document.querySelector(`#${label}`).textContent = ``);
+		document.getElementById(label).textContent = ``);
 };
 
 const finishViewing = _ => {
@@ -10528,7 +10489,7 @@ const resultInit = _ => {
 		g_scoreObj[`${sprite}ResultLoopCount`] = 0;
 	});
 
-	const divRoot = document.querySelector(`#divRoot`);
+	const divRoot = document.getElementById(`divRoot`);
 
 	// 曲時間制御変数
 	let thisTime;
@@ -10789,7 +10750,7 @@ const resultInit = _ => {
 
 	} else {
 		resultWindow.appendChild(makeCssResultSymbol(`lblAutoView`, 215, g_cssObj.result_noRecord, 4, `(No Record)`));
-		const lblAutoView = document.querySelector(`#lblAutoView`);
+		const lblAutoView = document.getElementById(`lblAutoView`);
 		lblAutoView.style.fontSize = wUnit(20);
 	}
 
@@ -10822,8 +10783,8 @@ const resultInit = _ => {
 						jdgScore.pos, `)`),
 				);
 			} else {
-				document.querySelector(`#lbl${jdgScore.id}L1`).textContent = `(${highscoreDfObj[score] >= 0 ? "+" : "－"}`;
-				document.querySelector(`#lbl${jdgScore.id}LS`).textContent = Math.abs(highscoreDfObj[score]);
+				document.getElementById(`lbl${jdgScore.id}L1`).textContent = `(${highscoreDfObj[score] >= 0 ? "+" : "－"}`;
+				document.getElementById(`lbl${jdgScore.id}LS`).textContent = Math.abs(highscoreDfObj[score]);
 			}
 		});
 

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2023/10/31 (v34.4.1)
+ * Revised : 2023/11/05 (v34.5.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -176,9 +176,6 @@ const g_windowObj = {
     divRoot: { margin: `auto`, letterSpacing: `normal` },
     divBack: { background: `linear-gradient(#000000, #222222)` },
 
-    scoreDetail: { x: 20, y: 85, w: 420, h: 236, visibility: `hidden` },
-    detailObj: { w: 420, h: 230, visibility: `hidden` },
-
     colorPickSprite: { x: 0, y: 90, w: 50, h: 280 },
 };
 
@@ -191,6 +188,8 @@ const updateWindowSiz = _ => {
         difList: { x: 165, y: 60, w: 280, h: 261 + g_sHeight - 500, overflow: `auto` },
         difCover: { x: 25, y: 60, w: 140, h: 261 + g_sHeight - 500, overflow: `auto`, opacity: 0.95 },
         displaySprite: { x: 25, y: 30, w: (g_sWidth - 450) / 2, h: g_limitObj.setLblHeight * 5 },
+        scoreDetail: { x: 20, y: 85, w: (g_sWidth - 500) / 2 + 420, h: 236, visibility: `hidden` },
+        detailObj: { w: (g_sWidth - 500) / 2 + 420, h: 230, visibility: `hidden` },
         keyconSprite: { y: 88, h: g_sHeight, overflow: `auto` },
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },
         playDataWindow: { x: g_sWidth / 2 - 225, y: 70, w: 450, h: 110 },
@@ -293,7 +292,7 @@ const updateWindowSiz = _ => {
             x: 130, y: 70, w: 200, h: 90,
         },
         dataArrowInfo2: {
-            x: 140, y: 70, w: 275, h: 150, overflow: `auto`,
+            x: 140, y: 70, w: (g_sWidth - 500) / 2 + 275, h: 150, overflow: `auto`,
         },
         lnkDifInfo: {
             w: g_limitObj.difCoverWidth, borderStyle: `solid`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "34.4.1",
+  "version": "34.5.0",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "index.js",
   "scripts": {