danoniplus 35.4.5 → 35.5.0

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2024/03/28
+ * Revised : 2024/04/03
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 35.4.5`;
-const g_revisedDate = `2024/03/28`;
+const g_version = `Ver 35.5.0`;
+const g_revisedDate = `2024/04/03`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -1262,7 +1262,8 @@ const deleteDiv = (_parentId, _idName) => {
  * @param {object} _obj (x, y, w, h, siz, align, title, groupName, initDisabledFlg, ...rest)
  * @param {...any} _classes 
  */
-const createCss2Button = (_id, _text, _func = _ => true, { x = 0, y = g_sHeight - 100, w = g_sWidth / 3, h = g_limitObj.btnHeight,
+const createCss2Button = (_id, _text, _func = _ => true, {
+	x = 0, y = g_sHeight - 100, w = g_btnWidth() / 3, h = g_limitObj.btnHeight,
 	siz = g_limitObj.btnSiz, align = C_ALIGN_CENTER, title = ``, groupName = g_currentPage, initDisabledFlg = true,
 	resetFunc = _ => true, cxtFunc = _ => true, ...rest } = {}, ..._classes) => {
 
@@ -4237,7 +4238,7 @@ const titleInit = _ => {
 
 		// Click Here
 		createCss2Button(`btnStart`, g_lblNameObj.clickHere, _ => clearTimeout(g_timeoutEvtTitleId), {
-			w: g_sWidth, siz: g_limitObj.titleSiz, resetFunc: _ => optionInit(),
+			x: g_btnX(), w: g_btnWidth(), siz: g_limitObj.titleSiz, resetFunc: _ => optionInit(),
 		}, g_cssObj.button_Start),
 
 		// Reset
@@ -4384,8 +4385,8 @@ const makeWarningWindow = (_text = ``, { resetFlg = false, backBtnUse = false }
  * お知らせウィンドウ（汎用）を表示
  * @param {string} _text 
  */
-const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff`, _x = 0, _y = 0 } = {}) => {
-	const lblWarning = setWindowStyle(`<p>${_text}</p>`, _backColor, `#000066`, C_ALIGN_CENTER, { _x, _y });
+const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff` } = {}) => {
+	const lblWarning = setWindowStyle(`<p>${_text}</p>`, _backColor, `#000066`, C_ALIGN_CENTER);
 	lblWarning.style.pointerEvents = C_DIS_NONE;
 
 	if (_animationName !== ``) {
@@ -4404,13 +4405,13 @@ const makeInfoWindow = (_text, _animationName = ``, { _backColor = `#ccccff`, _x
  * @param {string} _textColor 
  * @param {string} _align
  */
-const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x = 0, _y = 0 } = {}) => {
+const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x = g_btnX(), _y = 0, _w = g_btnWidth() } = {}) => {
 
 	deleteDiv(divRoot, `lblWarning`);
 
 	// ウィンドウ枠の行を取得するために一時的な枠を作成
 	const tmplbl = createDivCss2Label(`lblTmpWarning`, _text, {
-		x: 0, y: 70, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz, lineHeight: wUnit(15), fontFamily: getBasicFont(),
+		x: _x, y: 70, w: _w, h: 20, siz: g_limitObj.mainSiz, lineHeight: wUnit(15), fontFamily: getBasicFont(),
 		whiteSpace: `normal`,
 	});
 	divRoot.appendChild(tmplbl);
@@ -4421,7 +4422,7 @@ const setWindowStyle = (_text, _bkColor, _textColor, _align = C_ALIGN_LEFT, { _x
 	const warnHeight = Math.min(150, Math.max(range.getClientRects().length,
 		_text.split(`<br>`).length + _text.split(`<p>`).length - 1) * 21);
 	const lbl = createDivCss2Label(`lblWarning`, _text, {
-		x: _x, y: 70 + _y, w: g_sWidth, h: warnHeight, siz: g_limitObj.mainSiz, backgroundColor: _bkColor,
+		x: _x, y: 70 + _y, w: _w, h: warnHeight, siz: g_limitObj.mainSiz, backgroundColor: _bkColor,
 		opacity: 0.9, lineHeight: wUnit(15), color: _textColor, align: _align, fontFamily: getBasicFont(),
 		whiteSpace: `normal`,
 	});
@@ -6320,12 +6321,13 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		adjustScrollPoint(parseFloat($id(`arrow${_j}`).left));
 	};
 
+	const addLeft = (maxLeftX === 0 ? 0 : - maxLeftX + g_limitObj.kcColorPickerX);
 	for (let j = 0; j < keyNum; j++) {
 
 		const posj = g_keyObj[`pos${keyCtrlPtn}`][j];
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
 
-		const keyconX = g_keyObj.blank * stdPos + (kWidth - C_ARW_WIDTH) / 2 - maxLeftX;
+		const keyconX = g_keyObj.blank * stdPos + (kWidth - C_ARW_WIDTH) / 2 + addLeft;
 		const keyconY = C_KYC_HEIGHT * (Number(posj > divideCnt)) + 12;
 		const colorPos = g_keyObj[`color${keyCtrlPtn}`][j];
 		const arrowColor = getKeyConfigColor(j, colorPos);
@@ -6450,7 +6452,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @returns ラベル
 	 */
 	const makeKCButtonHeader = (_id, _name, {
-		x = g_sWidth * 5 / 6 - 30, y = 0, w = g_sWidth / 6, h = 20, siz = 12, align = C_ALIGN_LEFT, ...rest
+		x = g_btnX(5 / 6) - 30, y = 0, w = g_btnWidth(1 / 6), h = 20, siz = 12, align = C_ALIGN_LEFT, ...rest
 	} = {}, ..._classes) => createDivCss2Label(_id, g_lblNameObj[_name], { x, y, w, h, siz, align, ...rest }, ..._classes);
 
 	/**
@@ -6463,7 +6465,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param  {...any} _classes 
 	 * @returns ボタン
 	 */
-	const makeKCButton = (_id, _text, _func, { x = g_sWidth * 5 / 6 - 20, y = 15, w = g_sWidth / 6, h = 18,
+	const makeKCButton = (_id, _text, _func, { x = g_btnX(5 / 6) - 20, y = 15, w = g_btnWidth(1 / 6), h = 18,
 		siz = g_limitObj.jdgCntsSiz, borderStyle = `solid`, cxtFunc, ...rest } = {}, _mainClass = g_cssObj.button_RevOFF, ..._classes) =>
 		makeSettingLblCssButton(_id, getStgDetailName(_text), 0, _func, { x, y, w, h, siz, cxtFunc, borderStyle, ...rest }, _mainClass, ..._classes);
 
@@ -6474,7 +6476,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {function} _func 
 	 * @param {*} object (x, y, w, h, siz) 
 	 */
-	const makeMiniKCButton = (_id, _directionFlg, _func, { x = g_sWidth * 5 / 6 - 30, y = 15, w = 15, h = 20, siz = g_limitObj.mainSiz } = {}) =>
+	const makeMiniKCButton = (_id, _directionFlg, _func, { x = g_btnX(5 / 6) - 30, y = 15, w = 15, h = 20, siz = g_limitObj.mainSiz } = {}) =>
 		createCss2Button(`${_id}${_directionFlg}`, g_settingBtnObj.chara[_directionFlg], _func, { x, y, w, h, siz }, g_cssObj.button_Mini);
 
 	/**
@@ -6482,16 +6484,16 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	 * @param {string} _type 
 	 * @param {object} obj (baseX) 
 	 */
-	const makeGroupButton = (_type, { baseX = g_sWidth * 5 / 6 - 20, baseY = 0, cssName } = {}) => {
+	const makeGroupButton = (_type, { baseX = g_btnX(5 / 6) - 20, baseY = 0, cssName } = {}) => {
 		if (g_headerObj[`${_type}Use`] && g_keycons[`${_type}Groups`].length > 1) {
 			const typeName = toCapitalize(_type);
 			multiAppend(divRoot,
 				makeKCButtonHeader(`lbl${_type}Group`, `${typeName}Group`, { x: baseX - 10, y: baseY }, cssName),
 				makeKCButton(`lnk${typeName}Group`, ``, _ => setGroup(_type), {
-					x: baseX, y: baseY + 13, w: g_sWidth / 18, title: g_msgObj[`${_type}Group`], cxtFunc: _ => setGroup(_type, -1),
+					x: baseX, y: baseY + 13, w: g_btnWidth(1 / 18), title: g_msgObj[`${_type}Group`], cxtFunc: _ => setGroup(_type, -1),
 				}),
 				makeMiniKCButton(`lnk${typeName}Group`, `L`, _ => setGroup(_type, -1), { x: baseX - 10, y: baseY + 13 }),
-				makeMiniKCButton(`lnk${typeName}Group`, `R`, _ => setGroup(_type), { x: baseX + g_sWidth / 18, y: baseY + 13 }),
+				makeMiniKCButton(`lnk${typeName}Group`, `R`, _ => setGroup(_type), { x: baseX + g_btnWidth(1 / 18), y: baseY + 13 }),
 			);
 		} else {
 			g_keycons[`${_type}GroupNum`] = 0;
@@ -6514,30 +6516,30 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		),
 
 		// キーカラータイプ切替ボタン
-		makeKCButtonHeader(`lblcolorType`, `ColorType`, { x: 10 }, g_cssObj.keyconfig_ColorType),
+		makeKCButtonHeader(`lblcolorType`, `ColorType`, { x: 10 + g_btnX() }, g_cssObj.keyconfig_ColorType),
 		makeKCButton(`lnkColorType`, g_colorType, _ => setColorType(), {
-			x: 20, title: g_msgObj.colorType, cxtFunc: _ => setColorType(-1),
+			x: 20 + g_btnX(), title: g_msgObj.colorType, cxtFunc: _ => setColorType(-1),
 		}),
-		makeMiniKCButton(`lnkColorType`, `L`, _ => setColorType(-1), { x: 10 }),
-		makeMiniKCButton(`lnkColorType`, `R`, _ => setColorType(), { x: 20 + g_sWidth / 6 }),
+		makeMiniKCButton(`lnkColorType`, `L`, _ => setColorType(-1), { x: 10 + g_btnX() }),
+		makeMiniKCButton(`lnkColorType`, `R`, _ => setColorType(), { x: 20 + g_btnX(1 / 6) }),
 	);
 
 	if (g_headerObj.imgType.length > 1) {
-		const [imgBaseX, imgBaseY] = [20, 50];
+		const [imgBaseX, imgBaseY] = [20 + g_btnX(), 50];
 		multiAppend(divRoot,
 			// オブジェクトタイプの切り替え（リロードあり）
-			makeKCButtonHeader(`lblImgType`, `ImgType`, { x: 10, y: 37 }, g_cssObj.keyconfig_ConfigType),
+			makeKCButtonHeader(`lblImgType`, `ImgType`, { x: imgBaseX - 10, y: 37 }, g_cssObj.keyconfig_ConfigType),
 			makeKCButton(`lnkImgType`, g_imgType, _ => setImgType(), {
 				x: imgBaseX, y: imgBaseY, title: g_msgObj.imgType, cxtFunc: _ => setImgType(-1),
 			}),
 			makeMiniKCButton(`lnkImgType`, `L`, _ => setImgType(-1), { x: imgBaseX - 10, y: imgBaseY }),
-			makeMiniKCButton(`lnkImgType`, `R`, _ => setImgType(), { x: imgBaseX + g_sWidth / 6, y: imgBaseY }),
+			makeMiniKCButton(`lnkImgType`, `R`, _ => setImgType(), { x: imgBaseX + g_btnWidth(1 / 6), y: imgBaseY }),
 		);
 	}
 
 	// カラー/シャッフルグループ切替ボタン（カラー/シャッフルパターンが複数ある場合のみ）
 	makeGroupButton(`color`, { cssName: g_cssObj.keyconfig_ColorType });
-	makeGroupButton(`shuffle`, { baseX: g_sWidth * 11 / 12 - 10, cssName: g_cssObj.settings_Shuffle });
+	makeGroupButton(`shuffle`, { baseX: g_btnX(11 / 12) - 10, cssName: g_cssObj.settings_Shuffle });
 	makeGroupButton(`stepRtn`, { baseY: 37, cssName: g_cssObj.settings_Adjustment });
 
 	/**
@@ -6547,7 +6549,7 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		const posj = g_keyObj[`pos${keyCtrlPtn}`][g_currentj];
 		const stdPos = posj - ((posj > divideCnt ? posMax : 0) + divideCnt) / 2;
 
-		const nextLeft = (kWidth - C_ARW_WIDTH) / 2 + g_keyObj.blank * stdPos - maxLeftX - 10;
+		const nextLeft = (kWidth - C_ARW_WIDTH) / 2 + g_keyObj.blank * stdPos + addLeft - 10;
 		cursor.style.left = wUnit(nextLeft);
 		cursor.style.top = wUnit(C_KYC_HEIGHT * Number(posj > divideCnt) + 57 + C_KYC_REPHEIGHT * g_currentk);
 		g_kcType = (g_currentk === 0 ? `Main` : `Replaced`);
@@ -6583,7 +6585,6 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		}
 
 		setKeyConfigCursor();
-		keyconSprite.scrollLeft = - maxLeftX;
 	};
 
 	const getNextNum = (_scrollNum, _groupName, _target) =>
@@ -6876,7 +6877,6 @@ const keyConfigInit = (_kcType = g_kcType) => {
 					}
 				}
 				changeConfigCursor(0);
-				keyconSprite.scrollLeft = - maxLeftX;
 			}
 		}, g_lblPosObj.btnKcReset, g_cssObj.button_Reset),
 

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2024/03/28 (v35.4.5)
+ * Revised : 2024/04/03 (v35.5.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -113,6 +113,12 @@ const g_limitObj = {
     mainSiz: 14,
     musicTitleSiz: 13,
     keySetSiz: 15,
+
+    // ボタン基準横幅（最大）
+    btnBaseWidth: 900,
+
+    // キーコンフィグのカラーピッカー幅
+    kcColorPickerX: 60,
 };
 
 /** 設定項目の位置 */
@@ -171,6 +177,9 @@ $id(`canvas-frame`).width = `${Math.max(g_sWidth, 500)}px`;
 $id(`canvas-frame`).height = `${Math.max(g_sHeight, 500)}px`;
 $id(`canvas-frame`).margin = `auto`;
 
+const g_btnWidth = (_multi = 1) => Math.min(g_sWidth, g_limitObj.btnBaseWidth) * _multi;
+const g_btnX = (_multi = 0) => g_btnWidth(_multi) + Math.max((g_sWidth - g_limitObj.btnBaseWidth) / 2, 0);
+
 // 固定ウィンドウサイズ
 const g_windowObj = {
     divRoot: { margin: `auto`, letterSpacing: `normal` },
@@ -191,7 +200,7 @@ const updateWindowSiz = _ => {
         displaySprite: { x: 25, y: 30, w: (g_sWidth - 450) / 2, h: g_limitObj.setLblHeight * 5 },
         scoreDetail: { x: 20, y: 85, w: (g_sWidth - 500) / 2 + 420, h: 236, visibility: `hidden` },
         detailObj: { w: (g_sWidth - 500) / 2 + 420, h: 230, visibility: `hidden` },
-        keyconSprite: { y: 88, h: g_sHeight, overflow: `auto` },
+        keyconSprite: { y: 88, h: g_sHeight - 85, overflow: `auto` },
         loader: { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` },
         playDataWindow: { x: g_sWidth / 2 - 225, y: 70, w: 450, h: 110 },
         resultWindow: { x: g_sWidth / 2 - 200, y: 185, w: 400, h: 210 },
@@ -201,51 +210,53 @@ const updateWindowSiz = _ => {
 
         /** タイトル画面 */
         btnReset: {
-            x: 0, y: g_sHeight - 20, w: g_sWidth / 4, h: 16, siz: 12, title: g_msgObj.dataReset,
+            x: g_btnX(), y: g_sHeight - 20, w: g_btnWidth(1 / 4), h: 16, siz: 12, title: g_msgObj.dataReset,
         },
         btnReload: {
-            x: 10, y: 10, w: 30, h: 30, siz: 20, title: g_msgObj.reload,
+            x: 10 + g_btnX(), y: 10, w: 30, h: 30, siz: 20, title: g_msgObj.reload,
         },
         btnHelp: {
-            x: 0, y: g_sHeight - 150, w: 40, h: 40, siz: 30, title: g_msgObj.howto,
+            x: g_btnX(), y: g_sHeight - 150, w: 40, h: 40, siz: 30, title: g_msgObj.howto,
         },
         lnkMaker: {
-            x: 0, y: g_sHeight - 50, w: g_sWidth / 2, h: g_limitObj.lnkHeight,
+            x: g_btnX(), y: g_sHeight - 50, w: g_btnWidth(1 / 2), h: g_limitObj.lnkHeight,
             align: C_ALIGN_LEFT, title: g_headerObj.creatorUrl,
         },
         lnkArtist: {
-            x: g_sWidth / 2, y: g_sHeight - 50, w: g_sWidth / 2, h: g_limitObj.lnkHeight,
+            x: g_btnX(1 / 2), y: g_sHeight - 50, w: g_btnWidth(1 / 2), h: g_limitObj.lnkHeight,
             align: C_ALIGN_LEFT, title: g_headerObj.artistUrl,
         },
         lnkVersion: {
-            x: g_sWidth / 4, y: g_sHeight - 20, w: g_sWidth * 3 / 4 - 20, h: 16,
+            x: g_btnX(1 / 4), y: g_sHeight - 20, w: g_btnWidth(3 / 4) - 20, h: 16,
             align: C_ALIGN_RIGHT, title: g_msgObj.github,
         },
         lnkComparison: {
-            x: g_sWidth - 20, y: g_sHeight - 20, w: 20, h: 16, siz: 12, title: g_msgObj.security,
+            x: g_btnX(1) - 20, y: g_sHeight - 20, w: 20, h: 16, siz: 12, title: g_msgObj.security,
         },
         lblComment: {
-            x: 0, y: 70, w: g_sWidth, h: g_sHeight - 180, siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
+            x: g_btnX(), y: 70, w: g_btnWidth(), h: g_sHeight - 180, siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
             overflow: `auto`, background: `#222222`, color: `#cccccc`, display: C_DIS_NONE,
             whiteSpace: `normal`,
         },
         btnComment: {
-            x: g_sWidth - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
+            x: g_btnX(1) - 160, y: (g_sHeight / 2) + 150, w: 140, h: 50, siz: 20, border: `solid 1px #999999`,
         },
 
         /** 設定画面 */
-        btnBack: {},
+        btnBack: {
+            x: g_btnX(),
+        },
         btnKeyConfig: {
-            x: g_sWidth / 3,
+            x: g_btnX(1 / 3),
         },
         btnPlay: {
-            x: g_sWidth * 2 / 3,
+            x: g_btnX(2 / 3),
         },
         btnSwitchSetting: {
             x: g_sWidth / 2 + 175 - g_limitObj.setMiniWidth / 2, y: 25, w: g_limitObj.setMiniWidth, h: 40,
         },
         btnSave: {
-            x: 0, y: 5, w: g_sWidth / 5, h: 16, siz: 12,
+            x: g_btnX(), y: 5, w: g_btnWidth(1 / 5), h: 16, siz: 12,
             title: g_msgObj.dataSave, borderStyle: `solid`,
         },
 
@@ -319,16 +330,17 @@ const updateWindowSiz = _ => {
 
         /** キーコンフィグ画面 */
         scKcMsg: {
-            x: 0, y: g_sHeight - 45, w: g_sWidth, h: 20,
+            x: g_btnX(), y: g_sHeight - 50, w: g_btnWidth(), h: 20,
         },
         kcMsg: {
-            x: 0, y: g_sHeight - 25, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz,
+            x: g_btnX(), y: g_sHeight - 33, w: g_btnWidth(), h: 20, siz: g_limitObj.mainSiz,
+            pointerEvents: `none`,
         },
         kcDesc: {
-            x: 0, y: 68, w: g_sWidth, h: 20,
+            x: g_btnX(), y: 68, w: g_btnWidth(), h: 20,
         },
         kcShuffleDesc: {
-            x: 5, y: g_sHeight - 125, w: g_sWidth, h: 20, align: C_ALIGN_LEFT,
+            x: 5 + g_btnX(), y: g_sHeight - 125, w: g_btnWidth(), h: 20, align: C_ALIGN_LEFT,
         },
         pickPos: {
             x: 0, w: 50, h: 15, siz: 11, align: C_ALIGN_LEFT, background: `#${g_headerObj.baseBrightFlg ? `eeeeee` : `111111`}80`,
@@ -338,31 +350,31 @@ const updateWindowSiz = _ => {
         },
 
         btnKcBack: {
-            x: g_sWidth / 3, y: g_sHeight - 75,
-            w: g_sWidth / 3, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 3), y: g_sHeight - 75,
+            w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         lblPattern: {
-            x: g_sWidth / 6, y: g_sHeight - 100, w: g_sWidth / 3, h: g_limitObj.btnHeight / 2,
+            x: g_btnX(1 / 6), y: g_sHeight - 100, w: g_btnWidth() / 3, h: g_limitObj.btnHeight / 2,
         },
         btnPtnChangeR: {
-            x: g_sWidth / 2, y: g_sHeight - 100,
-            w: g_sWidth / 9, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 2), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 9), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeL: {
-            x: g_sWidth / 18, y: g_sHeight - 100,
-            w: g_sWidth / 9, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(1 / 18), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 9), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeRR: {
-            x: g_sWidth * 11 / 18, y: g_sHeight - 100,
-            w: g_sWidth / 18, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(11 / 18), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 18), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnPtnChangeLL: {
-            x: 0, y: g_sHeight - 100,
-            w: g_sWidth / 18, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(), y: g_sHeight - 100,
+            w: g_btnWidth(1 / 18), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
         btnKcReset: {
-            x: 0, y: g_sHeight - 75,
-            w: g_sWidth / 3, h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
+            x: g_btnX(), y: g_sHeight - 75,
+            w: g_btnWidth(1 / 3), h: g_limitObj.btnHeight / 2, siz: g_limitObj.btnSiz * 2 / 3,
         },
 
         /** メイン画面 */
@@ -418,27 +430,27 @@ const updateWindowSiz = _ => {
             x: g_sWidth / 2 + 50, y: 40, w: 200, h: 30, siz: 20,
         },
         btnRsBack: {
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
+            x: g_btnX(), w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
         },
         btnRsCopy: {
-            x: g_sWidth / 4, w: g_sWidth / 2, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 4), w: g_btnWidth(1 / 2), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsTweet: {
-            x: g_sWidth / 4, y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 4), y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
+            w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsGitter: {
-            x: g_sWidth / 2, y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
-            w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
+            x: g_btnX(1 / 2), y: g_sHeight - 100 + g_limitObj.btnHeight * 5 / 8,
+            w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 8, siz: 24, animationName: `smallToNormalY`,
         },
         btnRsRetry: {
-            x: g_sWidth / 4 * 3, w: g_sWidth / 4, h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
+            x: g_btnX(3 / 4), w: g_btnWidth(1 / 4), h: g_limitObj.btnHeight * 5 / 4, animationName: `smallToNormalY`,
         },
         btnRsCopyImage: {
-            x: g_sWidth - 40, y: 0, w: 40, h: 40, siz: 30,
+            x: g_btnX(1) - 40, y: 0, w: 40, h: 40, siz: 30,
         },
         btnRsCopyClose: {
-            x: g_sWidth - 80, y: 0, w: 80, h: 40, siz: 20,
+            x: g_btnX(1) - 80, y: 0, w: 80, h: 40, siz: 20,
         },
         resultImageDesc: {
             x: 0, y: g_sHeight - 30, w: g_sWidth, h: 20, siz: g_limitObj.mainSiz,

package/package.json

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