danoniplus 47.6.1 → 47.6.3

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/05/13
+ * Revised : 2026/05/15
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 47.6.1`;
-const g_revisedDate = `2026/05/13`;
+const g_version = `Ver 47.6.3`;
+const g_revisedDate = `2026/05/15`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -88,6 +88,7 @@ const g_remoteDomain = detectDomain(g_rootPath);
 
 const g_randTime = Date.now();
 const g_versionForUrl = g_version.slice(4);    // URL用に先頭の"Ver "を削除
+const g_dpr = window.devicePixelRatio || 1;
 
 const g_isFile = location.href.match(/^file/);
 const g_isLocal = location.href.match(/^file/) || location.href.indexOf(`localhost`) !== -1;
@@ -3380,7 +3381,6 @@ const storeBaseData = (_scoreId, _scoreObj, _keyCtrlPtn) => {
 		_keyCtrlPtn,
 		config: {
 			scale: 1.5,
-			dpr: window.devicePixelRatio || 1,
 			timeMargin: 35,
 			mmWidthBase: (g_sWidth - 500) / 2 + 290,
 			mmMarginY: 2,
@@ -3389,7 +3389,7 @@ const storeBaseData = (_scoreId, _scoreObj, _keyCtrlPtn) => {
 			},
 			get logicalWidth() {
 				const logicalWidth = this.timeMargin + (this.laneWidth * keyNum);
-				return Math.ceil(logicalWidth * this.dpr) / this.dpr;
+				return Math.ceil(logicalWidth * g_dpr) / g_dpr;
 			}
 		},
 	};
@@ -3403,16 +3403,15 @@ const storeBaseData = (_scoreId, _scoreObj, _keyCtrlPtn) => {
  * 指定された高さに基づいて分割されたCanvasリストを生成する
  * @param {number} _width
  * @param {number} _totalHeight
- * @param {number} _dpr
  * @return {object[]} 分割されたCanvasとそのコンテキスト、オフセット情報を含むリスト
  */
-const createSplitCanvases = (_width, _totalHeight, _dpr) => {
+const createSplitCanvases = (_width, _totalHeight) => {
 	// バックバッファ（実際のピクセル数）の最大値を 8000 に設定（iOS Safari 8192px 対策）
 	const BACKING_STORE_LIMIT = 8000;
 
 	// 論理上の最大高さ（CSSピクセル）を計算
-	// dpr=2なら4000px、dpr=3なら2666px が1枚の限界になる
-	const maxLogicalHeight = Math.max(1, Math.floor(BACKING_STORE_LIMIT / _dpr));
+	// g_dpr=2なら4000px、g_dpr=3なら2666px が1枚の限界になる
+	const maxLogicalHeight = Math.max(1, Math.floor(BACKING_STORE_LIMIT / g_dpr));
 	if (_totalHeight <= 0) return [];
 
 	const count = Math.ceil(_totalHeight / maxLogicalHeight);
@@ -3426,8 +3425,8 @@ const createSplitCanvases = (_width, _totalHeight, _dpr) => {
 			: maxLogicalHeight;
 
 		// 実際の描画解像度をセット
-		cvs.width = _width * _dpr;
-		cvs.height = logicalH * _dpr;
+		cvs.width = _width * g_dpr;
+		cvs.height = logicalH * g_dpr;
 
 		// ブラウザ上の表示サイズをセット
 		cvs.style.width = `${_width}px`;
@@ -3435,7 +3434,7 @@ const createSplitCanvases = (_width, _totalHeight, _dpr) => {
 		cvs.style.display = 'block';
 
 		const ctx = cvs.getContext('2d');
-		ctx.scale(_dpr, _dpr);
+		ctx.scale(g_dpr, g_dpr);
 
 		list.push({
 			canvas: cvs,
@@ -3474,7 +3473,6 @@ const distributeDrawing = (_canvases, _y, _h, _dpr, _drawFunc) => {
 /**
  * 譜面ミニマップ：キー名を表示するヘッダーキャンバスを作成する
  * @param {object} _config ミニマップの基本設定
- * @param {number} _config.dpr デバイスピクセル比
  * @param {number} _config.timeMargin 時間軸のマージン
  * @param {number} _config.laneWidth レーンの幅
  * @param {number} _config.logicalWidth キャンバスの論理幅
@@ -3483,20 +3481,20 @@ const distributeDrawing = (_canvases, _y, _h, _dpr, _drawFunc) => {
  * @return {HTMLCanvasElement} ヘッダー用のキャンバス要素
  */
 const createMinimapHeader = (_config, _keyCtrlPtn, _keyNum) => {
-	const { dpr, timeMargin, laneWidth, logicalWidth } = _config;
+	const { timeMargin, laneWidth, logicalWidth } = _config;
 	const headerHeight = 15; // ヘッダーの固定高
 
 	const canvas = document.createElement('canvas');
 	const ctx = canvas.getContext('2d');
 
 	// 解像度と表示サイズの設定
-	canvas.width = logicalWidth * dpr;
-	canvas.height = headerHeight * dpr;
+	canvas.width = logicalWidth * g_dpr;
+	canvas.height = headerHeight * g_dpr;
 	canvas.style.width = `${logicalWidth}px`;
 	canvas.style.height = `${headerHeight}px`;
 	canvas.style.display = 'block';
 
-	ctx.scale(dpr, dpr);
+	ctx.scale(g_dpr, g_dpr);
 
 	// テキストのスタイル設定
 	ctx.fillStyle = '#999';
@@ -3526,7 +3524,6 @@ const createMinimapHeader = (_config, _keyCtrlPtn, _keyNum) => {
  * @param {string} _params._keyCtrlPtn キーコントロールパターン
  * @param {object} _params.config ミニマップの基本設定
  * @param {number} _params.config.scale ミニマップの時間軸のスケール
- * @param {number} _params.config.dpr デバイスピクセル比
  * @param {number} _params.config.timeMargin 時間軸のマージン
  * @param {number} _params.config.laneWidth レーンの幅
  * @param {number} _params.config.logicalWidth キャンバスの論理幅
@@ -3536,10 +3533,10 @@ const createMinimapHeader = (_config, _keyCtrlPtn, _keyNum) => {
  */
 const generateMinimapData = (_params, _isReverse) => {
 	const { _scoreObj, _keyNum, _playingFrame, _firstArrowFrame, _keyCtrlPtn, config } = _params;
-	const { scale, dpr, timeMargin, laneWidth, logicalWidth, mmMarginY } = config;
+	const { scale, timeMargin, laneWidth, logicalWidth, mmMarginY } = config;
 
 	const mmHeightTotal = _playingFrame * scale + mmMarginY * 2;
-	const canvases = createSplitCanvases(logicalWidth, mmHeightTotal, dpr);
+	const canvases = createSplitCanvases(logicalWidth, mmHeightTotal);
 
 	const getY = (frame) => {
 		const relativeFrame = frame - _firstArrowFrame;
@@ -3554,7 +3551,7 @@ const generateMinimapData = (_params, _isReverse) => {
 	const interval = g_fps;
 	for (let f = Math.ceil(_firstArrowFrame / interval) * interval; f <= _firstArrowFrame + _playingFrame; f += interval) {
 		const y = getY(f);
-		distributeDrawing(canvases, y - 5, 10, dpr, (ctx) => {
+		distributeDrawing(canvases, y - 5, 10, g_dpr, (ctx) => {
 			ctx.strokeStyle = '#444';
 			ctx.fillStyle = '#999';
 			ctx.font = `10px ${getBasicFont()}`;
@@ -3583,7 +3580,7 @@ const generateMinimapData = (_params, _isReverse) => {
 			const top = Math.min(y1, y2);
 			const h = Math.abs(y2 - y1);
 			const x = timeMargin + j * laneWidth;
-			distributeDrawing(canvases, top, h, dpr, (ctx) => {
+			distributeDrawing(canvases, top, h, g_dpr, (ctx) => {
 				ctx.fillStyle = 'rgba(0, 200, 255, 0.4)';
 				ctx.fillRect(x + 2, top, laneWidth - 3, h);
 				ctx.strokeStyle = 'rgba(0, 200, 255, 0.8)';
@@ -3597,7 +3594,7 @@ const generateMinimapData = (_params, _isReverse) => {
 		const color = g_dfColorObj.setColorType2[g_keyObj[`color${_keyCtrlPtn}_0`][j]] || '#ffffff';
 		_scoreObj.arrowData[j].forEach(note => {
 			const y = getY(parseFloat(note));
-			distributeDrawing(canvases, y - 1.5, 3, dpr, (ctx) => {
+			distributeDrawing(canvases, y - 1.5, 3, g_dpr, (ctx) => {
 				ctx.fillStyle = color;
 				ctx.fillRect(timeMargin + j * laneWidth + 1, y - 1.5, laneWidth - 1, 3);
 			});
@@ -8239,9 +8236,8 @@ const createOptionWindow = _sprite => {
 				const bkColor = window.getComputedStyle(textBaseObj, ``).backgroundColor;
 
 				graphObj.id = `graph${_name}${j > 0 ? j + 1 : ``}`;
-				const dpr = window.devicePixelRatio || 1;
-				graphObj.width = g_limitObj.graphWidth * dpr;
-				graphObj.height = g_limitObj.graphHeight * dpr;
+				graphObj.width = g_limitObj.graphWidth * g_dpr;
+				graphObj.height = g_limitObj.graphHeight * g_dpr;
 				graphObj.style.width = wUnit(g_limitObj.graphWidth);
 				graphObj.style.height = wUnit(g_limitObj.graphHeight);
 				graphObj.style.left = wUnit(125);
@@ -8249,7 +8245,7 @@ const createOptionWindow = _sprite => {
 				graphObj.style.position = `absolute`;
 				graphObj.style.background = j === 0 ? bkColor : `#ffffff00`;
 				const ctx = graphObj.getContext(`2d`);
