danoniplus 27.0.0 → 27.3.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2022/03/12
+ * Revised : 2022/04/10
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 27.0.0`;
-const g_revisedDate = `2022/03/18`;
+const g_version = `Ver 27.3.0`;
+const g_revisedDate = `2022/04/10`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -41,11 +41,11 @@ let g_localVersion2 = ``;
  */
 const current = _ => {
 	if (document.currentScript) {
-		return document.currentScript.src;
+		return encodeURI(document.currentScript.src);
 	}
 	const scripts = document.getElementsByTagName(`script`);
 	const targetScript = scripts[scripts.length - 1];
-	return targetScript.src;
+	return encodeURI(targetScript.src);
 };
 const g_rootPath = current().match(/(^.*\/)/)[0];
 const g_remoteFlg = g_rootPath.match(`^https://cwtickle.github.io/danoniplus/`) !== null;
@@ -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;
 
@@ -881,6 +885,18 @@ const getFontSize = (_str, _maxWidth, _font = getBasicFont(), _maxFontsize = 64,
 	return _minFontsize;
 };
 
+/**
+ * 補足説明部分のラベル作成
+ * @param {string} _id 
+ * @param {string} _str 
+ * @param {string} _altId
+ * @returns 
+ */
+const createDescDiv = (_id, _str, _altId = _id) =>
+	createDivCss2Label(_id, _str, Object.assign(g_lblPosObj[_altId], {
+		siz: getFontSize(_str, g_sWidth, getBasicFont(), C_SIZ_MAIN),
+	}));
+
 /*-----------------------------------------------------------*/
 /* ラベル・ボタン・オブジェクトの作成                           */
 /*-----------------------------------------------------------*/
@@ -961,6 +977,26 @@ const createImg = (_id, _imgPath, _x, _y, _width, _height) => {
 	return div;
 };
 
+/**
+ * ColorPickerの作成
+ * @param {string} _parentObj
+ * @param {string} _id
+ * @param {function} _func 
+ * @param {object} _obj 
+ * @returns 
+ */
+const createColorPicker = (_parentObj, _id, _func, { 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`;
+	picker.addEventListener(`change`, _func);
+	_parentObj.appendChild(picker);
+	return picker;
+};
+
 /**
  * 色付きオブジェクトの作成 (拡張属性対応)
  * @param {string} _id 
@@ -1221,6 +1257,7 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		// レイヤー情報取得
 		const layer0 = document.querySelector(`#layer0`);
 		const l0ctx = layer0.getContext(`2d`);
+		layer0.width = g_sWidth;
 
 		// 線画、図形をクリア
 		l0ctx.clearRect(0, 0, g_sWidth, g_sHeight);
@@ -1228,24 +1265,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(0, 0);
-			l1ctx.lineTo(g_sWidth, 0);
+			l1ctx.lineTo(layer1.width, 0);
 			l1ctx.stroke();
 
 			l1ctx.beginPath();
 			l1ctx.strokeStyle = `#cccccc`;
 			l1ctx.moveTo(0, g_sHeight);
-			l1ctx.lineTo(g_sWidth, 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);
 		}
 	}
@@ -1386,7 +1425,7 @@ const makeSpriteData = (_data, _calcFrame = _frame => _frame) => {
 				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)),
+				animationName: escapeHtml(setVal(tmpSpriteData[9], C_DIS_NONE)),
 				animationDuration: setIntVal(tmpSpriteData[10]) / g_fps,
 			};
 			if (g_headerObj.autoPreload) {
@@ -1703,15 +1742,8 @@ const initialControl = async () => {
 	g_canLoadDifInfoFlg = true;
 
 	// 譜面データの読み込みオプション
-	const ampSplitInput = document.querySelector(`#enableAmpersandSplit`);
-	if (ampSplitInput !== null) {
-		g_enableAmpersandSplit = setBoolVal(ampSplitInput.value, true);
-	}
-
-	const decodeUriInput = document.querySelector(`#enableDecodeURI`);
-	if (decodeUriInput !== null) {
-		g_enableDecodeURI = setBoolVal(decodeUriInput.value);
-	}
+	g_enableAmpersandSplit = setBoolVal(document.querySelector(`#enableAmpersandSplit`)?.value, true);
+	g_enableDecodeURI = setBoolVal(document.querySelector(`#enableDecodeURI`)?.value);
 
 	// 作品別ローカルストレージの読み込み
 	loadLocalStorage();
@@ -1763,6 +1795,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;
@@ -1791,12 +1838,12 @@ const initialControl = async () => {
 			if (termRoopCnts.length === 1) {
 				// Pattern Bの場合
 				lastCnt = setIntVal(tmpPreloadImages[1], 1);
-				paddingLen = String(setVal(tmpPreloadImages[1], 1, C_TYP_STRING)).length;
+				paddingLen = String(setVal(tmpPreloadImages[1], 1)).length;
 			} else {
 				// Pattern C, Dの場合
 				startCnt = setIntVal(termRoopCnts[0], 1);
 				lastCnt = setIntVal(termRoopCnts[1], 1);
-				paddingLen = String(setVal(termRoopCnts[1], 1, C_TYP_STRING)).length;
+				paddingLen = String(setVal(termRoopCnts[1], 1)).length;
 			}
 			for (let k = startCnt; k <= lastCnt; k++) {
 				preloadFile(`image`, tmpPreloadImages[0].replaceAll(`*`, String(k).padStart(paddingLen, `0`)));
@@ -1833,6 +1880,7 @@ const initialControl = async () => {
 			getScoreDetailData(j);
 		}
 	}
+	g_customJsObj.preTitle.forEach(func => func());
 	titleInit();
 };
 
@@ -1926,7 +1974,8 @@ const loadChartFile = async (_scoreId = g_stateObj.scoreId) => {
 
 	const dosInput = document.querySelector(`#dos`);
 	const divRoot = document.querySelector(`#divRoot`);
-	const queryDos = getQueryParamVal(`dos`) !== null ? `dos/${getQueryParamVal('dos')}.txt` : (document.querySelector(`#externalDos`)?.value ?? ``);
+	const queryDos = getQueryParamVal(`dos`) !== null ?
+		`dos/${getQueryParamVal('dos')}.txt` : encodeURI(document.querySelector(`#externalDos`)?.value ?? ``);
 
 	if (dosInput === null && queryDos === ``) {
 		makeWarningWindow(g_msgInfoObj.E_0023);
@@ -2296,6 +2345,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`) => {
@@ -2315,11 +2370,11 @@ 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 => {
@@ -2388,6 +2443,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 = [];
@@ -2577,10 +2641,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 = [];
 
 	// ダミー用初期矢印色
@@ -2676,9 +2739,7 @@ const headerConvert = _dosObj => {
 	}
 
 	// ハッシュタグ
-	if (hasVal(_dosObj.hashTag)) {
-		obj.hashTag = _dosObj.hashTag;
-	}
+	obj.hashTag = setVal(_dosObj.hashTag, ``);
 
 	// 自動プリロードの設定
 	obj.autoPreload = setBoolVal(_dosObj.autoPreload, true);
@@ -2719,13 +2780,9 @@ 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.replaceAll(`,`, `', '`))}'`;
-		});
-		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
@@ -2740,11 +2797,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`];
@@ -2752,20 +2805,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];
@@ -2899,7 +2950,7 @@ const headerConvert = _dosObj => {
 	obj.wordAutoReverse = _dosObj.wordAutoReverse ?? g_presetObj.wordAutoReverse ?? `auto`;
 
 	// プレイサイズ(X方向)
-	obj.playingWidth = setIntVal(_dosObj.playingWidth, g_sWidth);
+	obj.playingWidth = setIntVal(_dosObj.playingWidth, `default`);
 
 	// プレイ左上位置(X座標)
 	obj.playingX = setIntVal(_dosObj.playingX);
@@ -2969,9 +3020,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);
 
 /**
  * 矢印・フリーズアロー色のデータ変換
@@ -3020,19 +3069,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();
@@ -3316,8 +3364,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));
 			}
 		}
 	};
@@ -3372,6 +3419,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`,
@@ -3534,11 +3584,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++) {
@@ -3619,6 +3666,17 @@ const titleInit = _ => {
 	let reloadFlg = false;
 	const getLinkSiz = _name => getFontSize(_name, g_sWidth / 2 - 20, getBasicFont(), C_LBL_LNKSIZE, 12);
 
+	/**
+	 * クレジット用リンク作成
+	 * @param {string} _id 
+	 * @param {string} _text 
+	 * @param {string} _url 
+	 * @returns 
+	 */
+	const createCreditBtn = (_id, _text, _url) =>
+		createCss2Button(_id, _text, _ => true,
+			Object.assign(g_lblPosObj[_id], { siz: getLinkSiz(_text), resetFunc: _ => openLink(_url) }), g_cssObj.button_Default);
+
 	// ボタン描画
 	multiAppend(divRoot,
 
@@ -3639,63 +3697,49 @@ const titleInit = _ => {
 				localStorage.setItem(g_localStorageUrl, JSON.stringify(g_localStorage));
 				reloadFlg = true;
 			}
-		}, {
-			x: 0, y: g_sHeight - 20, w: g_sWidth / 4, h: 16, siz: 12, title: g_msgObj.dataReset,
+		}, Object.assign(g_lblPosObj.btnReset, {
 			resetFunc: _ => {
 				if (reloadFlg) {
 					location.reload();
 				}
 			},
-		}, g_cssObj.button_Reset),
+		}), g_cssObj.button_Reset),
 
 		// ロケール切替
