• 多くのファイルで変更があります。 必要なファイルまで上書きしないよう注意してください。
• danoni_custom.js, danoni_setting.jsの変更はありません。

※ jsファイルは任意です。無くても動作します。

• スキンファイルを使って、全体的な色替えが行えるようになりました。

• スキンが実装され、スキン用のフォルダができました。
• danoni_skin_XXX.css (.js) の形で使用します。 XXX の部分はスキン名で、譜面ヘッダーより指定が可能です。

• スキンをデフォルト以外に設定する場合、作品ページのCanvasタグを取る必要があります。
  canvasに対して画像を貼っている場合、注意してください。
  ※ver10.1.0以降はスキンがデフォルト以外であれば入れていても問題ありません。

<div id="canvas-frame" style="width:600px;">
  <!-- Canvasタグは不要
    <canvas id="layer0" width="600" height="500"></canvas>
    <canvas id="layer1" width="600" height="500"></canvas>
   -->
</div>

• スキンは譜面ヘッダーの「skinType」より設定を行います。
  「light」と指定した場合は、「skin」フォルダに danoni_skin_light.css （、danoni_skin_light.js）が必要です。
  jsファイルは拡張のため、任意です。

|skinType=light|

• そのスキンが特定の作品専用の場合、
  作品ページと同一フォルダにスキンファイル(css, js)を配置させることができます。
  指定するスキン名の前に(..)を入れることで、作品ページと同一フォルダにあるスキンファイルを参照します。
  この場合は、作品ページと同じフォルダに danoni_skin_original.css があれば良いことになります。

|skinType=(..)original|

• スキンは複製して名前を変えれば、カスタマイズすることができます。
  danoni_skin_default.cssが暗背景、danoni_skin_light.cssが明背景用です。
• 今後のバージョンアップにより、若干の項目追加が発生する可能性があります。

• cssファイル側は基本的にカラーコード情報のみです。
  カラーコードを変更することで、画面の見た目を変えることができます。
• 下記であれば、設定画面のDifficulty, Speedの先頭文字の色が変更できます。

.settings_Difficulty::first-letter {
	color:#990000;
}
.settings_Speed::first-letter {
	color:#777700;
}

• jsファイル側は基本フリーフォーマットです。 画面ごとに関数が分かれているため、画面毎に設定値を直接設定します。
  cssファイル側では設定が難しい、座標やサイズを変更することができます。

• 簡易に書けるように、$id(変更したいラベルやボタンのid名)で対象のスタイルが取れるようにしています。
  下記2つは同じ内容です。

$id(`lblArrow`).left = `0px`;
document.querySelector(`#lblArrow`).style.left = `0px`;

• 上記のスキンと同様に、ダンおに本体と同じフォルダ上にjsファイルを置いて読み込ませることが可能になりました。

|skinType=(..)light| 
 -> ダンおに本体フォルダから danoni_skin_light.css, danoni_skin_light.js をスキンファイルとして読込
|settingType=(..)tickle| 
 -> ダンおに本体フォルダから danoni_setting_tickle.js を共通設定として読込
|musicUrl=(..)music.mp3| 
 -> ダンおに本体フォルダからmusic.mp3を読込
|customjs=danoni_custom.js,(..)75.js| 
 -> jsフォルダからdanoni_custom.jsを、ダンおに本体フォルダから75.jsを読込

• danoni_setting.js以外のファイルを共通設定として指定することができます。
  指定できるファイルはこれまで通り1つのままです。
  下記を指定した場合、「danoni_setting_tickle.js」がその作品の共通設定ファイルとなります。

|settingType=tickle| 

• word/mask_data などの背景・マスクモーションに(.bmp/.png/.gif/.jpg)の記述があれば、
  譜面ヘッダー preloadImagesに記述をしなくても自動でプリロードされるようになる機能を追加しました。
  譜面ヘッダー autoPreload を設定するだけで設定完了です。

|autoPreload=true|

• 多くの箇所でCSSクラスを参照することになったため、関数名が変わりました。
  従来の関数はそのまま利用できます。

• 外部ファイルの読み込み関数の仕様が変わり、
  エラー時でも続行可となったことで実現しました。

/**
 * 外部jsファイルの読込
 * @param {string} _url 
 * @param {function} _callback 
 * @param {boolean} _requiredFlg (default : true / 読込必須)
 * @param {string} _charset (default : UTF-8)
 */
function loadScript(_url, _callback, _requiredFlg = true, _charset = `UTF-8`) {
	const script = document.createElement(`script`);
	script.type = `text/javascript`;
	script.src = _url;
	script.charset = _charset;
	script.onload = _ => _callback();
	script.onerror = _ => {
		if (_requiredFlg) {
			makeWarningWindow(C_MSG_E_0041.split(`{0}`).join(_url.split(`?`)[0]));
		} else {
			_callback();
		}
	};
	document.querySelector(`head`).appendChild(script);
}

