「VexFlow 調号」の版間の差分

提供：yonewiki
 
(同じ利用者による、間の90版が非表示)
27行目: 27行目:


　ここまでの基礎的なことをわかった上でなら調号は使いやすくなったと思います。さっそく描いてみましょう。ト音記号以外につけるときもややこしいですが、できるようになると思います。
　ここまでの基礎的なことをわかった上でなら調号は使いやすくなったと思います。さっそく描いてみましょう。ト音記号以外につけるときもややこしいですが、できるようになると思います。
== '''シャープ系 ＃''' ==




79行目: 82行目:


<syntaxhighlight lang="JavaScript" line start="1">
<syntaxhighlight lang="JavaScript" line start="1">
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<div id="yonet202302_Output01"></div>
<div id="yonet202302_Output01"></div>
<script>
<script>
132行目: 136行目:


　次にフラットでの表記です。
　次にフラットでの表記です。
== '''フラット系 ♭''' ==




181行目: 187行目:
})();
})();
</yjavascript>
</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: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('F').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('Bb').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('Eb').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('Ab').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('Db').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('Gb').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();
  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('Cb').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
　指定する値は次のような順になります。F→Bb→Eb→Ab→Db→Gb→Cbです。短調の表記指定するときも合わせて表にすると以下のようになります。
== '''指定する値のまとめ''' ==
'''■シャープ系'''
<table style="border: 0; border-collapse: collapse;">
<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
  <td>♯の数</td>
  <td>長調名　　</td>
  <td>長調表記　　</td>
  <td>短調名　　</td>
  <td>短調表記　　</td>
</tr>
<tr>
  <td>1</td>
  <td>ト長調</td>
  <td>G</td>
  <td>ホ短調</td>
  <td>Em</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>2</td>
  <td>二長調</td>
  <td>D</td>
  <td>ロ短調</td>
  <td>Bm</td>
</tr>
<tr>
  <td>3</td>
  <td>イ長調</td>
  <td>A</td>
  <td>嬰へ短調</td>
  <td>F#m</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>4</td>
  <td>ホ長調</td>
  <td>E</td>
  <td>嬰ハ短調</td>
  <td>C#m</td>
</tr>
<tr>
  <td>5</td>
  <td>ロ長調</td>
  <td>B</td>
  <td>嬰ト短調</td>
  <td>G#m</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>6</td>
  <td>嬰へ長調</td>
  <td>F#</td>
  <td>嬰二短調</td>
  <td>D#m</td>
</tr>
<tr>
  <td>7</td>
  <td>嬰ハ長調</td>
  <td>C#</td>
  <td>嬰イ短調</td>
  <td>A#m</td>
</tr>
</table>


　
　
'''■フラット系'''
<table style="border: 0; border-collapse: collapse;">
<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
  <td>♭の数</td>
  <td>長調名　　</td>
  <td>長調表記　　</td>
  <td>短調名　　</td>
  <td>短調表記　　</td>
</tr>
<tr>
  <td>1</td>
  <td>へ長調</td>
  <td>F</td>
  <td>二短調</td>
  <td>Dm</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>2</td>
  <td>変ロ長調</td>
  <td>Bb</td>
  <td>ト短調</td>
  <td>Gm</td>
</tr>
<tr>
  <td>3</td>
  <td>変ホ長調</td>
  <td>Eb</td>
  <td>ハ短調</td>
  <td>Cm</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>4</td>
  <td>変イ長調</td>
  <td>Ab</td>
  <td>ヘ短調</td>
  <td>Fm</td>
</tr>
<tr>
  <td>5</td>
  <td>変二長調</td>
  <td>Db</td>
  <td>変ロ短調</td>
  <td>Bbm</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>6</td>
  <td>変ト長調</td>
  <td>Gb</td>
  <td>変ホ短調</td>
  <td>Ebm</td>
</tr>
<tr>
  <td>7</td>
  <td>変ハ長調</td>
  <td>Cb</td>
  <td>変イ短調</td>
  <td>Abm</td>
