danoniplus 47.5.2 → 47.6.0

package/README.md

@@ -8,116 +8,174 @@
 [![GitHub All Releases](https://dl-danoniplus.qu7-52m.workers.dev/badge/danoniplus/total/)](https://github.com/cwtickle/danoniplus/releases)
 [![GitHub](https://img.shields.io/github/license/cwtickle/danoniplus)](https://github.com/cwtickle/danoniplus/blob/develop/LICENSE)  
 ![AboutDanOni](http://cw7.sakura.ne.jp/danoni/wiki/danonitop.png)
- 
-*Dancing Onigiri "CW Edition"* is a rhythm game. 
-You can create original game data by combining a set of published sources with music files and sequences (text file). See the [wiki](https://github.com/cwtickle/danoniplus-docs/wiki) for details.
 
-The source released here is the **HTML5 (HTML Living Standard) version** of the rhythm game *"Dancing Onigiri"* that was previously released as Flash.
+[ **English** | [**日本語**](#Japanese) ]
 
-Dancing☆Onigiri (CW Edition)は、ブラウザで動作するキーボードを使ったリズムゲームです。  
-公開しているソース一式と、音楽ファイル・譜面データ(テキスト)を組み合わせることで  
-オリジナルのゲームデータを作ることができます。詳細は[Wiki](https://github.com/cwtickle/danoniplus/wiki)をご覧ください。 
-
-ここで公開しているソースは、以前Flashとして公開していたリズムゲーム  
-「Dancing☆Onigiri」の **HTML5 (HTML Living Standard)** 版です。  
-これまでのParaFla版に比べ、さまざまな機能強化を行っています。  
+*Dancing☆Onigiri (CW Edition)* is a high-performance, keyboard-based rhythm game engine that runs natively in web browsers.  
+👉 [**How to Play**](https://github.com/cwtickle/danoniplus-docs/wiki/) / 
+👉 [**Game system overview**](https://github.com/cwtickle/danoniplus-docs/wiki/AboutGameSystem) / 
+👉 [**Shortcut**](https://github.com/cwtickle/danoniplus-docs/wiki/Shortcut)
 
 [![Download](https://dl-danoniplus.qu7-52m.workers.dev/dl-button/danoniplus/)](https://dl-danoniplus.qu7-52m.workers.dev/danoniplus/latest/archive.zip)
 
-## Demo
+- 📹 [Introducing Dancing☆Onigiri (Twitch)](https://www.twitch.tv/videos/1601561414?collection=svxqeEFHGBfVdg)
+- 📹 [Introducing Dancing☆Onigiri (YouTube)](https://www.youtube.com/watch?v=ESTdqf8hpos)
 
-- [Demo1](https://cw7.sakura.ne.jp/danoni/2013/0237_Cllema.html) クレマ / Kinoshita Tamaki
-- [Demo2](https://cw7.sakura.ne.jp/danoni/2017/0305_ShiningStar.html) シャイニングスター / MaouDamashii
-- [Demo3](https://cw7.sakura.ne.jp/danoni/2018/0315_PetitMagie.html) プチ・マギエ / Napi
+## 🚀 Features
 
-## How to Play / 遊び方
+- **Multi-Platform:** Works on any modern web browser. Using keyboard.
+- **Flexible Key Modes:** Supports 5-key, 7-key, 9-key, and more.   
+In addition to **20+ standard modes**, you can define your own **Custom Key Modes**!
+- **Easy Deployment:** No complex backend required. Just upload to your web server.
+- **Highly Customizable:** Highly extensible via advanced chart settings and custom JavaScript (safe execution support).
 
-This is a rhythm game, using Keyboard on the website.   
-There are many playstyles in the *Dancing Onigiri*. For example, 5keys, 7keys, 11keys, etc.  
-The details are as follows.  
--> [How to Play](https://github.com/cwtickle/danoniplus-docs/wiki/AboutGameSystem)
+<img src="https://user-images.githubusercontent.com/44026291/193052877-fc0b5dc6-307c-4311-befa-22ba29580413.png" width="45%"><img src="https://user-images.githubusercontent.com/44026291/226273587-7804ca76-c1a5-490b-9f29-d8f370217d08.png" width="45%">
 
-リズムに合わせてやってくる矢印・フリーズアローを、ステップゾーン上で押すリズムゲームです。  
-キーボードを使って遊びます。  
-下記は7keyの例ですが、他にも5keyや11keyなど多様なプレイスタイルがあります。  
+## 📦 Quick Start
 
-詳細は下記をご覧ください。  
--> [How to Play](https://github.com/cwtickle/danoniplus/wiki/AboutGameSystem)
+1. Download the latest version from [Releases](https://github.com/cwtickle/danoniplus/releases).
+2. Open `danoni/danoni1.html` in your browser.
+3. Enjoy the pre-installed songs immediately!
 
-![HowtoPlay](http://cw7.sakura.ne.jp/danoni/wiki/howtoplay1.png)  
-(The image is under development. / 画像は開発中のものです）
+## 📖 Documentation (Wiki)
 
-### Rule / ゲームのルール
+For more details, please refer to the Wiki:
 
-When you press the keyboard with good timing *:D Perfect!!* *:) O.K.* and life will go up.
-On the other hand, if you remove the timing *:( Bad*, *:_( Miss*, *:( N.G.* will be, life falls.
-If the life of the life gauge remains by the end of the game or it is over the quota, the game is cleared.
+- [🚀 Creating chart Using the Preview Site](https://github.com/cwtickle/danoniplus-docs/wiki/HowToUsePreview-Example)
+- [📝 How to make chart overview](https://github.com/cwtickle/danoniplus-docs/wiki/HowtoMake)
 
-タイミング良くキーボードを押すと(・∀・)ｲｲ!!や(ﾟ∀ﾟ)ｷﾀｰ!!となり、ライフが上がります。  
-一方、タイミングを外すと(´・ω・\`)ｼｮﾎﾞｰﾝ、(\`Д´)ｳﾜｧﾝ、(・A・)ｲｸﾅｲとなり、ライフが下がります。  
-ゲーム終了までにライフゲージのライフが残っているか、ノルマ以上であればゲームクリアです。  
+Need help? Join our community on [Discord (Dancing☆Onigiri Server)](https://discord.gg/YVWUdUGyMy)!
 
-## Works / 公開作品
+## 🎮 Playable Demos
+Experience *Dancing☆Onigiri* in action:
 
-- [Dancing☆Onigiri 難易度表 for.js](http://dodl4.g3.xrea.com/) 
-- [多鍵データベース](http://apoi108.sakura.ne.jp/danoni/ta/)
-- [メジャー多鍵データベース](https://apoi108.sakura.ne.jp/danoni/danoni_all_list/)
-- [Dancing☆Onigiri サイト一覧](https://cw7.sakura.ne.jp/danonidb/)  
-- [Dancing☆Onigiri 作品一覧](https://cw7.sakura.ne.jp/lst/)  
+- [Demo1 (7key, 11key)](https://cw7.sakura.ne.jp/danoni/2013/0237_Cllema.html) Cllema / Kinoshita Tamaki
+- [Demo2 (9Akey)](https://cw7.sakura.ne.jp/danoni/2017/0305_ShiningStar.html) Shining Star  / MaouDamashii
+- [Demo3 (11Wkey)](https://cw7.sakura.ne.jp/danoni/2018/0315_PetitMagie.html) Petit Magie / Napi
+
+## 🌐 Ecosystem & Works
+There are many titles to choose from. Start with a level that suits you!
+
+- [Dancing☆Onigiri Difficulty Table for.js](http://dodl4.g3.xrea.com/) 
+- [The danoni database for minor keymodes](http://apoi108.sakura.ne.jp/danoni/ta/)
+- [The danoni database for simpler keymodes](https://apoi108.sakura.ne.jp/danoni/danoni_all_list/)
+- [Dancing☆Onigiri Site List](https://cw7.sakura.ne.jp/danonidb/)
 
-## How to Make / 作り方
+## 🤝 How to Contribute  
+We welcome contributions of all kinds—from bug reports to new features!
+
+- [Contribution Guide](https://github.com/cwtickle/danoniplus/blob/develop/.github/CONTRIBUTING.md)
+- [Contributors](https://github.com/cwtickle/danoniplus/blob/develop/CONTRIBUTORS.md)
+- Discussion: Join the `#ソース` channel on [Discord](https://discord.gg/YVWUdUGyMy).
+
+## 🏠 Portal Site & Community
+Join the Dancing Onigiri Discord server! We hold regular events there.
+
+- [Dancing☆Onigiri Wiki](https://wikiwiki.jp/danoniplus/)
+- [Dancing☆Onigiri Discord server](https://discord.gg/TegbHFY7zg)
+- [X #danoni](https://x.com/search?q=%23danoni&src=typed_query&f=live)
 
-- [How to make chart overview](https://github.com/cwtickle/danoniplus-docs/wiki/HowtoMake) / [譜面の作成概要](https://github.com/cwtickle/danoniplus/wiki/HowtoMake)
-- [Creating chart Using the Preview Site](https://github.com/cwtickle/danoniplus-docs/wiki/HowToUsePreview-Example) / [プレビューサイトを使った譜面の作成](https://github.com/cwtickle/danoniplus/wiki/HowToUsePreview-Example)
-- [ParaFla!ソース利用者向け移行方法 (Japanese Only)](https://github.com/cwtickle/danoniplus/wiki/forParaFlaUser)
+## 🛠️ Related Tools Repository
 
-### How to Install / 導入方法
+### Dancing☆Onigiri
 
-- Download from [Changelog](https://github.com/cwtickle/danoniplus-docs/wiki/Changelog-latest). You can also install from npm.
-  - [Releases](https://github.com/cwtickle/danoniplus/releases)からダウンロードします。npmからの導入も可能です。
-```
-npm i danoniplus
-```
-- When directly specifying the version name, specify the version after @ as shown below.
-  - バージョン名を直接指定するときは下記のように @以降をバージョン指定します。
-```
-npm i danoniplus@26.1.2
-```
+- [Dancing☆Onigiri Preview](https://danonicw.skr.jp/) ([Repository](https://github.com/cwtickle/danoniplus-preview)) @cwtickle
+- [Dancing☆Onigiri Editor(for CW Edition)](https://github.com/superkuppabros/danoni-editor) @superkuppabros
+- [Tool for Converting Dan-Oni Song Data to JS file](https://github.com/suzme/danoni-base64) @suzme
+- [Dan-Oni Arrow Color Tool](https://github.com/suzme/danoni-colorpicker) @suzme
+- [Gauge Calculator for Dan-Oni](http://www.omission0.com/other/gauge_calculator/) @goe0
+- [Waveform Analysis Tool for Dan-Oni](https://github.com/suzme/danoni-waveform) @suzme
+- [Dan-Oni StepViewer](https://github.com/ittn-exe/danoni_stepViewer) @ittn-exe
 
-## System requirements / 動作環境
+#### CustomJS
 
-- Windows, Mac OS, Linux, Android, iPad OS
-- Google Chrome, Microsoft Edge, Opera, Vivaldi, Safari (WebKit), Firefox (Gecko) 
+- [Dancing☆Onigiri 9tkey](https://github.com/suzme/danoni-9t) @suzme
+- [danoni-key-change](https://github.com/suzme/danoni-key-change) @suzme
 
-## Difference from Flash Version / Flash版との差異 (Japanese Only)
+### Kirizma / Keyboard Rhythmer
 
-*Dancing Onigiri "CW Edition"* basically conforms to the specifications of *ParaFla!* Version, but the details are different from the conventional ones. See below for details.
+- [Kirizma (CW Edition)](https://github.com/cwtickle/kirizma-cw) @cwtickle
+- [Chart character converter from Dan-Oni](https://github.com/suzme/kirizma-converter) @suzme
+- [Kirizma Lyrics Display Generator](https://github.com/prlg25/kirizma_lyric) @prlg25
+- [The difficulty table for Kirizma](https://github.com/suzme/kirizma) @suzme
 
-Dancing☆Onigiri (CW Edition)では基本的にParaFla!版の仕様に準拠していますが、  
-細かい点が従来と異なります。詳細は下記をご覧ください。
+### Punching◇Panels
 
-- [Difference from Flash Version / Flash版との差異 (Japanese)](https://github.com/cwtickle/danoniplus/wiki/DifferenceFromFlashVer)  
+- [Punching◇Panels](https://github.com/cwtickle/punching-panels) @cwtickle
+- [Punching◇Panels Editor](https://github.com/suzme/punpane-editor) @suzme
+- [The difficulty table for Punching◇Panels](https://github.com/suzme/punpane) @suzme
 
-## How to Contribute / 開発者の方へ  
+## ⚖️ License
 
-If you would like to cooperate with the development, please see below. Even if you don't have a GitHub account, you can cooperate!
+This software is released under the MIT License, see LICENSE.  
 
-開発にご協力いただける方は、下記をご覧ください。GitHubアカウントの無い方でも協力できます！
+---
 
-- [How to Contribute / 貢献の仕方](https://github.com/cwtickle/danoniplus/blob/develop/.github/CONTRIBUTING.md)   
-- [GitLab community for requests and bug reports / 要望・不具合報告(GitLab Issues)](https://gitlab.com/cwtickle/danonicw/-/issues)
-- [Contributors / コントリビューター](https://github.com/cwtickle/danoniplus/blob/develop/CONTRIBUTORS.md)
+<a id="Japanese"></a>
 
-## Portal Site / ポータルサイト
+[ **[English](#top)** | **日本語** ]
 
-- [Dancing☆Onigiri Wiki](https://wikiwiki.jp/danoniplus/)
+*Dancing☆Onigiri (CW Edition)* は、Webブラウザ上で動作するキーボード操作のリズムゲームエンジンです。  
+👉 [**遊び方**](https://github.com/cwtickle/danoniplus/wiki/) / 
+👉 [**操作説明**](https://github.com/cwtickle/danoniplus/wiki/AboutGameSystem) / 
+👉 [**ショートカット一覧**](https://github.com/cwtickle/danoniplus/wiki/Shortcut)
 
-## Community / コミュニティ
+[![Download](https://dl-danoniplus.qu7-52m.workers.dev/dl-button/danoniplus/)](https://dl-danoniplus.qu7-52m.workers.dev/danoniplus/latest/archive.zip)
 
+- 📹 [Dancing☆Onigiriの紹介 (Twitch)](https://www.twitch.tv/videos/1601561414?collection=svxqeEFHGBfVdg)
+- 📹 [Dancing☆Onigiriの紹介 (YouTube)](https://www.youtube.com/watch?v=ESTdqf8hpos)
+
+## 🚀 特徴
+- **マルチプラットフォーム:** モダンなブラウザがあれば、PCでもスマホでも動作します。
+- **多彩なキーモード:** 5key、7key、9Akeyなど、20種類以上の標準モードに加え、独自の**カスタムキーモード**も作成可能です。
+- **容易な起動:** サーバーにファイルをアップロードするだけで、すぐに自分の譜面を公開できます。
+- **高度なカスタマイズ性:** 豊富な譜面設定やカスタムJavaScript（安全な実行環境をサポート）により、自由度の高い演出が可能です。
+
+<img src="https://user-images.githubusercontent.com/44026291/193052561-235aa8b9-43a3-4045-a417-26fbced5beb0.png" width="45%"><img src="https://user-images.githubusercontent.com/44026291/226273658-7afdc349-4e0c-4ae8-9d70-2f30eb80ab5f.png" width="45%">
+
+## 📦 クイックスタート
+1. [リリースページ](https://github.com/cwtickle/danoniplus/releases) から最新版をダウンロードします。
+2. `danoni/danoni1.html` をブラウザで開きます。
+3. プリセット曲ですぐに動作を確認できます。
+
+## 📖 ドキュメント (Wiki)
+詳細な使い方は公式Wikiを確認してください：
+
+- [🚀 プレビューサイトを使った譜面作成](https://github.com/cwtickle/danoniplus/wiki/HowToUsePreview-Example)
+- [📝 譜面制作の概要](https://github.com/cwtickle/danoniplus/wiki/HowtoMake)
+
+質問や交流は [Dancing☆Onigiri Discord サーバー](https://discord.gg/YVWUdUGyMy) の「#一般」チャンネルへどうぞ！
+
+## 🎮 デモ
+Dancing☆Onigiriを実際にプレイしてみましょう！
+
+- [Demo1 (7key, 11key)](https://cw7.sakura.ne.jp/danoni/2013/0237_Cllema.html) クレマ / 木下たまき
+- [Demo2 (9Akey)](https://cw7.sakura.ne.jp/danoni/2017/0305_ShiningStar.html) シャイニングスター / 魔王魂
+- [Demo3 (11Wkey)](https://cw7.sakura.ne.jp/danoni/2018/0315_PetitMagie.html) プチ・マギエ / Napi
+
+## 🌐 公開作品
+数多くの作品が公開されています。自分に合った難易度から始めていきましょう！
+
+- [Dancing☆Onigiri 難易度表 for.js](http://dodl4.g3.xrea.com/) 
+- [多鍵データベース](http://apoi108.sakura.ne.jp/danoni/ta/)
+- [メジャー多鍵データベース](https://apoi108.sakura.ne.jp/danoni/danoni_all_list/)
+- [Dancing☆Onigiri サイト一覧](https://cw7.sakura.ne.jp/danonidb/)
+
+## 🤝 リポジトリへの貢献方法  
+Dancing☆Onigiri (CW Edition)に関する機能要望・不具合報告については下記をご覧ください。参加歓迎です。
+
+- [Contribution Guide](https://github.com/cwtickle/danoniplus/blob/develop/.github/CONTRIBUTING.md)
+- [Contributors](https://github.com/cwtickle/danoniplus/blob/develop/CONTRIBUTORS.md)
+- [Dancing☆Onigiri Discord サーバー](https://discord.gg/YVWUdUGyMy)の`#ソース`チャンネルで各種要望・不具合報告を受け付けています。
+
+## 🏠 関連ポータル・コミュニティ
+Dancing☆OnigiriのDiscordサーバーにぜひお越しください！ 定期的にイベントも開催しています。
+
+- [Dancing☆Onigiri Wiki](https://wikiwiki.jp/danoniplus/)
 - [Dancing☆Onigiri Discord server](https://discord.gg/TegbHFY7zg)
-- [X #danoni](https://x.com/search?q=%23danoni&src=typed_query&f=live)
+- [X (旧Twitter) #danoni](https://x.com/search?q=%23danoni&src=typed_query&f=live)
 
-## Related Tools Repository / 関連リポジトリ・ツール
+## 🛠️ 関連ツール・リポジトリ
 
 ### Dancing☆Onigiri
 
@@ -127,14 +185,14 @@ If you would like to cooperate with the development, please see below. Even if y
 - [ダンおに矢印色ツール](https://github.com/suzme/danoni-colorpicker) @suzme
 - [ダンおにゲージ計算機 (Gauge Calculator)](http://www.omission0.com/other/gauge_calculator/) @goe0
 - [ダンおに波形解析ツール](https://github.com/suzme/danoni-waveform) @suzme
-- [danoni_stepViewer](https://github.com/ittn-exe/danoni_stepViewer) @ittn-exe
+- [ダンおに譜面ビューア](https://github.com/ittn-exe/danoni_stepViewer) @ittn-exe
 
-#### CustomJS / カスタマイズ
+#### カスタムスクリプト
 
 - [Dancing☆Onigiri 9tkey](https://github.com/suzme/danoni-9t) @suzme
 - [danoni-key-change](https://github.com/suzme/danoni-key-change) @suzme
 
-#### Conversion Tool from Legacy Flash Environments / 旧Flashからの変換ツール
+#### 旧Flashからの変換ツール
 
 - [Dancing☆Onigiri Chart Reverser](https://github.com/cwtickle/danoniplus-reverser) @cwtickle
 - [Dancing☆Onigiri Chart Converter](https://github.com/cwtickle/danoniplus-converter) @cwtickle
@@ -152,6 +210,5 @@ If you would like to cooperate with the development, please see below. Even if y
 - [Punching◇Panels エディター](https://github.com/suzme/punpane-editor) @suzme
 - [Punching◇Panels 難易度表](https://github.com/suzme/punpane) @suzme
 
-## License / ライセンス
-
-This software is released under the MIT License, see LICENSE.  
+## ⚖️ ライセンス (License)
+このソフトウェアは **MIT License** のもとで公開されています。詳細は LICENSE ファイルをご確認ください。

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2026/05/04
+ * Revised : 2026/05/12
  *
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 47.5.2`;
-const g_revisedDate = `2026/05/04`;
+const g_version = `Ver 47.6.0`;
+const g_revisedDate = `2026/05/12`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -10194,6 +10194,9 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	// カーソル位置の初期化
 	appearConfigSteps(g_keycons.keySwitchNum);
 
+	keyconfigKeyboardPreview.dispose();
+	keyconfigKeyboardPreview.init(divRoot);
+
 	// ラベル・ボタン描画
 	multiAppend(divRoot,
 
@@ -10342,6 +10345,652 @@ const keyConfigInit = (_kcType = g_kcType) => {
 	document.oncontextmenu = () => false;
 };
 
+/**
+ * キーボードレイアウトプレビュー（Canvas版）
+ *
+ * キーコンフィグ画面(divRoot)配下に以下の要素を追加する:
+ *   - [Preview] ボタン (createCss2Button)
+ *   - プレビュー用コンテナ div (createEmptySprite)
+ *     ├ キーボード背景 canvas  (_state.canvasBase)  ← 起動時のみ描画
+ *     └ マッピング強調 canvas  (_state.canvasMap)   ← キー変更・表示時に再描画
+ *
+ * 前提:
+ *   - g_kCd         : グローバル定義済み。ロケール切替後は g_lang_kCd がマージ済み。
+ *                     未設定キーは空文字列 `""` で初期化。
+ *                     右Shift/Ctrl/Alt は 256/257/258 の独自コードで定義。
+ *   - g_btnWidth()  : 画面の横幅(px)を返すグローバル関数。
+ *   - g_sHeight     : 画面の縦幅(px)を保持するグローバル変数。
+ *   - createCss2Button, createEmptySprite : danoniplus 本体のグローバル関数。
+ *
+ * 使い方:
+ *   【初期化時】
+ *     keyconfigKeyboardPreview.init(divRoot);
+ *
+ *   【キー割り当てが変わった時】
+ *     keyconfigKeyboardPreview.refresh();
+ *     ※ g_keyObj.currentKey / currentPtn から自動取得する
+ *
+ *   【キーコンフィグ画面を離脱する時】
+ *     keyconfigKeyboardPreview.dispose();
+ */
+
+const keyconfigKeyboardPreview = (() => {
+
+	// -------------------------------------------------------------------------
+	// 定数
+	// -------------------------------------------------------------------------
+	const C_PREVIEW_ID = `kbPreviewArea`;
+	const C_BTN_ID = `btnKbPreview`;
+	const C_CANVAS_BASE_ID = `kbCanvasBase`;
+	const C_CANVAS_MAP_ID = `kbCanvasMap`;
+
+	// 色定義（既存ゲームの配色に合わせたダーク系）
+	const C_COLOR = {
+		keyFill: `#1a1a2e`,   // 通常キー背景
+		keyStroke: `#555577`,   // 通常キー枠
+		keyText: `#ccccdd`,   // 通常キー文字
+		keySubText: `#888899`,   // サブラベル（Shift面）
+		mappedFill: `#003366`,   // メインキー背景
+		mappedStroke: `#4488ff`,   // メインキー枠
+		mappedText: `#aaddff`,   // メインキー文字
+		altFill: `#3e3e1a`,   // 代替キー背景
+		altStroke: `#777755`,   // 代替キー枠
+		altText: `#eeeecc`,   // 代替キー文字
+		bgFill: `#0d0d1a`,   // Canvas 背景
+		legendText: `#888899`,   // 凡例テキスト
+	};
+
+	// ボタン配置
+	// X・W は init() 内で動的計算（g_btnWidth() 依存）
+	// Y: KeyConfig テキスト上の余白に収まるよう小さく設定
+	const BTN_H = 18;   // ボタン高さ
+	const BTN_Y = 3;    // divRoot 内 Y 座標
+	const BTN_FS = 11;   // ボタンのフォントサイズ(px)
+
+	// プレビューエリア
+	// X: canvas を divRoot 内で水平センタリング（init で動的計算）
+	// Y: g_sHeight に対して垂直センタリング（init で動的計算）
+
+	// 凡例エリアの高さ
+	const LEGEND_H = 25;
+
+	// -------------------------------------------------------------------------
+	// キーレイアウト定義
+	//
+	// 各行: { offsetX, keys }
+	//   offsetX : 行左端の水平オフセット（単位: BASE_KEY_W）。正の値 = 右にずらす。
+	//   keys    : キー定義の配列
+	//
+	// 各キー: { kc, w, h?, label? }
+	//   kc    : keyCode（数値）。-1 はスペーサー（描画・キャッシュなし）。
+	//   w     : 幅倍率（BASE_KEY_W 基準。省略時 1）
+	//   h     : 高さ倍率（省略時 1）
+	//   label : 省略時は g_kCd[kc] を参照。g_kCd が空文字のキーや
+	//           左右を区別したいキーに指定する。
+	//
+	// 右Shift/Ctrl/Alt は danoniplus 独自コード 256〜258 を使用。
+	// -------------------------------------------------------------------------
+
+	// メインキーボード部（Fn行 + 数字行 + QWERTY + ASDF + ZXCV + スペース行）
+	//
+	// 各行の offsetX 設計（1u = BASE_KEY_W）:
+	//   Fn行    0u  Esc が左端
+	//   数字行  0u  229(IME/`) が左端
+	//   QWERTY  0u  Tab(1.5u) が左端、左端位置は数字行と揃う
+	//   ASDF    0u  CapsLk を 2.25u にして L)Shift 左端と揃える
+	//   ZXCV    0.25u  標準キーボードの行オフセットを offsetX + L)Shift 拡大で再現
+	//   スペース行 0u
+	//
+	// JIS と US の主な違い:
+	//   数字行: JIS は intlYen(220) あり、US はなし（BackSpace が広い）
+	//   QWERTY: JIS は [ の右にスペーサー、US はなし（Enter が横長）
+	//   ASDF  : JIS は ¥(221) あり、US はなし（Enter が横長）
+	//   ZXCV  : JIS は intlRo(226) あり、US はなし（R)Shift が広い）
+	//   Enter : JIS は縦長(h=2)、US は横長(h=1, w=2.25)
+	/**
+	 * g_localeObj.val に応じた MAIN_ROWS を生成して返す。
+	 * drawBase / calcScale の都度呼び出し、locale 変化を反映する。
+	 *
+	 * @returns {Array} MAIN_ROWS 相当の配列
+	 */
+	const buildMainRows = () => {
+		const isJa = g_localeObj.val === `Ja`;
+		return [
+			// Row0: Fn キー行（JIS/US 共通）
+			{
+				offsetX: 0,
+				keys: [
+					{ kc: 27 },                   // Esc
+					{ kc: -1, w: 0.5 },                   // スペーサー
+					{ kc: 112 }, { kc: 113 }, { kc: 114 }, { kc: 115 },
+					{ kc: -1, w: 0.25 },                   // スペーサー
+					{ kc: 116 }, { kc: 117 }, { kc: 118 }, { kc: 119 },
+					{ kc: -1, w: 0.25 },                   // スペーサー
+					{ kc: 120 }, { kc: 121 }, { kc: 122 }, { kc: 123 },
+				],
+			},
+			// Row1: 数字行
+			// JIS: ..., 222, 220(intlYen, 0.75u), BS(1.5u)
+			// US : ..., 222,                      BS(2.25u)
+			{
+				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 },
+					...(isJa
+						? [{ kc: 220, w: 0.75 }, { kc: 8, w: 1.5 }]  // JIS: intlYen + BS
+						: [{ kc: 8, w: 2.25 }]   // US : BS のみ（広い）
+					),
+				],
+			},
+			// Row2: QWERTY
+			// JIS: ..., [, スペーサー(0.5u), Enter(縦長 h=2, w=1.25)
+			// 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 },
+					...(isJa
+						? [{ kc: 219 }, { kc: -1, w: 0.5 }, { kc: 13, w: 1.25, h: 2 }]  // JIS: [, スペーサー, Enter縦長
+						: [{ kc: 219 }, { kc: 221 }]  // US : [, ]
+					),
+				],
+			},
+			// Row3: ASDF
+			// JIS: ..., L, ;, ', ¥(221)
+			// US : ..., L, ;, '      ← ¥なし（Enter が下まで伸びる縦長分を吸収）
+			{
+				offsetX: 0,
+				keys: [
+					{ kc: 20, w: 2.25, label: `CapsLk` },
+					{ 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: 2.25 }] // US : Enter横長
+					),
+				],
+			},
+			// Row4: ZXCV（標準配列は ASDF より約 0.25u 右にオフセット）
+			// JIS: ..., /, intlRo(226), R)Shift(1.25u)
+			// US : ..., /,              R)Shift(2.5u)
+			{
+				offsetX: 0.25,
+				keys: [
+					{ kc: 16, w: 2.5 },
+					{ 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.25 }]  // JIS: intlRo + R)Shift
+						: [{ kc: 256, w: 2.5 }]   // US : R)Shift のみ（広い）
+					),
+				],
+			},
+			// Row5: スペースバー行（JIS/US 共通）
+			{
+				offsetX: 0,
+				keys: [
+					{ 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 },
+						]
+					),
+					{ kc: 258 },
+					{ kc: 91 },
+					{ kc: 257, w: 1.25 },
+				],
+			},
+		];
+	};
+	// 編集キークラスター（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 }] },  // ← ↓ →
+	];
+
+	// テンキー（Space行の下に余白を空けて横に羅列）
+	// kc は g_kCd 定義に従う: 96〜111=テンキー各種, 144=NumLk
+	// 標準テンキーレイアウト:
+	//   [NumLk] [T/] [T*] [T-]
+	//   [T7][T8][T9] [T+]
+	//   [T4][T5][T6] [T+]  ← T+ は縦2u
+	//   [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.
+	];
+
+	// -------------------------------------------------------------------------
+	// 内部状態
+	// -------------------------------------------------------------------------
+	const _state = {
+		visible: false,
+		mappedSet: new Set(),   // メインキー（各矢印の index 0）
+		altSet: new Set(),   // 代替キー（各矢印の index 1 以降）
+		canvasBase: null,
+		canvasMap: null,
+		keyRects: [],          // { kc, x, y, w, h, label } — drawMap で照合するキャッシュ
+		scale: 1,           // BASE_KEY_W/H に掛けるスケール係数
+		cvsW: 500,         // 実際の Canvas 幅（スケール計算後）
+		cvsH: 240,         // 実際の Canvas 高さ（スケール計算後）
+	};
+
+	// -------------------------------------------------------------------------
+	// スケール計算
+	// -------------------------------------------------------------------------
+
+	/**
+	 * g_btnWidth() / g_sHeight を元にスケール係数と Canvas サイズを算出して
+	 * _state に書き込む。init 時に呼ぶ。
+	 *
+	 * 基準サイズ（フルキーボード = メイン + ナビクラスター）:
+	 *   横: MAIN最大行幅 + ナビ幅(3キー) + 余白
+	 *   縦: 6行 × (BASE_KEY_H + BASE_KEY_GAP) - BASE_KEY_GAP
+	 *   BASE_KEY_W = BASE_KEY_H = 28px、BASE_KEY_GAP = 3px を基準とする。
+	 */
+	const BASE_KEY_W = 28;
+	const BASE_KEY_H = 28;
+	const BASE_KEY_GAP = 3;
+	const MAIN_ROWS_LEN = 6;  // MAIN_ROWS の行数（Fn行を含む）
+
+	// 行幅計算（スペーサー含む）
+	const calcRowBaseW = row =>
+		row.keys.reduce((acc, k) => acc + (k.w || 1) * BASE_KEY_W + BASE_KEY_GAP, -BASE_KEY_GAP);
+
+	const BASE_NAV_W = 3 * BASE_KEY_W + 2 * BASE_KEY_GAP;  // NAV は 3列固定
+	const BASE_ROW_H = MAIN_ROWS_LEN * (BASE_KEY_H + BASE_KEY_GAP) - BASE_KEY_GAP;  // MAIN+NAV 分の高さ
+	const NUM_ROWS_LEN = 6;  // テンキーの行数
+	const NUM_GAP_H = BASE_KEY_H * 0.4;  // テンキー上部の余白（基準キー高の40%）
+	const BASE_NUM_ROW_H = NUM_ROWS_LEN * (BASE_KEY_H + BASE_KEY_GAP) - BASE_KEY_GAP;  // テンキー部の高さ
+	const BASE_NUM_W = 4 * BASE_KEY_W + 3 * BASE_KEY_GAP;  // テンキー横幅（4列固定）
+
+	const calcScale = () => {
+		// locale に依存した行幅を毎回計算する
+		const rows = buildMainRows();
+		const baseMainW = Math.max(...rows.map(calcRowBaseW));
+		// 横幅: メイン + NAV + テンキー + 余白
+		const totalW = baseMainW + BASE_KEY_GAP * 2 + BASE_NAV_W + BASE_KEY_GAP * 2
+			+ BASE_KEY_GAP * 3 + BASE_NUM_W;
+
+		const availW = g_btnWidth();
+		const availH = g_sHeight - 200 - LEGEND_H;  // 下部 UI ぶんを除いた高さ
+
+		// 縦幅基準: MAIN/NAV 高さ と テンキー高さ（余白込み）の大きい方
+		const totalH = Math.max(BASE_ROW_H, BASE_NUM_ROW_H + Math.ceil(NUM_GAP_H));
+
+		const scaleW = availW / totalW;
+		const scaleH = availH / totalH;
+		_state.scale = Math.min(scaleW, scaleH, 1.5);  // 最大 1.5 倍まで拡大可
+
+		_state.cvsW = Math.floor(totalW * _state.scale);
+		_state.cvsH = Math.floor(totalH * _state.scale) + LEGEND_H;
+	};
+
+	// -------------------------------------------------------------------------
+	// ラベル取得
+	// -------------------------------------------------------------------------
+
+	/**
+	 * keyCode に対応する [primaryLabel, subLabel] を返す。
+	 * kc が -1（スペーサー）の場合は [``, ``] を返す。
+	 * g_kCd の値は `"primary"` または `"primary sub"` 形式の文字列。
+	 *
+	 * @param {number}           kc
+	 * @param {string|undefined} forcedLabel - ROWS の label 指定がある場合に優先
+	 * @returns {string[]} [primary, sub]
+	 */
+	const getKeyLabels = (kc, forcedLabel) => {
+		if (kc < 0) return [``, ``];
+		if (forcedLabel !== undefined) return [forcedLabel, ``];
+
+		const raw = g_kCd[kc];
+		if (raw && raw !== `- - -` && raw !== `Unknown`) {
+			const parts = raw.split(` `);
+			return [parts[0] || ``, parts[1] || ``];
+		}
+		return [`?`, ``];
+	};
+
+	// -------------------------------------------------------------------------
+	// Canvas ヘルパー
+	// -------------------------------------------------------------------------
+
+	// スケール済みの各寸法を返すヘルパー
+	const kw = w => Math.floor(w * BASE_KEY_W * _state.scale + (w - 1) * BASE_KEY_GAP * _state.scale);
+	const kh = h => Math.floor(h * BASE_KEY_H * _state.scale + (h - 1) * BASE_KEY_GAP * _state.scale);
+	const kg = () => Math.max(1, Math.round(BASE_KEY_GAP * _state.scale));
+	const kr = () => Math.max(2, Math.round(4 * _state.scale));
+
+	const roundRect = (ctx, x, y, w, h, r) => {
+		ctx.beginPath();
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + w - r, y);
+		ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+		ctx.lineTo(x + w, y + h - r);
+		ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+		ctx.lineTo(x + r, y + h);
+		ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+		ctx.closePath();
+	};
+
+	const drawKeyLabel = (ctx, x, y, keyW, keyH, primary, sub, textColor, subColor) => {
+		const fs = primary.length >= 5
+			? Math.max(6, Math.floor(8 * _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.textAlign = `right`;
+			ctx.textBaseline = `top`;
+			ctx.fillText(sub, x + keyW - 2, y + 2);
+		}
+		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 drawOneKey = (ctx, x, y, keyW, keyH, fill, stroke, lw, primary, sub, textColor, subColor) => {
+		roundRect(ctx, x + 0.5, y + 0.5, keyW - 1, keyH - 1, kr());
+		ctx.fillStyle = fill;
+		ctx.strokeStyle = stroke;
+		ctx.lineWidth = lw;
+		ctx.fill();
+		ctx.stroke();
+		drawKeyLabel(ctx, x, y, keyW, keyH, primary, sub, textColor, subColor);
+	};
+
+	// -------------------------------------------------------------------------
+	// レイアウト計算・描画
+	// -------------------------------------------------------------------------
+
+	/**
+	 * rows 配列から各キーの矩形座標を計算し、
+	 * canvas に描画しながら keyRects へキャッシュする。
+	 *
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {Array}  rows    - MAIN_ROWS または NAV_ROWS（{offsetX, keys} 形式）
+	 * @param {number} originX - セクション左端の X 座標（canvas 座標）
+	 * @param {number} originY - セクション上端の Y 座標（canvas 座標）
+	 */
+	const layoutSection = (ctx, rows, originX, originY) => {
+		const gap = kg();
+		const baseKeyH = kh(1);
+
+		rows.forEach((rowDef, rowIdx) => {
+			if (rowDef.keys.length === 0) return;
+
+			const rowY = originY + rowIdx * (baseKeyH + gap);
+			const startX = originX + Math.floor(rowDef.offsetX * BASE_KEY_W * _state.scale);
+			let curX = startX;
+
+			rowDef.keys.forEach(keyDef => {
+				const keyW = kw(keyDef.w || 1);
+				const keyH = kh(keyDef.h || 1);
+
+				if (keyDef.kc >= 0) {
+					_state.keyRects.push({
+						kc: keyDef.kc,
+						x: curX,
+						y: rowY,
+						w: keyW,
+						h: keyH,
+						label: keyDef.label,
+					});
+					const [primary, sub] = getKeyLabels(keyDef.kc, keyDef.label);
+					drawOneKey(
+						ctx, curX, rowY, keyW, keyH,
+						C_COLOR.keyFill, C_COLOR.keyStroke, 1,
+						primary, sub, C_COLOR.keyText, C_COLOR.keySubText
+					);
+				}
+
+				curX += keyW + gap;
+			});
+		});
+	};
+
+	/**
+	 * キーボード背景レイヤーを描画し keyRects をキャッシュする。
+	 * init 時に呼ぶ。
+	 */
+	const drawBase = () => {
+		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.style.width = wUnit(_state.cvsW);
+		canvas.style.height = wUnit(_state.cvsH);
+
+		const ctx = canvas.getContext(`2d`);
+		ctx.scale(dpr, dpr);
+		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
+		ctx.fillStyle = C_COLOR.bgFill;
+		ctx.fillRect(0, 0, _state.cvsW, _state.cvsH);
+
+		_state.keyRects = [];
+
+		const mainRows = buildMainRows();
+		const gap = kg();
+		const baseMainW = Math.max(...mainRows.map(calcRowBaseW));
+		const mainW = Math.floor(baseMainW * _state.scale);
+		const originY = gap;
+		const navOriginX = mainW + gap * 3;
+
+		// テンキー: NAV クラスターの右に gap*3 の余白を空けて配置
+		const numOriginX = navOriginX + Math.floor(BASE_NAV_W * _state.scale) + gap * 3;
+		// テンキーは MAIN 全体に対して縦方向センタリング
+		const numH = Math.floor(BASE_NUM_ROW_H * _state.scale);
+		const mainH = Math.floor(BASE_ROW_H * _state.scale);
+		const numOriginY = originY + Math.floor((mainH - numH) / 2);
+
+		layoutSection(ctx, mainRows, 0, originY);
+		layoutSection(ctx, NAV_ROWS, navOriginX, originY);
+		layoutSection(ctx, NUM_ROWS, numOriginX, numOriginY);
+
+		// 凡例
+		const ly = _state.cvsH - 10;
+		const fnt = `${Math.max(9, Math.floor(10 * _state.scale))}px ${getBasicFont()}`;
+		ctx.font = fnt;
+		ctx.textAlign = `left`;
+		ctx.textBaseline = `middle`;
+
+		const drawLegend = (x, fill, stroke, label) => {
+			roundRect(ctx, x, ly, 10, 10, 2);
+			ctx.fillStyle = fill; ctx.fill();
+			ctx.strokeStyle = stroke; ctx.lineWidth = 1; ctx.stroke();
+			ctx.fillStyle = C_COLOR.legendText;
+			ctx.fillText(label, x + 14, ly + 5);
+		};
+
+		drawLegend(8, C_COLOR.keyFill, C_COLOR.keyStroke, g_lblNameObj.unallocated);
+		drawLegend(95, C_COLOR.mappedFill, C_COLOR.mappedStroke, g_lblNameObj.allocated);
+		drawLegend(182, C_COLOR.altFill, C_COLOR.altStroke, g_lblNameObj.altAllocated);
+	};
+
+	/**
+	 * マッピング強調レイヤーを再描画する。
+	 * メインキー（mappedSet）を青系、代替キー（altSet）を黄系で色分けする。
+	 * 同一キーにメインと代替が重なる場合はメインを優先する。
+	 */
+	const drawMap = () => {
+		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.style.width = wUnit(_state.cvsW);
+		canvas.style.height = wUnit(_state.cvsH);
+
+		const ctx = canvas.getContext(`2d`);
+		ctx.scale(dpr, dpr);
+		ctx.clearRect(0, 0, _state.cvsW, _state.cvsH);
+
+		// 代替キーを先に描画し、メインキーで上書きすることで優先度を表現
+		const drawKey = (fill, stroke, text) => rect => {
+			const [primary, sub] = getKeyLabels(rect.kc, rect.label);
+			roundRect(ctx, rect.x + 0.5, rect.y + 0.5, rect.w - 1, rect.h - 1, kr());
+			ctx.fillStyle = fill;
+			ctx.strokeStyle = stroke;
+			ctx.lineWidth = 1.5;
+			ctx.fill();
+			ctx.stroke();
+			drawKeyLabel(ctx, rect.x, rect.y, rect.w, rect.h, primary, sub, text, text);
+		};
+
+		_state.keyRects
+			.filter(rect => _state.altSet.has(rect.kc) && !_state.mappedSet.has(rect.kc))
+			.forEach(drawKey(C_COLOR.altFill, C_COLOR.altStroke, C_COLOR.altText));
+
+		_state.keyRects
+			.filter(rect => _state.mappedSet.has(rect.kc))
+			.forEach(drawKey(C_COLOR.mappedFill, C_COLOR.mappedStroke, C_COLOR.mappedText));
+	};
+
+	// -------------------------------------------------------------------------
+	// 公開 API
+	// -------------------------------------------------------------------------
+
+	/**
+	 * キーボードプレビューを初期化し、ボタンと Canvas コンテナを divRoot に追加する。
+	 *
+	 * @param {HTMLElement} divRoot - キーコンフィグ画面のルート div
+	 */
+	const init = divRoot => {
+		calcScale();
+
+		// ボタン: キャンバス横幅中央に配置、小さいサイズ
+		const btnW = 80;
+		const 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,
+			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 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`,
+		});
+		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;
+
+		drawBase();
+	};
+
+	/**
+	 * プレビューの表示 / 非表示を切り替える。
+	 * 表示するたびにマッピングレイヤーを最新化する。
+	 */
+	const togglePreview = () => {
+		const area = document.getElementById(C_PREVIEW_ID);
+		if (!area) return;
+
+		_state.visible = !_state.visible;
+		area.style.display = _state.visible ? `block` : `none`;
+
+		if (_state.visible) refresh();
+	};
+
+	/**
+	 * g_keyObj から現在のキー割り当てを取得して mappedSet / altSet を更新し、
+	 * プレビューが表示中なら即時再描画する。
+	 *
+	 * g_keyObj[`keyCtrl${keyCtrlPtn}`] は二次元配列:
+	 *   [ [矢印0のメインkeyCode, 代替keyCode, ...], [矢印1のメインkeyCode, ...], ... ]
+	 * 各サブ配列の index 0 がメインキー、index 1 以降が代替キー。
+	 */
+	const refresh = () => {
+		const tkObj = getKeyInfo();
+		const configKeyGroupList = g_headerObj.keyGroupOrder[g_stateObj.scoreId] ??
+			g_keyObj[`keyGroupOrder${tkObj.keyCtrlPtn}`] ?? tkObj.keyGroupList;
+		const ctrl = g_keyObj[`keyCtrl${tkObj.keyCtrlPtn}`]
+			.filter((val, idx) => tkObj.keyGroupMaps[idx].includes(configKeyGroupList[g_keycons.keySwitchNum]));
+
+		_state.mappedSet = new Set(ctrl.map(arr => arr[0]).filter(v => v > 0));
+		_state.altSet = new Set(ctrl.flatMap(arr => arr.slice(1)).filter(v => v > 0));
+		if (_state.visible) drawMap();
+	};
+
+	/**
+	 * プレビューを強制非表示にしてリセットする。
+	 * キーコンフィグ画面の離脱時に呼ぶ。
+	 */
+	const dispose = () => {
+		_state.visible = false;
+		_state.mappedSet = new Set();
+		_state.altSet = new Set();
+		_state.keyRects = [];
+		_state.canvasBase = null;
+		_state.canvasMap = null;
+	};
+
+	return { init, refresh, togglePreview, dispose };
+
+})();
+
 /**
  * 回転できないオブジェクトの場合に設定の自動絞り込みを行う
  */
@@ -12593,7 +13242,7 @@ const getArrowSettings = () => {
 	if (g_workObj.stepX_df.length === 0) {
 		g_workObj.stepX_df = structuredClone(g_workObj.stepX);
 	}
-	if (g_stateObj.swapping.endsWith(`Mirror`)) {
+	if (g_settings.swappingSubs.includes(g_stateObj.swapping)) {
 
 		// Swappingにおけるグループ単位での入れ替えでは、上下でステップゾーンが分かれている場合は分離してシャッフルする
 		let _style = structuredClone(Object.values(g_workObj.shuffleGroupMap));
@@ -12613,11 +13262,11 @@ const getArrowSettings = () => {
 		});
 		const _styleTransDf = structuredClone(Object.values(_styleTrans));
 
-		if (g_stateObj.swapping === `Mirror`) {
+		if (g_stateObj.swapping === `Mirror` || g_stateObj.swapping === `OuterSwap`) {
 			_styleTrans.map(_group => _group.reverse());
-
-		} else if (g_stateObj.swapping === `X-Mirror`) {
-			// X-Mirrorの場合、グループの内側だけ入れ替える
+		}
+		if (g_stateObj.swapping.endsWith(`Swap`)) {
+			// グループの内側だけ入れ替える
 			_styleTrans.forEach((group, i) => {
 				g_settings.swapPattern.forEach(val => {
 					swapGroupNums(_styleTrans, group, i, val);
@@ -13220,6 +13869,10 @@ const mainInit = () => {
 		jdgY[0] += g_diffObj.arrowJdgY;
 		jdgY[1] += g_diffObj.frzJdgY;
 	}
+	if (g_stateObj.playWindow === `SideScroll`) {
+		jdgX[0] += 30;
+		jdgX[1] -= 60;
+	}
 
 	jdgGroups.forEach((jdg, j) => {
 		// キャラクタ表示

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2026/05/04 (v47.5.2)
+ * Revised : 2026/05/12 (v47.6.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -1396,9 +1396,11 @@ const g_settings = {
     camoufrageTypes: [C_FLG_HYPHEN, `FrzArrow`],
     camoufrageTypeNum: 0,
 
-    swappings: [C_FLG_OFF, `Mirror`, `X-Mirror`, `Mirror+`],
+    swappings: [C_FLG_OFF, `InnerSwap`, `OuterSwap`, `Mirror`, `Mirror+`],
     swappingNum: 0,
 
+    swappingSubs: [`InnerSwap`, `OuterSwap`, `Mirror`],
+
     judgRanges: [`Normal`, `Narrow`, `Hard`, `ExHard`],
     judgRangeNum: 0,
 
@@ -2292,6 +2294,7 @@ for (let j = 0; j < 260; j++) {
 // キーボード配列の言語設定
 const g_lang_kCd = {
     Ja: {
+        13: `Enter`,
         48: `0`,
         49: `1`,
         50: `2`,
@@ -2317,6 +2320,7 @@ const g_lang_kCd = {
         229: `IME`,
     },
     En: {
+        13: `Return`,
         48: `0 )`,
         49: `1 !`,
         50: `2 @`,
@@ -2433,6 +2437,7 @@ g_kCd[134] = `FN`;
 g_kCd[144] = `NumLk`;
 g_kCd[145] = `SL`;
 g_kCd[240] = `CapsLk`;
+g_kCd[242] = `Kana`;
 g_kCd[256] = `R)Shift`;
 g_kCd[257] = `R)Ctrl`;
 g_kCd[258] = `R)Alt`;
@@ -2552,6 +2557,7 @@ g_kCdN[222] = `Equal`;
 g_kCdN[226] = `IntlRo`;
 g_kCdN[229] = `Backquote`;
 g_kCdN[240] = `CapsLock`;
+g_kCdN[242] = `KanaMode`;
 g_kCdN[256] = `ShiftRight`;
 g_kCdN[257] = `ControlRight`;
 g_kCdN[258] = `AltRight`;
@@ -2728,8 +2734,6 @@ const g_shortcutObj = {
         ControlLeft_KeyC: { id: `` },
         ControlRight_KeyC: { id: `` },
         KeyC: { id: `lnkHighScore`, reset: true },
-        Comma: { id: `btnSpdCursorL` },
-        Period: { id: `btnSpdCursorR` },
 
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
@@ -2812,6 +2816,8 @@ const g_shortcutObj = {
         ControlLeft_KeyC: { id: `` },
         ControlRight_KeyC: { id: `` },
         KeyC: { id: `lnkHighScore`, reset: true },
+        Comma: { id: `btnSpdCursorL` },
+        Period: { id: `btnSpdCursorR` },
 
         Escape: { id: `btnBack` },
         Space: { id: `btnKeyConfig` },
@@ -4554,6 +4560,8 @@ const g_lblNameObj = {
     'u_Random+': `Random+`,
     'u_S-Random': `S-Random`,
     'u_S-Random+': `S-Random+`,
+    'u_InnerSwap': `InnerSwap`,
+    'u_OuterSwap': `OuterSwap`,
     'u_Mirror+': `Mirror+`,
     'u_(S)': `(S)`,
 
@@ -4732,6 +4740,10 @@ const g_lang_lblNameObj = {
         'u_±120deg': `±120°`,
         'u_±360deg': `±360°`,
 
+        unallocated: `未割当`,
+        allocated: `割当済`,
+        altAllocated: `代替キー`,
+
         j_ii: "(・∀・)ｲｲ!!",
         j_shakin: "(`・ω・)ｼｬｷﾝ",
         j_matari: "( ´∀`)ﾏﾀｰﾘ",
@@ -4783,6 +4795,10 @@ const g_lang_lblNameObj = {
         'u_±120deg': `±120deg`,
         'u_±360deg': `±360deg`,
 
+        unallocated: `Unallocated`,
+        allocated: `Allocated`,
+        altAllocated: `Alternate Keys`,
+
         j_ii: ":D Perfect!!",
         j_shakin: ":) Great!",
         j_matari: ":| Good",
@@ -4884,7 +4900,8 @@ const g_lang_msgObj = {
         effect: `矢印・フリーズアローにエフェクトをかけます。\n[Dizzy/Spin] 矢印が回転します\n[Wave/Storm] 矢印の軌道が左右に揺れます\n[Blinking] 矢印が点滅します\n[Squids] 矢印が伸び縮みします`,
         camoufrage: `ステップの見た目が配置は同じでランダムに変わります。`,
         camoufrageType: `[FrzArrow] フリーズアローの帯部分を初期表示のみ非表示にし、矢印のみで表示します（ヒット/失敗時は帯を再表示）`,
-        swapping: `ステップゾーンの位置を入れ替える設定です。\n[Mirror] ステップゾーンの位置をグループ単位で入れ替えます。\n[X-Mirror] ステップゾーンの中央部分のみグループ単位で入れ替えます。\n[Mirror+] ステップゾーンの位置をグループに関係なく全体的に反転します。`,
+        swapping: `ステップゾーンの位置を入れ替える設定です。\n[InnerSwap] ステップゾーンの中央部分のみグループ単位で入れ替えます。\n[OuterSwap] InnerSwapの逆側（外側）をグループ単位で入れ替えます。\n` +
+            `[Mirror] ステップゾーンの位置をグループ単位で入れ替えます。\n[Mirror+] ステップゾーンの位置をグループに関係なく全体的に反転します。`,
         judgRange: `判定の許容範囲を設定します。\n[Normal] 通常、[Narrow/Hard] 辛判定、[ExHard] 激辛判定`,
         autoRetry: `自動リトライの条件を設定します。\n[Miss] ミス時、[Matari] マターリ時、[Shakin] シャキン時、[FS] Fast/Slow発生時`,
 
@@ -4907,6 +4924,7 @@ const g_lang_msgObj = {
         shuffleGroup: `Mirror/X-Mirror/Turning/Random/S-Random選択時、シャッフルするグループを変更します。\n矢印の上にある同じ数字同士でシャッフルします。`,
         stepRtnGroup: `矢印などノーツの種類、回転に関するパターンを切り替えます。\nあらかじめ設定されている場合のみ変更可能です。`,
         kcReset: `対応するキーの割り当てを元に戻します。`,
+        kcPreview: `キーボードレイアウトのプレビューを表示/非表示します。`,
 
         pickArrow: `色番号ごとの矢印色（枠、塗りつぶし）、通常時のフリーズアロー色（枠、帯）を\nカラーピッカーから選んで変更できます。`,
         pickColorR: `設定する矢印色の種類を切り替えます。`,
@@ -4986,7 +5004,8 @@ const g_lang_msgObj = {
         effect: `Applies effects to the arrows and freeze arrows.\n[Dizzy/Spin] Arrows rotate.\n[Wave/Storm] Swing from left to right.\n[Blinking] Arrows blink.\n[Squids] Arrows stretch and shrink.`,
         camoufrage: `The appearance of the steps changes randomly with the same placement.`,
         camoufrageType: `[FrzArrow] Initially hides freeze-arrow bars and displays only the arrow portion (bars reappear on hit/failure)`,
-        swapping: `This setting allows you to swap the positions of the step zones.\n[Mirror] Swaps the positions of step zones within each shuffle group. \n[X-Mirror] Swaps only the central portion of step zones within each shuffle group.\n[Mirror+] Flips the position of all step zones, regardless of shuffle groups. `,
+        swapping: `This setting allows you to swap the positions of the step zones.\n[InnerSwap] Swaps only the inner portion of step zones within each shuffle group.\n[OuterSwap] Swaps the outer portion (inverse of InnerSwap) within each shuffle group.\n` +
+            `[Mirror] Swaps the positions of step zones within each shuffle group. \n[Mirror+] Flips the position of all step zones, regardless of shuffle groups. `,
         judgRange: `Set the allowable range of judgment.\n[Normal] Normal judgment, [Narrow/Hard] Hard judgment, [ExHard] Very hard judgment`,
         autoRetry: `Set the conditions for automatic retry.\n[Miss] When missed, [Matari] When good, [Shakin] When great, [FS] When Fast/Slow occurs`,
 
@@ -5009,6 +5028,7 @@ const g_lang_msgObj = {
         shuffleGroup: `Change the shuffle group when Mirror, X-Mirror, Turning, Random or S-Random are selected.\nShuffle with the same numbers listed above.`,
         stepRtnGroup: `Switches the type of notes, such as arrows, and the pattern regarding rotation.\nThis can only be changed if it has been set in advance.`,
         kcReset: `Restores the corresponding key assignments.`,
+        kcPreview: `Show/hide the preview of the keyboard layout.`,
 
         pickArrow: `Change the frame or fill of arrow color and the frame or bar of normal freeze-arrow color\nfor each color number from the color picker.`,
         pickColorR: `Switches the arrow color type to be set.`,

package/package.json

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