danoniplus 50.5.2 → 51.0.0

package/js/lib/keyconfig.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/15 (v50.5.1)
+ * Revised : 2026/09/23 (v51.0.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -884,9 +884,10 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 
 		// キーパターンの変更
 		g_keyObj.currentPtn = searchPattern(g_keyObj.currentPtn, _sign, g_headerObj.transKeyUse, _skipFlg);
+		const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
 
 		// カラーグループ、シャッフルグループの再設定
-		g_keycons.groups.forEach(type => resetGroupList(type, `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`));
+		g_keycons.groups.forEach(type => resetGroupList(type, keyCtrlPtn));
 
 		// 曲中ショートカットキーの切り替え
 		setPlayingShortcut();
@@ -897,7 +898,7 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 		// シャッフルグループのデフォルト値からの差異表示（色付け）
 		// 再描画後で無いと色付けできないため、keyConfigInit() 実行後に処理
 		if (g_headerObj.shuffleUse) {
-			changeShuffleConfigColor(`${g_keyObj.currentKey}_${g_keyObj.currentPtn}`, g_keyObj[`shuffle${g_keyObj.currentKey}_${g_keyObj.currentPtn}_${g_keycons.shuffleGroupNum}`]);
+			changeShuffleConfigColor(keyCtrlPtn, g_keyObj[`shuffle${keyCtrlPtn}_${g_keycons.shuffleGroupNum}`]);
 		}
 	};
 
@@ -936,8 +937,8 @@ const keyConfigInit = (_kcType = g_kcType, _initFlg = false) => {
 			}
 		}, g_cssObj.button_Back),
 