</tr>
</table>
記号無しはハ長調、イ短調
　
== '''ヘ音記号のシャープ系 ＃''' ==
　ト音記号をヘ音記号に変えると調号のために描かれる＃の位置はずれます
<div id="yonet202302_Output03"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output03', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("bass").setContext(ctx).draw();
  stave1.addKeySignature('G').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass").setContext(ctx).draw();
  stave2.addKeySignature('D').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("bass").setContext(ctx).draw();
  stave3.addKeySignature('A').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("bass").setContext(ctx).draw();
  stave4.addKeySignature('E').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("bass").setContext(ctx).draw();
  stave5.addKeySignature('B').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("bass").setContext(ctx).draw();
  stave6.addKeySignature('F#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();
  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("bass").setContext(ctx).draw();
  stave7.addKeySignature('C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</yjavascript>
<syntaxhighlight lang="JavaScript" line start="1">
<div id="yonet202302_Output03"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output03', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("bass").setContext(ctx).draw();
  stave1.addKeySignature('G').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass").setContext(ctx).draw();
  stave2.addKeySignature('D').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("bass").setContext(ctx).draw();
  stave3.addKeySignature('A').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("bass").setContext(ctx).draw();
  stave4.addKeySignature('E').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("bass").setContext(ctx).draw();
  stave5.addKeySignature('B').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("bass").setContext(ctx).draw();
  stave6.addKeySignature('F#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();
  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("bass").setContext(ctx).draw();
  stave7.addKeySignature('C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
　上記のように、addClefの引数値を変更するだけで、調号の位置は追従されます。
== '''前の調号を取り消す調号''' ==
　調号が変化する場合で、シャープやフラットの数が減るときは一度、前の調号を取り消す必要があります。ナチュラル♮を設定する必要があります。以下のようなものです。
<div id="yonet202302_Output04"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output04', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G', 'C#').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('D', 'C#').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('A', 'C#').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('E', 'C#').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('B', 'C#').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('F#', 'C#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();
  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('C#', 'C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</yjavascript>
<syntaxhighlight lang="JavaScript" line start="1">
<div id="yonet202302_Output04"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output04', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G', 'C#').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('D', 'C#').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('A', 'C#').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('E', 'C#').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('B', 'C#').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('F#', 'C#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();
  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('C#', 'C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
　13行目のようにaddKeySignature関数の引数に第二引数を使って、キャンセルしたい調号の名前を入れます。差分を計算して必要なところにナチュラル記号が描画されますしたがって、７つめに例示したように C# の調号を描くのに、C#を取り消すような指定した場合、なにも取り消す必要がないため、変化は発生しません。したがって、この表記の効果は、第一引数の調号に使われるシャープやフラットの数と第二引数の数では第二引数の方が数が大きい時だけ描画変動の効果があることになります。
　
== '''音部記号を伴わない調号''' ==
　行の始めには音部記号がありますが途中には有りません。そういった小節の途中で調号が変わる場合には、addClefを使わずに調号を適切な高さに描かれる様な一工夫が必要になりますが、今のところやり方がわかっていません。できないのかもしれない。ト音記号のときに限れば、音部記号を省略した調号の変化を表すことができます。
　
== '''行末における調号の変更予告''' ==
　次のページや次の行から、新しい調号に移調する場合、行の最後にその予告的な記述をするときがあります。
<div id="yonet202302_Output05"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output05', width: 1500, height: 200 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
//  stave1.setBegBarType(0);
//  stave1.setEndBarType(5);
  stave1.addKeySignature('G', 'D').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
//  stave1.setEndClef('treble').setContext(ctx).draw();
  stave1.setEndKeySignature('D').setContext(ctx).draw();
})();
</yjavascript>
<syntaxhighlight lang="JavaScript" line start="1">
<div id="yonet202302_Output05"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output05', width: 1500, height: 200 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G', 'D').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  stave1.setEndKeySignature('D').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
　最後から2行目の setEndKeySignature関数を使うと末尾に調号を付与できます。
　
== '''特殊な表記(微分音)''' ==
　シャープやフラットには、特殊な表記があります。一般的なのはダブルシャープやダブルフラットまでだと思いますが、あまりみかけない特殊な表記に8分の1音上げ、4分の1音上げ、8分の3音上げ、半音上げ、8分の5音上げ、4/分の3音上げ、8分の7音上げ、そして、そのフラット版、更には3分法の6分の1音上げ、3分の1音上げ、3分の2音上げ、6分の5音上げとそのフラット版があります。♭の場合、フラットの旗にトレモロ記号のようなものをつけたり、フラットマークを逆さにしたり下矢印を付けたりします。＃の場合は縦棒を一つにしたり3つにしたり、上矢印をつけたりします。VexFlowでは4分の1と4分の3の表記はできるようになっています。このような特殊な表記は使わないので、覚えなくても、使い方がわからなくても影響ない。
　意味はわからないですが、他にもbs、bss、+-、++-が指定できる他、なぞの記号が多数指定できます。面倒なのでペロッてキーワードだけはっておきます。どんなマークが出てくるかは実際にやってみるといいんじゃないかな。
<div id="yonet202302_Output06"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
    KeySignature,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output06', width: 1500, height: 400 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  let KeySig1 = new KeySignature('Cb');
  KeySig1.alterKey(['d', 'd', 'd', 'd', 'd', 'd', 'd']);
  KeySig1.setPadding(18);
  KeySig1.addToStave(stave1);
  stave1.setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(330, 50, 300).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  let KeySig2 = new KeySignature('Cb');
  KeySig2.alterKey(['db', 'db', 'db', 'db', 'db', 'db', 'db']);
  KeySig2.setPadding(18);
  KeySig2.addToStave(stave2);
  stave2.setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(650, 50, 300).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  let KeySig3 = new KeySignature('C#');
  KeySig3.alterKey(['+', '+', '+', '+', '+', '+', '+']);
  KeySig3.setPadding(18);
  KeySig3.addToStave(stave3);
  stave3.setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 300).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  let KeySig4 = new KeySignature('C#');
  KeySig4.alterKey(['++', '++', '++', '++', '++', '++', '++']);
  KeySig4.setPadding(18);
  KeySig4.addToStave(stave4);
  stave4.setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(330, 250, 300).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  let KeySig5 = new KeySignature('D');
  KeySig5.alterKey(['o', 'k']);
  KeySig5.setPadding(18);
  KeySig5.addToStave(stave5);
  stave5.setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
})();
</yjavascript>
<syntaxhighlight lang="JavaScript" line start="1">
<div id="yonet202302_Output06"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    KeySignature,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202302_Output06', width: 1500, height: 400 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  let KeySig1 = new KeySignature('Cb');
  KeySig1.alterKey(['d', 'd', 'd', 'd', 'd', 'd', 'd']);
  KeySig1.setPadding(18);
  KeySig1.addToStave(stave1);
  stave1.setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  const stave2 = new Stave(330, 50, 300).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  let KeySig2 = new KeySignature('Cb');
  KeySig2.alterKey(['db', 'db', 'db', 'db', 'db', 'db', 'db']);
  KeySig2.setPadding(18);
  KeySig2.addToStave(stave2);
  stave2.setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();
  const stave3 = new Stave(650, 50, 300).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  let KeySig3 = new KeySignature('C#');
  KeySig3.alterKey(['+', '+', '+', '+', '+', '+', '+']);
  KeySig3.setPadding(18);
  KeySig3.addToStave(stave3);
  stave3.setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();
  const stave4 = new Stave(10, 250, 300).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  let KeySig4 = new KeySignature('C#');
  KeySig4.alterKey(['++', '++', '++', '++', '++', '++', '++']);
  KeySig4.setPadding(18);
  KeySig4.addToStave(stave4);
  stave4.setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();
  const stave5 = new Stave(330, 250, 300).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  let KeySig5 = new KeySignature('D');
  KeySig5.alterKey(['o', 'k']);
  KeySig5.setPadding(18);
  KeySig5.addToStave(stave5);
  stave5.setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