-		createCss2Button(`btnReload`, g_localeObj.val, _ => true, {
-			x: 10, y: 10, w: 30, h: 30, siz: 20, title: g_msgObj.reload,
-			resetFunc: _ => {
-				g_localeObj.num = (++g_localeObj.num) % g_localeObj.list.length;
-				g_langStorage.locale = g_localeObj.list[g_localeObj.num];
-				localStorage.setItem(`danoni-locale`, JSON.stringify(g_langStorage));
-				location.reload();
-			},
-		}, g_cssObj.button_Start),
+		createCss2Button(`btnReload`, g_localeObj.val, _ => true,
+			Object.assign(g_lblPosObj.btnReload, {
+				resetFunc: _ => {
+					g_localeObj.num = (++g_localeObj.num) % g_localeObj.list.length;
+					g_langStorage.locale = g_localeObj.list[g_localeObj.num];
+					localStorage.setItem(`danoni-locale`, JSON.stringify(g_langStorage));
+					location.reload();
+				},
+			}), g_cssObj.button_Start),
 
 		// ヘルプ
-		createCss2Button(`btnHelp`, `?`, _ => true, {
-			x: 0, y: g_sHeight - 150, w: 40, h: 40, siz: 30, title: g_msgObj.howto,
-			resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus/wiki/AboutGameSystem`),
-		}, g_cssObj.button_Setting),
+		createCss2Button(`btnHelp`, `?`, _ => true,
+			Object.assign(g_lblPosObj.btnHelp, {
+				resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus/wiki/AboutGameSystem`),
+			}), g_cssObj.button_Setting),
 
 		// 製作者表示
-		createCss2Button(`lnkMaker`, `${g_lblNameObj.maker}: ${g_headerObj.tuningInit}`, _ => true, {
-			x: 0, y: g_sHeight - 50, w: g_sWidth / 2, h: C_LNK_HEIGHT,
-			siz: getLinkSiz(`${g_lblNameObj.maker}: ${g_headerObj.tuningInit}`), align: C_ALIGN_LEFT,
-			title: g_headerObj.creatorUrl,
-			resetFunc: _ => openLink(g_headerObj.creatorUrl),
-		}, g_cssObj.button_Default),
+		createCreditBtn(`lnkMaker`, `${g_lblNameObj.maker}: ${g_headerObj.tuningInit}`, g_headerObj.creatorUrl),
 
 		// アーティスト表示
-		createCss2Button(`lnkArtist`, `${g_lblNameObj.artist}: ${g_headerObj.artistName}`, _ => true, {
-			x: g_sWidth / 2, y: g_sHeight - 50, w: g_sWidth / 2, h: C_LNK_HEIGHT,
-			siz: getLinkSiz(`${g_lblNameObj.artist}: ${g_headerObj.artistName}`), align: C_ALIGN_LEFT,
-			title: g_headerObj.artistUrl,
-			resetFunc: _ => openLink(g_headerObj.artistUrl),
-		}, g_cssObj.button_Default),
+		createCreditBtn(`lnkArtist`, `${g_lblNameObj.artist}: ${g_headerObj.artistName}`, g_headerObj.artistUrl),
 
 		// バージョン描画
-		createCss2Button(
-			`lnkVersion`, versionName, _ => true, {
-			x: g_sWidth / 4, y: g_sHeight - 20, w: g_sWidth * 3 / 4 - 20, h: 16,
-			siz: getFontSize(versionName, g_sWidth * 3 / 4 - 20, getBasicFont(), 12),
-			align: C_ALIGN_RIGHT, title: g_msgObj.github,
-			resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus`),
-		}, g_cssObj.button_Tweet),
+		createCss2Button(`lnkVersion`, versionName, _ => true,
+			Object.assign(g_lblPosObj.lnkVersion, {
+				siz: getFontSize(versionName, g_sWidth * 3 / 4 - 20, getBasicFont(), 12),
+				resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus`),
+			}), g_cssObj.button_Tweet),
 
 		// セキュリティリンク
-		createCss2Button(`lnkComparison`, `&#x1f6e1;`, _ => true, {
-			x: g_sWidth - 20, y: g_sHeight - 20, w: 20, h: 16, siz: 12,
-			title: g_msgObj.security,
-			resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus/security/policy`),
-		}, g_cssObj.button_Tweet),
+		createCss2Button(`lnkComparison`, `&#x1f6e1;`, _ => true,
+			Object.assign(g_lblPosObj.lnkComparison, {
+				resetFunc: _ => openLink(`https://github.com/cwtickle/danoniplus/security/policy`),
+			}), g_cssObj.button_Tweet),
 	);
 
 	// コメントエリア作成
