VexFlow 音部記号のソースを表示

<yjavascript></script>
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<script>
</yjavascript>
[[VexFlow 使い方]]に戻る。
== '''概要''' ==
　音部記号はト音記号、ヘ音記号、ハ音記号があります。ト音記号は丸と縦棒の交差するところが、ト音です。イ＝Ra、ロ＝Si、ハ＝Do、ニ＝Re、ホ＝Mi、ヘ＝Fa、ト＝So。つまり 「ソ」 だね。へ音記号は、：の間に挟まった線の上ががヘ音。つまり「ファ」です。ト音記号に比べて線一つ分低い音が主体になります。ハ音記号はチェロ、ビオラ、コントラバスとかでよく使われる記号で、上下対象の真ん中にあたる部分がハ音。つまり、「ド」です。


　ト音記号は通常、下から二本目が交差するポイントに配置されます。へ音記号は下から四本目が：の上下の点で挟むように配置します。くるっと丸めてるところの上とも言えます。ハ音、下から三本目が中央になるように配置します。しかし、ハ音は特に上下をずらして使うことも多いです。アルトとかテナーとかソプラノとかねいろいろあります。ト音もヘ音もずらしていいです。滅多にみかけませんけど。


　なんで、こんなことになってるのかは知りません。長い曲を作ってるクラシックの大御所なんかは、臨時の五線譜を上や下に足すのが嫌でうまれた手法なのかなとは思います。演奏する側は楽器を持ちかえることがあるとしたら、やりにくいかもしれません。ピアノの低いところはヘ音記号。そのほかは大体ト音記号が使われるので、ヘ音記号はちょっと特殊で、ハ音記号はかなり特殊な感じで認識されていると思います。これをでは、それぞれを描いてみましょう。


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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass").setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("alto").setContext(ctx).draw();
})();
</yjavascript>


<syntaxhighlight lang="JavaScript" line start="1">
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass").setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("alto").setContext(ctx).draw();
})();
</script>
</syntaxhighlight>

　stave1が左(ト音記号を表示)、stave2が真ん中(ヘ音記号を表示)、stave3が右(ハ音記号を表示)の楽譜に相当します。それぞれト音記号は12行目、ヘ音記号15行目、ハ音記号は18行目が対応します。


　小節を生成した変数のメンバ関数の.addClef("")という関数が機能していて、その関数の返却値に対して、Staveを描画したときと同じように.setContext()や.draw()が指示されています。.addclefの引数に指定できる値は以下のようになっています。VexFlow入門でも示したモノです。


<table style="border: 0; border-collapse: collapse;">
<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
  <td>シーケンス</td>
  <td>意味</td>
</tr>
<tr>
  <td>treble</td>
  <td>ト音記号 𝄞</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>bass</td>
  <td>ヘ音記号 𝄢</td>
</tr>
<tr>
  <td>alto</td>
  <td>ハ音記号(アルト) 𝄡</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>percussion</td>
  <td>打楽器記号</td>
</tr>
<tr>
  <td>tenor</td>
  <td>ハ音記号(テナー) 𝄡一つ上にシフト</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>soprano</td>
  <td>ハ音記号(ソプラノ) 𝄡二つ下にシフト</td>
</tr>
<tr>
  <td>mezzo-soprano</td>
  <td>ハ音記号(メゾソプラノ) 𝄡一つ下にシフト</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>baritone-c</td>
  <td>ハ音記号(バリトン) 𝄡二つ上にシフト</td>
</tr>
<tr>
  <td>baritone-f</td>
  <td>ヘ音記号(バリトン) 𝄢一つ下にシフト</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>subbass</td>
  <td>ヘ音記号(サブバス) 𝄢一つ上にシフト</td>
</tr>
<tr>
  <td>french</td>
  <td>ト音記号(フレンチ) 𝄞一つ下にシフト</td>
</tr>
</table>


== '''応用''' ==
　あまりみかけない表記ですが、オクターブ上下の音部記号というのもありまして、以下のように指定します。

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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble", "default", "8va").setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass", "default", "8vb").setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("alto", "small").setContext(ctx).draw();
})();
</yjavascript>


