Vue.jsでピアノロールエディタ5
現状
- クリックするとノートが置けるようになった。
- ヘッダにスナップのセレクトボックスを設置
- 4分音符～64分音符まで選べる（三連符は非対応、小さいノートの時文字がはみ出るなど色々問題はあるが）
学んだこと
<option>タグのvalueに対応したものを<select>タグにv-modelでバインド指定する- ショートカットキーで変更とかできそう（実装するかはさておき）
- テンプレート側で
@click="clickhandler($event)"みたいにするとイベントオブジェクトが渡せる
気になること
- 場当たり的に書いてるからかイベント周りがごちゃごちゃしてきた
- ノートはとりあえず配列にどんどん突っ込んでいるけど、MMLに変換することを考える必要がある
- 現状順序が考慮されていないのでMML化する際には左から順になるようにソートする
- 同時に鳴るようなものは複数トラックにする
- 休符（じみにめんどくさそう）
今後の予定
- 右クリックでノートを削除
- 参考にしているFL Studioは左クリック押しっぱなしでドラッグすると触れたノートを全部消すみたいな動きをする
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 実はこれが本来の目的
- 再生してノート通りに音を鳴る（やるかは未定だけどせっかく音鳴ったしやりたい）
終わり？が見えてきたぞ。