@@ -3715,19 +3759,11 @@ const titleInit = _ => {
 			}
 		} else {
 			multiAppend(divRoot,
-
-				createDivCss2Label(`lblComment`, convCommentVal, {
-					x: 0, y: 70, w: g_sWidth, h: g_sHeight - 180, siz: C_SIZ_DIFSELECTOR, align: C_ALIGN_LEFT,
-					overflow: `auto`, background: `#222222`, color: `#cccccc`, display: C_DIS_NONE,
-				}),
-
+				createDivCss2Label(`lblComment`, convCommentVal, g_lblPosObj.lblComment),
 				createCss2Button(`btnComment`, g_lblNameObj.comment, _ => {
 					const lblCommentDef = lblComment.style.display;
 					lblComment.style.display = (lblCommentDef === C_DIS_NONE ? C_DIS_INHERIT : C_DIS_NONE);
-				}, {
-					x: g_sWidth - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
-				}, g_cssObj.button_Default),
-
+				}, g_lblPosObj.btnComment, g_cssObj.button_Default),
 			);
 			setUserSelect(lblComment.style, `text`);
 		}
@@ -3865,31 +3901,31 @@ const commonSettingBtn = _labelName => {
 	multiAppend(divRoot,
 
 		// タイトル画面へ戻る
-		createCss2Button(`btnBack`, g_lblNameObj.b_back, _ => true, {
-			animationName: (g_initialFlg ? `` : `smallToNormalY`), resetFunc: _ => titleInit(),
-		}, g_cssObj.button_Back),
+		createCss2Button(`btnBack`, g_lblNameObj.b_back, _ => true,
+			Object.assign(g_lblPosObj.btnBack, {
+				animationName: (g_initialFlg ? `` : `smallToNormalY`), resetFunc: _ => titleInit(),
+			}), g_cssObj.button_Back),
 
 		// キーコンフィグ画面へ移動
-		createCss2Button(`btnKeyConfig`, g_lblNameObj.b_keyConfig, _ => true, {
-			x: g_sWidth / 3,
-			animationName: (g_initialFlg ? `` : `smallToNormalY`), resetFunc: _ => keyConfigInit(`Main`),
-		}, g_cssObj.button_Setting),
+		createCss2Button(`btnKeyConfig`, g_lblNameObj.b_keyConfig, _ => true,
+			Object.assign(g_lblPosObj.btnKeyConfig, {
+				animationName: (g_initialFlg ? `` : `smallToNormalY`), resetFunc: _ => keyConfigInit(`Main`),
+			}), g_cssObj.button_Setting),
 
 		// プレイ開始
 		makePlayButton(_ => loadMusic()),
 
 		// Display設定へ移動
-		createCss2Button(`btn${_labelName}`, `>`, _ => true, {
-			x: g_sWidth / 2 + 175 - C_LEN_SETMINI_WIDTH / 2, y: 25,
-			w: C_LEN_SETMINI_WIDTH, h: 40, title: g_msgObj[`to${_labelName}`],
-			resetFunc: _ => g_jumpSettingWindow[g_currentPage](),
-		}, g_cssObj.button_Mini),
+		createCss2Button(`btn${_labelName}`, `>`, _ => true,
+			Object.assign(g_lblPosObj.btnSwitchSetting, {
+				title: g_msgObj[`to${_labelName}`], resetFunc: _ => g_jumpSettingWindow[g_currentPage](),
+			}), g_cssObj.button_Mini),
 
 		// データセーブフラグの切替
-		createCss2Button(`btnSave`, g_lblNameObj.dataSave, evt => switchSave(evt), {
-			x: 0, y: 5, w: g_sWidth / 5, h: 16, siz: 12,
-			title: g_msgObj.dataSave, borderStyle: `solid`, cxtFunc: evt => switchSave(evt),
-		}, g_cssObj.button_Default, (g_stateObj.dataSaveFlg ? g_cssObj.button_ON : g_cssObj.button_OFF)),
+		createCss2Button(`btnSave`, g_lblNameObj.dataSave, evt => switchSave(evt),
+			Object.assign(g_lblPosObj.btnSave, {
+				cxtFunc: evt => switchSave(evt),
+			}), g_cssObj.button_Default, (g_stateObj.dataSaveFlg ? g_cssObj.button_ON : g_cssObj.button_OFF)),
 	);
 };
 
