abcjsとABC記譜法で遊んでみる - 日本だんでぃ協会

さて、今回はABC記譜法について色々と試してみたいと思います。

その前に、「abcjs」の導入方法をおさらいしておきましょう。

まず、Githubのabcjsプロジェクトから「abcjs_basic_2.3-min.js」をダウンロードしてきて、ご自身のサーバーにアップします。
ここが一番導入のハードルが高いですね。

サーバーにアップできたら、HTML内のどこかしらに

<script type="text/javascript" src="./abcjs_basic_2.3-min.js" ></script>

こんな感じの記述をしてabcjsを読み込ませます。
headタグ内に記述するのがお作法的には正しいのですが、
後述するABCJS.renderAbc()よりも前ならどこでもOKです。
ここが2番目にハードルが高いところですね。

後は簡単です。
divタグやpreタグ辺りに適当なclass属性を付けてABC記譜法で記述していきましょう。

<div class="score">
M:4/4
L:1/4
K:C
CD EF | GA Bc ||
</div>

こんな感じです。

あとは、bodyタグ内の一番下にでも以下のスクリプトを記述して、
先ほどのABC譜を譜面にします。

<script>
	var scoreObj = document.getElementsByClassName("score");
	for( var i in scoreObj ){
		ABCJS.renderAbc( scoreObj[i], scoreObj[i].innerHTML );
	}
</script>

んで、画面に

M:4/4
L:1/4
K:C
CD EF | GA Bc ||

こんな感じで楽譜が表示されたら導入成功です。

javascriptの知識のある方なら簡単に導入できると思いますし、
プログラミングの経験が無い方でもこの手順でやれば導入できると思いますので、
頑張ってやってみてください。

～～～～～～～～～～～～～～～～～～～～

さて、abcjsの導入は無事にできたので、
ABC記譜法についてもう少し勉強して、思い通りに楽譜を生成できるようにしてみましょう。

勉強と言っても、解りやすい解説をしてくださっているサイトさんがいくつかあったので、
少し音楽かじってて、プログラミングもちょっと出来る人ならサクっと使えるようになると思います。

今回は以下のサイト様を参考にさせていただきました。

実用abc譜
【ABC記譜法】基礎の基礎

では早速、色々と試してみたいと思います。
まずはこんな感じ

M:4/4
L:1/8
K:C bass
G,,A,,B,,C, D,E, F, G, A,2

M:4/4
L:1/8
K:C bass
G,,A,,B,,C, D,E, F, G, A,2

「K:C」はキーが「C」だよっていう設定なのですが、
「bass」をくっ付けることで「ヘ音記号」になるようですね。
低い音は音名にカンマを付けて「A,,」とか「C,」とか記述するようです。

あとは、「L:1/8」は「この楽譜は8分音符を基準の長さとする」という設定で、
それ以外の音の長さにしたいときには音名の後ろに数字を付けて調整するようです。
「A,2」が「基準の音の2倍」を表現しているので、4分音符になっていますね。

それと、8分音符や16部音符のような「旗」の付いている音符は
「半角スペース」を入れずに続けて書くと旗が繋がり、「半角スペース」を入れると旗が切れるみたいです。

続いて、こんな感じ

M:4/4
L:1/2
K:C
"C"[CEGc] "G7"[DGBF] | "C"[C2E2G2c2] |]

M:4/4
L:1/2
K:C
"C"[CEGc] "G7"[DGBF] | "C"[C2E2G2c2] |]

音楽の授業の最初に弾く「ジャーンジャーンジャーン」ってやつですね。

ほら、「ジャーンジャーンジャーン」だと全然伝わらないでしょ？
だから楽譜を出したかったのあたし！

さて、音名を[]で囲むことによって和音にできるようです。
さらに、ダブルクオーテーションでコードネームまで書けちゃいます。
こりゃすごい。

これを応用すれば歌詞を書くこともできそうですね。

M:4/4
L:1/4
K:C
"こ"C "ん"D "な"E "か"F | "ん"G "じ"A "に"B "ね"c |]

できれば音符の下に歌詞を表示させたかったのですが、
調べた感じできなさそうでした。
もしやり方があったら教えていただけると嬉しいです。

続きまして、こんな感じ

M:4/4
L:1/4
K:C
V:1
CD EF | GA Bc |]
V:2 bass
C,D, E,F, | G,A, B,C |]

M:4/4
L:1/4
K:C
V:1
CD EF | GA Bc |]
V:2 bass
C,D, E,F, | G,A, B,C |]

なんと、複数のパートを持つ楽譜まで書けちゃいます。
「V:1」とか「V:2」とか書くことでパート分けをしています。
「V:2 bass」と書けばそのパートはヘ音記号になりますし、
「bass」じゃなくて「alto」と書けばハ音記号になります。多分使わないけど。

ABC記譜法はもっともっと色々な記述ができる奥深いものなのですが、
取りあえずはここまでで今後僕が使うであろう表現は網羅できた印象です。

最後に、せっかくなのでこんなこともしてみました。

M:4/4
L:1/8
K:C
V:1
!f!(c2 ec .G2) .G2 | (c2 ec .G2) .g2 | (fedc BcBc | dcBA G2) z2 | !p!(c2 ec .G2) .G2 |
V:2 bass
C,2 z2 z4 | C,2 z2 z4 | C,2 z2 C,2 z2 | G,,2 z2 (G,F,E,D, | C,2) z2 z4 |

M:4/4
L:1/8
K:C
V:1
!f!(c2 ec .G2) .G2 | (c2 ec .G2) .g2 | (fedc BcBc | dcBA G2) z2 | !p!(c2 ec .G2) .G2 |
V:2 bass
C,2 z2 z4 | C,2 z2 z4 | C,2 z2 C,2 z2 | G,,2 z2 (G,F,E,D, | C,2) z2 z4 |

ピアノを習った事のある人の9割以上が弾いたことのある、「ソナチネ7番」の冒頭部分です。
もう、「ソナチネ7番」と聞いただけで脳内再生される人も多いのではないでしょうか。
僕もその一人ですけども。

普通のカッコで囲むとスラーになるようですね。
フォルテやピアノといった記号も入力できました。

はい。
こんな感じで、ABC記譜法も何となく使えるようになりました。

聞くところによると、abcjsはMIDIで実際に音を鳴らすこともできるらしいので、
次はそれに挑戦してみたいと思います。

お楽しみに～♪

■abcjsとABC記譜法で遊んでみる