　一番左上から右へ、右端にいったら一段下の左端へ、そしてまた右へという順で4分の1音下げ、4分の3音下げ、4分の1音上げ、4分の3音上げと指定しました。3分6分系と8分系の記号を適用する方法はVexFlowには無いみたいです。最後は o と k という指定をした場合の表記です。
　調べてみたんですけど、フラットやシャープの旗にスラッシュがつく感じの(++-、+-、+、d、bs、bss)はアラビア音階で使われるものらしく、フラットの左右反転だと9分の1音下げ、スラッシュが１つだと9分の4音下げがスラッシュが二つつくと9分の8音下げです。9分の5音下げが、通常のフラットの扱いになるそうです。反対から9分の4音上げが、シャープになるそうで、縦一本の半シャープが9分1音上げ、縦一本の半シャープにスラッシュ一つが9分5音上げ、シャープにスラッシュ一本をいれたものが9分の8音上げという対応です。ｏで表示される記号はソリという名前で半シャープと同じ意味だそうです。ｋはコロンといって左右反転フラットと同じ意味になるそうです。アラビア音階の場合は楽譜のどこかで指示しておかないとわからないかもしれませんね。3分6分系と8分系を表す記号がヘルエリノーテーションという体系で、もっとこまかい指示のサジタルノーテーションというものがあるそうです。サジタルノーテーションのどうでもよさげなことにまで対応しておきながらヘルエリノーテーションを対応していないVexFlow。不思議だわ。
*[https://note.com/nayuta_823543/n/ndc3d1364e6ba ヘルエリノーテーション・サジタルノーテーションについて説明のあるサイト]
*[https://swarajmusic.com/2021/10/07/%E3%82%A2%E3%83%A9%E3%83%93%E3%82%A2%E9%9F%B3%E9%9A%8E%E3%80%80%E9%9F%B3%E6%A5%BD%E5%A5%BD%E3%81%8D%E3%81%AA%E3%82%89%E7%9F%A5%E3%82%89%E3%81%AA%E3%81%84%E3%81%A8%E3%83%A4%E3%83%90%E3%81%84%E5%BE%AE/ アラビア音階について説明のあるサイト]
6項目め以降がサジタルノーテーション系記号
<table style="border: 0; border-collapse: collapse;">
<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
  <td>コード</td>
</tr>
<tr>
  <td>accSagittal5v7KleismaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>bbs</td>
</tr>
<tr>
  <td>bs</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>+-</td>
</tr>
<tr>
  <td>++-</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v7KleismaDown</td>
</tr>
<tr>
  <td>accSagittal5CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5CommaDown</td>
</tr>
<tr>
  <td>accSagittal7CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal7CommaDown</td>
</tr>
<tr>
  <td>accSagittal25SmallDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal25SmallDiesisDown</td>
</tr>
<tr>
  <td>accSagittal35MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal35MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal11MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal11MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal11LargeDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal11LargeDiesisDown</td>
</tr>
<tr>
  <td>accSagittal35LargeDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal35LargeDiesisDown</td>
</tr>
<tr>
  <td>accSagittalSharp25SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat25SUp</td>
</tr>
<tr>
  <td>accSagittalSharp7CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7CUp</td>
</tr>
<tr>
  <td>accSagittalSharp5CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5CUp</td>
</tr>
<tr>
  <td>accSagittalSharp5v7kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v7kUp</td>
</tr>
<tr>
  <td>accSagittalSharp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat</td>
</tr>
<tr>
  <td>accSagittalSharp5v7kUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v7kDown</td>
</tr>
<tr>
  <td>accSagittalSharp5CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5CDown</td>
</tr>
<tr>
  <td>accSagittalSharp7CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7CDown</td>
</tr>
<tr>
  <td>accSagittalSharp25SUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat25SDown</td>
</tr>
<tr>
  <td>accSagittalSharp35MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat35MDown</td>
</tr>
<tr>
  <td>accSagittalSharp11MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11MDown</td>
</tr>
<tr>
  <td>accSagittalSharp11LUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11LDown</td>
</tr>
<tr>
  <td>accSagittalSharp35LUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat35LDown</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp25SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat25SUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp7CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat7CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp5CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat5CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp5v7kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat5v7kUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat</td>
</tr>
<tr>
  <td>accSagittal7v11KleismaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal7v11KleismaDown</td>
</tr>
<tr>
  <td>accSagittal17CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal17CommaDown</td>
</tr>
<tr>
  <td>accSagittal55CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal55CommaDown</td>
</tr>
<tr>
  <td>accSagittal7v11CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal7v11CommaDown</td>
</tr>
<tr>
  <td>accSagittal5v11SmallDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v11SmallDiesisDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v11SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v11SUp</td>
</tr>
<tr>
  <td>accSagittalSharp7v11CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v11CUp</td>
</tr>
<tr>
  <td>accSagittalSharp55CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat55CUp</td>
</tr>
<tr>
  <td>accSagittalSharp17CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat17CUp</td>
</tr>
<tr>
  <td>accSagittalSharp7v11kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v11kUp</td>
</tr>
<tr>
  <td>accSagittalSharp7v11kUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v11kDown</td>
</tr>
<tr>
  <td>accSagittalSharp17CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat17CDown</td>
</tr>
<tr>
  <td>accSagittalSharp55CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat55CDown</td>
</tr>
<tr>
  <td>accSagittalSharp7v11CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v11CDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v11SUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v11SDown</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp5v11SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat5v11SUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp7v11CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat7v11CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp55CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat55CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp17CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat17CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp7v11kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat7v11kUp</td>
</tr>
<tr>
  <td>accSagittal23CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal23CommaDown</td>
</tr>
<tr>
  <td>accSagittal5v19CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v19CommaDown</td>
</tr>
<tr>
  <td>accSagittal5v23SmallDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v23SmallDiesisDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v23SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v23SUp</td>
</tr>
<tr>
  <td>accSagittalSharp5v19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v19CUp</td>
</tr>
<tr>
  <td>accSagittalSharp23CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat23CUp</td>
</tr>
<tr>
  <td>accSagittalSharp23CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat23CDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v19CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v19CDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v23SUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v23SDown</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp5v23SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat5v23SUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp5v19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat5v19CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp23CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat23CUp</td>
</tr>
<tr>
  <td>accSagittal19SchismaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal19SchismaDown</td>
</tr>
<tr>
  <td>accSagittal17KleismaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal17KleismaDown</td>
</tr>
<tr>
  <td>accSagittal143CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal143CommaDown</td>
</tr>
<tr>
  <td>accSagittal11v49CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal11v49CommaDown</td>
</tr>
<tr>
  <td>accSagittal19CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal19CommaDown</td>
</tr>
<tr>
  <td>accSagittal7v19CommaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal7v19CommaDown</td>
</tr>
<tr>
  <td>accSagittal49SmallDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal49SmallDiesisDown</td>
</tr>
<tr>
  <td>accSagittal23SmallDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal23SmallDiesisDown</td>
</tr>
<tr>
  <td>accSagittal5v13MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v13MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal11v19MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal11v19MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal49MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal49MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal5v49MediumDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v49MediumDiesisDown</td>
</tr>
<tr>
  <td>accSagittal49LargeDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal49LargeDiesisDown</td>
</tr>
<tr>
  <td>accSagittal11v19LargeDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal11v19LargeDiesisDown</td>
</tr>
<tr>
  <td>accSagittal5v13LargeDiesisUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5v13LargeDiesisDown</td>
</tr>
<tr>
  <td>accSagittalSharp23SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat23SUp</td>
</tr>
<tr>
  <td>accSagittalSharp49SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat49SUp</td>
</tr>
<tr>
  <td>accSagittalSharp7v19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v19CUp</td>
</tr>
<tr>
  <td>accSagittalSharp19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat19CUp</td>
</tr>
<tr>
  <td>accSagittalSharp11v49CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11v49CUp</td>
</tr>
<tr>
  <td>accSagittalSharp143CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat143CUp</td>
</tr>
<tr>
  <td>accSagittalSharp17kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat17kUp</td>
</tr>
<tr>
  <td>accSagittalSharp19sDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat19sUp</td>
</tr>
<tr>
  <td>accSagittalSharp19sUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat19sDown</td>
</tr>
<tr>
  <td>accSagittalSharp17kUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat17kDown</td>
</tr>
<tr>
  <td>accSagittalSharp143CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat143CDown</td>
</tr>
<tr>
  <td>accSagittalSharp11v49CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11v49CDown</td>
</tr>
<tr>
  <td>accSagittalSharp19CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat19CDown</td>
</tr>
<tr>
  <td>accSagittalSharp7v19CUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat7v19CDown</td>
</tr>
<tr>
  <td>accSagittalSharp49SUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat49SDown</td>
</tr>
<tr>
  <td>accSagittalSharp23SUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat23SDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v13MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v13MDown</td>
</tr>
<tr>
  <td>accSagittalSharp11v19MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11v19MDown</td>
</tr>
<tr>
  <td>accSagittalSharp49MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat49MDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v49MUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v49MDown</td>
</tr>
<tr>
  <td>accSagittalSharp49LUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat49LDown</td>
</tr>
<tr>
  <td>accSagittalSharp11v19LUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat11v19LDown</td>
</tr>
<tr>
  <td>accSagittalSharp5v13LUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFlat5v13LDown</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp23SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat23SUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp49SDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat49SUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp7v19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat7v19CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp19CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat19CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp11v49CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat11v49CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp143CDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat143CUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp17kDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat17kUp</td>
</tr>
<tr>
  <td>accSagittalDoubleSharp19sDown</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalDoubleFlat19sUp</td>
</tr>
<tr>
  <td>accSagittalShaftUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalShaftDown</td>
</tr>
<tr>
  <td>accSagittalAcute</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalGrave</td>
</tr>
<tr>
  <td>accSagittal1MinaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal1MinaDown</td>
</tr>
<tr>
  <td>accSagittal2MinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal2MinasDown</td>
</tr>
<tr>
  <td>accSagittal1TinaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal1TinaDown</td>
</tr>
<tr>
  <td>accSagittal2TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal2TinasDown</td>
</tr>
<tr>
  <td>accSagittal3TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal3TinasDown</td>
</tr>
<tr>
  <td>accSagittal4TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal4TinasDown</td>
</tr>
<tr>
  <td>accSagittal5TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal5TinasDown</td>
</tr>
<tr>
  <td>accSagittal6TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal6TinasDown</td>
</tr>
<tr>
  <td>accSagittal7TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal7TinasDown</td>
</tr>
<tr>
  <td>accSagittal8TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal8TinasDown</td>
</tr>
<tr>
  <td>accSagittal9TinasUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittal9TinasDown</td>
</tr>
<tr>
  <td>accSagittalFractionalTinaUp</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accSagittalFractionalTinaDown</td>
</tr>
<tr>
  <td>accidentalNarrowReversedFlat</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accidentalNarrowReversedFlatAndFlat</td>
</tr>
<tr>
  <td>accidentalWilsonPlus</td>
</tr>
<tr style="background-color: #cccccc;">
  <td>accidentalWilsonMinus</td>
</tr>
</table>
　


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

2023年2月20日 (月) 08:10時点における最新版

VexFlow 使い方に戻る。

概要

　調号とは、五線譜の音部記号の次に記述される符号で、拍子記号がある場合は、音部記号と拍子記号の間に記述します。調号はシャープ＃(これは実際には情報技術用語のハッシュです。シャープは縦の線がまっすぐになります。このように ♯。ですが、便宜上、ここでもシャープとして扱います。） あるいはフラット♭をまとめて記述することで、構成されます。＃や♭は適当に配置されるものではなく、＃や♭が増えて配置される法則があります。


　＃はファ→ド→ソ→レ→ラ→ミ→シの順に増えます。♭はシ→ミ→ラ→レ→ソ→ド→ファの順に増えます。※音部記号がト音記号の場合です。この調号によってキーというものが決まります。以下、特段、ことわりがなければ、ドが C を表す場合を想定して記述します。


　音階とは、ドレミファソラシド(日本名でハニホヘトイロハ)の間隔のように、全音、全音、半音、全音、全音、全音、半音になっています。1オクターブは12分割できて、その内の７つを選ぶ場合に自然に聞こえる間隔になっています。ドから始まる音階は長調になります。明るい音階です。逆に自然に聞こえる間隔ですが、ラか始まる音階、ラシドレミファソラ(日本名でイロハニホヘトイ)は暗い音階で短調と呼ばれています。短調の間隔は全音、半音、全音、全音、半音、全音、全音となっています。どこから始めるかだけの違いで、長調と短調が存在しています。


　シャープもフラットもない調号のない音階はハ(Do-C)長調(C Major)で、イ(La-A)短調(A Minor)のどちらかです。主にどこから始めるかだけで調子は変わります。それに似合う和音をつけると、あからさまに長調と短調の違いが発生します。より長調と短調の違いがくっきりします。その意味でどこから始めるかだけのモノですが、曲としては伴奏に和音が採用されれば、長調と短調はしっかり分けられます。


　では、＃をひとつつけるとどうなるか。ド レ ミ ファ# ソ ラ シ ドですから、全音、全音、全音、半音、全音、全音、半音となります。この構成で長調になる音階はソから始まる音階ト長調(G Major)です。短調になるのはミから始まる音階ホ短調(E Minor)です。


　調号は、このように全音、全音、半音、全音、全音、全音、半音になる調子の始まりの音の名前によって名前が付いています。半音12音でオクターブになるため、11種類あります。＃がひとつ増えるごとの名前とフラットが一つ増えるごとの名前があるということです。＃５個は ♭７個と同じ調子、＃６個は ♭６個と同じ調子、＃７個は ♭５個と同じ調子です。かすかにどっちよりの調子で使われるかによって名前だけが変わる感じです。


　仕組みはわかったと思いますが、直感的に調号の名前を導き出すのには、時間がかかると思います。覚え方は最後の＃の位置の半音上の名前が調号の名前です。半音上に＃がついていれば、それも含めた名前です。＃６個と＃７個のときだけ更に半音上の名前になる感じです。♭のときは最後の♭の位置をファと仮定してファミレドと数えて下がったドに対応するところの音の名前が調号の名前になります。♭がついてるところになることが多く、その場合は♭の分も含めて表現した名前になります。♭が２個以上になると全てそのようになります。日本語だと＃は嬰(えい)、♭は変(へん)をつけます。


　ここまでの基礎的なことをわかった上でなら調号は使いやすくなったと思います。さっそく描いてみましょう。ト音記号以外につけるときもややこしいですが、できるようになると思います。


シャープ系 ＃


<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: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('D').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('A').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('E').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('B').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('F#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>


　13行目にあるようなaddKeySignature()関数の引数に調号名を入れると、それにあわせた、シャープやフラットが描画されます。調号名称にシャープとフラットの7種類づつは重複はなく表せます。あえて言うなら、短調で表現もあるので、その表現を使えば2種類の名前が一つの状態をあらわしています。短調の名称は、すべてマイナーを意味する m を付けることで表現できます。まずは上記にシャープの7種類の調号を表記しました左上から左へ、右端にいったらひとつさがって一番左から右へという順番で、G→D→A→E→B→F#→C#という名称です。


　次にフラットでの表記です。

フラット系 ♭


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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('F').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('Bb').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('Eb').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('Ab').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('Db').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('Gb').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('Cb').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>


　指定する値は次のような順になります。F→Bb→Eb→Ab→Db→Gb→Cbです。短調の表記指定するときも合わせて表にすると以下のようになります。


指定する値のまとめ

■シャープ系

♯の数 長調名　　 長調表記　　 短調名　　 短調表記　　
1 ト長調 G ホ短調 Em
2 二長調 D ロ短調 Bm
3 イ長調 A 嬰へ短調 F#m
4 ホ長調 E 嬰ハ短調 C#m
5 ロ長調 B 嬰ト短調 G#m
6 嬰へ長調 F# 嬰二短調 D#m
7 嬰ハ長調 C# 嬰イ短調 A#m

　

■フラット系

♭の数 長調名　　 長調表記　　 短調名　　 短調表記　　
1 へ長調 F 二短調 Dm
2 変ロ長調 Bb ト短調 Gm
3 変ホ長調 Eb ハ短調 Cm
4 変イ長調 Ab ヘ短調 Fm
5 変二長調 Db 変ロ短調 Bbm
6 変ト長調 Gb 変ホ短調 Ebm
7 変ハ長調 Cb 変イ短調 Abm


記号無しはハ長調、イ短調

　

ヘ音記号のシャープ系 ＃

　ト音記号をヘ音記号に変えると調号のために描かれる＃の位置はずれます 


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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output03', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("bass").setContext(ctx).draw();
  stave1.addKeySignature('G').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("bass").setContext(ctx).draw();
  stave2.addKeySignature('D').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("bass").setContext(ctx).draw();
  stave3.addKeySignature('A').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("bass").setContext(ctx).draw();
  stave4.addKeySignature('E').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("bass").setContext(ctx).draw();
  stave5.addKeySignature('B').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("bass").setContext(ctx).draw();
  stave6.addKeySignature('F#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("bass").setContext(ctx).draw();
  stave7.addKeySignature('C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>


　上記のように、addClefの引数値を変更するだけで、調号の位置は追従されます。


前の調号を取り消す調号

　調号が変化する場合で、シャープやフラットの数が減るときは一度、前の調号を取り消す必要があります。ナチュラル♮を設定する必要があります。以下のようなものです。 



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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output04', width: 1500, height: 600 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G', 'C#').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addKeySignature('D', 'C#').setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addKeySignature('A', 'C#').setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 200).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  stave4.addKeySignature('E', 'C#').setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(230, 250, 200).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  stave5.addKeySignature('B', 'C#').setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();

  const stave6 = new Stave(450, 250, 200).setContext(ctx).draw();
  stave6.addClef("treble").setContext(ctx).draw();
  stave6.addKeySignature('F#', 'C#').setContext(ctx).draw();
  stave6.addTimeSignature('4/4').setContext(ctx).draw();

  const stave7 = new Stave(10, 450, 200).setContext(ctx).draw();
  stave7.addClef("treble").setContext(ctx).draw();
  stave7.addKeySignature('C#', 'C#').setContext(ctx).draw();
  stave7.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>

　13行目のようにaddKeySignature関数の引数に第二引数を使って、キャンセルしたい調号の名前を入れます。差分を計算して必要なところにナチュラル記号が描画されますしたがって、７つめに例示したように C# の調号を描くのに、C#を取り消すような指定した場合、なにも取り消す必要がないため、変化は発生しません。したがって、この表記の効果は、第一引数の調号に使われるシャープやフラットの数と第二引数の数では第二引数の方が数が大きい時だけ描画変動の効果があることになります。

　

音部記号を伴わない調号

　行の始めには音部記号がありますが途中には有りません。そういった小節の途中で調号が変わる場合には、addClefを使わずに調号を適切な高さに描かれる様な一工夫が必要になりますが、今のところやり方がわかっていません。できないのかもしれない。ト音記号のときに限れば、音部記号を省略した調号の変化を表すことができます。

　

行末における調号の変更予告

　次のページや次の行から、新しい調号に移調する場合、行の最後にその予告的な記述をするときがあります。 



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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output05', width: 1500, height: 200 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addKeySignature('G', 'D').setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();
  stave1.setEndKeySignature('D').setContext(ctx).draw();
})();
</script>

　最後から2行目の setEndKeySignature関数を使うと末尾に調号を付与できます。

　

特殊な表記(微分音)

　シャープやフラットには、特殊な表記があります。一般的なのはダブルシャープやダブルフラットまでだと思いますが、あまりみかけない特殊な表記に8分の1音上げ、4分の1音上げ、8分の3音上げ、半音上げ、8分の5音上げ、4/分の3音上げ、8分の7音上げ、そして、そのフラット版、更には3分法の6分の1音上げ、3分の1音上げ、3分の2音上げ、6分の5音上げとそのフラット版があります。♭の場合、フラットの旗にトレモロ記号のようなものをつけたり、フラットマークを逆さにしたり下矢印を付けたりします。＃の場合は縦棒を一つにしたり3つにしたり、上矢印をつけたりします。VexFlowでは4分の1と4分の3の表記はできるようになっています。このような特殊な表記は使わないので、覚えなくても、使い方がわからなくても影響ない。


　意味はわからないですが、他にもbs、bss、+-、++-が指定できる他、なぞの記号が多数指定できます。面倒なのでペロッてキーワードだけはっておきます。どんなマークが出てくるかは実際にやってみるといいんじゃないかな。 



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

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output06', width: 1500, height: 400 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 300).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  let KeySig1 = new KeySignature('Cb');
  KeySig1.alterKey(['d', 'd', 'd', 'd', 'd', 'd', 'd']);
  KeySig1.setPadding(18);
  KeySig1.addToStave(stave1);
  stave1.setContext(ctx).draw();
  stave1.addTimeSignature('4/4').setContext(ctx).draw();

  const stave2 = new Stave(330, 50, 300).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  let KeySig2 = new KeySignature('Cb');
  KeySig2.alterKey(['db', 'db', 'db', 'db', 'db', 'db', 'db']);
  KeySig2.setPadding(18);
  KeySig2.addToStave(stave2);
  stave2.setContext(ctx).draw();
  stave2.addTimeSignature('4/4').setContext(ctx).draw();

  const stave3 = new Stave(650, 50, 300).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  let KeySig3 = new KeySignature('C#');
  KeySig3.alterKey(['+', '+', '+', '+', '+', '+', '+']);
  KeySig3.setPadding(18);
  KeySig3.addToStave(stave3);
  stave3.setContext(ctx).draw();
  stave3.addTimeSignature('4/4').setContext(ctx).draw();

  const stave4 = new Stave(10, 250, 300).setContext(ctx).draw();
  stave4.addClef("treble").setContext(ctx).draw();
  let KeySig4 = new KeySignature('C#');
  KeySig4.alterKey(['++', '++', '++', '++', '++', '++', '++']);
  KeySig4.setPadding(18);
  KeySig4.addToStave(stave4);
  stave4.setContext(ctx).draw();
  stave4.addTimeSignature('4/4').setContext(ctx).draw();

  const stave5 = new Stave(330, 250, 300).setContext(ctx).draw();
  stave5.addClef("treble").setContext(ctx).draw();
  let KeySig5 = new KeySignature('D');
  KeySig5.alterKey(['o', 'k']);
  KeySig5.setPadding(18);
  KeySig5.addToStave(stave5);
  stave5.setContext(ctx).draw();
  stave5.addTimeSignature('4/4').setContext(ctx).draw();
})();
</script>


　一番左上から右へ、右端にいったら一段下の左端へ、そしてまた右へという順で4分の1音下げ、4分の3音下げ、4分の1音上げ、4分の3音上げと指定しました。3分6分系と8分系の記号を適用する方法はVexFlowには無いみたいです。最後は o と k という指定をした場合の表記です。


　調べてみたんですけど、フラットやシャープの旗にスラッシュがつく感じの(++-、+-、+、d、bs、bss)はアラビア音階で使われるものらしく、フラットの左右反転だと9分の1音下げ、スラッシュが１つだと9分の4音下げがスラッシュが二つつくと9分の8音下げです。9分の5音下げが、通常のフラットの扱いになるそうです。反対から9分の4音上げが、シャープになるそうで、縦一本の半シャープが9分1音上げ、縦一本の半シャープにスラッシュ一つが9分5音上げ、シャープにスラッシュ一本をいれたものが9分の8音上げという対応です。ｏで表示される記号はソリという名前で半シャープと同じ意味だそうです。ｋはコロンといって左右反転フラットと同じ意味になるそうです。アラビア音階の場合は楽譜のどこかで指示しておかないとわからないかもしれませんね。3分6分系と8分系を表す記号がヘルエリノーテーションという体系で、もっとこまかい指示のサジタルノーテーションというものがあるそうです。サジタルノーテーションのどうでもよさげなことにまで対応しておきながらヘルエリノーテーションを対応していないVexFlow。不思議だわ。



6項目め以降がサジタルノーテーション系記号

コード
accSagittal5v7KleismaUp
bbs
bs
+-
++-
accSagittal5v7KleismaDown
accSagittal5CommaUp
accSagittal5CommaDown
accSagittal7CommaUp
accSagittal7CommaDown
accSagittal25SmallDiesisUp
accSagittal25SmallDiesisDown
accSagittal35MediumDiesisUp
accSagittal35MediumDiesisDown
accSagittal11MediumDiesisUp
accSagittal11MediumDiesisDown
accSagittal11LargeDiesisUp
accSagittal11LargeDiesisDown
accSagittal35LargeDiesisUp
accSagittal35LargeDiesisDown
accSagittalSharp25SDown
accSagittalFlat25SUp
accSagittalSharp7CDown
accSagittalFlat7CUp
accSagittalSharp5CDown
accSagittalFlat5CUp
accSagittalSharp5v7kDown
accSagittalFlat5v7kUp
accSagittalSharp
accSagittalFlat
accSagittalSharp5v7kUp
accSagittalFlat5v7kDown
accSagittalSharp5CUp
accSagittalFlat5CDown
accSagittalSharp7CUp
accSagittalFlat7CDown
accSagittalSharp25SUp
accSagittalFlat25SDown
accSagittalSharp35MUp
accSagittalFlat35MDown
accSagittalSharp11MUp
accSagittalFlat11MDown
accSagittalSharp11LUp
accSagittalFlat11LDown
accSagittalSharp35LUp
accSagittalFlat35LDown
accSagittalDoubleSharp25SDown
accSagittalDoubleFlat25SUp
accSagittalDoubleSharp7CDown
accSagittalDoubleFlat7CUp
accSagittalDoubleSharp5CDown
accSagittalDoubleFlat5CUp
accSagittalDoubleSharp5v7kDown
accSagittalDoubleFlat5v7kUp
accSagittalDoubleSharp
accSagittalDoubleFlat
accSagittal7v11KleismaUp
accSagittal7v11KleismaDown
accSagittal17CommaUp
accSagittal17CommaDown
accSagittal55CommaUp
accSagittal55CommaDown
accSagittal7v11CommaUp
accSagittal7v11CommaDown
accSagittal5v11SmallDiesisUp
accSagittal5v11SmallDiesisDown
accSagittalSharp5v11SDown
accSagittalFlat5v11SUp
accSagittalSharp7v11CDown
accSagittalFlat7v11CUp
accSagittalSharp55CDown
accSagittalFlat55CUp
accSagittalSharp17CDown
accSagittalFlat17CUp
accSagittalSharp7v11kDown
accSagittalFlat7v11kUp
accSagittalSharp7v11kUp
accSagittalFlat7v11kDown
accSagittalSharp17CUp
accSagittalFlat17CDown
accSagittalSharp55CUp
accSagittalFlat55CDown
accSagittalSharp7v11CUp
accSagittalFlat7v11CDown
accSagittalSharp5v11SUp
accSagittalFlat5v11SDown
accSagittalDoubleSharp5v11SDown
accSagittalDoubleFlat5v11SUp
accSagittalDoubleSharp7v11CDown
accSagittalDoubleFlat7v11CUp
accSagittalDoubleSharp55CDown
accSagittalDoubleFlat55CUp
accSagittalDoubleSharp17CDown
accSagittalDoubleFlat17CUp
accSagittalDoubleSharp7v11kDown
accSagittalDoubleFlat7v11kUp
accSagittal23CommaUp
accSagittal23CommaDown
accSagittal5v19CommaUp
accSagittal5v19CommaDown
accSagittal5v23SmallDiesisUp
accSagittal5v23SmallDiesisDown
accSagittalSharp5v23SDown
accSagittalFlat5v23SUp
accSagittalSharp5v19CDown
accSagittalFlat5v19CUp
accSagittalSharp23CDown
accSagittalFlat23CUp
accSagittalSharp23CUp
accSagittalFlat23CDown
accSagittalSharp5v19CUp
accSagittalFlat5v19CDown
accSagittalSharp5v23SUp
accSagittalFlat5v23SDown
accSagittalDoubleSharp5v23SDown
accSagittalDoubleFlat5v23SUp
accSagittalDoubleSharp5v19CDown
accSagittalDoubleFlat5v19CUp
accSagittalDoubleSharp23CDown
accSagittalDoubleFlat23CUp
accSagittal19SchismaUp
accSagittal19SchismaDown
accSagittal17KleismaUp
accSagittal17KleismaDown
accSagittal143CommaUp
accSagittal143CommaDown
accSagittal11v49CommaUp
accSagittal11v49CommaDown
accSagittal19CommaUp
accSagittal19CommaDown
accSagittal7v19CommaUp
accSagittal7v19CommaDown
accSagittal49SmallDiesisUp
accSagittal49SmallDiesisDown
accSagittal23SmallDiesisUp
accSagittal23SmallDiesisDown
accSagittal5v13MediumDiesisUp
accSagittal5v13MediumDiesisDown
accSagittal11v19MediumDiesisUp
accSagittal11v19MediumDiesisDown
accSagittal49MediumDiesisUp
accSagittal49MediumDiesisDown
accSagittal5v49MediumDiesisUp
accSagittal5v49MediumDiesisDown
accSagittal49LargeDiesisUp
accSagittal49LargeDiesisDown
accSagittal11v19LargeDiesisUp
accSagittal11v19LargeDiesisDown
accSagittal5v13LargeDiesisUp
accSagittal5v13LargeDiesisDown
accSagittalSharp23SDown
accSagittalFlat23SUp
accSagittalSharp49SDown
accSagittalFlat49SUp
accSagittalSharp7v19CDown
accSagittalFlat7v19CUp
accSagittalSharp19CDown
accSagittalFlat19CUp
accSagittalSharp11v49CDown
accSagittalFlat11v49CUp
accSagittalSharp143CDown
accSagittalFlat143CUp
accSagittalSharp17kDown
accSagittalFlat17kUp
accSagittalSharp19sDown
accSagittalFlat19sUp
accSagittalSharp19sUp
accSagittalFlat19sDown
accSagittalSharp17kUp
accSagittalFlat17kDown
accSagittalSharp143CUp
accSagittalFlat143CDown
accSagittalSharp11v49CUp
accSagittalFlat11v49CDown
accSagittalSharp19CUp
accSagittalFlat19CDown
accSagittalSharp7v19CUp
accSagittalFlat7v19CDown
accSagittalSharp49SUp
accSagittalFlat49SDown
accSagittalSharp23SUp
accSagittalFlat23SDown
accSagittalSharp5v13MUp
accSagittalFlat5v13MDown
accSagittalSharp11v19MUp
accSagittalFlat11v19MDown
accSagittalSharp49MUp
accSagittalFlat49MDown
accSagittalSharp5v49MUp
accSagittalFlat5v49MDown
accSagittalSharp49LUp
accSagittalFlat49LDown
accSagittalSharp11v19LUp
accSagittalFlat11v19LDown
accSagittalSharp5v13LUp
accSagittalFlat5v13LDown
accSagittalDoubleSharp23SDown
accSagittalDoubleFlat23SUp
accSagittalDoubleSharp49SDown
accSagittalDoubleFlat49SUp
accSagittalDoubleSharp7v19CDown
accSagittalDoubleFlat7v19CUp
accSagittalDoubleSharp19CDown
accSagittalDoubleFlat19CUp
accSagittalDoubleSharp11v49CDown
accSagittalDoubleFlat11v49CUp
accSagittalDoubleSharp143CDown
accSagittalDoubleFlat143CUp
accSagittalDoubleSharp17kDown
accSagittalDoubleFlat17kUp
accSagittalDoubleSharp19sDown
accSagittalDoubleFlat19sUp
accSagittalShaftUp
accSagittalShaftDown
accSagittalAcute
accSagittalGrave
accSagittal1MinaUp
accSagittal1MinaDown
accSagittal2MinasUp
accSagittal2MinasDown
accSagittal1TinaUp
accSagittal1TinaDown
accSagittal2TinasUp
accSagittal2TinasDown
accSagittal3TinasUp
accSagittal3TinasDown
accSagittal4TinasUp
accSagittal4TinasDown
accSagittal5TinasUp
accSagittal5TinasDown
accSagittal6TinasUp
accSagittal6TinasDown
accSagittal7TinasUp
accSagittal7TinasDown
accSagittal8TinasUp
accSagittal8TinasDown
accSagittal9TinasUp
accSagittal9TinasDown
accSagittalFractionalTinaUp
accSagittalFractionalTinaDown
accidentalNarrowReversedFlat
accidentalNarrowReversedFlatAndFlat
accidentalWilsonPlus
accidentalWilsonMinus


　


VexFlow 使い方に戻る。

「https://wiki.yo-net.jp/index.php?title=VexFlow_調号&oldid=3898」から取得