VexFlow 調号

VexFlow 使い方に戻る。

概要

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

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

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

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

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

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

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

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

シャープ系 ＃

<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を使わずに調号を適切な高さに描かれる様な一工夫が必要になります。

特殊な表記

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

　

VexFlow 使い方に戻る。