@@ -3897,13 +3933,11 @@ const commonSettingBtn = _labelName => {
  * PLAYボタンの作成
  * @param {function} _func 
  */
-const makePlayButton = _func => {
-	return createCss2Button(`btnPlay`, g_lblNameObj.b_play, _ => true, {
-		x: g_sWidth * 2 / 3,
+const makePlayButton = _func => createCss2Button(`btnPlay`, g_lblNameObj.b_play, _ => true,
+	Object.assign(g_lblPosObj.btnPlay, {
 		animationName: (g_initialFlg ? `` : `smallToNormalY`),
 		resetFunc: _func,
-	}, g_cssObj.button_Next);
-};
+	}), g_cssObj.button_Next);
 
 /**
  * 設定・オプション画面初期化
@@ -3943,12 +3977,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;
 };
 
@@ -4210,19 +4243,18 @@ const createOptionWindow = _sprite => {
 			setSetting(_val, `scoreDetail`);
 			viewScText();
 			$id(`detail${g_stateObj.scoreDetail}`).visibility = `visible`;
-		}
+		};
 
 		multiAppend(scoreDetail,
 			createScoreDetail(`Speed`),
 			createScoreDetail(`Density`),
 			createScoreDetail(`ToolDif`, false),
-			makeSettingLblCssButton(`lnkScoreDetailB`, `- - -`, 0, _ => changeScoreDetail(-1), {
-				x: 10, w: 100, visibility: `hidden`,
-			}, g_cssObj.button_RevON),
-			makeSettingLblCssButton(`lnkScoreDetail`, `${getStgDetailName(g_stateObj.scoreDetail)}`, 0, _ => changeScoreDetail(), {
-				x: 10, w: 100, borderStyle: `solid`,
-				cxtFunc: _ => changeScoreDetail(-1),
-			}, g_cssObj.button_RevON),
+			makeSettingLblCssButton(`lnkScoreDetailB`, `- - -`, 0, _ => changeScoreDetail(-1),
+				g_lblPosObj.lnkScoreDetailB, g_cssObj.button_RevON),
+			makeSettingLblCssButton(`lnkScoreDetail`, `${getStgDetailName(g_stateObj.scoreDetail)}`, 0, _ => changeScoreDetail(),
+				Object.assign(g_lblPosObj.lnkScoreDetail, {
+					cxtFunc: _ => changeScoreDetail(-1),
+				}), g_cssObj.button_RevON),
 		);
 		viewScText();
 	}
@@ -4440,9 +4472,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++) {
@@ -4468,24 +4499,22 @@ const createOptionWindow = _sprite => {
 				`${obj.playingTime}\r\n`;
 		}
 		multiAppend(detailToolDif,
-			makeDifInfoLabel(`lblTooldif`, g_lblNameObj.s_level, { y: 5, w: 250, siz: C_SIZ_JDGCNTS }),
-			makeDifInfoLabel(`dataTooldif`, ``, { x: 270, y: 3, w: 160, siz: 18 }),
-			makeDifInfoLabel(`lblDouji`, g_lblNameObj.s_douji),
-			makeDifInfoLabel(`lblTate`, g_lblNameObj.s_tate, { x: 270 }),
-			makeDifInfoLabel(`dataDouji`, ``, { x: 200, w: 160 }),
-			makeDifInfoLabel(`dataTate`, ``, { x: 345, w: 160 }),
-			makeDifInfoLabel(`lblArrowInfo`, g_lblNameObj.s_cnts, { x: 130, y: 45, w: 290, siz: C_SIZ_JDGCNTS }),
-			makeDifInfoLabel(`dataArrowInfo`, ``, { x: 270, y: 45, w: 160, siz: C_SIZ_JDGCNTS }),
-			makeDifInfoLabel(`lblArrowInfo2`, ``, { x: 130, y: 70, w: 200, h: 90 }),
-			makeDifInfoLabel(`dataArrowInfo2`, ``, { x: 140, y: 70, w: 275, h: 150, overflow: `auto` }),
+			makeDifInfoLabel(`lblTooldif`, g_lblNameObj.s_level, g_lblPosObj.lblTooldif),
+			makeDifInfoLabel(`dataTooldif`, ``, g_lblPosObj.dataTooldif),
+			makeDifInfoLabel(`lblDouji`, g_lblNameObj.s_douji, g_lblPosObj.lblDouji),
+			makeDifInfoLabel(`lblTate`, g_lblNameObj.s_tate, g_lblPosObj.lblTate),
+			makeDifInfoLabel(`dataDouji`, ``, g_lblPosObj.dataDouji),
+			makeDifInfoLabel(`dataTate`, ``, g_lblPosObj.dataTate),
+			makeDifInfoLabel(`lblArrowInfo`, g_lblNameObj.s_cnts, g_lblPosObj.lblArrowInfo),
+			makeDifInfoLabel(`dataArrowInfo`, ``, g_lblPosObj.dataArrowInfo),
+			makeDifInfoLabel(`lblArrowInfo2`, ``, g_lblPosObj.lblArrowInfo2),
+			makeDifInfoLabel(`dataArrowInfo2`, ``, g_lblPosObj.dataArrowInfo2),
 			makeSettingLblCssButton(`lnkDifInfo`, g_lblNameObj.s_print, 0, _ => {
 				copyTextToClipboard(
 					`****** ${g_lblNameObj.s_printTitle} [${g_version}] ******\r\n\r\n`
 					+ `\t${g_lblNameObj.s_printHeader}\r\n\r\n${printData}`, g_msgInfoObj.I_0003
 				);
-			}, {
-				x: 10, y: 30, w: 100, borderStyle: `solid`
-			}, g_cssObj.button_RevON),
+			}, g_lblPosObj.lnkDifInfo, g_cssObj.button_RevON),
 		);
 		createScText(lnkDifInfo, `DifInfo`, { targetLabel: `lnkDifInfo`, x: -10 });
 	};
@@ -4535,12 +4564,10 @@ const createOptionWindow = _sprite => {
 		];
 
 		spriteList.scroll.appendChild(
-			createCss2Button(`btnReverse`, `${g_lblNameObj.Reverse}:${getStgDetailName(g_stateObj.reverse)}`, evt => setReverse(evt.target), {
-				x: 160, y: 0,
-				w: 90, h: 21, siz: C_SIZ_DIFSELECTOR,
-				borderStyle: `solid`,
-				cxtFunc: evt => setReverse(evt.target),
-			}, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.reverse}`])
+			createCss2Button(`btnReverse`, `${g_lblNameObj.Reverse}:${getStgDetailName(g_stateObj.reverse)}`, evt => setReverse(evt.target),
+				Object.assign(g_lblPosObj.btnReverse, {
+					cxtFunc: evt => setReverse(evt.target),
+				}), g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.reverse}`])
 		);
 		spriteList[g_settings.scrolls.length > 1 ? `reverse` : `scroll`].style.display = C_DIS_NONE;
 	} else {
@@ -4575,12 +4602,7 @@ const createOptionWindow = _sprite => {
 	spriteList.gauge.appendChild(createLblSetting(`Gauge`));
 
 	// ゲージ設定詳細　縦位置: ゲージ設定+1
-	spriteList.gauge.appendChild(
-		createDivCss2Label(`lblGauge2`, ``, {
-			x: C_LEN_SETLBL_LEFT - 35, y: C_LEN_SETLBL_HEIGHT,
-			w: C_LEN_SETLBL_WIDTH + 60, h: C_LEN_SETLBL_HEIGHT * 2, siz: 11,
-		})
-	);
+	spriteList.gauge.appendChild(createDivCss2Label(`lblGauge2`, ``, g_lblPosObj.lblGauge2));
 
 	/**
 	 * ゲージ設定メイン
@@ -4766,9 +4788,8 @@ const createOptionWindow = _sprite => {
 	// 縦位置: 11 スライダーあり
 	spriteList.fadein.appendChild(createLblSetting(`Fadein`));
 
-	const lnkFadein = createDivCss2Label(`lnkFadein`, `${g_stateObj.fadein}${g_lblNameObj.percent}`, {
-		x: C_LEN_SETLBL_LEFT, y: 0,
-	}, g_cssObj.settings_FadeinBar);
+	const lnkFadein = createDivCss2Label(`lnkFadein`, `${g_stateObj.fadein}${g_lblNameObj.percent}`,
+		g_lblPosObj.lnkFadein, g_cssObj.settings_FadeinBar);
 	spriteList.fadein.appendChild(lnkFadein);
 
 	const setFadein = _sign => {
@@ -4784,9 +4805,8 @@ const createOptionWindow = _sprite => {
 		makeMiniCssButton(`lnkFadein`, `L`, 0, _ => setFadein(-1)),
 
 		// フェードインのスライダー処理
-		createDivCss2Label(`lblFadeinBar`, `<input id="fadeinSlider" type="range" value="${g_stateObj.fadein}" min="0" max="99" step="1">`, {
-			x: C_LEN_SETLBL_LEFT, y: 0,
-		}),
+		createDivCss2Label(`lblFadeinBar`, `<input id="fadeinSlider" type="range" value="${g_stateObj.fadein}" min="0" max="99" step="1">`,
+			g_lblPosObj.lblFadeinBar),
 
 	)
 
@@ -5245,12 +5265,7 @@ const settingsDisplayInit = _ => {
 	createSettingsDisplayWindow(divRoot);
 
 	// ショートカットキーメッセージ
-	divRoot.appendChild(
-		createDivCss2Label(`scMsg`, g_lblNameObj.sdShortcutDesc, {
-			x: 0, y: g_sHeight - 45, w: g_sWidth, h: 20,
-			siz: getFontSize(g_lblNameObj.sdShortcutDesc, g_sWidth, getBasicFont(), C_SIZ_MAIN),
-		})
-	);
+	divRoot.appendChild(createDescDiv(`scMsg`, g_lblNameObj.sdShortcutDesc));
 
 	// ユーザカスタムイベント(初期)
 	g_customJsObj.settingsDisplay.forEach(func => func());
@@ -5336,11 +5351,7 @@ const createSettingsDisplayWindow = _sprite => {
 	const displaySprite = createEmptySprite(optionsprite, `displaySprite`, g_windowObj.displaySprite);
 	const spriteList = setSpriteList(settingList);
 
-	_sprite.appendChild(
-		createDivCss2Label(`sdDesc`, g_lblNameObj.sdDesc, {
-			x: 0, y: 65, w: g_sWidth, h: 20, siz: C_SIZ_MAIN,
-		})
-	);
+	_sprite.appendChild(createDivCss2Label(`sdDesc`, g_lblNameObj.sdDesc, g_lblPosObj.sdDesc));
 	g_displays.forEach((name, j) => makeDisplayButton(name, j % 7, Math.floor(j / 7)));
 
 	// ---------------------------------------------------
@@ -5354,16 +5365,13 @@ const createSettingsDisplayWindow = _sprite => {
 
 	// Hidden+/Sudden+初期値用スライダー、ロックボタン
 	multiAppend(spriteList.appearance,
-		createDivCss2Label(`lblAppearancePos`, `${g_hidSudObj.filterPos}${g_lblNameObj.percent}`, {
-			x: C_LEN_SETLBL_LEFT, y: 20, siz: 12, align: C_ALIGN_CENTER,
-		}),
-		createDivCss2Label(`lblAppearanceBar`, `<input id="appearanceSlider" type="range" value="${g_hidSudObj.filterPos}" min="0" max="100" step="1">`, {
-			x: C_LEN_SETLBL_LEFT, y: 15,
-		}),
-		createCss2Button(`lnkLockBtn`, g_lblNameObj.filterLock, evt => setLockView(evt.target), {
-			x: C_LEN_SETLBL_LEFT + C_LEN_SETLBL_WIDTH - 40, y: 0, w: 40, h: C_LEN_SETLBL_HEIGHT, siz: 12,
-			borderStyle: `solid`, cxtFunc: evt => setLockView(evt.target),
-		}, g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.filterLock}`]),
+		createDivCss2Label(`lblAppearancePos`, `${g_hidSudObj.filterPos}${g_lblNameObj.percent}`, g_lblPosObj.lblAppearancePos),
+		createDivCss2Label(`lblAppearanceBar`, `<input id="appearanceSlider" type="range" value="${g_hidSudObj.filterPos}" min="0" max="100" step="1">`,
+			g_lblPosObj.lblAppearanceBar),
+		createCss2Button(`lnkLockBtn`, g_lblNameObj.filterLock, evt => setLockView(evt.target),
+			Object.assign(g_lblPosObj.lnkLockBtn, {
+				cxtFunc: evt => setLockView(evt.target),
+			}), g_cssObj.button_Default, g_cssObj[`button_Rev${g_stateObj.filterLock}`]),
 	);
 
 	const setLockView = (_btn) => {
@@ -5459,17 +5467,10 @@ const keyConfigInit = (_kcType = g_kcType) => {
 			`<div class="settings_Title">${g_lblNameObj.key}</div><div class="settings_Title2">${g_lblNameObj.config}</div>`
 				.replace(/[\t\n]/g, ``), 0, 15, g_cssObj.flex_centering),
 
-		createDivCss2Label(`kcDesc`, g_lblNameObj.kcDesc.split(`{0}`).join(g_kCd[C_KEY_RETRY])
-			.split(`{1}:`).join(g_isMac ? `` : `Delete:`), {
-			x: 0, y: 68, w: g_sWidth, h: 20,
-			siz: getFontSize(g_lblNameObj.kcDesc, g_sWidth, getBasicFont(), C_SIZ_MAIN),
-		}),
-
-		createDivCss2Label(`kcShuffleDesc`, g_lblNameObj.kcShuffleDesc, {
-			x: 5, y: g_sHeight - 125, w: g_sWidth, h: 20, align: C_ALIGN_LEFT,
-			siz: getFontSize(g_lblNameObj.kcShuffleDesc, g_sWidth, getBasicFont(), C_SIZ_MAIN),
-		}),
+		createDescDiv(`kcDesc`, g_lblNameObj.kcDesc.split(`{0}`).join(g_kCd[C_KEY_RETRY])
+			.split(`{1}:`).join(g_isMac ? `` : `Delete:`)),
 
+		createDescDiv(`kcShuffleDesc`, g_lblNameObj.kcShuffleDesc),
 	);
 
 	// キーの一覧を表示
@@ -5760,26 +5761,17 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		viewGroup(_type);
 	};
 
-	const scMsg = g_lblNameObj.kcShortcutDesc.split(`{0}`).join(g_isMac ? `Shift+${g_kCd[g_headerObj.keyRetry]}` : g_kCd[g_headerObj.keyTitleBack])
-		.split(`{1}`).join(g_kCd[g_headerObj.keyRetry]);
-
 	multiAppend(divRoot,
 
 		// ショートカットキーメッセージ
-		createDivCss2Label(
-			`scMsg`, scMsg,
-			{
-				x: 0, y: g_sHeight - 45, w: g_sWidth, h: 20,
-				siz: getFontSize(scMsg, g_sWidth, getBasicFont(), C_SIZ_MAIN),
-			}),
+		createDescDiv(`scMsg`, g_lblNameObj.kcShortcutDesc.split(`{0}`).join(g_isMac ? `Shift+${g_kCd[g_headerObj.keyRetry]}` : g_kCd[g_headerObj.keyTitleBack])
+			.split(`{1}`).join(g_kCd[g_headerObj.keyRetry]), `scKcMsg`),
 
 		// 別キーモード警告メッセージ
 		createDivCss2Label(
 			`kcMsg`,
 			hasVal(g_keyObj[`transKey${keyCtrlPtn}`]) ? g_lblNameObj.transKeyDesc : ``,
-			{
-				x: 0, y: g_sHeight - 25, w: g_sWidth, h: 20, siz: C_SIZ_MAIN,
-			}, g_cssObj.keyconfig_warning
+			g_lblPosObj.kcMsg, g_cssObj.keyconfig_warning
 		),
 
 		// キーコンフィグタイプ切替ボタン
@@ -5886,11 +5878,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) {
@@ -5899,6 +5906,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) => {
@@ -5911,6 +5927,50 @@ 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;
+	}
+	multiAppend(colorPickSprite,
+		createDivCss2Label(`lblPickArrow`, g_lblNameObj.s_arrow, Object.assign({ y: 0 }, g_lblPosObj.pickPos)),
+		createDivCss2Label(`lblPickFrz`, g_lblNameObj.s_frz, Object.assign({ y: 140 }, g_lblPosObj.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]);
+				}
+			}
+		}, g_lblPosObj.lnkColorCopy, 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 } = {}) =>
+		createColorPicker(colorPickSprite, `pick${_type}${_j}`, _func, { x, y: y + 25 * _j });
+
+	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);
@@ -5943,21 +6003,15 @@ const keyConfigInit = (_kcType = g_kcType) => {
 			g_currentj = 0;
 			g_currentk = 0;
 			g_prevKey = 0;
-		}, {
-			x: g_sWidth / 3, y: g_sHeight - 75,
-			w: g_sWidth / 3, h: C_BTN_HEIGHT / 2, siz: C_LBL_BTNSIZE * 2 / 3,
+		}, Object.assign(g_lblPosObj.btnKcBack, {
 			resetFunc: _ => (g_baseDisp === `Settings` ? optionInit() : settingsDisplayInit()),
-		}, g_cssObj.button_Back),
+		}), g_cssObj.button_Back),
 
-		createDivCss2Label(`lblPattern`, `${g_lblNameObj.KeyPattern}: ${g_keyObj.currentPtn === -1 ? 'Self' : g_keyObj.currentPtn + 1}${lblTransKey}`, {
-			x: g_sWidth / 6, y: g_sHeight - 100,
-			w: g_sWidth / 3, h: C_BTN_HEIGHT / 2,
-		}),
+		createDivCss2Label(`lblPattern`, `${g_lblNameObj.KeyPattern}: ${g_keyObj.currentPtn === -1 ?
+			'Self' : g_keyObj.currentPtn + 1}${lblTransKey}`, g_lblPosObj.lblPattern),
 
 		// パターン変更ボタン描画(右回り)
-		createCss2Button(`btnPtnChangeR`, `>>`, _ => true, {
-			x: g_sWidth / 2, y: g_sHeight - 100,
-			w: g_sWidth / 6, h: C_BTN_HEIGHT / 2, siz: C_LBL_BTNSIZE * 2 / 3,
+		createCss2Button(`btnPtnChangeR`, `>>`, _ => true, Object.assign(g_lblPosObj.btnPtnChangeR, {
 			resetFunc: _ => {
 				const tempPtn = searchPattern(g_keyObj.currentPtn + 1, 1, g_headerObj.transKeyUse, `transKey`);
 				g_keyObj.currentPtn = (g_keyObj[`keyCtrl${g_keyObj.currentKey}_${tempPtn}`] !== undefined ?
@@ -5965,12 +6019,10 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 				keyConfigInit();
 			},
-		}, g_cssObj.button_Setting),
+		}), g_cssObj.button_Setting),
 
 		// パターン変更ボタン描画(左回り)
-		createCss2Button(`btnPtnChangeL`, `<<`, _ => true, {
-			x: 0, y: g_sHeight - 100,
-			w: g_sWidth / 6, h: C_BTN_HEIGHT / 2, siz: C_LBL_BTNSIZE * 2 / 3,
+		createCss2Button(`btnPtnChangeL`, `<<`, _ => true, Object.assign(g_lblPosObj.btnPtnChangeL, {
 			resetFunc: _ => {
 				const tempPtn = searchPattern(g_keyObj.currentPtn - 1, -1, g_headerObj.transKeyUse, `transKey`);
 				g_keyObj.currentPtn = (g_keyObj[`keyCtrl${g_keyObj.currentKey}_${tempPtn}`] !== undefined ?
@@ -5978,7 +6030,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 
 				keyConfigInit();
 			},
-		}, g_cssObj.button_Setting),
+		}), g_cssObj.button_Setting),
 
 		// キーコンフィグリセットボタン描画
 		createCss2Button(`btnReset`, g_lblNameObj.b_reset, _ => {
@@ -5993,10 +6045,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 				resetCursor(Number(g_kcType === `Replaced`));
 				keyconSprite.scrollLeft = - maxLeftX;
 			}
-		}, {
-			x: 0, y: g_sHeight - 75,
-			w: g_sWidth / 3, h: C_BTN_HEIGHT / 2, siz: C_LBL_BTNSIZE * 2 / 3,
-		}, g_cssObj.button_Reset),
+		}, g_lblPosObj.btnKcReset, g_cssObj.button_Reset),
 
 		// プレイ開始
 		makePlayButton(_ => loadMusic())
@@ -6737,7 +6786,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]);
 			});
@@ -7896,10 +7945,9 @@ const MainInit = _ => {
 			}, g_cssObj.main_stepKeyDown),
 
 			// ヒット時モーション
-			createColorObject2(`stepHit${j}`, {
-				x: -15, y: -15, w: C_ARW_WIDTH + 30, h: C_ARW_WIDTH + 30,
+			createColorObject2(`stepHit${j}`, Object.assign(g_lblPosObj.stepHit, {
 				rotate: g_workObj.stepHitRtn[j], styleName: `StepHit`, opacity: 0,
-			}, g_cssObj.main_stepDefault),
+			}), g_cssObj.main_stepDefault),
 
 		);
 	}
@@ -7920,23 +7968,13 @@ const MainInit = _ => {
 
 	// Hidden+, Sudden+用のライン、パーセント表示
 	const filterCss = g_stateObj.filterLock === C_FLG_OFF ? g_cssObj.life_Failed : g_cssObj.life_Cleared;
-	[`filterBar0`, `filterBar1`, `borderBar0`, `borderBar1`].forEach(obj => {
-		mainSprite.appendChild(
-			createColorObject2(`${obj}`, {
-				w: g_headerObj.playingWidth - 50, h: 1, styleName: `lifeBar`,
-				opacity: 0.0625,
-			}, filterCss)
-		);
-	});
+	[`filterBar0`, `filterBar1`, `borderBar0`, `borderBar1`].forEach(obj =>
+		mainSprite.appendChild(createColorObject2(obj, g_lblPosObj.filterBar, filterCss)));
 	borderBar0.style.top = `${g_posObj.stepDiffY}px`;
 	borderBar1.style.top = `${g_posObj.stepDiffY + g_posObj.arrowHeight}px`;
 
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
-		mainSprite.appendChild(
-			createDivCss2Label(`filterView`, ``, {
-				x: g_headerObj.playingWidth - 70, y: 0, w: 10, h: 10, siz: 10, align: C_ALIGN_RIGHT,
-			})
-		);
+		mainSprite.appendChild(createDivCss2Label(`filterView`, ``, g_lblPosObj.filterView));
 		if (g_stateObj.d_filterline === C_FLG_ON) {
 			[`filterBar0`, `filterBar1`, `filterView`].forEach(obj => {
 				$id(obj).opacity = g_stateObj.opacity / 100;
@@ -7964,7 +8002,7 @@ const MainInit = _ => {
 		if (isNaN(parseFloat(g_workObj.arrowRtn[j]))) {
 			multiAppend(frzHit,
 				createColorObject2(`frzHitShadow${j}`, {
-					rotate: g_workObj.arrowRtn[j], styleName: `Shadow`
+					rotate: g_workObj.arrowRtn[j], styleName: `Shadow`,
 				}, g_cssObj.main_objShadow),
 				createColorObject2(`frzHitTop${j}`, {
 					background: g_workObj.frzHitColors[j], rotate: g_workObj.arrowRtn[j],
@@ -7972,10 +8010,9 @@ const MainInit = _ => {
 			);
 		} else {
 			frzHit.appendChild(
-				createColorObject2(`frzHitTop${j}`, {
-					x: -8, y: -8, w: C_ARW_WIDTH + 16, h: C_ARW_WIDTH + 16,
+				createColorObject2(`frzHitTop${j}`, Object.assign(g_lblPosObj.frzHitTop, {
 					rotate: g_workObj.arrowRtn[j], styleName: `Shadow`,
-				}, g_cssObj.main_frzHitTop)
+				}), g_cssObj.main_frzHitTop)
 			);
 		}
 	}
@@ -8102,24 +8139,16 @@ const MainInit = _ => {
 		}, g_cssObj.life_Border, g_cssObj.life_BorderColor),
 
 		// 曲名・アーティスト名表示
-		createDivCss2Label(`lblCredit`, creditName, {
-			x: 125, y: g_sHeight - 30, w: g_headerObj.playingWidth - 125, h: 20, siz: checkMusicSiz(creditName, C_SIZ_MUSIC_TITLE), align: C_ALIGN_LEFT,
-		}),
+		createDivCss2Label(`lblCredit`, creditName, Object.assign(g_lblPosObj.lblCredit, { siz: checkMusicSiz(creditName, C_SIZ_MUSIC_TITLE) })),
 
 		// 譜面名表示
-		createDivCss2Label(`lblDifName`, difName, {
-			x: 125, y: g_sHeight - 16, w: g_headerObj.playingWidth, h: 20, siz: checkMusicSiz(difName, 12), align: C_ALIGN_LEFT,
-		}),
+		createDivCss2Label(`lblDifName`, difName, Object.assign(g_lblPosObj.lblDifName, { siz: checkMusicSiz(difName, 12) })),
 
 		// 曲時間表示：現在時間
-		createDivCss2Label(`lblTime1`, `-:--`, {
-			x: 18, y: g_sHeight - 30, w: 40, h: 20, siz: C_SIZ_MAIN, align: C_ALIGN_RIGHT, display: g_workObj.musicinfoDisp,
-		}),
+		createDivCss2Label(`lblTime1`, `-:--`, Object.assign(g_lblPosObj.lblTime1, { display: g_workObj.musicinfoDisp })),
 
 		// 曲時間表示：総時間
-		createDivCss2Label(`lblTime2`, `/ ${fullTime}`, {
-			x: 60, y: g_sHeight - 30, w: 60, h: 20, siz: C_SIZ_MAIN, display: g_workObj.musicinfoDisp,
-		}),
+		createDivCss2Label(`lblTime2`, `/ ${fullTime}`, Object.assign(g_lblPosObj.lblTime2, { display: g_workObj.musicinfoDisp })),
 	);
 
 	// ボーダーライン表示
@@ -8132,11 +8161,7 @@ const MainInit = _ => {
 	const wordSprite = createEmptySprite(judgeSprite, `wordSprite`, { w: g_headerObj.playingWidth });
 	for (let j = 0; j <= g_scoreObj.wordMaxDepth; j++) {
 		const wordY = (j % 2 === 0 ? 10 : (g_headerObj.bottomWordSetFlg ? g_posObj.distY + 10 : g_sHeight - 60));
-		wordSprite.appendChild(createDivCss2Label(`lblword${j}`, ``, {
-			x: 100, y: wordY, w: g_headerObj.playingWidth - 200, h: 50,
-			siz: C_SIZ_MAIN, align: C_ALIGN_LEFT, fontFamily: getBasicFont(),
-			display: `block`, margin: `auto`,
-		}));
+		wordSprite.appendChild(createDivCss2Label(`lblword${j}`, ``, Object.assign(g_lblPosObj.lblWord, { y: wordY, fontFamily: getBasicFont() })));
 	}
 
 	const jdgGroups = [`J`, `FJ`];
@@ -8191,17 +8216,11 @@ const MainInit = _ => {
 	});
 
 	// パーフェクト演出
-	judgeSprite.appendChild(
-		createDivCss2Label(`finishView`, ``, {
-			x: g_headerObj.playingWidth / 2 - 150, y: g_sHeight / 2 - 50, w: 300, h: 20, siz: 50,
-		}, g_cssObj.common_kita)
-	);
+	judgeSprite.appendChild(createDivCss2Label(`finishView`, ``, g_lblPosObj.finishView, g_cssObj.common_kita));
 
 	// 曲情報OFF
 	if (g_stateObj.d_musicinfo === C_FLG_OFF) {
-		[`lblCredit`, `lblDifName`].forEach(labelName => {
-			changeStyle(labelName, { x: 20, animationDuration: `4.0s`, animationName: `leftToRightFade`, animationFillMode: `both` });
-		});
+		[`lblCredit`, `lblDifName`].forEach(labelName => changeStyle(labelName, g_lblPosObj.musicInfoOFF));
 	}
 
 	// ローカル時のみフレーム数を残す
@@ -9572,10 +9591,9 @@ const resultInit = _ => {
 			const scoreIdHeader = setScoreIdHeader(g_stateObj.scoreId, g_stateObj.scoreLockFlg);
 
 			g_animationData.forEach(sprite => {
-				if (g_rootObj[`${sprite}failedS${scoreIdHeader}_data`] !== undefined) {
-					[g_headerObj[`${sprite}ResultData`], g_headerObj[`${sprite}ResultMaxDepth`]] = makeSpriteData(g_rootObj[`${sprite}failedS${scoreIdHeader}_data`]);
-				} else if (g_rootObj[`${sprite}failedS_data`] !== undefined) {
-					[g_headerObj[`${sprite}ResultData`], g_headerObj[`${sprite}ResultMaxDepth`]] = makeSpriteData(g_rootObj[`${sprite}failedS_data`]);
+				const failedData = g_rootObj[`${sprite}failedS${scoreIdHeader}_data`] ?? g_rootObj[`${sprite}failedS_data`];
+				if (failedData !== undefined) {
+					[g_headerObj[`${sprite}ResultData`], g_headerObj[`${sprite}ResultMaxDepth`]] = makeSpriteData(failedData);
 				}
 			});
 		} else if (g_gameOverFlg) {
@@ -9615,8 +9633,7 @@ const resultInit = _ => {
 
 	// スコア計算(一括)
 	const scoreTmp = Object.keys(g_pointAllocation).reduce(
-		(score, name) => score + g_resultObj[name] * g_pointAllocation[name]
-		, 0)
+		(score, name) => score + g_resultObj[name] * g_pointAllocation[name], 0);
 
 	const allScore = g_fullArrows * 10;
 	const resultScore = Math.round(scoreTmp / allScore * g_maxScore) || 0;
@@ -9759,35 +9776,25 @@ const resultInit = _ => {
 
 	// ランク描画
 	resultWindow.appendChild(
-		createDivCss2Label(`lblRank`, rankMark, {
-			x: 340, y: 160, w: 70, h: 20, siz: 50, align: C_ALIGN_CENTER,
+		createDivCss2Label(`lblRank`, rankMark, Object.assign(g_lblPosObj.lblRank, {
 			color: rankColor, fontFamily: getBasicFont(`"Bookman Old Style"`),
-		})
+		}))
 	);
 
 	// Cleared & Failed表示
 	const lblResultPre = createDivCss2Label(
 		`lblResultPre`,
 		resultViewText(g_gameOverFlg ? `failed` : `cleared`),
-		{
-			x: g_sWidth / 2 - 150, y: g_sHeight / 2 - 160,
-			w: 200, h: 50, siz: 60,
-			opacity: 0, animationDuration: (g_gameOverFlg ? `3s` : `2.5s`),
+		Object.assign(g_lblPosObj.lblResultPre, {
+			animationDuration: (g_gameOverFlg ? `3s` : `2.5s`),
 			animationName: (g_gameOverFlg ? `upToDownFade` : `leftToRightFade`)
-		}, g_cssObj.result_Cleared, g_cssObj.result_Window
+		}), g_cssObj.result_Cleared, g_cssObj.result_Window
 	);
 	divRoot.appendChild(lblResultPre);
 
-	divRoot.appendChild(
-		createDivCss2Label(
-			`lblResultPre2`,
-			resultViewText(g_gameOverFlg ? `failed` :
-				(playingArrows === g_fullArrows ? g_resultObj.spState : ``)),
-			{
-				x: g_sWidth / 2 + 50, y: 40, w: 200, h: 30, siz: 20,
-			}, g_cssObj.result_Cleared
-		)
-	);
+	divRoot.appendChild(createDivCss2Label(`lblResultPre2`,
+		resultViewText(g_gameOverFlg ? `failed` : (playingArrows === g_fullArrows ? g_resultObj.spState : ``)),
+		g_lblPosObj.lblResultPre2, g_cssObj.result_Cleared));
 
 	// プレイデータは Cleared & Failed に合わせて表示
 	playDataWindow.style.animationDuration = `3s`;
@@ -9883,7 +9890,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()}`;
@@ -9919,57 +9926,39 @@ const resultInit = _ => {
 	const resultText = `${unEscapeHtml(tweetResultTmp)}`;
 	const tweetResult = `https://twitter.com/intent/tweet?text=${encodeURIComponent(resultText)}`;
 
-	// ボタン描画
-	multiAppend(divRoot,
-
-		// タイトル画面へ戻る
-		createCss2Button(`btnBack`, g_lblNameObj.b_back, _ => {
+	/** 音源、ループ処理の停止 */
+	const resetCommonBtn = (_id, _name, _posObj, _func, _cssClass) =>
+		createCss2Button(_id, _name, _ => {
 			if (g_finishFlg) {
 				g_audio.pause();
 			}
 			clearTimeout(g_timeoutEvtId);
 			clearTimeout(g_timeoutEvtResultId);
-		}, {
-			w: g_sWidth / 4, h: C_BTN_HEIGHT * 5 / 4,
-			animationName: `smallToNormalY`, resetFunc: _ => titleInit(),
-		}, g_cssObj.button_Back),
+		}, Object.assign(_posObj, { resetFunc: _func }), _cssClass);
+
+	// ボタン描画
+	multiAppend(divRoot,
+
+		// タイトル画面へ戻る
+		resetCommonBtn(`btnBack`, g_lblNameObj.b_back, g_lblPosObj.btnRsBack, titleInit, g_cssObj.button_Back),
 
 		// リザルトデータをクリップボードへコピー
 		createCss2Button(`btnCopy`, g_lblNameObj.b_copy, _ => {
 			copyTextToClipboard(resultText, g_msgInfoObj.I_0001);
-		}, {
-			x: g_sWidth / 4,
-			w: g_sWidth / 2,
-			h: C_BTN_HEIGHT * 5 / 8, siz: 24,
-			animationName: `smallToNormalY`,
-		}, g_cssObj.button_Setting),
+		}, g_lblPosObj.btnRsCopy, g_cssObj.button_Setting),
 
 		// リザルトデータをTwitterへ転送
