VexFlow 描画エリアと5線譜と小節

概要

　タイトルを5線譜にしようかと思ったのだけれど、その根本にある描画エリアを説明しなければならないのだけど、描画エリアだけを説明するのも内容が少なすぎる。そして、5線譜を繋ぐだけの小節についても説明した方が手っ取り早いと思ったのです。なので「部屋とYシャツと私」みたいなタイトルにしました。その前にコードの書き方を説明しておきます。

コードの書き方

　WebSiteに複数の楽譜を掲載することもあると思いますが、VexFlowはコードの中にHTMLタグの任意で指定したIDが付与されているタグに対して、楽譜へ置き換えるように動作します。

　つまり、id="VefFlow"を標的とすると置き換えられるのは、

<div id="VexFlow"></div>

　のようなHTMLです。これで置き換えられる部分がわかったと思います。次はコード側の標的の設定の仕方を紹介しなければなりませんが、また少しあとで、紹介します。

　複数の楽譜を描画する場合は、上記のような異なるIDを持つタグを作成します。コード側では、複数の楽譜で似たような変数を使いますが、重複していたら相互に影響しあってしまいます。そこで、楽譜ごとに関数にすることで変数を隠蔽することができます。ひとつのWebPageでJavaScriptの変数が影響し合うことはないです。そこで便利なのが、以下のような即時実行関数です。

(function(){
  //ここにコード
})();

　ここにコードと書いてある部分に一つの楽譜についてのコードを記述します。JavaScriptがわかっていないと、こういったアイデアが生まれにくいので、VexFlowを操るのは大変だと思います。自分も初心者程度の知識しかありませんので、少なくとも自分と同じくらいまで学習された方がよろしいでしょう。

　この先の説明では即時実行関数の中に記述するということを説明することは、ほとんど無いと思います。以後お見知りおきを。

HTMLタグの置き換えと描画エリア

　先に説明したようなHTMLのタグを置き換える指定と、描画エリアの指定は以下のように行います。

const f = new Factory({ renderer: { elementId: 'VexFlow', width: 1900, height: 195 } });

置き換えするタグのID名 elementId 例値: VexFlow

　上記の elementId: の後ろのシングルクォーテーションで囲われた文字列が置き換え対象のタグID名です。同じIDを持つタグが複数あるとおかしくなるので唯一である必要があります。使われなさそうなID名になるような癖をつけておいた方がよいでしょう。例えば、例では VexFlow ですが、yonet202301_Output00 とかドメイン名＋年月＋'Output'＋通し番号とかね。

描画エリア横幅 width 例値: 1900
描画エリア高さ幅 height 例値:195

VexFlow 使い方に戻る。