ユーザーインターフェイス(UI)とは、ITサービスやアプリにおける
見た目と
操作感の事を言います。
「このアプリ使いづらい」という場合は、大体の場合においてUIがイケていないという原因になるので、システムを設計する際やプログラミング前のデザインの段階でしっかりと考えておく必要があります。
でも、自分の場合はデザインとプログラミングを同時に行う方が効率がいいので、事前のしっかりデザインという工程をあまり踏まないことの方が多いんですよね。
他の人にはあまりオススメできない方法ですが、どうしても効率追求したい人であれば、ご自身に合った方法で行ってみてください。
というわけで、今回はオレオレMIDIツールのデザインを公開したいと思います。
ソースコード
いつものように、HTML+CSS+若干のJavascriptでサンプル表示をしようと思ったんですが、操作処理を入れてみた所、ファイル数がもはやブログで紹介できるレベルではなくなったので、githubのリンクを貼り付けておきます。
https://github.com/yugeta/mynt_midi
※このブログが公開する時点で、開発は先に進んでいますが、uiフォルダ内が今回紹介するプログラムソースコード一覧になっています。
デモ
https://yugeta.github.io/mynt_midi/ui/
解説
見るからにMIDIという見た目になっていると思います。
実際に、ピアノ鍵盤をクリックすると、音が鳴るようにしています。
タイムスライダも、タイムラインの箇所にあるカーソルを移動することも出来るようにしています。（ドラッグ操作とクリック操作）
全体時間も、上部のTime欄の数値を変更すると、表示に反映するようにセットしています。
なんか、ほぼ出来上がっているようにも思えますが、肝心の再生処理やら、midiの音符を設置する仕様がまだ入っていません。
そして、音符テキストと、midiの表示部分の互換コンバート処理などがまだまだ入っていません。
本格開発はこれからですね。
他に必要な機能がでてきたら、その都度、UIを変更していくので、最終的に全く違う画面になる可能性もあります。
この辺が、事前設計を完璧にしないアジャイル開発っぽい感じで進めていきますね。
でも、個人的に開発の最初でストレスが高いけど、最もモチベーションが上がる部分の開発が完了できたので、一安心です。
あとがき
UI部分がほぼ出来上がったので、次はMIDIの音を配置する処理を追加して、再生できるようにしてみたいと思います。
それが保存できるようにすると、基本的には盛り込みたい機能は入れられたことになるので、ファイナルベータとしてもいいかもですね。
なんか、今回のUIもサクっとつくっているように見えますが、2日ぐらいガッツリ腰を据えて作っています。
数回の作り直しを経て、10時間ぐらいは掛かっている感じです。
引き続き開発の様子を見守ってやってください。
