danoniplus 26.7.0 → 27.2.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2022/03/12
+ * Revised : 2022/03/27
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 26.7.0`;
-const g_revisedDate = `2022/03/12`;
+const g_version = `Ver 27.2.0`;
+const g_revisedDate = `2022/03/27`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -54,6 +54,10 @@ const g_randTime = Date.now();
 window.onload = async () => {
 	g_loadObj.main = true;
 	g_currentPage = `initial`;
+	const links = document.querySelectorAll(`link`);
+	if (Array.from(links).filter(elem => elem.getAttribute(`href`).indexOf(`danoni_main.css`) !== -1).length === 0) {
+		await importCssFile2(`${g_rootPath}../css/danoni_main.css?${g_randTime}`);
+	}
 
 	// ロード直後に定数・初期化ファイル、旧バージョン定義関数を読込
 	await loadScript2(`${g_rootPath}../js/lib/danoni_localbinary.js?${g_randTime}`, false);
@@ -240,7 +244,7 @@ const hasVal = _data => _data !== undefined && _data !== ``;
  * @param {string} _default 
  * @param {string} _type 
  */
-const setVal = (_checkStr, _default, _type) => {
+const setVal = (_checkStr, _default, _type = C_TYP_STRING) => {
 
 	let convertStr = _checkStr;
 
@@ -281,6 +285,22 @@ const setVal = (_checkStr, _default, _type) => {
 	return convertStr;
 };
 
+/**
+ * ブール値への変換
+ * @param {string} _val 
+ * @param {boolean} _defaultVal 
+ * @returns 
+ */
+const setBoolVal = (_val, _defaultVal = false) => setVal(_val, _defaultVal, C_TYP_BOOLEAN);
+
+/**
+ * 整数値への変換
+ * @param {string} _val 
+ * @param {number} _defaultVal 
+ * @returns 
+ */
+const setIntVal = (_val, _defaultVal = 0) => setVal(_val, _defaultVal, C_TYP_NUMBER);
+
 /**
  * 先頭のみ大文字に変換（それ以降はそのまま）
  * @param {string} _str 
@@ -366,7 +386,7 @@ const fuzzyListMatching = (_str, _headerList, _footerList) =>
 const replaceStr = (_str, _pairs) => {
 	let tmpStr = _str;
 	_pairs.forEach(pair => {
-		tmpStr = tmpStr.split(pair[0]).join(pair[1]);
+		tmpStr = tmpStr.replaceAll(pair[0], pair[1]);
 	});
 	return tmpStr;
 };
@@ -415,7 +435,7 @@ const nextPos = (_basePos, _num, _length) => (_basePos + _length + _num) % _leng
  */
 const transCode = _setCode => {
 	if ([`Control`, `Shift`, `Alt`].includes(_setCode.slice(0, -5))) {
-		return _setCode.replace(`Right`, `Left`);
+		return _setCode.replaceAll(`Right`, `Left`);
 	}
 	return _setCode;
 };
@@ -590,36 +610,6 @@ const preloadFile = (_as, _href, _type = ``, _crossOrigin = `anonymous`) => {
 	}
 };
 
-/**
- * 外部jsファイルの読込 (callback)
- * 読込可否を g_loadObj[ファイル名] で管理 (true: 読込成功, false: 読込失敗)
- * @deprecated v27以降非推奨予定
- * @param {string} _url 
- * @param {function} _callback 
- * @param {boolean} _requiredFlg (default : true / 読込必須)
- * @param {string} _charset (default : UTF-8)
- */
-function loadScript(_url, _callback, _requiredFlg = true, _charset = `UTF-8`) {
-	const baseUrl = _url.split(`?`)[0];
-	g_loadObj[baseUrl] = false;
-	const script = document.createElement(`script`);
-	script.type = `text/javascript`;
-	script.src = _url;
-	script.charset = _charset;
-	script.onload = _ => {
-		g_loadObj[baseUrl] = true;
-		_callback();
-	};
-	script.onerror = _ => {
-		if (_requiredFlg) {
-			makeWarningWindow(g_msgInfoObj.E_0041.split(`{0}`).join(_url.split(`?`)[0]));
-		} else {
-			_callback();
-		}
-	};
-	document.querySelector(`head`).appendChild(script);
-}
-
 /**
  * 外部jsファイルの読込 (Promise)
  * 読込可否を g_loadObj[ファイル名] で管理 (true: 読込成功, false: 読込失敗)
@@ -652,30 +642,6 @@ const loadScript2 = (_url, _requiredFlg = true, _charset = `UTF-8`) => {
 	});
 };
 
-/**
- * CSSファイルの読み込み (callback)
- * デフォルトは danoni_skin_default.css を読み込む
- * @deprecated v27以降非推奨予定
- * @param {url} _href 
- * @param {function} _func
- */
-function importCssFile(_href, _func) {
-	const baseUrl = _href.split(`?`)[0];
-	g_loadObj[baseUrl] = false;
-	const link = document.createElement(`link`);
-	link.rel = `stylesheet`;
-	link.href = _href;
-	link.onload = _ => {
-		g_loadObj[baseUrl] = true;
-		_func();
-	};
-	link.onerror = _ => {
-		makeWarningWindow(g_msgInfoObj.E_0041.split(`{0}`).join(baseUrl), { resetFlg: `title` });
-		_func();
-	};
-	document.head.appendChild(link);
-}
-
 /**
  * CSSファイルの読み込み (Promise)
  * デフォルトは danoni_skin_default.css を読み込む
@@ -701,35 +667,6 @@ const importCssFile2 = _href => {
 	});
 };
 
-/**
- * js, cssファイルの連続読込 (callback)
- * @deprecated v27以降非推奨予定
- * @param {number} _j 
- * @param {array} _fileData 
- * @param {string} _loadType
- * @param {function} _afterFunc 
- */
-function loadMultipleFiles(_j, _fileData, _loadType, _afterFunc = _ => true) {
-	if (_j < _fileData.length) {
-		const filePath = `${_fileData[_j][1]}${_fileData[_j][0]}?${new Date().getTime()}`;
-		if (_fileData[_j][0].endsWith(`.css`)) {
-			_loadType = `css`;
-		}
-
-		// jsファイル、cssファイルにより呼び出す関数を切替
-		if (_loadType === `js`) {
-			loadScript(filePath, _ =>
-				loadMultipleFiles(_j + 1, _fileData, _loadType, _afterFunc), false);
-		} else if (_loadType === `css`) {
-			const cssPath = filePath.split(`.js`).join(`.css`);
-			importCssFile(cssPath, _ =>
-				loadMultipleFiles(_j + 1, _fileData, _loadType, _afterFunc));
-		}
-	} else {
-		_afterFunc();
-	}
-}
-
 /**
  * js, cssファイルの連続読込 (async function)
  * @param {array} _fileData 
@@ -842,7 +779,7 @@ const colorToHex = (_color) => {
 	const tmpColor = _color.split(`;`);
 	const colorSet = tmpColor[0].split(` `);
 	return colorNameToCode(colorSet[0]) +
-		(tmpColor.length > 1 ? byteToHex(setVal(tmpColor[1], 255, C_TYP_NUMBER)) : '') +
+		(tmpColor.length > 1 ? byteToHex(setIntVal(tmpColor[1], 255)) : '') +
 		(colorSet[1] !== undefined ? ` ${colorSet.slice(1).join(' ')}` : '');
 };
 
@@ -881,7 +818,7 @@ const makeColorGradation = (_colorStr, { _defaultColorgrd = g_headerObj.defaultC
 	const tmpColorStr = _colorStr.split(`@`);
 	const colorArray = tmpColorStr[0].split(`:`);
 	for (let j = 0; j < colorArray.length; j++) {
-		colorArray[j] = colorCdPadding(_colorCdPaddingUse, colorToHex(colorArray[j].replace(/0x/g, `#`)));
+		colorArray[j] = colorCdPadding(_colorCdPaddingUse, colorToHex(colorArray[j].replaceAll(`0x`, `#`)));
 		if (isColorCd(colorArray[j]) && colorArray[j].length === 7) {
 			colorArray[j] += alphaVal;
 		}
@@ -1028,6 +965,24 @@ const createImg = (_id, _imgPath, _x, _y, _width, _height) => {
 	return div;
 };
 
