概要
ジャズのセッションやライブでは、リードシートと呼ばれる楽譜をよく使う。メロディとコードだけが書かれた楽譜である。
オリジナル曲を演る場合や採譜した場合、移調して演る場合など、リードシートを自分で作ることになるが、楽譜作成ソフト、たとえば Finale や Sibelius、無料どころでは MuseScore などを使ってリードシートを作ると、以下のような点が不便だったりする。
- コードのサフィックス（m7(b5)など）が、もともと用意されたものしか使えない
- 入力に時間がかかる
- リードシートを少し直すだけのために時間をかけてソフトを立ち上げるのがだるい（往々にしてこれらのソフトは重い、、、気がする）
なので、リードシートを作ることに特化し、機能を減らした分このあたりが強化されたような楽譜作成ソフトがあったらいいな、と前から思っていたし、ある程度の使用に耐えうるものができれば需要はあるかもしれない。
ので、自分で作ろうとしている。
作りたいもの
作りたいものの要件は：
- ブラウザ上で動く。
- 音符やコードを表す文字列（文法は後述）を入力すると、楽譜が生成される。できれば動的に。
- コードのサフィックスにはかなりの自由度がある（add3、#15のような普通使わない指定をしたり、mixoのように自由に単語を入れられたりする）。
- 画像をダウンロードできる（png, pdf）。←難しい
以前作ったもの
前にも一度作ろうとした→ Lead Sheet Maker
これは、プログラミング言語RustでSPA（シングルページアプリケーション）を作るフレームワーク「Seed」というものを知って、Rustの勉強がてら作ったものだった。
だが、
- テキストエリアに入力するたびに再描画させていたが、だんだん重くなってしまった。
- 定義しなければならない型が多くて大変だった。適当にやっていたら定義をミスって嫌になった。
- 楽譜はSVGとして表示するので、その各要素もDOMとして個別に操作できれば軽いが、うまくできる自信がなかった。
ので、途中でやめてしまった。
今回作っているもの
今回作っているのは→ Lead Sheeter
今回はRustは使わず、Svelte+TypeScriptで全部作っている。
Svelteは、VueやReactのようなコンポーネントベースのフロントエンドフレームワークで、「State of JS 2020」でもっとも開発者満足度の高いフレームワークにも選ばれている。ダントツで爆速という話もあり、前々から少しずつ調べてはいたが、せっかくなのでこれを使ってみた。
楽譜の各要素をSvelteの要素として作っているので、変更があった部分のみ再描画されている（と思う...）。
使い方
簡単に書き方を整理する。調号や拍子、小節線も決められる。
コードの書き方
コードの書き方は、次のようにしている：
- C
- F#_7
- Bb_7^b13
つまり、(音名)_(右下につけるもの)^(右上につけるもの)。
また、bや#はフラットやシャープに置き換わる。
音符の書き方
音符の書き方は、次のようにしている：
- B3.1/4（3オクターブ目のB、4分音符）
- Eb5.3/8（5オクターブ目のEフラット、付点4分音符）
- D4.1/1:t（4オクターブ目のD、全音符、うしろにタイ）
- Gn4.1/2（4オクターブ目のGにナチュラルをつける、2分音符）
つまり、(音名)(オクターブ).(音価を分数で書く)。
また、末尾に :t を付けると次の音との間にタイを描く（ちゃんと小節線を跨いでくれる）。
変化記号について
変化記号、すなわちシャープ、フラット、ナチュラルなどは、実際に楽譜に書くかどうかと対応させるようにした。つまり、調号が何かや、同じ小節で既にその音が登場したかどうかに関わらず、bをつけたらその音符にフラットがつき、#をつけたらその音符にシャープがつき、nをつけたらその音符にナチュラルがつく。
今後の展望
とりあえずある程度までのものができたので、もう少し真面目に要件をまとめて、また作り直したい。
改善、実現したいこと：
- 音符の書き方がかなり複雑になってしまっているので改善したい。特に音価は、5連符、7連符などもゆくゆくは作りたいと考えて分数にしていたが、普通にわかりにくいので、4が8分音符、5が4分音符、6が2分音符で、付点は . をつける、のようにしようと考えている。
- PNGやPDFで保存できる機能ができればうれしい。
- 途中のデータをダウンロードしておいて、それをインポートして編集が再開できる機能。
- 今はコードから楽譜の画像（SVG）を作る部分は全てブラウザにやらせているが、そこをサーバー側でもやればパフォーマンスが改善しないかな？と考えている。
技術的には、SvelteKit（Vueに対するNuxt.js、Reactに対するNext.jsのようなものとしてSvelteに対するSvelteKitがある。まだベータ版。）を使えば、今回使ったSvelteコンポーネントを使い回せるし、SSR（サーバーサイドレンダリング）でよしなにやってくれるのではないかと考えている（まだ不明）ので、SvelteKitで作ってみる予定。
ちなみに、このブログもSvelteKitで作っている。