-		createDivCss2Label(`lblPattern`, `${g_lblNameObj.KeyPattern}: ${g_keyObj.currentPtn === -1 ?
-			'Self' : g_keyObj.currentPtn + 1}${lblTransKey}`, g_lblPosObj.lblPattern),
+		createDivCss2Label(`lblPattern`, `${g_lblNameObj.KeyPattern}: ${g_keyObj.currentPtn === -1
+			? 'Self' : g_keyObj.currentPtn + 1}${lblTransKey}`, g_lblPosObj.lblPattern),
 
 		// パターン変更ボタン描画(右回り)
 		createCss2Button(`btnPtnChangeR`, `>`, () => true, {
@@ -1337,11 +1338,16 @@ const keyconfigKeyboardPreview = (() => {
 	// MAIN_ROWS と行インデックスを揃えて配置する。空行はスキップされる。
 	const NAV_ROWS = [
 		{ keys: [{ code: `PrintScreen`, label: `Print\nScreen` }, { code: `ScrollLock`, label: `Scroll\nLock` }, { code: `Pause` }] },
-		{ keys: [{ code: `Insert` }, { code: `Home` }, { code: `PageUp`, label: `Page\nUp` }] },    // Insert Home PgUp
-		{ keys: [{ code: `Delete` }, { code: `End` }, { code: `PageDown`, label: `Page\nDown` }] },  // Delete End  PgDn
-		{ keys: [] },                                                                               // ASDF行：空
-		{ keys: [{ code: `` }, { code: `ArrowUp` }, { code: `` }] },                                // ↑
-		{ keys: [{ code: `ArrowLeft` }, { code: `ArrowDown` }, { code: `ArrowRight` }] },           // ← ↓ →
+		// Insert Home PgUp
+		{ keys: [{ code: `Insert` }, { code: `Home` }, { code: `PageUp`, label: `Page\nUp` }] },
+		// Delete End  PgDn
+		{ keys: [{ code: `Delete` }, { code: `End` }, { code: `PageDown`, label: `Page\nDown` }] },
+		// ASDF行：空
+		{ keys: [] },
+		// ↑                                                                               
+		{ keys: [{ code: `` }, { code: `ArrowUp` }, { code: `` }] },
+		// ← ↓ →     
+		{ keys: [{ code: `ArrowLeft` }, { code: `ArrowDown` }, { code: `ArrowRight` }] },
 	];
 
 	// テンキー（MAIN_ROWS と行インデックスを揃えて配置。1行目は空行で Fn行に揃える）
@@ -1353,11 +1359,16 @@ const keyconfigKeyboardPreview = (() => {
 	//   [  T0  ][T.] [TEnter]  ← T0 は横2u、TEnter は縦2u
 	const NUM_ROWS = [
 		{ keys: [] },
-		{ keys: [{ code: `NumLock`, label: `Num\nLock` }, { code: `NumpadDivide` }, { code: `NumpadMultiply` }, { code: `NumpadSubtract` }] }, // NumLk T/ T* T-
-		{ keys: [{ code: `Numpad7` }, { code: `Numpad8` }, { code: `Numpad9` }, { code: `NumpadAdd`, h: 2 }] },                               // T7 T8 T9 T+(縦2u)
-		{ keys: [{ code: `Numpad4` }, { code: `Numpad5` }, { code: `Numpad6` }] },                                                             // T4 T5 T6
-		{ keys: [{ code: `Numpad1` }, { code: `Numpad2` }, { code: `Numpad3` }, { code: `NumpadEnter`, h: 2 }] },                             // T1 T2 T3 TEnter(縦2u)
-		{ keys: [{ code: `Numpad0`, w: 2 }, { code: `NumpadDecimal` }] },                                                                     // T0(横2u) T.
+		// NumLk T/ T* T-
+		{ keys: [{ code: `NumLock`, label: `Num\nLock` }, { code: `NumpadDivide` }, { code: `NumpadMultiply` }, { code: `NumpadSubtract` }] },
+		// T7 T8 T9 T+(縦2u)
+		{ keys: [{ code: `Numpad7` }, { code: `Numpad8` }, { code: `Numpad9` }, { code: `NumpadAdd`, h: 2 }] },
+		// T4 T5 T6
+		{ keys: [{ code: `Numpad4` }, { code: `Numpad5` }, { code: `Numpad6` }] },
+		// T1 T2 T3 TEnter(縦2u)
+		{ keys: [{ code: `Numpad1` }, { code: `Numpad2` }, { code: `Numpad3` }, { code: `NumpadEnter`, h: 2 }] },
+		// T0(横2u) T.
+		{ keys: [{ code: `Numpad0`, w: 2 }, { code: `NumpadDecimal` }] },
 	];
 
 	// -------------------------------------------------------------------------
@@ -1471,17 +1482,6 @@ const keyconfigKeyboardPreview = (() => {
 	const kg = () => Math.max(1, Math.round(BASE_KEY_GAP * _state.scale));
 	const kr = () => Math.max(2, Math.round(4 * _state.scale));
 
-	/**
-	 * Canvasの共通初期化処理
-	 * @param {HTMLCanvasElement} canvas
-	 * @returns {CanvasRenderingContext2D|null}
-	 */
-	const setupCanvasContext = (canvas) => {
-		if (!canvas) return null;
-		canvas.style.top = wUnit(40);
-		return applyCanvasSize(canvas, _state.cvsW, _state.cvsH);
-	};
-
 	/**
 	 * 円角矩形を描画する
 	 * @param {CanvasRenderingContext2D} ctx 
@@ -1616,8 +1616,7 @@ const keyconfigKeyboardPreview = (() => {
 	 * init 時に呼ぶ。
 	 */
 	const drawBase = () => {
-		const ctx = setupCanvasContext(_state.canvasBase);
-		if (!ctx) return;
+		const ctx = _state.canvasBase.getContext(`2d`);
 
 		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
 		setCtxProp(ctx, `fillStyle`, C_COLOR.bgFill);
@@ -1672,8 +1671,7 @@ const keyconfigKeyboardPreview = (() => {
 	 * 同一キーにメインと代替が重なる場合はメインを優先する。
 	 */
 	const drawMap = () => {
-		const ctx = setupCanvasContext(_state.canvasMap);
-		if (!ctx) return;
+		const ctx = _state.canvasMap.getContext(`2d`);
 
 		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
 
@@ -1721,15 +1719,18 @@ const keyconfigKeyboardPreview = (() => {
 			pointerEvents: C_DIS_AUTO, background: `#00000080`, display: C_DIS_NONE, overflow: `hidden`,
 		});
 
-		const canvasBase = document.createElement(`canvas`);
-		canvasBase.id = C_CANVAS_BASE_ID;
-		areaDiv.appendChild(canvasBase);
-		_state.canvasBase = canvasBase;
-
-		const canvasMap = document.createElement(`canvas`);
-		canvasMap.id = C_CANVAS_MAP_ID;
-		areaDiv.appendChild(canvasMap);
-		_state.canvasMap = canvasMap;
+		/**
+		 * プレビュー用canvasを生成しareaDivに追加、_stateに登録する
+		 * @param {string} _id
+		 * @param {string} _stateKey `_state`に格納するキー名（canvasBase/canvasMap）
+		 */
+		const addPreviewCanvas = (_id, _stateKey) => {
+			const cvs = createCanvas(_id, { y: 40, w: _state.cvsW, h: _state.cvsH });
+			areaDiv.appendChild(cvs);
+			_state[_stateKey] = cvs;
+		};
+		addPreviewCanvas(C_CANVAS_BASE_ID, `canvasBase`);
+		addPreviewCanvas(C_CANVAS_MAP_ID, `canvasMap`);
 
 		drawBase();
 	};

package/js/lib/mainWindow.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 
+ * Revised : 2026/09/23 (v51.0.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -43,16 +43,20 @@ const mainInit = () => {
 		mainSprite.style.transformOrigin = `center 55%`;
 	}
 
-	addTransform(`mainSprite`, `root`, `scale(${g_workObj.scale})`, g_transPriority.scale);
-	addTransform(`mainSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_posObj.stepY - C_STEP_Y + g_headerObj.playingY)})`, g_transPriority.base);
+	addTransform(`mainSprite`, `root`,
+		`scale(${g_workObj.scale})`, g_transPriority.scale);
+	addTransform(`mainSprite`, `main`,
+		`translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_posObj.stepY - C_STEP_Y + g_headerObj.playingY)})`, g_transPriority.base);
 
 	// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
 	const infoSprite = createEmptySprite(divRoot, `infoSprite`, mainCommonPos);
-	addTransform(`infoSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
+	addTransform(`infoSprite`, `main`,
+		`translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
 
 	// 判定系スプライトを作成（メインスプライトより上位）
 	const judgeSprite = createEmptySprite(divRoot, `judgeSprite`, mainCommonPos);
-	addTransform(`judgeSprite`, `main`, `translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
+	addTransform(`judgeSprite`, `main`,
+		`translateX(${wUnit(g_workObj.playingX)}) translateY(${wUnit(g_headerObj.playingY)})`, g_transPriority.base);
 	const tkObj = getKeyInfo();
 	const [keyCtrlPtn, keyNum] = [tkObj.keyCtrlPtn, tkObj.keyNum];
 
@@ -251,7 +255,8 @@ const mainInit = () => {
 	const makerView = g_headerObj.makerView ? ` (${g_headerObj.creatorNames[g_stateObj.scoreId]})` : ``;
 	const transKeyName = getTransKeyName();
 	const autoAll = g_stateObj.autoAll === C_FLG_ON ? ` > AutoPlay` : ``;
-	let difName = `[${getKeyName(g_headerObj.keyLabels[g_stateObj.scoreId])}${transKeyName} / ${g_headerObj.difLabels[g_stateObj.scoreId]}${assistFlg}${shuffleName}${makerView}${autoAll}]`;
+	let difName = `[${getKeyName(g_headerObj.keyLabels[g_stateObj.scoreId])}${transKeyName} / ` +
+		`${g_headerObj.difLabels[g_stateObj.scoreId]}${assistFlg}${shuffleName}${makerView}${autoAll}]`;
 	let creditName = `${musicTitle} / ${artistName}`;
 	if (checkMusicSiz(creditName, g_limitObj.musicTitleSiz) < 12) {
 		creditName = `${musicTitle}`;
@@ -402,8 +407,13 @@ const mainInit = () => {
 		MCombo: [`combo`, 5], Kita: [`kita`, 7], Iknai: [`iknai`, 8], FCombo: [`combo`, 9],
 	};
 	Object.keys(jdgMainScoreObj).forEach(jdgScore =>
-		infoSprite.appendChild(makeCounterSymbol(`lbl${jdgScore}`, g_headerObj.playingWidth - 110 + (g_workObj.nonDefaultSc ? g_headerObj.scAreaWidth : 0),
-			g_cssObj[`common_${jdgMainScoreObj[jdgScore][0]}`], jdgMainScoreObj[jdgScore][1] + 1, 0, g_workObj.scoreDisp)));
+		infoSprite.appendChild(
+			makeCounterSymbol(`lbl${jdgScore}`,
+				g_headerObj.playingWidth - 110 + (g_workObj.nonDefaultSc ? g_headerObj.scAreaWidth : 0),
+				g_cssObj[`common_${jdgMainScoreObj[jdgScore][0]}`], jdgMainScoreObj[jdgScore][1] + 1, 0, g_workObj.scoreDisp
+			)
+		)
+	);
 
 	// パーフェクト演出
 	judgeSprite.appendChild(createDivCss2Label(`finishView`, ``, g_lblPosObj.finishView, g_cssObj.common_kita));
@@ -1296,21 +1306,29 @@ const mainInit = () => {
 
 		// ダミー矢印生成（背面に表示するため先に処理）
 		g_workObj.mkDummyArrow?.[currentFrame]?.forEach(data =>
-			makeArrow(data, ++dummyArrowCnts[data.pos], `dummyArrow`, g_workObj.dummyArrowColors[data.pos], g_workObj.dummyArrowShadowColors[data.pos]));
+			makeArrow(data, ++dummyArrowCnts[data.pos], `dummyArrow`,
+				g_workObj.dummyArrowColors[data.pos],
+				g_workObj.dummyArrowShadowColors[data.pos]));
 
 		// 矢印生成
 		g_workObj.mkArrow[currentFrame]?.forEach(data =>
-			makeArrow(data, ++arrowCnts[data.pos], `arrow`, g_workObj.arrowColors[data.pos], g_workObj.arrowShadowColors[data.pos]));
+			makeArrow(data, ++arrowCnts[data.pos], `arrow`,
+				g_workObj.arrowColors[data.pos],
+				g_workObj.arrowShadowColors[data.pos]));
 
 		// ダミーフリーズアロー生成
 		g_workObj.mkDummyFrzArrow?.[currentFrame]?.forEach(data =>
-			makeFrzArrow(data, ++dummyFrzCnts[data.pos], `dummyFrz`, g_workObj.dummyFrzNormalColors[data.pos],
-				g_workObj.dummyFrzNormalBarColors[data.pos], g_workObj.dummyFrzNormalShadowColors[data.pos]));
+			makeFrzArrow(data, ++dummyFrzCnts[data.pos], `dummyFrz`,
+				g_workObj.dummyFrzNormalColors[data.pos],
+				g_workObj.dummyFrzNormalBarColors[data.pos],
+				g_workObj.dummyFrzNormalShadowColors[data.pos]));
 
 		// フリーズアロー生成
 		g_workObj.mkFrzArrow[currentFrame]?.forEach(data =>
-			makeFrzArrow(data, ++frzCnts[data.pos], `frz`, g_workObj.frzNormalColors[data.pos],
-				g_workObj.frzNormalBarColors[data.pos], g_workObj.frzNormalShadowColors[data.pos]));
+			makeFrzArrow(data, ++frzCnts[data.pos], `frz`,
+				g_workObj.frzNormalColors[data.pos],
+				g_workObj.frzNormalBarColors[data.pos],
+				g_workObj.frzNormalShadowColors[data.pos]));
 
 		// 矢印・フリーズアロー移動＆消去
 		for (let j = 0; j < keyNum; j++) {
@@ -1828,20 +1846,25 @@ const changeAppearanceFilter = (_num = 10) => {
 		$id(`arrowSprite${topNum + j}`).clipPath = topShape;
 		$id(`arrowSprite${bottomNum + j}`).clipPath = bottomShape;
 
-		addTransform(`filterBar${topNum + j}`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + topDist)})`, g_transPriority.layer);
-		addTransform(`filterBar${bottomNum + j}`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist)})`, g_transPriority.layer);
+		addTransform(`filterBar${topNum + j}`, `appearance`,
+			`translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + topDist)})`, g_transPriority.layer);
+		addTransform(`filterBar${bottomNum + j}`, `appearance`,
+			`translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + bottomDist)})`, g_transPriority.layer);
 
 		if (doubleFilterFlg) {
-			addTransform(`filterBar${bottomNum + j}_HS`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + bottomDist)})`, g_transPriority.layer);
-			addTransform(`filterBar${topNum + j}_HS`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + topDist)})`, g_transPriority.layer);
+			addTransform(`filterBar${bottomNum + j}_HS`, `appearance`,
+				`translateY(${wUnit(parseFloat($id(`arrowSprite${j}`).top) + bottomDist)})`, g_transPriority.layer);
+			addTransform(`filterBar${topNum + j}_HS`, `appearance`,
+				`translateY(${wUnit(parseFloat($id(`arrowSprite${j + 1}`).top) + topDist)})`, g_transPriority.layer);
 		}
 	}
 
 	// フィルターバーのパーセント表示（フィルターバーが複数表示されるなど複雑なため、最初の階層グループの位置に追従）
 	if (g_appearanceRanges.includes(g_stateObj.appearance)) {
 		const currentBarNum = g_hidSudObj.std[g_stateObj.appearance][g_stateObj.reverse];
-		addTransform(`filterView`, `appearance`, `translateY(${wUnit(parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
-			(currentBarNum % 2 === 0 ? bottomDist : topDist))})`, g_transPriority.layer);
+		addTransform(`filterView`, `appearance`,
+			`translateY(${wUnit(parseFloat($id(`arrowSprite${currentBarNum % 2}`).top) +
+				(currentBarNum % 2 === 0 ? bottomDist : topDist))})`, g_transPriority.layer);
 		filterView.textContent = `${_num}%`;
 		g_hidSudObj.filterPos = _num;
 	}
@@ -2267,14 +2290,18 @@ const judgeArrow = _j => {
 		const _difCnt = Math.abs(_difFrame);
 		const stepHitTargetArrow = _resultJdg => {
 			const stepDivHit = document.getElementById(`stepHit${_j}`);
-			stepDivHit.style.top = wUnit(currentArrow.prevY - parseFloat($id(`stepRoot${_j}`).top) - 15 + g_workObj.hitPosition * g_workObj.scrollDir[_j]);
+			stepDivHit.style.top = wUnit(
+				currentArrow.prevY - parseFloat($id(`stepRoot${_j}`).top) - 15 + g_workObj.hitPosition * g_workObj.scrollDir[_j]
+			);
 			stepDivHit.style.opacity = 0.75;
 			stepDivHit.classList.value = ``;
 			stepDivHit.classList.add(g_cssObj[`main_step${_resultJdg}`]);
 			stepDivHit.setAttribute(`cnt`, C_FRM_HITMOTION);
 		};
 
-		if (g_stateObj.excessive === C_FLG_ON && _difFrame <= g_judgObj.arrowJ[g_judgPosObj.uwan] && _difFrame > g_judgObj.arrowJ[g_judgPosObj.shobon]) {
+		if (g_stateObj.excessive === C_FLG_ON &&
+			_difFrame <= g_judgObj.arrowJ[g_judgPosObj.uwan] &&
+			_difFrame > g_judgObj.arrowJ[g_judgPosObj.shobon]) {
 			// 空押し判定（有効かつ早押し時のみ）
 			displayDiff(_difFrame);
 			stepHitTargetArrow(`Excessive`);

package/js/lib/result.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2026/09/13
- * Revised : 2026/09/15 (v50.5.1)
+ * Revised : 2026/09/23 (v51.0.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -174,8 +174,10 @@ const resultInit = () => {
 	// キャラクタ、スコア描画
 	Object.keys(jdgScoreObj).forEach(score =>
 		multiAppend(resultWindow,
-			makeCssResultSymbol(`lbl${jdgScoreObj[score].id}`, 0, g_cssObj[`common_${jdgScoreObj[score].color}`], jdgScoreObj[score].pos, jdgScoreObj[score].label),
-			makeCssResultSymbol(`lbl${jdgScoreObj[score].id}S`, 50, g_cssObj.common_score, jdgScoreObj[score].pos, g_resultObj[score], C_ALIGN_RIGHT),
+			makeCssResultSymbol(`lbl${jdgScoreObj[score].id}`, 0,
+				g_cssObj[`common_${jdgScoreObj[score].color}`], jdgScoreObj[score].pos, jdgScoreObj[score].label),
+			makeCssResultSymbol(`lbl${jdgScoreObj[score].id}S`, 50,
+				g_cssObj.common_score, jdgScoreObj[score].pos, g_resultObj[score], C_ALIGN_RIGHT),
 		));
 	if (g_stateObj.autoAll === C_FLG_OFF) {
 		const [lblPosX, dataPosX] = [350, 260];
@@ -249,9 +251,12 @@ const resultInit = () => {
 		// ハイスコア差分描画
 		Object.keys(jdgScoreObj).filter(score => score !== `score`).forEach(score =>
 			multiAppend(resultWindow,
-				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}L1`, C_RLT_BRACKET_L, g_cssObj.result_scoreHiBlanket, jdgScoreObj[score].pos, `(+`),
-				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}LS`, C_RLT_HIDIF_X, g_cssObj.result_scoreHi, jdgScoreObj[score].pos, 0, C_ALIGN_RIGHT),
-				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}L2`, C_RLT_BRACKET_R, g_cssObj.result_scoreHiBlanket, jdgScoreObj[score].pos, `)`),
+				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}L1`, C_RLT_BRACKET_L,
+					g_cssObj.result_scoreHiBlanket, jdgScoreObj[score].pos, `(+`),
+				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}LS`, C_RLT_HIDIF_X,
+					g_cssObj.result_scoreHi, jdgScoreObj[score].pos, 0, C_ALIGN_RIGHT),
+				makeCssResultSymbol(`lbl${jdgScoreObj[score].id}L2`, C_RLT_BRACKET_R,
+					g_cssObj.result_scoreHiBlanket, jdgScoreObj[score].pos, `)`),
 			));
 
 	} else {
@@ -261,7 +266,8 @@ const resultInit = () => {
 	}
 
 	// ゲージ推移グラフの描画
-	const gaugeTransitionWindow = createEmptySprite(divRoot, `gaugeTransitionWindow`, g_windowObj.gaugeTransition, g_cssObj.result_PlayDataWindow);
+	const gaugeTransitionWindow = createEmptySprite(divRoot, `gaugeTransitionWindow`,
+		g_windowObj.gaugeTransition, g_cssObj.result_PlayDataWindow);
 	for (let j = 0; j < 2; j++) {
 		gaugeTransitionWindow.appendChild(
 			createCanvas(`graphGaugeTransition${j > 0 ? j + 1 : ``}`, {
@@ -327,7 +333,8 @@ const resultInit = () => {
 	context.lineWidth = 2;
 
 	let preX, preY;
-	const borderY = (g_limitObj.gaugeTransitionHeight - 2) - g_workObj.lifeBorder * (g_limitObj.gaugeTransitionHeight - 2) / g_headerObj.maxLifeVal + 1;
+	const borderY = (g_limitObj.gaugeTransitionHeight - 2) - g_workObj.lifeBorder *
+		(g_limitObj.gaugeTransitionHeight - 2) / g_headerObj.maxLifeVal + 1;
 
 	for (let i = 0; i < frame.length; i++) {
 		const x = frame[i] * g_limitObj.gaugeTransitionWidth / playingFrame;
@@ -509,11 +516,14 @@ const resultInit = () => {
 			const jdgScore = jdgScoreObj[score];
 			if (score === `score`) {
 				multiAppend(resultWindow,
-					makeCssResultSymbol(`lbl${jdgScore.id}L1`, C_RLT_BRACKET_L, `${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHiBlanket}`,
+					makeCssResultSymbol(`lbl${jdgScore.id}L1`, C_RLT_BRACKET_L,
+						`${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHiBlanket}`,
 						jdgScore.pos, `(${highscoreDfObj[score] >= 0 ? "+" : "－"}`),
-					makeCssResultSymbol(`lbl${jdgScore.id}LS`, C_RLT_HIDIF_X, `${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHi}`,
+					makeCssResultSymbol(`lbl${jdgScore.id}LS`, C_RLT_HIDIF_X,
+						`${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHi}`,
 						jdgScore.pos, Math.abs(highscoreDfObj[score]), C_ALIGN_RIGHT),
-					makeCssResultSymbol(`lbl${jdgScore.id}L2`, C_RLT_BRACKET_R, `${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHiBlanket}`,
+					makeCssResultSymbol(`lbl${jdgScore.id}L2`, C_RLT_BRACKET_R,
+						`${highscoreDfObj.score > 0 ? g_cssObj.result_scoreHiPlus : g_cssObj.result_scoreHiBlanket}`,
 						jdgScore.pos, `)`),
 				);
 			} else {
@@ -529,7 +539,8 @@ const resultInit = () => {
 	const hashTag = (hasVal(g_headerObj.hashTag) ? ` ${g_headerObj.hashTag}` : ``);
 	const keyUnitName = getStgDetailName(getKeyUnitName(g_keyObj.currentKey));
 	const keyUnitAbbName = keyUnitName.slice(0, 1) || ``;
-	let tweetDifData = `${getKeyName(g_headerObj.keyLabels[g_stateObj.scoreId])}${transKeyName}${getStgDetailName(keyUnitAbbName + '-')}${g_headerObj.difLabels[g_stateObj.scoreId]}${assistFlg}`;
+	let tweetDifData = `${getKeyName(g_headerObj.keyLabels[g_stateObj.scoreId])}${transKeyName}` +
+		`${getStgDetailName(keyUnitAbbName + '-')}${g_headerObj.difLabels[g_stateObj.scoreId]}${assistFlg}`;
 	if (g_stateObj.shuffle !== `OFF`) {
 		tweetDifData += `:${shuffleName}`;
 	}
@@ -591,7 +602,8 @@ const resultInit = () => {
 			{ x: 280, dy: -15, hy: 0, siz: 20, color: `#999999`, align: C_ALIGN_CENTER });
 		drawText(unEscapeHtml(mTitleForView[0]), { hy: 1 });
 		drawText(unEscapeHtml(mTitleForView[1]), { hy: 2 });
-		drawText(`${getEmojiForCanvas(g_emojiObj.memo)} ${unEscapeHtml(g_headerObj.tuning)} / ${getEmojiForCanvas(g_emojiObj.musical)} ${unEscapeHtml(artistName)}`,
+		drawText(`${getEmojiForCanvas(g_emojiObj.memo)} ${unEscapeHtml(g_headerObj.tuning)} / ` +
+			`${getEmojiForCanvas(g_emojiObj.musical)} ${unEscapeHtml(artistName)}`,
 			{ hy: mTitleForView[1] !== `` ? 3 : 2, siz: 12 });
 		drawText(unEscapeHtml(settingData.difDataForImage), { hy: 4, siz: getFontSize2(settingData.difDataForImage, flapWidth) });