<syntaxhighlight lang="JavaScript" line start="1">
<div id="yonet202302_Output02"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble", "default", "8va").setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass", "default", "8vb").setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("alto", "small").setContext(ctx).draw();
})();
</script>
</syntaxhighlight>


　addClefの引数は、3つまで指定できて、

*第一引数は音符記号の種類を指定します。 選択肢はひとつ前の表を参照。
*第二引数は記号の大きさが指定できます。 default or small 
*第三引数は記号の上下に8をつけるか指定できます。 8va 上 or 8vb 下 

　

== '''応用2''' ==
　音符を描くのと同じ仕組みの中に音部記号を指定することができます。音符に対しての音部記号を与えると、その音部記号に従った音の高さに音符が描画されます。音符の中に描く音部記号と組み合わせて使うとよいかもしれません。そのような臨時の音部記号はまれにクラシックの楽曲では登場します。作曲者は手を使わないための発想が豊かで頭が良いかもしれない。


　まだ音符を描くことを説明していない時点では、この応用のプログラム全体を理解するのは難しいと思います。こんなことも言ってたなーくらいで覚えてもらえればと思います。


<div id="yonet202302_Output03"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote, 
    Formatter, 
    Renderer,
    Stem,
    Voice,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output03', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble", "default", "8va").setContext(ctx).draw();

  const notesBar1 = [
    f.StaveNote({ keys: ['c/4'], duration: '4'}),
    f.ClefNote({ type: 'bass', options: { size: 'small' } }),
    f.StaveNote({ keys: ['c/4'], duration: '4', clef: 'bass'}),
    f.StaveNote({ keys: ['e/4'], duration: '4'}),
    f.StaveNote({ keys: ['f/4'], duration: '4'}),
  ];
  //Formatter.FormatAndDraw(ctx, stave1, notesBar1);
  const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
  f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
  Formatter.FormatAndDraw(ctx, stave1, notesBar1);
})();
</yjavascript>


<syntaxhighlight lang="JavaScript" line start="0">
<div id="yonet202302_Output03"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote, 
    Formatter, 
    Renderer,
    Stem,
    Voice,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output03', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble", "default", "8va").setContext(ctx).draw();

  const notesBar1 = [
    f.StaveNote({ keys: ['c/4'], duration: '4'}),
    f.ClefNote({ type: 'bass', options: { size: 'small' } }),
    f.StaveNote({ keys: ['c/4'], duration: '4', clef: 'bass'}),
    f.StaveNote({ keys: ['e/4'], duration: '4'}),
    f.StaveNote({ keys: ['f/4'], duration: '4'}),
  ];
  //Formatter.FormatAndDraw(ctx, stave1, notesBar1);
  const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
  f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
  Formatter.FormatAndDraw(ctx, stave1, notesBar1);
})();
</script>
</syntaxhighlight>

　注目すべきは、20行目、21行目です。Factoryオブジェクトから生成された変数 f のメンバ関数 .ClefNote関数は、臨時の音部記号を音符のように描くことができる手法です。大きさの options: {size: ' '} には、default or smallが選択できます。臨時の時は通常より小さい形の音部記号をよく使うので、ここでsmallを指定するのは一般的です。type: は音部記号を描くaddClefのときの第一変数に対応する値です。


　.StaveNoteも音符の描き方を覚えないと使えないですが、その中でClefというキーの値を設定できるようになっていて、これを使うと、StaveNoteで指定する音符自体も音部記号に沿った部分に音符が描かれます。指定しないで音符を描くと、常にデフォルトのト音記号が適用されている調子で音符の位置が描画されます。なので、同じc/4でもClefでbassつまりヘ音記号が指定されていれば、c/4は、五線譜の一番上の更に一つ上の位置がc/4にあたるので、そこに音符が描かれます。


　いまは、そんなこと言ってたなぁ程度まで理解しておけばよいでしょう。実際に臨時音部記号を使うときにここに戻ってきたころには、理解できるようになっているでしょう。


　

[[VexFlow 使い方]]に戻る。