-				ctx.scale(dpr, dpr);
+				ctx.scale(g_dpr, g_dpr);
 
 				detailObj.appendChild(graphObj);
 			}
@@ -10400,7 +10396,7 @@ const keyconfigKeyboardPreview = (() => {
 		shortcutStroke: `#ff4466`,   // ショートカットキー枠
 		shortcutText: `#ffaacc`,   // ショートカットキー文字
 		bgFill: `#0d0d1a`,   // Canvas 背景
-		legendText: `#888899`,   // 凡例テキスト
+		legendText: `#cccccc`,   // 凡例テキスト
 	};
 
 	// ボタン配置
@@ -10421,8 +10417,7 @@ const keyconfigKeyboardPreview = (() => {
 	// キーレイアウト定義
 	//
 	// 各行: { offsetX, keys }
-	//   offsetX : 行左端の水平オフセット（単位: BASE_KEY_W）。全行 0 で統一し、
-	//             L)Shift の幅で行頭位置を調整する。
+	//   offsetX : 行左端の水平オフセット（単位: BASE_KEY_W）。未指定時は0
 	//   keys    : キー定義の配列
 	//
 	// 各キー: { kc, w?, h?, label? }
@@ -10446,7 +10441,6 @@ const keyconfigKeyboardPreview = (() => {
 		return [
 			// Row0: Fn キー行（JIS/US 共通）
 			{
-				offsetX: 0,
 				keys: [
 					{ kc: 27 },                    // Esc
 					{ kc: -1, w: 0.5 },            // スペーサー
@@ -10461,16 +10455,13 @@ const keyconfigKeyboardPreview = (() => {
 			// JIS: ..., 220(intlYen), BS
 			// US : ...,               BS
 			{
-				offsetX: 0,
 				keys: [
 					{ kc: 229 },
-					{ kc: 49 }, { kc: 50 }, { kc: 51 },
-					{ kc: 52 }, { kc: 53 }, { kc: 54 },
-					{ kc: 55 }, { kc: 56 }, { kc: 57 },
-					{ kc: 48 }, { kc: 189 }, { kc: 222 },
+					{ kc: 49 }, { kc: 50 }, { kc: 51 }, { kc: 52 }, { kc: 53 }, { kc: 54 },
+					{ kc: 55 }, { kc: 56 }, { kc: 57 }, { kc: 48 }, { kc: 189 }, { kc: 222 },
 					...(isJa
-						? [{ kc: 220, w: 0.75 }, { kc: 8 }]  // JIS: intlYen + BS
-						: [{ kc: 8, w: 1.7 }]                 // US : BS のみ（広い）
+						? [{ kc: 220, w: 0.75 }, { kc: 8, label: `Back\nSpace` }]  // JIS: intlYen + BS
+						: [{ kc: 8, w: 1.7 }]                                      // US : BS のみ（広い）
 					),
 				],
 			},
@@ -10478,13 +10469,10 @@ const keyconfigKeyboardPreview = (() => {
 			// JIS: ..., [, Enter(13)
 			// US : ..., [, ]
 			{
-				offsetX: 0,
 				keys: [
 					{ kc: 9, w: 1.5 },
-					{ kc: 81 }, { kc: 87 }, { kc: 69 },
-					{ kc: 82 }, { kc: 84 }, { kc: 89 },
-					{ kc: 85 }, { kc: 73 }, { kc: 79 },
-					{ kc: 80 }, { kc: 192 },
+					{ kc: 81 }, { kc: 87 }, { kc: 69 }, { kc: 82 }, { kc: 84 }, { kc: 89 },
+					{ kc: 85 }, { kc: 73 }, { kc: 79 }, { kc: 80 }, { kc: 192 },
 					...(isJa
 						? [{ kc: 219 }, { kc: 13, w: 1.25, h: 2 }]  // JIS: [, Enter縦長
 						: [{ kc: 219 }, { kc: 221, w: 1.2 }]        // US : [, ]
@@ -10495,13 +10483,10 @@ const keyconfigKeyboardPreview = (() => {
 			// JIS: ..., L, ;, ', ¥(221)
 			// US : ..., L, ;, ', Enter(13)
 			{
-				offsetX: 0,
 				keys: [
-					{ kc: 20, w: 1.75, label: `CapsLk` },
-					{ kc: 65 }, { kc: 83 }, { kc: 68 },
-					{ kc: 70 }, { kc: 71 }, { kc: 72 },
-					{ kc: 74 }, { kc: 75 }, { kc: 76 },
-					{ kc: 187 }, { kc: 186 },
+					{ kc: 20, w: 1.75, label: `Caps\nLock` },
+					{ kc: 65 }, { kc: 83 }, { kc: 68 }, { kc: 70 }, { kc: 71 }, { kc: 72 },
+					{ kc: 74 }, { kc: 75 }, { kc: 76 }, { kc: 187 }, { kc: 186 },
 					...(isJa
 						? [{ kc: 221 }]           // JIS: ¥
 						: [{ kc: 13, w: 1.9 }]    // US : Enter横長
@@ -10513,16 +10498,13 @@ const keyconfigKeyboardPreview = (() => {
 			// JIS: L)Shift, ..., intlRo(226), R)Shift
 			// US : L)Shift, ...,              R)Shift
 			{
-				offsetX: 0,
 				keys: [
 					{ kc: 16, w: 2.25 },
-					{ kc: 90 }, { kc: 88 }, { kc: 67 },
-					{ kc: 86 }, { kc: 66 }, { kc: 78 },
-					{ kc: 77 }, { kc: 188 }, { kc: 190 },
-					{ kc: 191 },
+					{ kc: 90 }, { kc: 88 }, { kc: 67 }, { kc: 86 }, { kc: 66 }, { kc: 78 },
+					{ kc: 77 }, { kc: 188 }, { kc: 190 }, { kc: 191 },
 					...(isJa
 						? [{ kc: 226 }, { kc: 256, w: 1.5 }]  // JIS: intlRo + R)Shift
-						: [{ kc: 256, w: 2.4 }]                // US : R)Shift のみ（広い）
+						: [{ kc: 256, w: 2.4 }]               // US : R)Shift のみ（広い）
 					),
 				],
 			},
@@ -10530,24 +10512,15 @@ const keyconfigKeyboardPreview = (() => {
 			// JIS: ..., NoConv(29), Space, Conv(28), カタカナひらがな(242), ...
 			// US : ..., Space, ...
 			{
-				offsetX: 0,
 				keys: [
-					{ kc: 17, w: 1.25 },
-					{ kc: 91 },
-					{ kc: 18 },
+					{ kc: 17, w: 1.25 }, { kc: 91 }, { kc: 18 },
 					...(isJa
-						? [
-							{ kc: 29 },
-							{ kc: 32, w: 5.25 },
-							{ kc: 28 },
-							{ kc: 242 },
-						]
-						: [
-							{ kc: 32, w: 8.25 },
-						]
+						// JIS: NoConv + Space + Conv + カタカナひらがな
+						? [{ kc: 29 }, { kc: 32, w: 5.25 }, { kc: 28 }, { kc: 242 }]
+						// US : Space のみ（広い）
+						: [{ kc: 32, w: 8.25 }]
 					),
-					{ kc: 258 },
-					{ kc: 93 },
+					{ kc: 258 }, { kc: 93 },
 					...(isJa
 						? [{ kc: 257, w: 1.2 }]
 						: [{ kc: 257, w: 1.05 }]
@@ -10559,12 +10532,12 @@ const keyconfigKeyboardPreview = (() => {
 	// 編集キークラスター（PrintSc/ScrollLk/Pause/Insert/Delete/Home/End/PgUp/PgDn + 矢印キー）
 	// MAIN_ROWS と行インデックスを揃えて配置する。空行はスキップされる。
 	const NAV_ROWS = [
-		{ offsetX: 0, keys: [{ kc: 44, label: `PrintSc` }, { kc: 145, label: `ScrollLk` }, { kc: 19 }] },  // PrintSc ScrollLk Pause
-		{ offsetX: 0, keys: [{ kc: 45 }, { kc: 36 }, { kc: 33 }] },  // Insert Home PgUp
-		{ offsetX: 0, keys: [{ kc: 46 }, { kc: 35 }, { kc: 34 }] },  // Delete End  PgDn
-		{ offsetX: 0, keys: [] },                                    // ASDF行：空
-		{ offsetX: 0, keys: [{ kc: -1 }, { kc: 38 }, { kc: -1 }] },  // ↑
-		{ offsetX: 0, keys: [{ kc: 37 }, { kc: 40 }, { kc: 39 }] },  // ← ↓ →
+		{ keys: [{ kc: 44, label: `Print\nScreen` }, { kc: 145, label: `Scroll\nLock` }, { kc: 19 }] },
+		{ keys: [{ kc: 45 }, { kc: 36 }, { kc: 33, label: `Page\nUp` }] },    // Insert Home PgUp
+		{ keys: [{ kc: 46 }, { kc: 35 }, { kc: 34, label: `Page\nDown` }] },  // Delete End  PgDn
+		{ keys: [] },                                    // ASDF行：空
+		{ keys: [{ kc: -1 }, { kc: 38 }, { kc: -1 }] },  // ↑
+		{ keys: [{ kc: 37 }, { kc: 40 }, { kc: 39 }] },  // ← ↓ →
 	];
 
 	// テンキー（MAIN_ROWS と行インデックスを揃えて配置。1行目は空行で Fn行に揃える）
@@ -10576,12 +10549,12 @@ const keyconfigKeyboardPreview = (() => {
 	//   [T1][T2][T3] [TEnter]
 	//   [  T0  ][T.] [TEnter]  ← T0 は横2u、TEnter は縦2u
 	const NUM_ROWS = [
-		{ offsetX: 0, keys: [] },
-		{ offsetX: 0, keys: [{ kc: 144 }, { kc: 111 }, { kc: 106 }, { kc: 109 }] },        // NumLk T/ T* T-
-		{ offsetX: 0, keys: [{ kc: 103 }, { kc: 104 }, { kc: 105 }, { kc: 107, h: 2 }] },  // T7 T8 T9 T+(縦2u)
-		{ offsetX: 0, keys: [{ kc: 100 }, { kc: 101 }, { kc: 102 }] },                     // T4 T5 T6
-		{ offsetX: 0, keys: [{ kc: 97 }, { kc: 98 }, { kc: 99 }, { kc: 108, h: 2 }] },     // T1 T2 T3 TEnter(縦2u)
-		{ offsetX: 0, keys: [{ kc: 96, w: 2 }, { kc: 110 }] },                             // T0(横2u) T.
+		{ keys: [] },
+		{ keys: [{ kc: 144, label: `Num\nLock` }, { kc: 111 }, { kc: 106 }, { kc: 109 }] }, // NumLk T/ T* T-
+		{ keys: [{ kc: 103 }, { kc: 104 }, { kc: 105 }, { kc: 107, h: 2 }] },  // T7 T8 T9 T+(縦2u)
+		{ keys: [{ kc: 100 }, { kc: 101 }, { kc: 102 }] },                     // T4 T5 T6
+		{ keys: [{ kc: 97 }, { kc: 98 }, { kc: 99 }, { kc: 108, h: 2 }] },     // T1 T2 T3 TEnter(縦2u)
+		{ keys: [{ kc: 96, w: 2 }, { kc: 110 }] },                             // T0(横2u) T.
 	];
 
 	// -------------------------------------------------------------------------
@@ -10669,7 +10642,7 @@ const keyconfigKeyboardPreview = (() => {
 		if (forcedLabel !== undefined) return [forcedLabel, ``];
 
 		const raw = g_kCd[kc];
-		if (raw && raw !== `- - -` && raw !== `Unknown`) {
+		if (raw && raw !== g_kCd[0] && raw !== g_kCd[1]) {
 			const parts = raw.split(` `);
 			return [parts[0] || ``, parts[1] || ``];
 		}
@@ -10701,22 +10674,31 @@ const keyconfigKeyboardPreview = (() => {
 	};
 
 	const drawKeyLabel = (ctx, x, y, keyW, keyH, primary, sub, textColor, subColor) => {
-		const fs = primary.length >= 5
-			? Math.max(6, Math.floor(8 * _state.scale))
+		const fs = (_textLen) => _textLen >= 5 * keyW / BASE_KEY_W
+			? Math.max(6, Math.floor(9 * _state.scale))
 			: Math.max(7, Math.floor(11 * _state.scale));
 
 		if (sub) {
 			ctx.fillStyle = subColor;
-			ctx.font = `bold ${Math.max(6, Math.floor(8 * _state.scale))}px monospace`;
+			ctx.font = `bold ${Math.max(6, Math.floor(9 * _state.scale))}px monospace`;
 			ctx.textAlign = `right`;
 			ctx.textBaseline = `top`;
 			ctx.fillText(sub, x + keyW - 2, y + 2);
 		}
+		const [primary1, primary2] = primary.split(`\n`);
 		ctx.fillStyle = textColor;
-		ctx.font = `bold ${fs}px monospace`;
 		ctx.textAlign = `center`;
 		ctx.textBaseline = `middle`;
-		ctx.fillText(primary, x + keyW / 2, y + keyH / 2 + (sub ? 2 : 0));
+		const subDiff = sub ? 2 : 0;
+		if (primary2) {
+			const siz = fs(Math.max(primary1.length, primary2.length));
+			ctx.font = `bold ${siz}px monospace`;
+			ctx.fillText(primary1, x + keyW / 2, y + keyH / 2 - siz / 2 + subDiff);
+			ctx.fillText(primary2, x + keyW / 2, y + keyH / 2 + siz / 2 + subDiff);
+		} else {
+			ctx.font = `bold ${fs(primary.length)}px monospace`;
+			ctx.fillText(primary, x + keyW / 2, y + keyH / 2 + subDiff);
+		}
 	};
 
 	const drawOneKey = (ctx, x, y, keyW, keyH, fill, stroke, lw, primary, sub, textColor, subColor) => {
@@ -10750,7 +10732,7 @@ const keyconfigKeyboardPreview = (() => {
 			if (rowDef.keys.length === 0) return;
 
 			const rowY = originY + rowIdx * (baseKeyH + gap);
-			const startX = originX + Math.floor(rowDef.offsetX * BASE_KEY_W * _state.scale);
+			const startX = originX + Math.floor((rowDef.offsetX || 0) * BASE_KEY_W * _state.scale);
 			let curX = startX;
 
 			rowDef.keys.forEach(keyDef => {
@@ -10787,15 +10769,14 @@ const keyconfigKeyboardPreview = (() => {
 		const canvas = _state.canvasBase;
 		if (!canvas) return;
 
-		const dpr = window.devicePixelRatio || 1;
 		canvas.style.top = wUnit(40);
-		canvas.width = _state.cvsW * dpr;
-		canvas.height = _state.cvsH * dpr;
+		canvas.width = _state.cvsW * g_dpr;
+		canvas.height = _state.cvsH * g_dpr;
 		canvas.style.width = wUnit(_state.cvsW);
 		canvas.style.height = wUnit(_state.cvsH);
 
 		const ctx = canvas.getContext(`2d`);
-		ctx.scale(dpr, dpr);
+		ctx.scale(g_dpr, g_dpr);
 		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
 		ctx.fillStyle = C_COLOR.bgFill;
 		ctx.fillRect(0, 0, _state.cvsW, _state.cvsH);
@@ -10822,7 +10803,7 @@ const keyconfigKeyboardPreview = (() => {
 
 		// 凡例
 		const ly = _state.cvsH - 10;
-		const fnt = `${Math.max(9, Math.floor(10 * _state.scale))}px ${getBasicFont()}`;
+		const fnt = `${Math.max(9, Math.floor(12 * _state.scale))}px ${getBasicFont()}`;
 		ctx.font = fnt;
 		ctx.textAlign = `left`;
 		ctx.textBaseline = `middle`;
@@ -10852,15 +10833,14 @@ const keyconfigKeyboardPreview = (() => {
 		const canvas = _state.canvasMap;
 		if (!canvas) return;
 
-		const dpr = window.devicePixelRatio || 1;
 		canvas.style.top = wUnit(40);
-		canvas.width = _state.cvsW * dpr;
-		canvas.height = _state.cvsH * dpr;
+		canvas.width = _state.cvsW * g_dpr;
+		canvas.height = _state.cvsH * g_dpr;
 		canvas.style.width = wUnit(_state.cvsW);
 		canvas.style.height = wUnit(_state.cvsH);
 
 		const ctx = canvas.getContext(`2d`);
-		ctx.scale(dpr, dpr);
+		ctx.scale(g_dpr, g_dpr);
 		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
 
 		// 優先度: ショートカット > メイン > 代替（後から描くほど優先）
@@ -10907,40 +10887,34 @@ const keyconfigKeyboardPreview = (() => {
 
 		// ボタン: キャンバス横幅中央に配置、小さいサイズ
 		const btnW = 80;
-		const btnX = Math.floor((g_btnWidth() - btnW) / 2);
+		const btnX = g_btnX() + Math.floor((g_btnWidth() - btnW) / 2);
 
 		// "↓ Preview" → 展開、"↑ Preview" → 閉じる のトグルボタン
 		const btn = createCss2Button(C_BTN_ID, `↓ Preview`, () => {
 			togglePreview();
 			btn.textContent = _state.visible ? `↑ Preview` : `↓ Preview`;
 		}, {
-			x: btnX, y: BTN_Y, w: btnW, h: BTN_H,
+			x: btnX, y: BTN_Y, w: btnW, h: BTN_H, siz: BTN_FS,
 			title: g_msgObj.kcPreview,
 		}, g_cssObj.button_Setting);
-		btn.style.fontSize = `${BTN_FS}px`;
 		divRoot.appendChild(btn);
 
 		// プレビューエリア: 水平・垂直センタリング
-		const areaX = Math.floor((g_btnWidth() - _state.cvsW) / 2);
+		const areaX = g_btnX() + Math.floor((g_btnWidth() - _state.cvsW) / 2);
 		const areaY = 130;
 
 		const areaDiv = createEmptySprite(divRoot, C_PREVIEW_ID, {
 			x: areaX, y: areaY - 60, w: _state.cvsW, h: _state.cvsH + 80,
-			pointerEvents: C_DIS_AUTO, background: `#00000080`,
+			pointerEvents: C_DIS_AUTO, background: `#00000080`, display: C_DIS_NONE, overflow: `hidden`,
 		});
-		areaDiv.style.display = `none`;
-		areaDiv.style.position = `absolute`;
-		areaDiv.style.overflow = `hidden`;
 
 		const canvasBase = document.createElement(`canvas`);
 		canvasBase.id = C_CANVAS_BASE_ID;
-		canvasBase.style.cssText = `position:absolute;left:0;top:0;`;
 		areaDiv.appendChild(canvasBase);
 		_state.canvasBase = canvasBase;
 
 		const canvasMap = document.createElement(`canvas`);
 		canvasMap.id = C_CANVAS_MAP_ID;
-		canvasMap.style.cssText = `position:absolute;left:0;top:0;`;
 		areaDiv.appendChild(canvasMap);
 		_state.canvasMap = canvasMap;
 
@@ -16147,12 +16121,11 @@ const resultInit = () => {
 	for (let j = 0; j < 2; j++) {
 		const canvas = document.createElement(`canvas`);
 		canvas.id = `graphGaugeTransition${j > 0 ? j + 1 : ``}`;
-		const dpr = window.devicePixelRatio || 1;
-		canvas.width = g_limitObj.gaugeTransitionWidth * dpr;
-		canvas.height = g_limitObj.gaugeTransitionHeight * dpr;
+		canvas.width = g_limitObj.gaugeTransitionWidth * g_dpr;
+		canvas.height = g_limitObj.gaugeTransitionHeight * g_dpr;
 		canvas.style.width = wUnit(g_limitObj.gaugeTransitionWidth);
 		canvas.style.height = wUnit(g_limitObj.gaugeTransitionHeight);
-		canvas.getContext(`2d`).scale(dpr, dpr);
+		canvas.getContext(`2d`).scale(g_dpr, g_dpr);
 		canvas.style.left = wUnit(0);
 		canvas.style.top = wUnit(0);
 		canvas.style.position = `absolute`;
@@ -16463,13 +16436,12 @@ const resultInit = () => {
 		tmpDiv.style.background = `#000000cc`;
 		const canvas = document.createElement(`canvas`);
 		const artistName = g_headerObj.artistNames[g_headerObj.musicNos[g_stateObj.scoreId]] || g_headerObj.artistName;
-		const dpr = window.devicePixelRatio || 1;
 		const logicalWidth = 400;
 		const logicalHeight = g_sHeight - 90;
 
 		canvas.id = `resultImage`;
-		canvas.width = logicalWidth * dpr;
-		canvas.height = logicalHeight * dpr;
+		canvas.width = logicalWidth * g_dpr;
+		canvas.height = logicalHeight * g_dpr;
 		canvas.style.width = wUnit(logicalWidth);
 		canvas.style.height = wUnit(logicalHeight);
 		canvas.style.left = wUnit((g_sWidth - parseFloat(canvas.style.width)) / 2);
@@ -16477,7 +16449,7 @@ const resultInit = () => {
 		canvas.style.position = `absolute`;
 
 		const context = canvas.getContext(`2d`);
-		context.scale(dpr, dpr);
+		context.scale(g_dpr, g_dpr);
 		const drawText = (_text, { x = 30, dy = 0, hy, siz = 15, color = `#cccccc`, align = C_ALIGN_LEFT, font } = {}) => {
 			context.font = `${wUnit(siz)} ${getBasicFont(font)}`;
 			context.fillStyle = color;

package/package.json

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