ポケミク・シーケンサーを作る(4)

公開:2014-05-26 18:29
更新:2020-02-15 04:37
カテゴリ:html5,jquery,webmidi,ポケミク,javascript,audio,ハードウェア,css,ポケミク・シーケンサー

今週もあまり成果はない。Undo/Redoをコントロールするオブジェクトを作ったり、レイアウトをデスクトップ専用にするためにCSSをいじったりしていた。画面上の変化ではタブでトラックを切り換えるようにできるようにしたくらいか。

Bootstrapのデフォルトテーマだと画面に情報を詰め込む必要があるMIDIシーケンサーでは、フォントの大きさやマージン・パディングがちょっと大きめなのでBoostStrapのカスタマイズページで変更してみた。もともとBootstrapのCSSはLESSという言語で書かれている。LESSというのはCSSの文法にマクロ機能をつけたような感じである。カスタマイズページだとちょこちょこ修正してはテストというやり方にはちょっとつらいので、クライアント側でlessコンパイラでコンパイルできるようにするのがふつうみたいである。私はWinLessというのをダウンロード、インストールしてみている。が、もともとlessコンパイラはjavascriptでできているので、wshとかに移植すればコマンドラインでコンパイルできるようにもできそうな気がするし、ローカルにnode.jsも入れているのでそれを使えばやはりコマンドラインでコンパイルできそうなきもする。けどそっちに手を出すとまたどんどんMIDIシーケンサーの製作から遠のいていくのであまり深入りはしないことにする。

一応ポケミクに便利なように、トラック1は人声入力が行いやすいように支援する機能を準備したり、エフェクトパラメータも視覚的にわかりやすくしたり、ステップエディタはレコンポーザーっぽくしたいとかいろいろ自分の中で要望は膨らんでいくのだけれども、そういうのをうまくまとめあげる自信はいまのところない。UI設計というのは私にとって本当にむずかしくて、試行錯誤はかなりしないと頭の中でうまくまとまらない。ぼやっとした感じではトラックごとのシーケンスエディタは一番左にステップ、次の列に縦ピアノロール、続いてエフェクトパラメータの列を配してみようかなと考えている。細かいところは試行錯誤のうえ決めていく。

ちょっと今よくわかっていないのはbootstrapのdata-apiアトリビュート周りの機能である。この機能を使えばjavascriptで書く量が減りそうなんだけども、ドキュメントにはあまり解説はなさそうなので。これも探りながら使っていきたいと思っているけれども、重大な機能を見落として手戻りが発生するのが嫌なんだよね。。だからあらかじめ知識を十分に入れておきたいんだけれども、どうもリソース不足の気がする。私の頭のリソースも含めて。