独自のMIDIツール開発記 #3「音の配置を構築するの巻」

2023年9月3日

Javascript MIDI プログラミング

eyecatch MIDIツールのユーザーインターフェイスの極みとも言える、音符配置をする処理が完成しました。 メインエディタ‐部分をクリックすると、音符(note)が配置されるようにしました。 まだ細かな設定はできなくて、見た目だけ音符を配置するという操作です。

見た目

クリックすると、画像の様に、赤い音符マークが追加されます。 この機能搭載で難しかった点としては、マウスクリックした座標と配置する座標がリンクできなくて、次のような処理をする必要がありました。
1. マウスクリックした音階でのkeyの横軸の要素の縦座標を取得(Y値) 2. マウスクリックした時間軸での座標を取得(X値) 3. 配置の時に、半音分の箇所も含めて座標移動させる必要があった(Y軸)
とりあえず、今後の機能追加を考慮して、Editorエレメント内にグローバル配置するようにして、音階移動や、サイズ変更などにも対応できるように考慮しました。

音符機能の今後

この機能でまだ足りていない箇所や問題点は?

音符が重なって配置されてしまう

音符は縦軸では重なると同時再生させるんですが、横軸は重ねることはできないようにします。 同一タイミングで、同じ音は出さない仕様ですね。

音符サイズの変更

音の長さを表すため、重要な機能です。 Dragでのサイズ変更と、数値入力でのサイズ変更ができる必要があります。

音符のドラッグ移動

配置した音符を、マウスでドラッグして移動させられるようにします。 これにより、クリックして音符配置を失敗しても、リカバリできるようになるため、機能の重要度はこちらの方が上になります。

音符選択機能

音符をクリックすると、選択される機能を追加することにより、選択されている音符に対してだけ、任意機能を操作することができるようになります。

詳細ダイアログ

モーダル方式にするか、固定情報表示にするかは、後で考えますが、とにかくクリックされて選択された音符の情報を数値で表示して、数値変更ができるようにするのが目的です。

あとがき

音符の機能は、実は今後の機能追加で、大きく仕様が変わってしまう可能性が高いので、できるだけ変更を容易にできるようにプログラミングするというのを頭においてコーディングしました。 そうした時のプログラミングのコツは、 単体機能をできるだけ細かなモジュール化しておいて、他の機能との依存関係を無くしておくという感じです。 そのモジュールを手直しした時に、依存している別モジュールで不具合が発生しないような感じです。 設計が難しいかもしれませんが、プログラミングで効率的とされている、使い回しをあまり行わないというのもあるかもしれませんが、この辺は状況に応じて難しい場合もありますね。 別の方法としては、徹底的にドキュメントやコメントを残しておくというやり方です。 READMEだけじゃなく、開発用のドキュメントもちゃんと管理しておくと、その後の機能追加や仕様変更に役立つというのは、わかっていてもなかなかできないかもしれませんね。

Github

本プログラムは、githubにて公開しています。 https://github.com/yugeta/mynt_midi

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。