2026年3月20日金曜日

タブレット用の楽器アプリをたくさん作ってみた

タブレットで使いやすい楽器アプリを作りたいと思いました。 一般的にはピアノの鍵盤が最もよく使われますが、タブレット上ではあまり使い勝手がよくありません。 新たな楽器のあり方を色々と模索して、以下のようなアプリを作りってみました。
  • 4x4pad - 4x4 grid MPE MIDI controller
  • Celltone - Grid MPE MIDI controller with Janko-Piano layout
  • Isotone - Grid MPE MIDI controller optimized for chords
  • Hexatone - Hexagonal MPE MIDI controller with Wicki-Hayden layout
  • Glisstone - Hexagonal MPE MIDI controller optimized for glissando

タブレットとピアノの相性が悪い

まずはピアノがどうにも使い勝手が良くない原因を言語化するとともに、新しい楽器を作るのにどれくらい余地があるのか考えてみました。 色々と考えていて思ったのは、 (1) 手の構造をきちんと考えているか、 (2) 和音をどうするか、 (3) 子供から大人まで使えるか、 (4) 白鍵グリッサンド、黒鍵グリッサンド、白黒グリッサンドをどうするか、 あたりが重要ということでした。 そして大半のものは 1で躓くことに気付きました。 まず手は広げて使うもので狭めた状態で複雑なことをするのは意外と難しいです。 他にも大人は横方向に 20cm、縦方向に 15cm くらい広げて使うのが適切で、 指を体と垂直にしながら使わないと非常に苦しく縦の操作に弱いことがわかり、 そして親指と中指は 20cm ほど離れていることもわかります。 これらのことから、ピアノの鍵盤はある程度縦幅がないと押せないし、 横方向に動かすことを基本として考えないといけないことがわかります。 特に和音は指に横方向の動き以外が絡むと非常に再現が難しいことに気付くと思います。

タブレット上のピアノは特に親指の問題が大きいです。 親指を駆使しようとするとタブレットの大半の面積を必要としてしまいますし、 スマホはまったく使い物にならなくなります。 スマホやタブレットはせいぜい指3本、ほとんどのケースでは指2本しか考慮していません。 その理由は親指と小指を考慮するにはスマホだと画面が小さ過ぎるからです。 タブレットなら指4本がギリギリ使えます。 親指を駆使するピアノの UI はタブレットに根本的に合っていません。 仮に親指を使わないとしても、タブレット上でピアノをきちんと使うには 24鍵盤が必要で、 横幅を取ってしまうため鍵盤が小さくなり、和音を打鍵しづらい問題が発生します。 さらに、縦方向の小さなピアノで指4本で和音を実現しようとすると指の何本かで鍵盤を1つ飛ばすような形を作ることになるのですが、 これがめちゃくちゃ難しいことに気が付きます。4本指をただ横方向に広げることはできないのです。 さらにタブレットでは高低差を表現できないので黒鍵盤のグリッサンドはできません。 ここまで考察を進めると、タブレットにピアノは向かない気がしてきます。

指を曲げるときの動きも考えて見ました。 4本指は横方向への動きに極めて弱いですが、縦方向なら強いことに気付きます。 そのため運指は縦方向への動きを絡めるとスムーズに動かせます。 ドレミ(ファ)の次は上か下方向にスライドして(ファ)ソラシとするとスムーズです。 さらに気付いたことは、そもそもたくさんの指を使おうとするから大変になるということです。 これはボタンの中間点を押したときに和音を出せれば解決できそうです。

同型鍵盤と平面充填

次にピアノの歴史を見ながら、より良い配列を考えてみました。 これは以下のページがとても参考になります。

流行れ!同型鍵盤 (Isomorphic Keyboard)

アコーディオン配列には3つ大きな欠点があって、 (1)まずは配置に柔軟性が出てしまう問題があります。 一般的な方式だけで3つもあります。一応 Cシステム が標準らしい。 (2) 打鍵のしやすさを考慮して 16 ボタンが 1セットになっており若干ボタンの数が増えます。 2列用意すると 32ボタン。かなり多いです。 (3) 横列が 4ボタンなので自動的に縦列が 8ボタンになります。 とんでもなくスペースを取ります。

