ピアノ20年、練習嫌いの自分用にコード練習アプリを作った


ピアノを触り始めてから20年ほど経ちます。それだけ弾いていれば上手いだろうと思われそうですが、練習が嫌いで、それでも弾きたい、という20年でした。好きなのはジャズで、コードで弾けるようになりたい。それには当然コードを覚えていなければならず、その勉強がいちばん後回しになっていました。コード練習のアプリを探しても、思うようなものがない。それで7月の末に、自分用のを作りました。

探しても見つからなかったコード練習アプリは、辞典・押鍵クイズ・聴き取り・進行の4画面を1つにした自分用のWebアプリとして形になりました。

欲しかったもの=作ったもの

「思うようなものがなかった」の中身を言葉にするより、作ったものの画面を並べたほうが早いので、そうします。名前は「ピアノコード練習帳」。ブラウザで動く1本のWebアプリで、上のタブで4つの画面を切り替えます。

ピアノコード練習帳のコード辞典画面。上にコード名と構成音、ルート音と種類の選択、下に鍵盤があり構成音が色分けされている

画面何をするか中身
コード辞典コードを選ぶと鍵盤上に構成音が光り、鳴らせるルート12音×種類21(三和音6・セブンス8・テンションその他7)。転回形の切り替え、五線譜、右手の運指の目安、一言の説明
押鍵クイズ出されたコード名の構成音を鍵盤で押す出題範囲を「基本の三和音/三和音すべて/セブンスまで/すべて」から選ぶ。答え合わせ、答えを見る
聴き取り鳴った和音の種類を当てる同じ出題範囲の設定。参考にCを基準にした響きの聴き比べが付く
コード進行定番進行を選び、キーを変えてループ再生8進行×12キー、テンポ3段階、五線譜、そのキーのダイアトニックコード一覧

辞典の21種類は、メジャー・マイナー・dim・aug・sus4・sus2の三和音、M7・7・m7・m7♭5・dim7・mM7・6・m6のセブンス、add9・7sus4・9・M9・m9・7♭5・7♯5のテンション系です。ジャズを弾くならこのくらいは要る、という範囲です。

進行のほうは、カノン進行、王道進行(4536)、小室進行(6451)、ポップス定番(1564)、ツーファイブワン、Just the Two of Us進行、丸サ/循環進行、ブルース(短縮形)の8つ。後半の4つがジャズ寄りなのは趣味です。キーを選ぶと、その進行が12キーのどれでも鳴り、鍵盤に光る音を見ながら手で追える。

練習嫌いのために削ったこと

できあがったものを見返すと、機能を増やすより、練習を始めるまでの手間を減らす方向に寄っています。練習嫌いの自覚が、そうさせたのだと思います。

  • コード名の横に、日本語の一言を付けた。 Cメジャーなら「明るく安定した、いちばん基本の和音」。理屈の前に、まず何の音か分かる
  • 構成音に度数と読みを添えた。 「C=ド・ルート」「E=ミ・長3度」「G=ソ・完全5度」のように。音名と階名は上のボタンで切り替えられる
  • 右手の運指の目安を出した。 Cの基本形なら「1-3-5」。手を置く場所で迷わない
  • クイズは、いちばん狭い範囲から始められる。 最初は「基本の三和音」だけ。全部を相手にしない
  • 鍵盤は常に画面の下にある。 どの画面でも、選んだ和音がそこに光る

裏を返せば、譜面を読む練習も、スケールも、リズムも、このアプリには入っていません。練習嫌いの自分が続けられる範囲だけを入れた、とも言えます。

Web版とiPad版、2つ作っている理由

いま動いているのはブラウザ版で、7月28日にVercelへ置きました。自分用なのでパスワードをかけてあり、URLは公開していません。同じ日のうちに4回更新して、その後は更新していません。ブラウザさえあれば、パソコンでもiPadでも開けます。

それとは別に、iPadのネイティブアプリ版も作り始めています。こちらは前日の7月27日にSwiftUIで書いたもので、コード辞典・クイズ3形式・進行8種と、中身の設計はWeb版とほぼ同じです。音源ファイルは持たず、AVAudioSourceNode※1で基音と倍音を足し合わせて和音を合成しています。

なぜ2つ作るのか。ブラウザ版で困っていないなら、それで終わりでよさそうなものです。理由はひとつで、いずれMIDIキーボードをつないで「実際に押した和音」を判定させたいからです。iPadの画面をタップして答えるより、本物の鍵盤で押したものを判定してもらうほうが、練習として本物に近い。ところがiPadのSafariはWeb MIDI APIに対応していません※2※3。ブラウザ版では、この機能は原理的に作れない。ネイティブなら、AppleのCore MIDI※4で鍵盤の入力を受け取れます。判定の中身は、押されている音の集合をコードの構成音の集合と照らし合わせるだけなので、クイズの判定ロジックがそのまま使えます。

現在地を正直に書くと、ネイティブ版はMacでビルドしている途中で、まだ自分のiPadでは動いていません。MIDIの部分も未着手です。ブラウザ版があるので焦ってはいませんが、「インストールして使うアプリ」にするところで足踏みしています。

20年目に分かったこと

このアプリでピアノがうまくなったかは、まだ言えません。作ってから1か月も経っていないし、練習嫌いが治ったわけでもない。言えるのは、20年間ずっと後回しにしていた「コードを覚える」の入口が、開けばすぐそこにある状態になった、ということだけです。

コードは、このブログのほかの道具と同じく生成AIと一緒に書いています。自分がやったのは、欲しい画面を決めることと、入れるコードと進行の範囲を決めることです。それは20年ピアノに触ってきた人間にしか決められない部分で、そこだけ自分で決めれば、あとは数日で形になる。「探しても無い」を「無いなら作る」に変えるための費用は、思っていたよりずっと下がっていました。

ネイティブ版がiPadで動き、MIDIキーボードで和音を判定できるようになったら、続きを書きます。

参考文献・出典

※1 : 「AVAudioSourceNode | Apple Developer Documentation」 |Apple Developer https://developer.apple.com/documentation/avfaudio/avaudiosourcenode

※2 : 「Web MIDI API - Web API | MDN」 |MDN Web Docs https://developer.mozilla.org/ja/docs/Web/API/Web_MIDI_API

※3 : 「Web MIDI API | Can I use… Support tables for HTML5, CSS3, etc」 |Can I use https://caniuse.com/midi

※4 : 「Core MIDI | Apple Developer Documentation」 |Apple Developer https://developer.apple.com/documentation/coremidi

よくある質問

ピアノのコードを覚えるアプリを自作するには何が要りますか?

このブログの運営者が作ったのは、コード辞典・押鍵クイズ・聴き取りクイズ・コード進行の4画面を持つ、ブラウザだけで動く1本のWebアプリです。コードは生成AIと一緒に書き、自分では欲しい画面と、入れるコードや進行の範囲を決めました。作った経緯と各画面の中身は本文に書いています。

iPadのブラウザでMIDIキーボードをつなげますか?

iOSのSafariはWeb MIDI APIに対応していないため、ブラウザ上のアプリからMIDIキーボードの入力を受け取ることはできません。MIDIキーボードで押した和音を判定したいなら、ネイティブアプリとしてCore MIDIを使う必要があります。このブログの運営者がWeb版と別にiPadのネイティブ版を作り始めたのは、それが理由です。