+/**
+ * ColorPickerの作成
+ * @param {string} _id 
+ * @param {string} _color 
+ * @param {object} _obj 
+ * @returns 
+ */
+const createColorPicker = (_parentObj, _id, { x = 0, y = 0 } = {}) => {
+	const picker = document.createElement(`input`);
+	picker.setAttribute(`type`, `color`);
+	picker.id = _id;
+	picker.style.left = `${x}px`;
+	picker.style.top = `${y}px`;
+	picker.style.position = `absolute`;
+	_parentObj.appendChild(picker);
+	return picker;
+};
+
 /**
  * 色付きオブジェクトの作成 (拡張属性対応)
  * @param {string} _id 
@@ -1146,6 +1101,17 @@ const deleteChildspriteAll = _parentObjName => {
 	}
 };
 
+/**
+ * div要素の削除
+ * @param {object} _parentId 
+ * @param {string} _idName 
+ */
+const deleteDiv = (_parentId, _idName) => {
+	if (document.getElementById(_idName) !== null) {
+		_parentId.removeChild(document.getElementById(_idName));
+	}
+};
+
 /**
  * ボタンの作成 (CSS版・拡張属性対応)
  * @param {string} _id 
@@ -1162,7 +1128,6 @@ const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight
 	div.classList.add(`button_common`, ..._classes);
 	div.innerHTML = _text;
 	div.title = title;
-	div.ontouchstart = ``;
 
 	const style = div.style;
 	style.textAlign = align;
@@ -1185,13 +1150,13 @@ const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight
 
 	// ボタンを押したときの動作
 	const lsnrkey = g_handler.addListener(div, `click`, evt => {
-		if (!setVal(g_btnDeleteFlg[_id], false, C_TYP_BOOLEAN)) {
+		if (!setBoolVal(g_btnDeleteFlg[_id])) {
 			_func(evt);
 		}
 		if (typeof g_btnAddFunc[_id] === C_TYP_FUNCTION) {
 			g_btnAddFunc[_id](evt, _func, resetFunc);
 		}
-		if (!setVal(g_btnDeleteFlg[_id], false, C_TYP_BOOLEAN)) {
+		if (!setBoolVal(g_btnDeleteFlg[_id])) {
 			resetFunc(evt);
 		}
 	});
@@ -1199,7 +1164,7 @@ const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight
 	// 右クリック時の処理
 	div.oncontextmenu = evt => {
 		if (typeof cxtFunc === C_TYP_FUNCTION) {
-			if (!setVal(g_cxtDeleteFlg[_id], false, C_TYP_BOOLEAN)) {
+			if (!setBoolVal(g_cxtDeleteFlg[_id])) {
 				cxtFunc(evt);
 			}
 			if (typeof g_cxtAddFunc[_id] === C_TYP_FUNCTION) {
@@ -1278,8 +1243,7 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		// レイヤー情報取得
 		const layer0 = document.querySelector(`#layer0`);
 		const l0ctx = layer0.getContext(`2d`);
-
-		const C_MARGIN = 0;
+		layer0.width = g_sWidth;
 
 		// 線画、図形をクリア
 		l0ctx.clearRect(0, 0, g_sWidth, g_sHeight);
@@ -1287,24 +1251,26 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		if (document.querySelector(`#layer1`) !== null) {
 			const layer1 = document.querySelector(`#layer1`);
 			const l1ctx = layer1.getContext(`2d`);
+			layer1.width = g_sWidth;
 			l1ctx.clearRect(0, 0, g_sWidth, g_sHeight);
 
 			// 線画 (title-line)
 			l1ctx.beginPath();
 			l1ctx.strokeStyle = `#cccccc`;
-			l1ctx.moveTo(C_MARGIN, C_MARGIN);
-			l1ctx.lineTo(g_sWidth - C_MARGIN, C_MARGIN);
+			l1ctx.moveTo(0, 0);
+			l1ctx.lineTo(layer1.width, 0);
 			l1ctx.stroke();
 
 			l1ctx.beginPath();
 			l1ctx.strokeStyle = `#cccccc`;
-			l1ctx.moveTo(C_MARGIN, g_sHeight - C_MARGIN);
-			l1ctx.lineTo(g_sWidth - C_MARGIN, g_sHeight - C_MARGIN);
+			l1ctx.moveTo(0, g_sHeight);
+			l1ctx.lineTo(layer1.width, g_sHeight);
 			l1ctx.stroke();
 		}
 		if (document.querySelector(`#layer2`) !== null) {
 			const layer2 = document.querySelector(`#layer2`);
 			const l2ctx = layer2.getContext(`2d`);
+			layer2.width = g_sWidth;
 			l2ctx.clearRect(0, 0, g_sWidth, g_sHeight);
 		}
 	}
@@ -1356,17 +1322,14 @@ const drawDefaultBackImage = _key => {
  * @param {object} _obj 
  */
 const makeSpriteImage = _obj => {
-	let tmpInnerHTML = `<img src=${_obj.path} class="${_obj.class}"
-					style="position:absolute;left:${_obj.left}px;top:${_obj.top}px`;
-	if (_obj.width !== 0 && _obj.width > 0) {
+	let tmpInnerHTML = `<img src=${_obj.path} class="${_obj.class}"	style="position:absolute;left:${_obj.left}px;top:${_obj.top}px`;
+	if (_obj.width > 0) {
 		tmpInnerHTML += `;width:${_obj.width}px`;
 	}
-	if (_obj.height !== `` && setVal(_obj.height, 0, C_TYP_NUMBER) > 0) {
+	if (setIntVal(_obj.height) > 0) {
 		tmpInnerHTML += `;height:${_obj.height}px`;
 	}
-	tmpInnerHTML += `;animation-name:${_obj.animationName}
-					;animation-duration:${_obj.animationDuration}s
-					;opacity:${_obj.opacity}">`;
+	tmpInnerHTML += `;animation-name:${_obj.animationName};animation-duration:${_obj.animationDuration}s;opacity:${_obj.opacity}">`;
 	return tmpInnerHTML;
 };
 
@@ -1375,11 +1338,10 @@ const makeSpriteImage = _obj => {
  * @param {object} _obj 
  */
 const makeSpriteText = _obj => {
-	let tmpInnerHTML = `<span class="${_obj.class}"
-					style="display:inline-block;position:absolute;left:${_obj.left}px;top:${_obj.top}px`;
+	let tmpInnerHTML = `<span class="${_obj.class}"	style="display:inline-block;position:absolute;left:${_obj.left}px;top:${_obj.top}px`;
 
 	// この場合のwidthは font-size と解釈する
-	if (_obj.width !== 0 && _obj.width > 0) {
+	if (_obj.width > 0) {
 		tmpInnerHTML += `;font-size:${_obj.width}px`;
 	}
 
@@ -1387,9 +1349,7 @@ const makeSpriteText = _obj => {
 	if (_obj.height !== ``) {
 		tmpInnerHTML += `;color:${_obj.height}`;
 	}
-	tmpInnerHTML += `;animation-name:${_obj.animationName}
-					;animation-duration:${_obj.animationDuration}s
-					;opacity:${_obj.opacity}">${_obj.path}</span>`;
+	tmpInnerHTML += `;animation-name:${_obj.animationName};animation-duration:${_obj.animationDuration}s;opacity:${_obj.opacity}">${_obj.path}</span>`;
 	return tmpInnerHTML;
 };
 
@@ -1433,7 +1393,7 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 
 			// 値チェックとエスケープ処理
 			let tmpFrame;
-			if (setVal(tmpSpriteData[0], 200, C_TYP_NUMBER) === 0) {
+			if (setIntVal(tmpSpriteData[0], -1) === 0) {
 				tmpFrame = 0;
 			} else {
 				tmpFrame = roundZero(_calcFrame(setVal(tmpSpriteData[0], 200, C_TYP_CALC)));
@@ -1444,15 +1404,15 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 			}
 
 			const tmpObj = {
-				path: escapeHtml(tmpSpriteData[2] ?? ``, g_escapeStr.escapeCode),	// 画像パス or テキスト
-				class: escapeHtml(tmpSpriteData[3] ?? ``),							// CSSクラス
-				left: setVal(tmpSpriteData[4], 0, C_TYP_CALC),						// X座標
-				top: setVal(tmpSpriteData[5], 0, C_TYP_CALC),						// Y座標
-				width: setVal(tmpSpriteData[6], 0, C_TYP_NUMBER),					// spanタグの場合は font-size
-				height: escapeHtml(tmpSpriteData[7] ?? ``),							// spanタグの場合は color(文字列可)
+				path: escapeHtml(tmpSpriteData[2] ?? ``, g_escapeStr.escapeCode),   // 画像パス or テキスト
+				class: escapeHtml(tmpSpriteData[3] ?? ``),                          // CSSクラス
+				left: setVal(tmpSpriteData[4], 0, C_TYP_CALC),                      // X座標
+				top: setVal(tmpSpriteData[5], 0, C_TYP_CALC),                       // Y座標
+				width: setIntVal(tmpSpriteData[6]),                                 // spanタグの場合は font-size
+				height: escapeHtml(tmpSpriteData[7] ?? ``),                         // spanタグの場合は color(文字列可)
 				opacity: setVal(tmpSpriteData[8], 1, C_TYP_FLOAT),
-				animationName: escapeHtml(setVal(tmpSpriteData[9], C_DIS_NONE, C_TYP_STRING)),
-				animationDuration: setVal(tmpSpriteData[10], 0, C_TYP_NUMBER) / g_fps,
+				animationName: escapeHtml(setVal(tmpSpriteData[9], C_DIS_NONE)),
+				animationDuration: setIntVal(tmpSpriteData[10]) / g_fps,
 			};
 			if (g_headerObj.autoPreload) {
 				if (checkImage(tmpObj.path)) {
@@ -1497,9 +1457,32 @@ const checkImage = _str => listMatching(_str, g_imgExtensions, { prefix: `[.]`,
 const getSpriteJumpFrame = _frames => {
 	const jumpFrames = _frames.split(`:`);
 	const jumpCnt = Math.floor(Math.random() * jumpFrames.length);
-	return setVal(Number(jumpFrames[jumpCnt]) - 1, 0, C_TYP_NUMBER);
+	return setIntVal(Number(jumpFrames[jumpCnt]) - 1);
 };
 
+/**
+ * 背景・マスクモーションの表示（共通処理）
+ * @param {object} _spriteData 
+ * @param {string} _name 
+ * @param {boolean} _condition 
+ */
+const drawBaseSpriteData = (_spriteData, _name, _condition = true) => {
+	const baseSprite = document.querySelector(`#${_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 = ``;
+			}
+		} else {
+			baseSprite.textContent = ``;
+		}
+	} else {
+		if (_condition) {
+			baseSprite.innerHTML = _spriteData.htmlText;
+		}
+	}
+}
+
 /**
  * 背景・マスクモーションの表示（タイトル・リザルト用）
  * @param {number} _frame 
@@ -1513,31 +1496,19 @@ const drawSpriteData = (_frame, _displayName, _depthName) => {
 
 	for (let j = 0; j < tmpObjs.length; j++) {
 		const tmpObj = tmpObjs[j];
-		const baseSprite = document.querySelector(`#${spriteName}Sprite${tmpObj.depth}`);
-		if (tmpObj.command !== ``) {
-			if (tmpObj.command === `[loop]`) {
-				// キーワード指定：ループ
-				// 指定フレーム(class)へ移動する
-				g_scoreObj[`${spriteName}LoopCount`]++;
+		drawBaseSpriteData(tmpObj, spriteName, ![`[loop]`, `[jump]`].includes(tmpObj.command));
+		if (tmpObj.command === `[loop]`) {
+			// キーワード指定：ループ
+			// 指定フレーム(class)へ移動する
+			g_scoreObj[`${spriteName}LoopCount`]++;
+			return getSpriteJumpFrame(tmpObj.jumpFrame);
+
+		} else if (tmpObj.command === `[jump]`) {
+			// キーワード指定：フレームジャンプ
+			// 指定回数以上のループ(maxLoop)があれば指定フレーム(jumpFrame)へ移動する
+			if (g_scoreObj[`${spriteName}LoopCount`] >= Number(tmpObj.maxLoop)) {
+				g_scoreObj[`${spriteName}LoopCount`] = 0;
 				return getSpriteJumpFrame(tmpObj.jumpFrame);
-
-			} else if (tmpObj.command === `[jump]`) {
-				// キーワード指定：フレームジャンプ
-				// 指定回数以上のループ(maxLoop)があれば指定フレーム(jumpFrame)へ移動する
-				if (g_scoreObj[`${spriteName}LoopCount`] >= Number(tmpObj.maxLoop)) {
-					g_scoreObj[`${spriteName}LoopCount`] = 0;
-					return getSpriteJumpFrame(tmpObj.jumpFrame);
-				}
-			} else {
-				baseSprite.innerHTML = tmpObj.htmlText;
-			}
-		} else {
-			if (tmpObj.depth === C_FLG_ALL) {
-				for (let j = 0; j <= g_headerObj[`${spriteName}MaxDepth`]; j++) {
-					document.querySelector(`#${spriteName}Sprite${j}`).textContent = ``;
-				}
-			} else {
-				baseSprite.textContent = ``;
 			}
 		}
 	}
@@ -1549,25 +1520,8 @@ const drawSpriteData = (_frame, _displayName, _depthName) => {
  * @param {number} _frame 
  * @param {string} _depthName 
  */
-const drawMainSpriteData = (_frame, _depthName) => {
-
-	const tmpObjs = g_scoreObj[`${_depthName}Data`][_frame];
-
-	tmpObjs.forEach(tmpObj => {
-		const baseSprite = document.querySelector(`#${_depthName}Sprite${tmpObj.depth}`);
-		if (tmpObj.command !== ``) {
-			baseSprite.innerHTML = tmpObj.htmlText;
-		} else {
-			if (tmpObj.depth === C_FLG_ALL) {
-				for (let j = 0; j <= g_scoreObj[`${_depthName}MaxDepth`]; j++) {
-					document.querySelector(`#${_depthName}Sprite${j}`).textContent = ``;
-				}
-			} else {
-				baseSprite.textContent = ``;
-			}
-		}
-	});
-};
+const drawMainSpriteData = (_frame, _depthName) =>
+	g_scoreObj[`${_depthName}Data`][_frame].forEach(tmpObj => drawBaseSpriteData(tmpObj, _depthName));
 
 /**
  * タイトル・リザルトモーションの描画
@@ -1751,12 +1705,8 @@ const transTimerToFrame = _str => {
 
 const initialControl = async () => {
 
-	[g_sWidth, g_sHeight] = [
-		setVal($id(`canvas-frame`).width, 600, C_TYP_FLOAT), setVal($id(`canvas-frame`).height, 500, C_TYP_FLOAT)
-	];
-
 	const stage = document.querySelector(`#canvas-frame`);
-	const divRoot = createEmptySprite(stage, `divRoot`, { margin: `auto`, letterSpacing: `normal` });
+	const divRoot = createEmptySprite(stage, `divRoot`, g_windowObj.divRoot);
 
 	// 背景の表示
 	if (document.querySelector(`#layer0`) !== null) {
@@ -1768,7 +1718,7 @@ const initialControl = async () => {
 		l0ctx.fillStyle = grd;
 		l0ctx.fillRect(0, 0, g_sWidth, g_sHeight);
 	} else {
-		createEmptySprite(divRoot, `divBack`, { background: `linear-gradient(#000000, #222222)` });
+		createEmptySprite(divRoot, `divBack`, g_windowObj.divBack);
 	}
 
 	// Now Loadingを表示
@@ -1778,15 +1728,8 @@ const initialControl = async () => {
 	g_canLoadDifInfoFlg = true;
 
 	// 譜面データの読み込みオプション
-	const ampSplitInput = document.querySelector(`#enableAmpersandSplit`);
-	if (ampSplitInput !== null) {
-		g_enableAmpersandSplit = setVal(ampSplitInput.value, true, C_TYP_BOOLEAN);
-	}
-
-	const decodeUriInput = document.querySelector(`#enableDecodeURI`);
-	if (decodeUriInput !== null) {
-		g_enableDecodeURI = setVal(decodeUriInput.value, false, C_TYP_BOOLEAN);
-	}
+	g_enableAmpersandSplit = setBoolVal(document.querySelector(`#enableAmpersandSplit`)?.value, true);
+	g_enableDecodeURI = setBoolVal(document.querySelector(`#enableDecodeURI`)?.value);
 
 	// 作品別ローカルストレージの読み込み
 	loadLocalStorage();
@@ -1803,19 +1746,17 @@ const initialControl = async () => {
 	// 共通設定ファイルの読込
 	await loadScript2(`${settingRoot}danoni_setting${settingType}.js?${g_randTime}`, false);
 	loadLegacySettingFunc();
-	if (document.querySelector(`#lblLoading`) !== null) {
-		divRoot.removeChild(document.querySelector(`#lblLoading`));
-	}
+	deleteDiv(divRoot, `lblLoading`);
 
 	// クエリで譜面番号が指定されていればセット
-	g_stateObj.scoreId = setVal(getQueryParamVal(`scoreId`), 0, C_TYP_NUMBER);
+	g_stateObj.scoreId = setIntVal(getQueryParamVal(`scoreId`));
 
 	// 譜面ヘッダーの読込
 	Object.assign(g_headerObj, preheaderConvert(g_rootObj));
 
 	// CSSファイル内のbackgroundを取得するために再描画
 	if (document.querySelector(`#layer0`) === null) {
-		divRoot.removeChild(document.querySelector(`#divBack`));
+		deleteDiv(divRoot, `divBack`);
 		createEmptySprite(divRoot, `divBack`);
 	} else if (!g_headerObj.defaultSkinFlg && !g_headerObj.customBackUse) {
 		createEmptySprite(divRoot, `divBack`);
@@ -1840,6 +1781,21 @@ const initialControl = async () => {
 			makeDedupliArray(g_rootObj.keyExtraList.split(`,`), g_headerObj.undefinedKeyLists) : g_headerObj.undefinedKeyLists),
 	});
 
+	// 自動横幅拡張設定
+	if (g_headerObj.autoSpread) {
+		const widthList = [g_sWidth, g_presetObj.autoMinWidth ?? g_keyObj.minWidth];
+		g_headerObj.keyLists.forEach(key => widthList.push(g_keyObj[`minWidth${key}`] ?? g_keyObj.minWidthDefault));
+
+		g_sWidth = Math.max(...widthList);
+		$id(`canvas-frame`).width = `${g_sWidth}px`;
+	}
+	if (g_headerObj.playingWidth === `default`) {
+		g_headerObj.playingWidth = g_sWidth;
+	}
+
+	// 可変ウィンドウサイズを更新
+	updateWindowSiz();
+
 	// キー数情報を初期化
 	g_keyObj.currentKey = g_headerObj.keyLabels[g_stateObj.scoreId];
 	g_keyObj.currentPtn = 0;
@@ -1867,16 +1823,16 @@ const initialControl = async () => {
 
 			if (termRoopCnts.length === 1) {
 				// Pattern Bの場合
-				lastCnt = setVal(tmpPreloadImages[1], 1, C_TYP_NUMBER);
-				paddingLen = String(setVal(tmpPreloadImages[1], 1, C_TYP_STRING)).length;
+				lastCnt = setIntVal(tmpPreloadImages[1], 1);
+				paddingLen = String(setVal(tmpPreloadImages[1], 1)).length;
 			} else {
 				// Pattern C, Dの場合
-				startCnt = setVal(termRoopCnts[0], 1, C_TYP_NUMBER);
-				lastCnt = setVal(termRoopCnts[1], 1, C_TYP_NUMBER);
-				paddingLen = String(setVal(termRoopCnts[1], 1, C_TYP_STRING)).length;
+				startCnt = setIntVal(termRoopCnts[0], 1);
+				lastCnt = setIntVal(termRoopCnts[1], 1);
+				paddingLen = String(setVal(termRoopCnts[1], 1)).length;
 			}
 			for (let k = startCnt; k <= lastCnt; k++) {
-				preloadFile(`image`, tmpPreloadImages[0].replace(/\*/g, String(k).padStart(paddingLen, `0`)));
+				preloadFile(`image`, tmpPreloadImages[0].replaceAll(`*`, String(k).padStart(paddingLen, `0`)));
 			}
 		}
 	});
@@ -1897,8 +1853,8 @@ const initialControl = async () => {
 	if (g_loadObj.main) {
 
 		// 譜面分割、譜面番号固定かどうかをチェック
-		g_stateObj.dosDivideFlg = setVal(document.querySelector(`#externalDosDivide`)?.value ?? getQueryParamVal(`dosDivide`), false, C_TYP_BOOLEAN);
-		g_stateObj.scoreLockFlg = setVal(document.querySelector(`#externalDosLock`)?.value ?? getQueryParamVal(`dosLock`), false, C_TYP_BOOLEAN);
+		g_stateObj.dosDivideFlg = setBoolVal(document.querySelector(`#externalDosDivide`)?.value ?? getQueryParamVal(`dosDivide`));
+		g_stateObj.scoreLockFlg = setBoolVal(document.querySelector(`#externalDosLock`)?.value ?? getQueryParamVal(`dosLock`));
 
 		for (let j = 1; j < g_headerObj.keyLabels.length; j++) {
 
@@ -2034,9 +1990,7 @@ const loadChartFile = async (_scoreId = g_stateObj.scoreId) => {
 
 		await loadScript2(`${filename}?${Date.now()}`, false, charset);
 		if (typeof externalDosInit === C_TYP_FUNCTION) {
-			if (document.querySelector(`#lblLoading`) !== null) {
-				divRoot.removeChild(document.querySelector(`#lblLoading`));
-			}
+			deleteDiv(divRoot, `lblLoading`);
 
 			// 外部データを読込（ファイルが見つからなかった場合は譜面追記をスキップ）
 			externalDosInit();
@@ -2375,6 +2329,12 @@ const preheaderConvert = _dosObj => {
 	// ヘッダー群の格納先
 	const obj = {};
 
+	// ウィンドウ位置の設定
+	const align = _dosObj.windowAlign ?? g_presetObj.windowAlign;
+	if (align !== undefined) {
+		g_windowAlign[align]();
+	}
+
 	obj.jsData = [];
 
 	const setJsFiles = (_files, _defaultDir, _type = `custom`) => {
@@ -2394,21 +2354,21 @@ const preheaderConvert = _dosObj => {
 
 	// 外部jsファイルの指定
 	const tmpCustomjs = _dosObj.customjs ?? g_presetObj.customJs ?? C_JSF_CUSTOM;
-	setJsFiles(tmpCustomjs.split(`,`), C_DIR_JS);
+	setJsFiles(tmpCustomjs.replaceAll(`*`, g_presetObj.customJs).split(`,`), C_DIR_JS);
 
 	// 外部cssファイルの指定
 	const tmpCustomcss = _dosObj.customcss ?? g_presetObj.customCss ?? ``;
-	setJsFiles(tmpCustomcss.split(`,`), C_DIR_CSS);
+	setJsFiles(tmpCustomcss.replaceAll(`*`, g_presetObj.customCss).split(`,`), C_DIR_CSS);
 
 	// デフォルト曲名表示、背景、Ready表示の利用有無
 	g_titleLists.init.forEach(objName => {
 		const objUpper = toCapitalize(objName);
 		obj[`custom${objUpper}Use`] =
-			setVal(_dosObj[`custom${objUpper}Use`] ?? g_presetObj.customDesignUse?.[objName], false, C_TYP_BOOLEAN);
+			setBoolVal(_dosObj[`custom${objUpper}Use`] ?? g_presetObj.customDesignUse?.[objName]);
 	});
 
 	// 背景・マスクモーションのパス指定方法を他の設定に合わせる設定
-	obj.syncBackPath = setVal(_dosObj.syncBackPath ?? g_presetObj.syncBackPath, false, C_TYP_BOOLEAN);
+	obj.syncBackPath = setBoolVal(_dosObj.syncBackPath ?? g_presetObj.syncBackPath);
 
 	return obj;
 };
@@ -2441,7 +2401,7 @@ const headerConvert = _dosObj => {
 				obj.imgType[j] = {
 					name: imgTypes[0],
 					extension: imgTypes[1] || `svg`,
-					rotateEnabled: setVal(imgTypes[2], true, C_TYP_BOOLEAN),
+					rotateEnabled: setBoolVal(imgTypes[2], true),
 					flatStepHeight: setVal(imgTypes[3], C_ARW_WIDTH, C_TYP_FLOAT),
 				};
 				g_keycons.imgTypes[j] = (imgTypes[0] === `` ? `Original` : imgTypes[0]);
@@ -2467,6 +2427,15 @@ const headerConvert = _dosObj => {
 	Object.assign(g_lblNameObj, g_lang_lblNameObj[g_localeObj.val], g_presetObj.lblName?.[g_localeObj.val]);
 	Object.assign(g_msgObj, g_lang_msgObj[g_localeObj.val], g_presetObj.msg?.[g_localeObj.val]);
 
+	// 自動横幅拡張設定
+	obj.autoSpread = setBoolVal(_dosObj.autoSpread, g_presetObj.autoSpread ?? true);
+
+	// 横幅設定
+	if (hasVal(_dosObj.windowWidth)) {
+		g_sWidth = setIntVal(_dosObj.windowWidth, g_sWidth);
+		$id(`canvas-frame`).width = `${g_sWidth}px`;
+	}
+
 	// 曲名
 	obj.musicTitles = [];
 	obj.musicTitlesForView = [];
@@ -2521,13 +2490,13 @@ const headerConvert = _dosObj => {
 	g_settings.speeds = [...Array((obj.maxSpeed - obj.minSpeed) * 20 + 1).keys()].map(i => obj.minSpeed + i / 20);
 
 	// プレイ中のショートカットキー
-	obj.keyRetry = setVal(_dosObj.keyRetry, C_KEY_RETRY, C_TYP_NUMBER);
+	obj.keyRetry = setIntVal(_dosObj.keyRetry, C_KEY_RETRY);
 	obj.keyRetryDef = obj.keyRetry;
-	obj.keyTitleBack = setVal(_dosObj.keyTitleBack, C_KEY_TITLEBACK, C_TYP_NUMBER);
+	obj.keyTitleBack = setIntVal(_dosObj.keyTitleBack, C_KEY_TITLEBACK);
 	obj.keyTitleBackDef = obj.keyTitleBack;
 
 	// フリーズアローの許容フレーム数設定
-	obj.frzAttempt = setVal(_dosObj.frzAttempt, C_FRM_FRZATTEMPT, C_TYP_NUMBER);
+	obj.frzAttempt = setIntVal(_dosObj.frzAttempt, C_FRM_FRZATTEMPT);
 
 	// 製作者表示
 	if (hasVal(_dosObj.tuning)) {
@@ -2600,7 +2569,7 @@ const headerConvert = _dosObj => {
 	obj.undefinedKeyLists = obj.keyLists.filter(key => g_keyObj[`chara${key}_0`] === undefined);
 
 	// 譜面変更セレクターの利用有無
-	obj.difSelectorUse = (setVal(_dosObj.difSelectorUse, obj.keyLabels.length > 5, C_TYP_BOOLEAN));
+	obj.difSelectorUse = (setBoolVal(_dosObj.difSelectorUse, obj.keyLabels.length > 5));
 
 	// 初期速度の設定
 	g_stateObj.speed = obj.initSpeeds[g_stateObj.scoreId];
@@ -2608,20 +2577,20 @@ const headerConvert = _dosObj => {
 
 	// グラデーションのデフォルト中間色を設定
 	divRoot.appendChild(createDivCss2Label(`dummyLabel`, ``, { pointerEvents: C_DIS_NONE }));
-	obj.baseBrightFlg = setVal(_dosObj.baseBright, checkLightOrDark(colorNameToCode(window.getComputedStyle(dummyLabel, ``).color)), C_TYP_BOOLEAN);
+	obj.baseBrightFlg = setBoolVal(_dosObj.baseBright, checkLightOrDark(colorNameToCode(window.getComputedStyle(dummyLabel, ``).color)));
 	const intermediateColor = obj.baseBrightFlg ? `#111111` : `#eeeeee`;
 
 	// 矢印の色変化を常時グラデーションさせる設定
 	obj.defaultColorgrd = [false, intermediateColor];
 	if (hasVal(_dosObj.defaultColorgrd)) {
 		obj.defaultColorgrd = _dosObj.defaultColorgrd.split(`,`);
-		obj.defaultColorgrd[0] = setVal(obj.defaultColorgrd[0], false, C_TYP_BOOLEAN);
+		obj.defaultColorgrd[0] = setBoolVal(obj.defaultColorgrd[0]);
 		obj.defaultColorgrd[1] = obj.defaultColorgrd[1] ?? intermediateColor;
 	}
 	g_rankObj.rankColorAllPerfect = intermediateColor;
 
 	// カラーコードのゼロパディング有無設定
-	obj.colorCdPaddingUse = setVal(_dosObj.colorCdPaddingUse, false, C_TYP_BOOLEAN);
+	obj.colorCdPaddingUse = setBoolVal(_dosObj.colorCdPaddingUse);
 
 	// 最大ライフ
 	obj.maxLifeVal = setVal(_dosObj.maxLifeVal, C_VAL_MAXLIFE, C_TYP_FLOAT);
@@ -2637,7 +2606,7 @@ const headerConvert = _dosObj => {
 	});
 
 	// フリーズアローのデフォルト色セットの利用有無 (true: 使用, false: 矢印色を優先してセット)
-	obj.defaultFrzColorUse = setVal(_dosObj.defaultFrzColorUse ?? g_presetObj.frzColors, true, C_TYP_BOOLEAN);
+	obj.defaultFrzColorUse = setBoolVal(_dosObj.defaultFrzColorUse ?? g_presetObj.frzColors, true);
 
 	// 矢印色変化に対応してフリーズアロー色を追随する範囲の設定
 	// (defaultFrzColorUse=false時のみ)
@@ -2656,10 +2625,9 @@ const headerConvert = _dosObj => {
 	}
 
 	// 初期色情報
+	const baseColor = (obj.baseBrightFlg ? `light` : `dark`);
+	Object.assign(g_dfColorObj, g_dfColorBaseObj[baseColor]);
 	Object.keys(g_dfColorObj).forEach(key => obj[key] = g_dfColorObj[key].concat());
-	if (obj.baseBrightFlg) {
-		Object.keys(g_dfColorLightObj).forEach(key => obj[key] = g_dfColorLightObj[key].concat());
-	}
 	obj.frzColorDefault = [];
 
 	// ダミー用初期矢印色
@@ -2738,7 +2706,7 @@ const headerConvert = _dosObj => {
 	g_posObj.distY = g_sHeight - C_STEP_Y + g_posObj.stepYR;
 	g_posObj.reverseStepY = g_posObj.distY - g_posObj.stepY - g_posObj.stepDiffY - C_ARW_WIDTH;
 	g_posObj.arrowHeight = g_sHeight + g_posObj.stepYR - g_posObj.stepDiffY * 2;
-	obj.bottomWordSetFlg = setVal(_dosObj.bottomWordSet, false, C_TYP_BOOLEAN);
+	obj.bottomWordSetFlg = setBoolVal(_dosObj.bottomWordSet);
 
 	// 矢印・フリーズアロー判定位置補正
 	g_diffObj.arrowJdgY = (isNaN(parseFloat(_dosObj.arrowJdgY)) ? 0 : parseFloat(_dosObj.arrowJdgY));
@@ -2755,12 +2723,10 @@ const headerConvert = _dosObj => {
 	}
 
 	// ハッシュタグ
-	if (hasVal(_dosObj.hashTag)) {
-		obj.hashTag = _dosObj.hashTag;
-	}
+	obj.hashTag = setVal(_dosObj.hashTag, ``);
 
 	// 自動プリロードの設定
-	obj.autoPreload = setVal(_dosObj.autoPreload, true, C_TYP_BOOLEAN);
+	obj.autoPreload = setBoolVal(_dosObj.autoPreload, true);
 	g_headerObj.autoPreload = obj.autoPreload;
 
 	// 読込対象の画像を指定(rel:preload)と同じ
@@ -2777,11 +2743,11 @@ const headerConvert = _dosObj => {
 
 	// デフォルトReady/リザルト表示の遅延時間設定
 	[`ready`, `result`].forEach(objName => {
-		obj[`${objName}DelayFrame`] = setVal(_dosObj[`${objName}DelayFrame`], 0, C_TYP_NUMBER);
+		obj[`${objName}DelayFrame`] = setIntVal(_dosObj[`${objName}DelayFrame`]);
 	});
 
 	// デフォルトReady表示のアニメーション時間設定
-	obj.readyAnimationFrame = setVal(_dosObj.readyAnimationFrame, 150, C_TYP_NUMBER);
+	obj.readyAnimationFrame = setIntVal(_dosObj.readyAnimationFrame, 150);
 
 	// デフォルトReady表示のアニメーション名
 	obj.readyAnimationName = _dosObj.readyAnimationName ?? `leftToRightFade`;
@@ -2798,20 +2764,16 @@ const headerConvert = _dosObj => {
 	// デフォルト曲名表示のフォント名
 	// (使用例： |titlefont=Century,Meiryo UI|)
 	obj.titlefonts = g_titleLists.defaultFonts.concat();
-	if (hasVal(_dosObj.titlefont)) {
-		_dosObj.titlefont.split(`$`).forEach((font, j) => {
-			obj.titlefonts[j] = `'${(font.replace(/,/g, `', '`))}'`;
-		});
-		if (obj.titlefonts[1] === undefined) {
-			obj.titlefonts[1] = obj.titlefonts[0];
-		}
+	_dosObj.titlefont?.split(`$`).forEach((font, j) => obj.titlefonts[j] = `'${(font.replaceAll(`,`, `', '`))}'`);
+	if (obj.titlefonts[1] === undefined) {
+		obj.titlefonts[1] = obj.titlefonts[0];
 	}
 
 	// デフォルト曲名表示, 背景矢印のグラデーション指定css
 	g_titleLists.grdList.forEach(_name => {
 		obj[`${_name}s`] = [];
 		if (hasVal(_dosObj[_name])) {
-			const tmpTitlegrd = _dosObj[_name].replace(/,/g, `:`);
+			const tmpTitlegrd = _dosObj[_name].replaceAll(`,`, `:`);
 			obj[`${_name}s`] = tmpTitlegrd.split(`$`);
 			obj[`${_name}`] = obj[`${_name}s`][0] ?? ``;
 		}
@@ -2819,11 +2781,7 @@ const headerConvert = _dosObj => {
 
 	// デフォルト曲名表示の表示位置調整
 	obj.titlepos = [[0, 0], [0, 0]];
-	if (hasVal(_dosObj.titlepos)) {
-		_dosObj.titlepos.split(`$`).forEach((pos, j) => {
-			obj.titlepos[j] = pos.split(`,`).map(x => parseFloat(x));
-		});
-	}
+	_dosObj.titlepos?.split(`$`).forEach((pos, j) => obj.titlepos[j] = pos.split(`,`).map(x => parseFloat(x)));
 
 	// タイトル文字のアニメーション設定
 	obj.titleAnimationName = [`leftToRight`];
@@ -2831,20 +2789,18 @@ const headerConvert = _dosObj => {
 	obj.titleAnimationDelay = [0];
 	obj.titleAnimationTimingFunction = [`ease`];
 	obj.titleAnimationClass = [``];
-	if (hasVal(_dosObj.titleanimation)) {
-		_dosObj.titleanimation.split(`$`).forEach((pos, j) => {
-			const titleAnimation = pos.split(`,`);
-			obj.titleAnimationName[j] = setVal(titleAnimation[0], obj.titleAnimationName[0], C_TYP_STRING);
-			obj.titleAnimationDuration[j] = setVal(titleAnimation[1] / g_fps, obj.titleAnimationDuration[0], C_TYP_FLOAT);
-			obj.titleAnimationDelay[j] = setVal(titleAnimation[2] / g_fps, obj.titleAnimationDelay[0], C_TYP_FLOAT);
-			obj.titleAnimationTimingFunction[j] = setVal(titleAnimation[3], obj.titleAnimationName[3], C_TYP_STRING);
-		});
-	}
-	if (hasVal(_dosObj.titleanimationclass)) {
-		_dosObj.titleanimationclass.split(`$`).forEach((animationClass, j) => {
-			obj.titleAnimationClass[j] = animationClass ?? ``;
-		});
-	}
+
+	_dosObj.titleanimation?.split(`$`).forEach((pos, j) => {
+		const titleAnimation = pos.split(`,`);
+		obj.titleAnimationName[j] = setVal(titleAnimation[0], obj.titleAnimationName[0]);
+		obj.titleAnimationDuration[j] = setVal(titleAnimation[1] / g_fps, obj.titleAnimationDuration[0], C_TYP_FLOAT);
+		obj.titleAnimationDelay[j] = setVal(titleAnimation[2] / g_fps, obj.titleAnimationDelay[0], C_TYP_FLOAT);
+		obj.titleAnimationTimingFunction[j] = setVal(titleAnimation[3], obj.titleAnimationName[3]);
+	});
+	_dosObj.titleanimationclass?.split(`$`).forEach((animationClass, j) => {
+		obj.titleAnimationClass[j] = animationClass ?? ``;
+	});
+
 	if (obj.titleAnimationName.length === 1) {
 		g_titleLists.animation.forEach(pattern => {
 			obj[`titleAnimation${pattern}`][1] = obj[`titleAnimation${pattern}`][0];
@@ -2855,13 +2811,13 @@ const headerConvert = _dosObj => {
 	}
 
 	// デフォルト曲名表示の複数行時の縦間隔
-	obj.titlelineheight = setVal(_dosObj.titlelineheight, ``, C_TYP_NUMBER);
+	obj.titlelineheight = setIntVal(_dosObj.titlelineheight, ``);
 
 	// フリーズアローの始点で通常矢印の判定を行うか(dotさんソース方式)
-	obj.frzStartjdgUse = setVal(_dosObj.frzStartjdgUse ?? g_presetObj.frzStartjdgUse, false, C_TYP_BOOLEAN);
+	obj.frzStartjdgUse = setBoolVal(_dosObj.frzStartjdgUse ?? g_presetObj.frzStartjdgUse);
 
 	// 譜面名に制作者名を付加するかどうかのフラグ
-	obj.makerView = setVal(_dosObj.makerView, false, C_TYP_BOOLEAN);
+	obj.makerView = setBoolVal(_dosObj.makerView);
 
 	// shuffleUse=group 時のみshuffle用配列を組み替える
 	if (_dosObj.shuffleUse === `group`) {
@@ -2871,7 +2827,7 @@ const headerConvert = _dosObj => {
 
 	// オプション利用可否設定
 	g_canDisabledSettings.forEach(option => {
-		obj[`${option}Use`] = setVal(_dosObj[`${option}Use`] ?? g_presetObj.settingUse?.[option], true, C_TYP_BOOLEAN);
+		obj[`${option}Use`] = setBoolVal(_dosObj[`${option}Use`] ?? g_presetObj.settingUse?.[option], true);
 	});
 
 	let interlockingErrorFlg = false;
@@ -2882,7 +2838,7 @@ const headerConvert = _dosObj => {
 		const displayUse = (displayTempUse !== undefined ? displayTempUse.split(`,`) : [true, C_FLG_ON]);
 
 		// displayUse -> ボタンの有効/無効, displaySet -> ボタンの初期値(ON/OFF)
-		obj[`${option}Use`] = setVal(displayUse[0], true, C_TYP_BOOLEAN);
+		obj[`${option}Use`] = setBoolVal(displayUse[0], true);
 		obj[`${option}Set`] = setVal(displayUse.length > 1 ? displayUse[1] :
 			(obj[`${option}Use`] ? C_FLG_ON : C_FLG_OFF), ``, C_TYP_SWITCH);
 		g_stateObj[`d_${option.toLowerCase()}`] = setVal(obj[`${option}Set`], C_FLG_ON, C_TYP_SWITCH);
@@ -2925,7 +2881,7 @@ const headerConvert = _dosObj => {
 	}
 
 	// 別キーパターンの使用有無
-	obj.transKeyUse = setVal(_dosObj.transKeyUse, true, C_TYP_BOOLEAN);
+	obj.transKeyUse = setBoolVal(_dosObj.transKeyUse, true);
 
 	// タイトル画面用・背景/マスクデータの分解 (下記すべてで1セット、改行区切り)
 	// [フレーム数,階層,背景パス,class(CSSで別定義),X,Y,width,height,opacity,animationName,animationDuration]
@@ -2942,25 +2898,25 @@ const headerConvert = _dosObj => {
 	});
 
 	// 結果画面用のマスク透過設定
-	obj.masktitleButton = setVal(_dosObj.masktitleButton, false, C_TYP_BOOLEAN);
+	obj.masktitleButton = setBoolVal(_dosObj.masktitleButton);
 
 	// 結果画面用のマスク透過設定
-	obj.maskresultButton = setVal(_dosObj.maskresultButton, false, C_TYP_BOOLEAN);
+	obj.maskresultButton = setBoolVal(_dosObj.maskresultButton);
 
 	// color_dataの過去バージョン互換設定
 	obj.colorDataType = _dosObj.colorDataType ?? ``;
 
 	// リザルトモーションをDisplay:BackgroundのON/OFFと連動させるかどうかの設定
-	obj.resultMotionSet = setVal(_dosObj.resultMotionSet, true, C_TYP_BOOLEAN);
+	obj.resultMotionSet = setBoolVal(_dosObj.resultMotionSet, true);
 
 	// 譜面明細の使用可否
-	obj.scoreDetailUse = setVal(_dosObj.scoreDetailUse, true, C_TYP_BOOLEAN);
+	obj.scoreDetailUse = setBoolVal(_dosObj.scoreDetailUse, true);
 
 	// 判定位置をBackgroundのON/OFFと連動してリセットする設定
-	obj.jdgPosReset = setVal(_dosObj.jdgPosReset, true, C_TYP_BOOLEAN);
+	obj.jdgPosReset = setBoolVal(_dosObj.jdgPosReset, true);
 
 	// タイトル表示用コメント
-	const newlineTag = setVal(_dosObj.commentAutoBr, true, C_TYP_BOOLEAN) ? `<br>` : ``;
+	const newlineTag = setBoolVal(_dosObj.commentAutoBr, true) ? `<br>` : ``;
 	const tmpComment = (_dosObj[`commentVal${g_localeObj.val}`] ?? _dosObj.commentVal ?? ``).split(`\r\n`).join(`\n`);
 	obj.commentVal = tmpComment.split(`\n`).join(newlineTag);
 
@@ -2972,16 +2928,16 @@ const headerConvert = _dosObj => {
 	}
 
 	// コメントの外部化設定
-	obj.commentExternal = setVal(_dosObj.commentExternal, false, C_TYP_BOOLEAN);
+	obj.commentExternal = setBoolVal(_dosObj.commentExternal);
 
 	// Reverse時の歌詞の自動反転制御
 	obj.wordAutoReverse = _dosObj.wordAutoReverse ?? g_presetObj.wordAutoReverse ?? `auto`;
 
 	// プレイサイズ(X方向)
-	obj.playingWidth = setVal(_dosObj.playingWidth, g_sWidth, C_TYP_NUMBER);
+	obj.playingWidth = setIntVal(_dosObj.playingWidth, `default`);
 
 	// プレイ左上位置(X座標)
-	obj.playingX = setVal(_dosObj.playingX, 0, C_TYP_NUMBER);
+	obj.playingX = setIntVal(_dosObj.playingX);
 
 	// プレイ中クレジットを表示しないエリアのサイズ(X方向)
 	obj.customViewWidth = setVal(_dosObj.customViewWidth, 0, C_TYP_FLOAT);
@@ -3048,9 +3004,7 @@ const updateImgType = _imgType => {
  * ゲージ設定リストへの追加
  * @param {object} _obj
  */
-const addGaugeFulls = _obj => {
-	_obj.map(key => g_gaugeOptionObj.customFulls[key] = false);
-};
+const addGaugeFulls = _obj => _obj.map(key => g_gaugeOptionObj.customFulls[key] = false);
 
 /**
  * 矢印・フリーズアロー色のデータ変換
@@ -3099,19 +3053,18 @@ const resetBaseColorList = (_baseObj, _dosObj, { scoreId = `` } = {}) => {
 				_baseObj[_frzInit].length : firstFrzColors.length;
 			for (let k = 0; k < baseLength; k++) {
 				currentFrzColors[k] = setVal(firstFrzColors[k],
-					_baseObj.defaultFrzColorUse ? _baseObj[_frzInit][k] : obj[`${_name}Str`][j], C_TYP_STRING);
+					_baseObj.defaultFrzColorUse ? _baseObj[_frzInit][k] : obj[`${_name}Str`][j]);
 			}
 
-			Object.keys(_baseObj.dfColorgrdSet).forEach(type => {
+			Object.keys(_baseObj.dfColorgrdSet).forEach(type =>
 				[obj[`${_frzName}${type}`][j], obj[`${_frzName}Str${type}`][j], obj[`${_frzName}Org${type}`][j]] =
-					setColorList(tmpFrzColors[j], currentFrzColors, _baseObj[_frzInit].length, {
-						_defaultColorgrd: _baseObj.dfColorgrdSet[type],
-						_colorCdPaddingUse: _baseObj.colorCdPaddingUse,
-						_defaultFrzColorUse: _baseObj.defaultFrzColorUse,
-						_objType: `frz`,
-						_shadowFlg: pattern === `Shadow`,
-					});
-			});
+				setColorList(tmpFrzColors[j], currentFrzColors, _baseObj[_frzInit].length, {
+					_defaultColorgrd: _baseObj.dfColorgrdSet[type],
+					_colorCdPaddingUse: _baseObj.colorCdPaddingUse,
+					_defaultFrzColorUse: _baseObj.defaultFrzColorUse,
+					_objType: `frz`,
+					_shadowFlg: pattern === `Shadow`,
+				}));
 		}
 
 		obj[`${_name}Default`] = obj[_name].concat();
@@ -3164,7 +3117,7 @@ const setColorList = (_data, _colorInit, _colorInitLength,
 		colorList = colorStr.concat();
 
 		for (let j = 0; j < colorList.length; j++) {
-			const tmpSetColorOrg = colorStr[j].replace(/0x/g, `#`).split(`:`);
+			const tmpSetColorOrg = colorStr[j].replaceAll(`0x`, `#`).split(`:`);
 			const hasColor = tmpSetColorOrg.some(tmpColorOrg => {
 				if (hasVal(tmpColorOrg) && (isColorCd(tmpColorOrg) || !hasAnglePointInfo(tmpColorOrg) || tmpColorOrg === `Default`)) {
 					colorOrg[j] = colorCdPadding(_colorCdPaddingUse, colorToHex(tmpColorOrg));
@@ -3395,8 +3348,7 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList.split(`,`) }
 		if (_dosObj[keyheader] !== undefined) {
 			const tmps = _dosObj[keyheader].split(`$`);
 			for (let k = 0; k < tmps.length; k++) {
-				g_keyObj[`${keyheader}_${k}`] = setVal(g_keyObj[`${_name}${tmps[k]}`],
-					setVal(tmps[k], ``, _type), C_TYP_STRING);
+				g_keyObj[`${keyheader}_${k}`] = setVal(g_keyObj[`${_name}${tmps[k]}`], setVal(tmps[k], ``, _type));
 			}
 		}
 	};
@@ -3451,6 +3403,9 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList.split(`,`) }
 		// キーの名前 (keyNameX)
 		g_keyObj[`keyName${newKey}`] = _dosObj[`keyName${newKey}`] ?? newKey;
 
+		// キーの最小横幅 (minWidthX)
+		g_keyObj[`minWidth${newKey}`] = _dosObj[`minWidth${newKey}`] ?? g_keyObj.minWidthDefault;
+
 		// 矢印色パターン (colorX_Y)
 		tmpMinPatterns = newKeyMultiParam(newKey, `color`, toNumber, {
 			errCd: `E_0101`,
@@ -3472,13 +3427,13 @@ const keysConvert = (_dosObj, { keyExtraList = _dosObj.keyExtraList.split(`,`) }
 			for (let k = 0; k < tmpDivs.length; k++) {
 				tmpDivPtn = tmpDivs[k].split(`,`);
 
-				if (setVal(tmpDivPtn[0], -1, C_TYP_NUMBER) !== -1) {
-					g_keyObj[`div${newKey}_${k}`] = setVal(tmpDivPtn[0], g_keyObj[`chara${newKey}_0`].length, C_TYP_NUMBER);
+				if (setIntVal(tmpDivPtn[0], -1) !== -1) {
+					g_keyObj[`div${newKey}_${k}`] = setIntVal(tmpDivPtn[0], g_keyObj[`chara${newKey}_0`].length);
 				} else if (g_keyObj[`div${tmpDivPtn[0]}`] !== undefined) {
 					// 既定キーパターンが指定された場合、存在すればその値を適用
 					g_keyObj[`div${newKey}_${k}`] = g_keyObj[`div${tmpDivPtn[0]}`];
-					g_keyObj[`divMax${newKey}_${k}`] = setVal(g_keyObj[`divMax${tmpDivPtn[0]}`], undefined, C_TYP_NUMBER);
-				} else if (setVal(g_keyObj[`div${newKey}_${k}`], -1, C_TYP_NUMBER) !== -1) {
+					g_keyObj[`divMax${newKey}_${k}`] = setIntVal(g_keyObj[`divMax${tmpDivPtn[0]}`], undefined);
+				} else if (setIntVal(g_keyObj[`div${newKey}_${k}`], -1) !== -1) {
 					// すでに定義済みの場合はスキップ
 					continue;
 				} else if (g_keyObj[`chara${newKey}_0`] !== undefined) {
@@ -3613,11 +3568,8 @@ const titleInit = _ => {
 		const titlegrd2 = g_headerObj.titlegrds[1] || titlegrd1;
 
 		const titlegrds = [];
-		[titlegrd1, titlegrd2].forEach((titlegrd, j) => {
-			titlegrds[j] = makeColorGradation(titlegrd, {
-				_defaultColorgrd: false, _objType: `titleMusic`,
-			});
-		});
+		[titlegrd1, titlegrd2].forEach((titlegrd, j) =>
+			titlegrds[j] = makeColorGradation(titlegrd, { _defaultColorgrd: false, _objType: `titleMusic` }));
 
 		let titlefontsize = 64;
 		for (let j = 0; j < g_headerObj.musicTitleForView.length; j++) {
@@ -3628,8 +3580,8 @@ const titleInit = _ => {
 
 		// 変数 titlesize の定義 (使用例： |titlesize=40$20|)
 		const titlefontsizes = (g_headerObj.titlesize !== `` ? g_headerObj.titlesize.split(`$`).join(`,`).split(`,`) : [titlefontsize, titlefontsize]);
-		const titlefontsize1 = setVal(titlefontsizes[0], titlefontsize, C_TYP_NUMBER);
-		const titlefontsize2 = setVal(titlefontsizes[1], titlefontsize1, C_TYP_NUMBER);
+		const titlefontsize1 = setIntVal(titlefontsizes[0], titlefontsize);
+		const titlefontsize2 = setIntVal(titlefontsizes[1], titlefontsize1);
 
 		// 変数 titlelineheight の定義 (使用例： |titlelineheight=50|)
 		const titlelineheight = (g_headerObj.titlelineheight !== `` ? g_headerObj.titlelineheight - (titlefontsize2 + 10) : 0);
@@ -3649,7 +3601,7 @@ const titleInit = _ => {
 				background: ${titlegrds[0]};
 				background-clip: text;
 				-webkit-background-clip: text;
-				-webkit-text-fill-color: rgba(255,255,255,0.0);
+				color: rgba(255,255,255,0.0);
 				${txtAnimations[0]}
 			" class="${g_headerObj.titleAnimationClass[0]}">
 				${g_headerObj.musicTitleForView[0]}
@@ -3662,7 +3614,7 @@ const titleInit = _ => {
 				background: ${titlegrds[1]};
 				background-clip: text;
 				-webkit-background-clip: text;
-				-webkit-text-fill-color: rgba(255,255,255,0.0);
+				color: rgba(255,255,255,0.0);
 				${txtAnimations[1]}
 			" class="${g_headerObj.titleAnimationClass[1]}">
 				${g_headerObj.musicTitleForView[1] ?? ``}
@@ -3901,9 +3853,7 @@ const makeInfoWindow = (_text, _animationName = ``, _backColor = `#ccccff`) => {
  */
 const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT) => {
 
-	if (document.querySelector(`#lblWarning`) !== null) {
-		divRoot.removeChild(lblWarning);
-	}
+	deleteDiv(divRoot, `lblWarning`);
 
 	// ウィンドウ枠の行を取得するために一時的な枠を作成
 	const tmplbl = createDivCss2Label(`lblTmpWarning`, _text, {
@@ -4024,12 +3974,11 @@ const optionInit = _ => {
 const setSpriteList = _settingList => {
 	const optionWidth = (g_sWidth - 450) / 2;
 	const spriteList = [];
-	_settingList.forEach(setting => {
+	_settingList.forEach(setting =>
 		spriteList[setting[0]] = createEmptySprite(optionsprite, `${setting[0]}Sprite`, {
 			x: 25, y: setting[1] * C_LEN_SETLBL_HEIGHT + setting[2] + 20,
 			w: optionWidth + setting[3], h: C_LEN_SETLBL_HEIGHT + setting[4],
-		});
-	});
+		}));
 	return spriteList;
 };
 
@@ -4038,9 +3987,7 @@ const setSpriteList = _settingList => {
  * @param {string} _sprite 
  * @returns 
  */
-const createOptionSprite = _sprite => createEmptySprite(_sprite, `optionsprite`, {
-	x: (g_sWidth - 450) / 2, y: 65 + (g_sHeight - 500) / 2, w: 450, h: 325,
-});
+const createOptionSprite = _sprite => createEmptySprite(_sprite, `optionsprite`, g_windowObj.optionSprite);
 
 /**
  * スライダー共通処理
@@ -4162,10 +4109,8 @@ const createOptionWindow = _sprite => {
 	const createDifWindow = (_key = ``) => {
 		g_currentPage = `difSelector`;
 		setShortcutEvent(g_currentPage);
-		const difList = createEmptySprite(optionsprite, `difList`, { x: 165, y: 65, w: 280, h: 255, overflow: `auto` }, g_cssObj.settings_DifSelector);
-		const difCover = createEmptySprite(optionsprite, `difCover`, {
-			x: 25, y: 65, w: 140, h: 255, overflow: `auto`, opacity: 0.95
-		}, g_cssObj.settings_DifSelector);
+		const difList = createEmptySprite(optionsprite, `difList`, g_windowObj.difList, g_cssObj.settings_DifSelector);
+		const difCover = createEmptySprite(optionsprite, `difCover`, g_windowObj.difCover, g_cssObj.settings_DifSelector);
 
 		// リスト再作成
 		makeDifList(difList, _key);
@@ -4251,7 +4196,7 @@ const createOptionWindow = _sprite => {
 	 * @param {boolean} _graphUseFlg
 	 */
 	const createScoreDetail = (_name, _graphUseFlg = true) => {
-		const detailObj = createEmptySprite(scoreDetail, `detail${_name}`, { w: 420, h: 230, visibility: `hidden` });
+		const detailObj = createEmptySprite(scoreDetail, `detail${_name}`, g_windowObj.detailObj);
 
 		if (_graphUseFlg) {
 			const graphObj = document.createElement(`canvas`);
@@ -4281,10 +4226,7 @@ const createOptionWindow = _sprite => {
 			}, g_cssObj.button_Mini)
 		);
 		g_stateObj.scoreDetailViewFlg = false;
-
-		const scoreDetail = createEmptySprite(optionsprite, `scoreDetail`, {
-			x: 20, y: 90, w: 420, h: 230, visibility: `hidden`,
-		}, g_cssObj.settings_DifSelector);
+		const scoreDetail = createEmptySprite(optionsprite, `scoreDetail`, g_windowObj.scoreDetail, g_cssObj.settings_DifSelector);
 		const viewScText = _ => createScText(lnkScoreDetail, `ScoreDetail`, { targetLabel: `lnkScoreDetail`, x: -10 });
 
 		/**
@@ -4298,7 +4240,7 @@ const createOptionWindow = _sprite => {
 			setSetting(_val, `scoreDetail`);
 			viewScText();
 			$id(`detail${g_stateObj.scoreDetail}`).visibility = `visible`;
-		}
+		};
 
 		multiAppend(scoreDetail,
 			createScoreDetail(`Speed`),
@@ -4528,9 +4470,8 @@ const createOptionWindow = _sprite => {
 		 * @param {string} _data 
 		 * @param {object} _obj 
 		 */
-		const makeDifInfoLabel = (_lbl, _data, { x = 130, y = 25, w = 125, h = 35, siz = C_SIZ_DIFSELECTOR, ...rest } = {}) => {
-			return createDivCss2Label(_lbl, _data, { x, y, w, h, siz, align: C_ALIGN_LEFT, ...rest });
-		}
+		const makeDifInfoLabel = (_lbl, _data, { x = 130, y = 25, w = 125, h = 35, siz = C_SIZ_DIFSELECTOR, ...rest } = {}) =>
+			createDivCss2Label(_lbl, _data, { x, y, w, h, siz, align: C_ALIGN_LEFT, ...rest });
 
 		let printData = ``;
 		for (let j = 0; j < g_detailObj.arrowCnt.length; j++) {
@@ -4908,7 +4849,7 @@ const createOptionWindow = _sprite => {
 		const isNotSameKey = (g_keyObj.prevKey !== g_keyObj.currentKey);
 
 		if (g_headerObj.dummyScoreNos !== undefined) {
-			g_stateObj.dummyId = setVal(g_headerObj.dummyScoreNos[g_stateObj.scoreId], ``, C_TYP_NUMBER);
+			g_stateObj.dummyId = setIntVal(g_headerObj.dummyScoreNos[g_stateObj.scoreId], ``);
 		}
 		// 特殊キーフラグ
 		g_stateObj.extraKeyFlg = g_headerObj.keyExtraList.includes(g_keyObj.currentKey);
@@ -4965,10 +4906,10 @@ const createOptionWindow = _sprite => {
 				g_keyObj[`shuffle${keyCtrlPtn}`] = g_keyObj[`shuffle${keyCtrlPtn}_${g_keycons.shuffleGroupNum}`].concat();
 			}
 			if (g_headerObj.keyRetryDef === C_KEY_RETRY) {
-				g_headerObj.keyRetry = setVal(g_keyObj[`keyRetry${keyCtrlPtn}`], g_headerObj.keyRetryDef, C_TYP_NUMBER);
+				g_headerObj.keyRetry = setIntVal(g_keyObj[`keyRetry${keyCtrlPtn}`], g_headerObj.keyRetryDef);
 			}
 			if (g_headerObj.keyTitleBackDef === C_KEY_TITLEBACK) {
-				g_headerObj.keyTitleBack = setVal(g_keyObj[`keyTitleBack${keyCtrlPtn}`], g_headerObj.keyTitleBackDef, C_TYP_NUMBER);
+				g_headerObj.keyTitleBack = setIntVal(g_keyObj[`keyTitleBack${keyCtrlPtn}`], g_headerObj.keyTitleBackDef);
 			}
 		}
 
@@ -5421,9 +5362,7 @@ const createSettingsDisplayWindow = _sprite => {
 	];
 
 	// 設定毎に個別のスプライトを作成し、その中にラベル・ボタン類を配置
-	const displaySprite = createEmptySprite(optionsprite, `displaySprite`, {
-		x: 25, y: 30, w: (g_sWidth - 450) / 2, h: C_LEN_SETLBL_HEIGHT * 5,
-	});
+	const displaySprite = createEmptySprite(optionsprite, `displaySprite`, g_windowObj.displaySprite);
 	const spriteList = setSpriteList(settingList);
 
 	_sprite.appendChild(
@@ -5563,7 +5502,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	);
 
 	// キーの一覧を表示
-	const keyconSprite = createEmptySprite(divRoot, `keyconSprite`, { y: 88 + (g_sHeight - 500) / 2, h: g_sHeight, overflow: `auto` });
+	const keyconSprite = createEmptySprite(divRoot, `keyconSprite`, g_windowObj.keyconSprite);
 	const tkObj = getKeyInfo();
 	const [keyCtrlPtn, keyNum, posMax, divideCnt] =
 		[tkObj.keyCtrlPtn, tkObj.keyNum, tkObj.posMax, tkObj.divideCnt];
@@ -5707,8 +5646,8 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 		// 割り当て先のキー名を表示
 		for (let k = 0; k < g_keyObj[`keyCtrl${keyCtrlPtn}`][j].length; k++) {
-			g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setVal(g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k], 0, C_TYP_NUMBER);
-			g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k] = setVal(g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k], 0, C_TYP_NUMBER);
+			g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setIntVal(g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k]);
+			g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k] = setIntVal(g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k]);
 
 			keyconSprite.appendChild(
 				createCss2Button(`keycon${j}_${k}`, g_kCd[g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k]], _ => {
@@ -5976,11 +5915,26 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		lnkKcType.textContent = getStgDetailName(g_kcType);
 	};
 
+	/**
+	 * ColorPickerの色切替
+	 * @param {number} _j 
+	 * @param {string} _type 
+	 * @param {string} _color 
+	 */
+	const changeColorPicker = (_j, _type, _color) => {
+		if (_color !== ``) {
+			document.getElementById(`pick${_type}${_j}`).value = _color.slice(0, 7);
+			document.getElementById(`pick${_type}${_j}`).style.display = C_DIS_INHERIT;
+		} else {
+			document.getElementById(`pick${_type}${_j}`).style.display = C_DIS_NONE;
+		}
+	};
+
 	/**
 	 * ColorTypeの制御
 	 * @param {number} _scrollNum 
 	 */
-	const setColorType = (_scrollNum = 1) => {
+	const setColorType = (_scrollNum = 1, _reloadFlg = true) => {
 		const nextNum = getNextNum(_scrollNum, `colorTypes`, g_colorType);
 		g_colorType = g_keycons.colorTypes[nextNum];
 		if (g_headerObj.colorUse) {
@@ -5989,6 +5943,15 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		changeSetColor();
 		viewGroupObj.color(`_${g_keycons.colorGroupNum}`);
 		lnkColorType.textContent = `${getStgDetailName(g_colorType)}${g_localStorage.colorType === g_colorType ? ' *' : ''}`;
+		if (_reloadFlg) {
+			colorPickSprite.style.display = ([`Default`, `Type0`].includes(g_colorType) ? C_DIS_NONE : C_DIS_INHERIT);
+			for (let j = 0; j < g_headerObj.setColor.length; j++) {
+				changeColorPicker(j, `arrow`, g_headerObj.setColor[j]);
+				changeColorPicker(j, `arrowShadow`, g_headerObj.setShadowColor[j]);
+				changeColorPicker(j, `frz`, g_headerObj.frzColor[j][0]);
+				changeColorPicker(j, `frzBar`, g_headerObj.frzColor[j][1]);
+			}
+		}
 	};
 
 	const setImgType = (_scrollNum = 1) => {
@@ -6001,6 +5964,53 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		keyConfigInit(g_kcType);
 	};
 
+	const colorPickSprite = createEmptySprite(divRoot, `colorPickSprite`, g_windowObj.colorPickSprite);
+	if ([`Default`, `Type0`].includes(g_colorType)) {
+		colorPickSprite.style.display = C_DIS_NONE;
+	}
+	const pickPos = { x: 0, w: 50, h: 15, siz: 11, align: C_ALIGN_LEFT, background: `#${g_headerObj.baseBrightFlg ? `eeeeee` : `111111`}80` };
+	multiAppend(colorPickSprite,
+		createDivCss2Label(`lblPickArrow`, g_lblNameObj.s_arrow, Object.assign({ y: 0 }, pickPos)),
+		createDivCss2Label(`lblPickFrz`, g_lblNameObj.s_frz, Object.assign({ y: 140 }, pickPos)),
+		createCss2Button(`lnkColorCopy`, `[↓]`, _ => {
+			if (window.confirm(g_msgObj.colorCopyConfirm)) {
+				for (let j = 0; j < g_headerObj.setColor.length; j++) {
+					g_headerObj[`frzColor${g_colorType}`][j] = [...Array(g_headerObj[`frzColor${g_colorType}`][j].length)].fill(g_headerObj[`setColor${g_colorType}`][j]);
+					[``, `Bar`].forEach((val, k) =>
+						document.getElementById(`pickfrz${val}${j}`).value = g_headerObj[`frzColor${g_colorType}`][j][k]);
+				}
+			}
+		}, { x: 35, y: -5, w: 30, h: 20, siz: 14 }, g_cssObj.button_Start),
+	);
+
+	/**
+	 * ColorPicker部分の作成
+	 * @param {number} _j 
+	 * @param {string} _type 
+	 * @param {function} _func 
+	 * @param {object} _obj 
+	 */
+	const createColorPickWindow = (_j, _type, _func, { x = 0, y = 15 } = {}) => {
+		const picker = createColorPicker(colorPickSprite, `pick${_type}${_j}`, { x, y: y + 25 * _j });
+		picker.addEventListener(`change`, _func);
+	};
+
+	for (let j = 0; j < g_headerObj.setColor.length; j++) {
+		createColorPickWindow(j, `arrow`, _ => {
+			g_headerObj[`setColor${g_colorType}`][j] = document.getElementById(`pickarrow${j}`).value;
+			setColorType(0, false);
+		});
+
+		createColorPickWindow(j, `arrowShadow`, _ => {
+			g_headerObj[`setShadowColor${g_colorType}`][j] = `${document.getElementById(`pickarrowShadow${j}`).value}80`;
+			setColorType(0, false);
+		}, { x: 25 });
+
+		[``, `Bar`].forEach((val, k) =>
+			createColorPickWindow(j, `frz${val}`, _ =>
+				g_headerObj[`frzColor${g_colorType}`][j][k] = document.getElementById(`pickfrz${val}${j}`).value, { x: 25 * k, y: 155 }));
+	}
+
 	// ConfigType, ColorTypeの初期設定
 	setConfigType(0);
 	setColorType(0);
@@ -6075,7 +6085,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 			if (window.confirm(g_msgObj.keyResetConfirm)) {
 				for (let j = 0; j < keyNum; j++) {
 					for (let k = 0; k < g_keyObj[`keyCtrl${keyCtrlPtn}`][j].length; k++) {
-						g_keyObj[`keyCtrl${keyCtrlPtn}`][j][k] = setVal(g_keyObj[`keyCtrl${keyCtrlPtn}d`][j][k], 0, C_TYP_NUMBER);
+						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]];
 						changeKeyConfigColor(j, k, g_keyObj.currentPtn === -1 ? g_cssObj.keyconfig_Defaultkey : g_cssObj.title_base);
 					}
@@ -6252,7 +6262,7 @@ const loadMusic = _ => {
 	request.addEventListener(`load`, _ => {
 		if (request.status >= 200 && request.status < 300) {
 			const blobUrl = URL.createObjectURL(request.response);
-			createEmptySprite(divRoot, `loader`, { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` });
+			createEmptySprite(divRoot, `loader`, g_windowObj.loader);
 			lblLoading.textContent = g_lblNameObj.pleaseWait;
 			setAudio(blobUrl);
 		} else {
@@ -6722,12 +6732,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 		// 矢印名からフリーズアロー名への変換
 		let frzName = replaceStr(g_keyObj[`chara${_keyCtrlPtn}`][j], g_escapeStr.frzName);
 		if (frzName.indexOf(`frz`) === -1 && frzName.indexOf(`foni`) === -1) {
-			if ((frzName.startsWith(`s`)) || frzName.startsWith(`t`) ||
-				(frzName.startsWith(`a`) && !frzName.startsWith(`arrow`))) {
-				frzName = frzName.replace(frzName.slice(1), `frz${toCapitalize(frzName.slice(1))}`);
-			} else {
-				frzName = frzName.replace(frzName, `frz${toCapitalize(frzName)}`);
-			}
+			frzName = frzName.replaceAll(frzName, `frz${toCapitalize(frzName)}`);
 		}
 
 		// フリーズアローデータの分解 (2つで1セット)
@@ -6832,7 +6837,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 				const frame = calcFrame(tmpcssMotionData[0]);
 				const arrowNum = parseFloat(tmpcssMotionData[1]);
 				const styleUp = (tmpcssMotionData[2] === `none` ? `` : tmpcssMotionData[2]);
-				const styleDown = (tmpcssMotionData[3] === `none` ? `` : setVal(tmpcssMotionData[3], styleUp, C_TYP_STRING));
+				const styleDown = (tmpcssMotionData[3] === `none` ? `` : setVal(tmpcssMotionData[3], styleUp));
 
 				cssMotionData.push([frame, arrowNum, styleUp, styleDown]);
 			});
@@ -6841,6 +6846,20 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 		return [];
 	};
 
+	/**
+	 * 譜面データの優先順配列の取得
+	 * @param {string} _header 
+	 * @param {string} _type 
+	 * @param {number} _scoreNo 
+	 * @returns 
+	 */
+	const getPriorityList = (_header, _type, _scoreNo) => [
+		_dosObj[`${_header}${_type}${g_localeObj.val}${_scoreNo}_data`],
+		_dosObj[`${_header}${_type}${g_localeObj.val}_data`],
+		_dosObj[`${_header}${_type}${_scoreNo}_data`],
+		_dosObj[`${_header}${_type}_data`]
+	];
+
 	/**
 	 * 歌詞データの分解
 	 * @param {string} _scoreNo 
@@ -6849,14 +6868,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 		const wordDataList = [];
 		let wordReverseFlg = false;
 		const divideCnt = getKeyInfo().divideCnt;
-
-		const addDataList = (_type = ``) =>
-			wordDataList.push(
-				_dosObj[`word${_type}${g_localeObj.val}${_scoreNo}_data`],
-				_dosObj[`word${_type}${g_localeObj.val}_data`],
-				_dosObj[`word${_type}${_scoreNo}_data`],
-				_dosObj[`word${_type}_data`]
-			);
+		const addDataList = (_type = ``) => wordDataList.push(...getPriorityList(`word`, _type, _scoreNo));
 
 		if (g_stateObj.scroll !== `---`) {
 			addDataList(`Alt`);
@@ -6921,7 +6933,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 					checkDuplicatedObjects(wordData[tmpWordData[k]]);
 
 				if (tmpWordData.length > 3 && tmpWordData.length < 6) {
-					tmpWordData[3] = setVal(tmpWordData[3], C_WOD_FRAME, C_TYP_NUMBER);
+					tmpWordData[3] = setIntVal(tmpWordData[3], C_WOD_FRAME);
 					wordData[tmpWordData[0]][addFrame].push(tmpWordData[1],
 						escapeHtmlForEnabledTag(tmpWordData[2]), tmpWordData[3]);
 					break;
@@ -6942,13 +6954,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	 */
 	const makeBackgroundData = (_header, _scoreNo) => {
 		const dataList = [];
-		const addDataList = (_type = ``) =>
-			dataList.push(
-				_dosObj[`${_header}${_type}${g_localeObj.val}${_scoreNo}_data`],
-				_dosObj[`${_header}${_type}${g_localeObj.val}_data`],
-				_dosObj[`${_header}${_type}${_scoreNo}_data`],
-				_dosObj[`${_header}${_type}_data`]
-			);
+		const addDataList = (_type = ``) => dataList.push(...getPriorityList(_header, _type, _scoreNo));
 
 		if (g_stateObj.scroll !== `---`) {
 			addDataList(`Alt`);
@@ -6969,13 +6975,7 @@ const scoreConvert = (_dosObj, _scoreId, _preblankFrame, _dummyNo = ``,
 	 */
 	const makeBackgroundResultData = (_header, _scoreNo, _defaultHeader = ``) => {
 		const dataList = [];
-		const addResultDataList = _headerType =>
-			dataList.push(
-				_dosObj[`${_headerType}${g_localeObj.val}${_scoreNo}_data`],
-				_dosObj[`${_headerType}${g_localeObj.val}_data`],
-				_dosObj[`${_headerType}${_scoreNo}_data`],
-				_dosObj[`${_headerType}_data`],
-			);
+		const addResultDataList = _headerType => dataList.push(...getPriorityList(``, _headerType, _scoreNo));
 		addResultDataList(_header);
 		if (_defaultHeader !== ``) {
 			addResultDataList(_defaultHeader);
@@ -7762,6 +7762,7 @@ const getArrowSettings = _ => {
 	g_workObj.arrowRtn = copyArray2d(g_keyObj[`stepRtn${keyCtrlPtn}`]);
 	g_workObj.keyCtrl = copyArray2d(g_keyObj[`keyCtrl${keyCtrlPtn}`]);
 	g_workObj.diffList = [];
+	g_workObj.mainEndTime = 0;
 
 	const keyCtrlLen = g_workObj.keyCtrl.length;
 	g_workObj.keyCtrlN = [...Array(keyCtrlLen)].map(_ => []);
@@ -9056,7 +9057,7 @@ const MainInit = _ => {
 
 					g_workObj.lastFadeFrame[wordDepth] = currentFrame;
 					g_workObj.wordFadeFrame[wordDepth] = (tmpObj.length > 2 ?
-						setVal(tmpObj[2], C_WOD_FRAME, C_TYP_NUMBER) : C_WOD_FRAME);
+						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`;
@@ -9070,7 +9071,7 @@ const MainInit = _ => {
 				} else if (/\[fontSize=\d+\]/.test(g_wordObj.wordDat)) {
 
 					// フォントサイズ変更
-					const fontSize = setVal(g_wordObj.wordDat.match(/\d+/)[0], C_SIZ_MAIN, C_TYP_NUMBER);
+					const fontSize = setIntVal(g_wordObj.wordDat.match(/\d+/)[0], C_SIZ_MAIN);
 					g_wordSprite.style.fontSize = `${fontSize}px`;
 
 				} else {
@@ -9109,7 +9110,8 @@ const MainInit = _ => {
 			}
 			resetKeyControl();
 			clearTimeout(g_timeoutEvtId);
-			setTimeout(_ => resultInit(), 100);
+			g_workObj.mainEndTime = thisTime;
+			resultInit();
 
 		} else if (g_workObj.lifeVal === 0 && g_workObj.lifeBorder === 0) {
 
@@ -9661,7 +9663,7 @@ const resultInit = _ => {
 	// 曲時間制御変数
 	let thisTime;
 	let buffTime;
-	let resultStartTime = performance.now();
+	let resultStartTime = g_workObj.mainEndTime > 0 ? g_workObj.mainEndTime : performance.now();
 
 	if (g_stateObj.d_background === C_FLG_OFF && g_headerObj.resultMotionSet) {
 	} else {
@@ -9704,12 +9706,8 @@ const resultInit = _ => {
 	// タイトル文字描画
 	divRoot.appendChild(getTitleDivLabel(`lblTitle`, g_lblNameObj.result, 0, 15, `settings_Title`));
 
-	const playDataWindow = createEmptySprite(divRoot, `playDataWindow`, {
-		x: g_sWidth / 2 - 225, y: 70 + (g_sHeight - 500) / 2, w: 450, h: 110,
-	}, g_cssObj.result_PlayDataWindow);
-	const resultWindow = createEmptySprite(divRoot, `resultWindow`, {
-		x: g_sWidth / 2 - 200, y: 185 + (g_sHeight - 500) / 2, w: 400, h: 210,
-	});
+	const playDataWindow = createEmptySprite(divRoot, `playDataWindow`, g_windowObj.playDataWindow, g_cssObj.result_PlayDataWindow);
+	const resultWindow = createEmptySprite(divRoot, `resultWindow`, g_windowObj.resultWindow);
 
 	const playingArrows = g_resultObj.ii + g_resultObj.shakin +
 		g_resultObj.matari + g_resultObj.shobon + g_resultObj.uwan +
@@ -9985,7 +9983,7 @@ const resultInit = _ => {
 
 	// Twitter用リザルト
 	// スコアを上塗りする可能性があるため、カスタムイベント後に配置
-	const hashTag = (g_headerObj.hashTag !== undefined ? ` ${g_headerObj.hashTag}` : ``);
+	const hashTag = (hasVal(g_headerObj.hashTag) ? ` ${g_headerObj.hashTag}` : ``);
 	let tweetDifData = `${getKeyName(g_headerObj.keyLabels[g_stateObj.scoreId])}${transKeyData}${getStgDetailName('k-')}${g_headerObj.difLabels[g_stateObj.scoreId]}${assistFlg}`;
 	if (g_stateObj.shuffle !== `OFF`) {
 		tweetDifData += `:${getShuffleName()}`;
@@ -10125,8 +10123,7 @@ const resultInit = _ => {
 		g_scoreObj.maskResultFrameNum++;
 		g_timeoutEvtResultId = setTimeout(_ => flowResultTimeline(), 1000 / g_fps - buffTime);
 	};
-
-	g_timeoutEvtResultId = setTimeout(_ => flowResultTimeline(), 1000 / g_fps);
+	flowResultTimeline();
 
 	// キー操作イベント（デフォルト）
 	setShortcutEvent(g_currentPage);