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

VexFlow 使い方に戻る。

概要

　タイトルを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 } });

動作	Keyword	指定値の例
置き換えするタグのID名	elementId	'VexFlow'

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

動作	Keyword	指定値の例
描画エリア横幅	width	1900
描画エリア高さ幅	height	195

　この命令のように new を使ってオブジェクトを生成する手法を使う場合、VexFlow独自のオブジェクト名である場合は、個別にオブジェクトを使うことを宣言する必要があります。Factoryの場合は

const {
  Factory,
} = Vex.Flow;

　のように宣言します。

　ここまでの説明をまとめたプログラムコードは以下のようになります。まだ何も起こらないコードです。

<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>//※1pageで一度だけ記述する行
<div id="VexFlow"></div>
<script>
(function(){
  const {
    Factory,
  } = Vex.Flow;

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

　何もおこらないので、上記のコードは実行しないで下さい。時間の無駄です。

　

五線譜

　上記で土台は出来上がっていることになりますので、少しコードを追加すると五線譜が描けます。

<div id="yonet202301_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202301_Output01', width: 1000, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 400).setContext(ctx).draw();
})();
</script>

　Stave オブジェクトを利用しますので、宣言のところに Stave を追加しました。

　

VexFlow 使い方に戻る。