改良するなら六角形ボタンのクロマティック方式だと和音を作りやすいです。 これは明らかに四角形より優れています。 ちなみに四角形や六角形だときれいな平面充填図形を作れますが、 他にも三角形、凸五角形、複数種類の形状を利用することが考えられます。 三角形は結構考えたのですが、思ったより気持ちの良い配列がありませんでした。 和音に弱くて実用的ではない感じです。 1パターンだけ良いものはあったのですが、若干もやもや感が残る配列でした。 あと三角形だと誤爆の可能性がかなり高くなるのでそこもマイナスポイントです。

六角形にこだわらない複数種類の形状は以下のようなものがあります。 アリかも知れませんがハードウェアでもソフトウェアでも作るのが難しくなりそう。

個人的に最も良いと思ったは、多角形にこだわらない方法です。 わかりやすいのが T字ブロックです。
  □□□□□□□□
 ■■□□■■□□
■■■■■■■■
T字ブロックの良いところは、ほぼピアノと同じ形状で実現でき、 白グリッサンド・黒グリッサンド・白黒グリッサンドをすべて再現できる利点があります。 ただ横幅が長くなってしまうので、やはりタブレットでは限界を感じます。 これをドーナッツ型にするなども考えたのですが、ドーナッツ型の UI はかっこいいだけで手の構造と一致しないので打鍵感は微妙です。 タブレットだと複数段にするほうが明らかに演奏しやすいのですよね。 すべてのグリッサンドに対応して効率的な和音操作ができる形状はあるでしょうか。 今のところ浮かんでいません。

作ってみた

検討した成果を活かして、まずはコンパクトな grid 配列の 4x4pad を作りました。 4x4 の MIDI コントローラーはすでに様々なものがあるので、 それを使いやすくしただけではあります。 このUI はほどほどに和音を打てるだけで、シレファなどの和音が押せない問題があります。

和音をきちんと押せて演奏らしい演奏ができるためには、最低24音が必要です。 とはいえ 4x4pad を縦方向に伸ばすと 縦に 8ボタン必要で、 白鍵盤と黒鍵盤の間が大きいので、これは微妙です。 私が一番良さそうと思った配列はヤンコピアノでした。普通のピアノとほぼ変わりません。 Wicki-Hayden Layout も割と良いのですが、黒鍵盤の位置に違和感が残ります。 黒鍵盤を左右に寄せるとどうしても白鍵盤との距離が遠くなってしまうので、 距離を短くしようと考えていたら、それヤンコピアノだよねと気付きました。 ただヤンコピアノはタブレット上では和音に弱い問題があります。

そこで色々考えているうちに、縦方向を一列増やすと面白いかもと思いました。 縦方向を一列増やすと音楽理論的に非常にきれいな配列ができます。 指の本数を考慮すると物理キーボードでは横に配列を伸ばしたほうがまず正解です。 ただタブレットは二本指で使うことが多いので、意外と打ちやすく、 また音楽理論的に綺麗なので打鍵に一貫性が生まれて覚えやすいです。 それぞれ celltone (ヤンコピアノ配列)、isotone (独自配列) として公開しました。

ヤンコピアノよりは Wicki-Hayden Layout のほうが和音は強いので、 Wicki-Hayden Layout も実装してみようと思いました。 最初は Wicki-Hayden Layout を左右に配置すれば打ちやすいと思ったのですが、 正六角形なので縦方向に使っていない空間がたくさんできてしまって微妙でした。 横方向もタブレットだとやや小さい問題があります。 だから Wicki-Hayden Layout は縦方向に伸ばしているし、 オルガンは斜めの配列が多いんだなと気付かされました。 Wicki-Hayden Layout は左右の手が重なるように演奏するので、ちょっと人を選ぶ感じがします。 より良い配列がないか考えた結果、一本指で滑らかなグリッサンドができる配列を思い付きました。 これはなかなかおすすめです。 hexatone (Wicki-Hayden 配列)、chromatone (独自配列) として公開しました。

実装に関しては、複数のボタンを同時に押せるように工夫しています。 普通はできないのですが、まず inset: -10% とすると 10% ぶん外側に判定が作れます。 これを利用すると透明なボタンの重なりを作ることができるので、 それを document.elementsFromPoint() でチェックします。 余白の判定にポインターが乗ったとき、重なり合ったボタンの両方にイベントを送信します。

ハードウェアを購入すると 10万円以上する MPE MIDI Controller がゼロ円で実現できました。遊んでみてね!

0 件のコメント: