TJAtelier（太鼓譜面エディタ）
ブラウザで動く、Malody 風の太鼓譜面（TJA）エディタです。スマホでもPCでも使えます。
作った譜面はその場でテストプレイできます。
使い方
開く・保存
- ☰ → .tja / .zip を開く:
.tja と音源を一緒に選ぶか、まとめた .zip を選択（中の WAVE: に合う音源を自動で組み合わせます）
- 音源を差し替え: 新規作成した譜面に曲を付けるとき
- .tja を保存 / .zip（譜面＋音源）: 書き出し。
.tja は UTF-8（BOM付き）
- 編集内容（譜面・音源）はブラウザ内に自動保存され、次に開いたときに復元されます
編集画面（Malody 風・横スクロール）
- Malody の太鼓エディタ（2000×924）の配置・大きさを画面の高さに合わせて再現
- 画面の端から端まで使うフルサイズ表示。ノーツは左から右へ並び、金色の二重の輪（判定枠）が現在位置（再生位置）。上段に音源の波形、下段にイベント
- 下に現在の小節・拍・BPM・拍子を表示。左の列に密度推移（下が曲の始め・上が終わり、1 秒あたりのノーツ数の棒）。上下にドラッグするとその位置へ移動
- 横ドラッグでスクロール（判定枠は自由に動かせ、離すと一番近いグリッドへ寄る）、2本指ピンチまたは左上の六角形 −/＋ で拡大縮小、波形をタップでその位置へ移動
- 左の六角形 ▶ で再生／停止（打音あり）
- 下のツールを選んでレーンをタップで配置。同じノーツをもう一度タップで削除、別の色なら置き換え
- 連打・風船: 始点 → 終点の順にタップ。風船を風船ツールでタップすると打数を変更
- 右のアイコン: 元に戻す／やり直し／メトロノーム／テストプレイ／ファイル・保存／譜面情報／TJA テキスト／再生速度／分割
- TJA テキスト: 譜面全体の TJA をそのまま見られます（開くと今の小節の行へ移動）。書き換えると、手を止めたところで自動で譜面に反映（元に戻すで、書き始める前に戻せる）。#BPMCHANGE・#GOGOSTART などのイベントもここで編集
テストプレイ
- 太鼓の達人のプレイ画面の配置（レーン・判定枠・左パネル・魂ゲージ）と演出（判定文字、光の粒、ノーツが弧を描いてゲージへ飛ぶ、コンボ太鼓、100コンボごとの巻物、音符文字、ゴーゴータイム）を再現
- 画像・キャラクター・効果音は公式素材を使わず、すべてオリジナルの描画
- プレイは自分で叩けます（設定の「オート」で自動で叩く譜面確認にもできます）。iPhone では Expo Go で開くと指置きなしで叩けます（下の「iPhone で両手交互に叩くとき」）。設定の「タイミング調整」で判定調整を測れます
- 打音は音符の時刻ちょうどに鳴るよう前もって予約します（描画の遅れで音がずれない）。連打は 1 秒に 35 打、風船は受付時間内に割り切る速さ（上限 1 秒 50 打）
- 演出: ゴーゴータイムのレーンの色と判定枠の炎の玉、ゴーゴー開始時に床から噴き上がる火花の柱、連打数の金色の扇、大音符の大きな光ときらきら、ふくらむ風船（オレンジ→黄色）と残り打数の吹き出し
- 画面は太鼓の達人と同じ 16:9 で固定（余った部分は黒帯）。スマホでは画面のどこでもタップで叩けます。画面を縦に 3 つに分け、中央の帯＝ドン、左右の端＝カッ（上下の位置は関係なし。帯の幅は「情報 → ドンの幅」で変更、既定 60%）。プレイ後、叩いた位置から色の取り違えが減る幅を計算し、結果画面で提案します（ボタンで反映）。触れた場所に赤（ドン）／青（カッ）の波紋が出ます。終了ボタンは右上
タッチ（iPhone 対策）
- iPhone / iPad では画面上部（レーンより上）が「指置き」になります（既定でオン）。ここに指を 1 本触れたままにして叩いてください。 iPhone の Safari（WebKit）は、両手交互で速く叩いて「指が 1 本も画面に触れていない瞬間」に次の指が触れると、そのタッチをページに届けません（太鼓Web など他の Web 版でも同じ）。指を 1 本置いておくとこの瞬間がなくなり、取りこぼしが起きません。「情報 → 画面上部を指置きにする」で切り替えられます
- iPhone の Safari では、片方の指が触れている間に別の指で叩くと、その指のタッチが届かないことがあります。どのタッチイベントでも「まだ見ていない指」が含まれていたら叩いたものとして扱い、取りこぼしを補います（結果画面に補った数を表示）
- ピンチ・ダブルタップ拡大などのジェスチャーはプレイ中は止めています
iPhone で両手交互に叩くとき（Expo Go で動かす）
iPhone の Safari（WebKit）は、両手交互で速く叩いて「指が 1 本も触れていない瞬間」に次の指が触れると、そのタッチをページに届けません（ほかの Web 版の太鼓ゲームでも同じ）。対策は 2 つあります。
- 指置き: iPhone では最初からレーンより上が「指置き」になっています。そこに指を 1 本置いたまま叩くと取りこぼしません
- Expo Go で動かす（無料・スマホだけで可）: App Store の「Expo Go」を入れ、iPhone の Safari で次のリンク（または設定の「Expo Go で開く」）を開いて Expo Go で起動します。プレイ中だけアプリの仕組みで指を受け取るので、指置きなしで叩けます
- exp://u.expo.dev/66852881-5978-446f-9869-8169b13ab3c3?runtime-version=exposdk:58.0.0&channel-name=main（Expo Go にアカウントでログインしていれば、ホームの Projects の TJAtelier からも開けます）
- アプリ本体は public/expo/App.js。中身は Web 版をそのまま表示するので、Web 版を更新すればアプリでも新しくなります
判定
本家と同じ判定幅です（ずれの片側）。
不可の幅より早く叩いたときは判定されず、遅れて 114ms を過ぎたノーツは見逃し（不可）になります。
- 叩かずに通り過ぎた音符は不可になりますが、判定枠の上に「不可」は表示しません
- 連打・風船の最中でも、すぐ後の同じ色の音符が 75ms 以内なら音符を判定します（連打に吸われない）
- 大音符を片手で叩いた直後の打撃は、次の音符のほうが近ければ次の音符として判定します
- 叩いた時刻の近く（50ms 以内）に判定前の別の色の音符があり、同じ色の音符よりそちらのほうが近いときは、ドンとカッの境目を叩いて色を取り違えたとみなし、離れた同じ色の音符を横取りしません
- 結果画面に見逃しの内訳（色違いで叩いた／別の音符に使われた／近くで叩いていない）と「記録（ログ）をコピー」ボタン
- 叩いた色と同じ色のノーツのうち、叩いた時刻にいちばん近いもので判定します（1 つ見逃しても後のノーツがずれて判定されない）
- 色違いで叩いても不可にはせず、ノーツはそのまま残ります（TNDE / TJAPlayer3 と同じ）
- 大音符を叩いてから 50ms 以内の同じ色の 2 打目は「両手打ち」として扱い、次のノーツの判定には使いません（TNDE の BigNotesWaitTime と同じ）
- 連打・風船の最中に叩いた分は連打に入り、すぐ後のノーツの判定には使いません
- 叩いた瞬間の時刻（イベントの timeStamp）と、実際に聞こえている音の時刻で判定します
打音
- 「情報 → 打音ファイルを選ぶ」で自分の打音（例: dong.ogg / ka.ogg / Balloon.ogg）を読み込めます。ファイル名に don が入っているものがドン、ka がカッ、balloon が風船が割れる音になります
- 読み込んだ音はその端末のブラウザの中だけに保存され、リポジトリには含めません（公式素材などを公開しないため）
- リポジトリの
public/sounds/ に dong.ogg / ka.ogg（mp3・m4a・wav も可）を置くと、全員の既定の打音になります（端末で読み込んだ音が優先）。公開リポジトリなので、配布してよい音だけを置いてください
- 既定の打音は
public/sounds/ の dong.wav / ka.wav / balloon.wav（作者提供の音）
タイミング調整
- 「情報 → タイミングを測って判定調整を合わせる」: クリック音に合わせてドンを 24 回叩くと、端末の音の遅れを測って判定調整を提案します（0.6 秒間隔なので ±300ms まで測れます）
- 音の遅れが 114ms を超える端末では、普通の譜面を叩くと隣の音符と取り違えて「正確に叩いても判定されない・不可になる」ことがあります。まずこの調整をしてください
- 「ずれを表示」をオンにすると、叩くたびにずれ（ms）や「判定なし」が判定枠の下に出ます
- 結果画面に、判定されなかった打撃の内訳・推定した音の遅れ・バージョンを表示します（不具合の報告に使えます）
自動更新
- 新しい版が公開されると、起動時・アプリに戻ったとき・10分ごとの確認で自動的に読み直します（ホーム画面に追加し直す必要はありません）。テストプレイ中は終わるまで待ちます
画面の向き
- 常に横画面で表示します。端末を縦に持っているときは画面全体を 90° 回転させて横画面として表示します
- ホーム画面に追加すると、ブラウザのバーなしの全画面で使えます
PC のショートカット
| キー | 動作 |
|---|
| Space | 再生 / 停止 |
| 1〜7 / 0・E | ドン・カッ・大ドン・大カッ・連打・大連打・風船 / 消去 |
| ← → | 1グリッド移動 |
| PageUp / PageDown | 1小節移動 |
| Ctrl+Z / Ctrl+Y | 元に戻す / やり直し |
| Ctrl+ホイール, − ＝ | 拡大縮小 |
開発
npm install
npm run dev # http://localhost:5173
npm test # パーサ・書き出し・zip・判定のテスト
npm run build # dist/ に出力
main に push すると GitHub Actions がテスト → ビルド → GitHub Pages へ公開します
（Settings → Pages → Source を「GitHub Actions」に）。
構成
src/
chart/ model.ts（編集用の拍ベース譜面・時間変換） tja.ts（読み込み） tjaWrite.ts（書き出し）
types.ts（プレイ用の秒ベース譜面） decode.ts（Shift_JIS 対応）
editor/ editor.ts（編集操作・Undo/Redo） view.ts（横スクロール画面・波形・タッチ操作）
io/ zip.ts（依存なしの zip 読み書き） load.ts（ファイル読み込み） storage.ts（自動保存）
play/ playmode.ts（テストプレイ） zone.ts（ドンの幅の提案）
engine/ game.ts（判定・スコア）
render/ renderer.ts（テストプレイの描画） notes.ts（ノーツ描画の共通部品）
audio/ audio.ts（Web Audio）
main.ts 画面の組み立て
譜面は内部では「秒」ではなく tick（1拍 = 6720） で持っています。BPM や OFFSET を後から変えても、ノーツが拍からずれません。
対応している TJA
TITLE SUBTITLE BPM OFFSET WAVE DEMOSTART COURSE LEVEL BALLOON（他のヘッダは保持して書き出し）
#START #END #BPMCHANGE #SCROLL #MEASURE #DELAY #GOGOSTART #GOGOEND #BARLINEON #BARLINEOFF
譜面分岐は現状「普通譜面（#N）」だけを読み込みます。
既知の制限
- iPhone / iPad の Safari は
.ogg を再生できないことがあります。その場合は mp3 / m4a に変換してください
- 範囲選択・コピー＆ペースト、譜面分岐の編集、Malody 形式（.mc / .mcz）の読み書きは未対応
注意
既存の商用タイトルの名称・画像・効果音・公式譜面は同梱しないでください。