-		createCss2Button(`btnTweet`, g_lblNameObj.b_tweet, _ => true, {
-			x: g_sWidth / 4, y: g_sHeight - 100 + C_BTN_HEIGHT * 5 / 8,
-			w: g_sWidth / 4, h: C_BTN_HEIGHT * 5 / 8, siz: 24,
-			animationName: `smallToNormalY`, resetFunc: _ => openLink(tweetResult),
-		}, g_cssObj.button_Tweet),
+		createCss2Button(`btnTweet`, g_lblNameObj.b_tweet, _ => true, Object.assign(g_lblPosObj.btnRsTweet, {
+			resetFunc: _ => openLink(tweetResult),
+		}), g_cssObj.button_Tweet),
 
 		// Gitterへのリンク
-		createCss2Button(`btnGitter`, g_lblNameObj.b_gitter, _ => true, {
-			x: g_sWidth / 2, y: g_sHeight - 100 + C_BTN_HEIGHT * 5 / 8,
-			w: g_sWidth / 4, h: C_BTN_HEIGHT * 5 / 8, siz: 24,
-			animationName: `smallToNormalY`, resetFunc: _ => openLink(`https://gitter.im/danonicw/freeboard`),
-		}, g_cssObj.button_Default),
+		createCss2Button(`btnGitter`, g_lblNameObj.b_gitter, _ => true, Object.assign(g_lblPosObj.btnRsGitter, {
+			resetFunc: _ => openLink(`https://gitter.im/danonicw/freeboard`),
+		}), g_cssObj.button_Default),
 
 		// リトライ
-		createCss2Button(`btnRetry`, g_lblNameObj.b_retry, _ => {
-			if (g_finishFlg) {
-				g_audio.pause();
-			}
-			clearTimeout(g_timeoutEvtId);
-			clearTimeout(g_timeoutEvtResultId);
-		}, {
-			x: g_sWidth / 4 * 3,
-			w: g_sWidth / 4, h: C_BTN_HEIGHT * 5 / 4,
-			animationName: `smallToNormalY`, resetFunc: _ => loadMusic(),
-		}, g_cssObj.button_Reset),
+		resetCommonBtn(`btnRetry`, g_lblNameObj.b_retry, g_lblPosObj.btnRsRetry, loadMusic, g_cssObj.button_Reset),
 	);
 
 	// マスクスプライトを作成