• スキン利用時（Canvas未使用時）は背景描画のON/OFF機能が無効化されます。
• 代わりに、スキンのjs側で必要に応じて設定します。#divBackが背景用オブジェクトです。

    divBack.style.background = `linear-gradient(#000000, #222222)`;

• 矢印やおにぎり画像について、g_imgObjでまとめて定義するようになりました。
  これにより、g_imgObjの値を変更することでオブジェクトの変更が可能となります。

const g_imgObj = {
	// 矢印及び塗りつぶし部分
	arrow: C_IMG_ARROW,
	arrowShadow: C_IMG_ARROWSD,
	onigiri: C_IMG_ONIGIRI,
	onigiriShadow: C_IMG_AASD,
	giko: C_IMG_GIKO,
	gikoShadow: C_IMG_AASD,
	iyo: C_IMG_GIKO,
	iyoShadow: C_IMG_AASD,
	c: C_IMG_C,
	cShadow: C_IMG_AASD,
	morara: C_IMG_MORARA,
	moraraShadow: C_IMG_AASD,
	monar: C_IMG_MONAR,
	monarShadow: C_IMG_AASD,

	// ステップゾーン
	arrowStep: C_IMG_ARROW,
	arrowShadowStep: C_IMG_ARROWSD,
	onigiriStep: C_IMG_ONIGIRI,
	onigiriShadowStep: C_IMG_AASD,
	gikoStep: C_IMG_GIKO,
	gikoShadowStep: C_IMG_AASD,
	iyoStep: C_IMG_GIKO,
	iyoShadowStep: C_IMG_AASD,
	cStep: C_IMG_C,
	cShadowStep: C_IMG_AASD,
	moraraStep: C_IMG_MORARA,
	moraraShadowStep: C_IMG_AASD,
	monarStep: C_IMG_MONAR,
	monarShadowStep: C_IMG_AASD,

	// ヒットゾーン
	arrowStepHit: C_IMG_ARROW,
	onigiriStepHit: C_IMG_ONIGIRI,
	gikoStepHit: C_IMG_GIKO,
	iyoStepHit: C_IMG_GIKO,
	cStepHit: C_IMG_C,
	moraraStepHit: C_IMG_MORARA,
	monarStepHit: C_IMG_MONAR,

	// カーソル、フリーズアローバー、ライフ用バー、ボーダー表示
	cursor: C_IMG_CURSOR,
	frzBar: C_IMG_FRZBAR,
	lifeBar: C_IMG_LIFEBAR,
	lifeBorder: C_IMG_LIFEBORDER,
};

• これまで通り、スクロール拡張をON/OFFする譜面ヘッダーとしてscrollUseを用意しています。 以下のように指定することで無効化が可能です。

|scrollUse=false|

• 歌詞表示・背景／マスクモーション用に、スクロール拡張版を用意しています。 wordAlt_data, backAlt_data, maskAlt_data の3つで、使い方はリバース版と同じです。 「Cross」「Split」「Flat」などが指定された場合に優先的に適用されます。

• ステップゾーン関係のオブジェクトがstepRootXで一律管理されるようになりました。 座標変更している作品はstepX -> stepRootX へ変更が必要です。

    document.querySelector(`#step0`).style.left = `50px`;  // 変更前
    document.querySelector(`#stepRoot0`).style.left = `50px`;  // 変更後

• またステップゾーンに回転を加えている場合、 指定するオブジェクトにより指定する回転数が異なります。 （既存作品については、手間でも構成オブジェクト個々に回転数を指定した方が無難です。）
  • stepRootX (ステップゾーンルート)： 生成時点からの相対値 (最初が60度、移動後が90度なら指定する値は30度)
  • stepX, stepDivX, stepHitX (ステップゾーン構成オブジェクト)： 指定した絶対値そのまま (移動後が90度なら、指定する値は最初によらず90度固定)

    document.querySelector(`#step0`).style.transform = `rotate(180deg)`; 
    document.querySelector(`#stepHit0`).style.transform = `rotate(180deg)`; 
    document.querySelector(`#stepDiv0`).style.transform = `rotate(180deg)`;   // 新たに追加

• 特殊キーについてもスクロール拡張が可能です。以下のように設定できます。
  複数パターンある場合は$区切りですべて指定してください。
  ただし、デフォルトの設定は不要です。

|scroll6=Cross::1,1,-1,-1,1,1/Split::1,1,1,-1,-1,-1/Alternate::1,-1,1,-1,1,-1$Cross::1,1,-1,-1,1,1/Split::1,1,1,-1,-1,-1/Alternate::1,-1,1,-1,1,-1|