<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作曲ページ</title>
<link rel="stylesheet" href="./kenban.css">
<style>
.hidden {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<script src="https://unpkg.com/@tonejs/midi"></script>
<script type="text/javascript" src="./kenban_test.js?v=midi_final_fix"></script>
</head>
<body>
<!-- ▼▼▼ MIDIステータス表示（画面右上に固定） ▼▼▼ -->
<div id="midi-status-fixed">
<p id="midistatus">MIDI: 未接続</p>
</div>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->
<div id="app-container">
<!-- ▼▼▼ ページ上部のコントロールパネル ▼▼▼ -->
<div id="top-control-panel">
<div class="control-group">
<button id="helpButton" class="control-button">？ 使い方</button>
</div>
<div class="control-group">
<button id="exportMidiButton" class="control-button">MIDI書き出し</button>
<label for="importMidiInput" class="control-button">MIDI読み込み</label>
<input type="file" id="importMidiInput" accept=".mid, .midi" class="hidden">
</div>
<div class="control-group">
<label>メトロノーム:</label>
<div id="metronome-selector" class="tool-selector">
<div id="metronome-off" class="tool-item" data-state="off">OFF</div>
<div id="metronome-4n" class="tool-item" data-state="4n">4分</div>
<div id="metronome-8n" class="tool-item" data-state="8n">8分</div>
</div>
</div>
<div class="control-group">
<label>編集トラック:</label>
<div id="track-selector" class="tool-selector">
<div class="tool-item" data-track="track1">1</div>
<div class="tool-item" data-track="track2">2</div>
<div class="tool-item" data-track="track3">3</div>
<div class="tool-item" data-track="track4">4</div>
</div>
</div>
<div class="control-group">
<div class="input-group">
<label for="instrumentSelect1">T1:</label>
<select id="instrumentSelect1" class="control-select">
<option value="synth">シンセ</option>
<option value="piano">ピアノ</option>
<option value="violin">バイオリン</option>
<option value="trumpet">トランペット</option>
</select>
</div>
<div class="input-group">
<label for="instrumentSelect2">T2:</label>
<select id="instrumentSelect2" class="control-select">
<option value="synth">シンセ</option>
<option value="piano">ピアノ</option>
<option value="violin">バイオリン</option>
<option value="trumpet">トランペット</option>
</select>
</div>
<div class="input-group">
<label for="instrumentSelect3">T3:</label>
<select id="instrumentSelect3" class="control-select">
<option value="piano">ピアノ</option>
<option value="synth">シンセ</option>
<option value="violin">バイオリン</option>
<option value="trumpet">トランペット</option>
</select>
</div>
<div class="input-group">
<label for="instrumentSelect4">T4:</label>
<select id="instrumentSelect4" class="control-select">
<option value="piano">ピアノ</option>
<option value="synth">シンセ</option>
<option value="violin">バイオリン</option>
<option value="trumpet">トランペット</option>
</select>
</div>
<div class="control-group">
<label>鍵盤:</label>
<div id="mini-keyboard-container">
<!-- JavaScriptによってミニ鍵盤がここに描画されます -->
</div>
</div>
</div>
</div>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->
<!-- ▼▼▼ 音符ツールボックス ▼▼▼ -->
<div id="note-length-selector" class="tool-selector">
<div class="tool-group-left">
<div class="tool-item" data-length="1n">全</div>
<div class="tool-item" data-length="2n">2分</div>
<div class="tool-item" data-length="4n">4分</div>
<div class="tool-item" data-length="8n">8分</div>
<div class="tool-item" data-length="16n">16分</div>
<div id="dotButton" class="tool-item toggle-item">付点</div>
<div id="auditionButton" class="tool-item toggle-item">試奏</div>
</div>
<div class="zoom-controls">
<div class="input-group">
<label for="zoom-x">横:</label>
<input type="range" id="zoom-x" min="20" max="400" step="10" value="100">
<span id="zoom-x-value" class="zoom-value">100%</span>
</div>
<div class="input-group">
<label for="zoom-y">縦:</label>
<input type="range" id="zoom-y" min="50" max="200" step="10" value="100">
<span id="zoom-y-value" class="zoom-value">100%</span>
</div>
</div>
</div>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->
<!-- ピアノロールエリア -->
<div id="pianoRollContainer">
<div id="timeline-container">
<canvas id="timelineCanvas"></canvas>
</div>
<canvas id="pianoRollCanvas"></canvas>
</div>
<div id="resize-handle"></div>
<!-- ▼▼▼ ピアノロール下のコントロールパネル ▼▼▼ -->
<div id="bottom-control-panel">
<div class="control-group-bottom left">
<label for="numMeasuresInput">小節数:</label>
<input id="numMeasuresInput" type="number" min="1" value="2" class="control-input">
<button id="setMeasuresButton" class="control-button">設定</button>
</div>
<div class="control-group-bottom center">
<button id="playButton" class="control-button">▶ 再生</button>
<button id="pauseButton" class="control-button">⏸ 一時停止</button>
<button id="stopButton" class="control-button">⏹ 停止</button>
</div>
<div class="control-group-bottom right">
<div class="input-group">
<label for="tempo">BPM:</label>
<input type="number" id="tempo" value="120" min="1" class="control-input">
</div>
<div class="input-group">
<label>オクターブ:</label>
<button onclick="decreaseOctave()" class="control-button small-btn">-</button>
<span id="currentOctave">4</span>
<button onclick="increaseOctave()" class="control-button small-btn">+</button>
</div>
</div>
</div>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->
<!-- データ表示エリア -->
<div id="data-display-container" class="hidden">
<textarea id="pianoRoll" rows="10" cols="70" placeholder="ここに音符データが表示・編集できます"></textarea>
<button onclick="editNote()">テキストから音符を更新</button>
</div>
<button id="showDataButton">ノートデータを表示/非表示</button>
</div> <!-- #app-container の閉じタグ -->
<!-- ▼▼▼ ヘルプモーダル ▼▼▼ -->
<div id="help-modal" class="modal-overlay hidden">
<div class="modal-content">
<button id="close-modal-button" class="close-button">×</button>
<h2>使い方ガイド</h2>
<!-- ▼▼▼ ここを空のコンテナに変更 ▼▼▼ -->
<div id="accordion-container" class="accordion-container">
<!-- JavaScriptによって内容がここに挿入されます -->
</div>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->
</div>
</div>
<!-- ▲▲▲ ヘルプモーダル ▲▲▲ -->
</body>
</html>
