HTMLページ内に楽譜を表示させる「abcjs」の使い方研究

ということで、前回に引き続き「abcjs」の使い方を研究していきたいと思います。

まずは、肝心のabcjsを読み込まないといけないわけですが、
abcjsの使い方を解説しているサイトでは

<script type="text/javascript" src="http://abcjs.googlecode.com/files/abcjs_plugin_1.4-min.js" ></script>

この記述がすごく多く紹介されているのですが、
残念ながらGoogle Codeは2016年1月25日で閉鎖してしまっているので
このやり方ではabcjsを読み込むことができません。

なので、公式サイトやGithubからダウンロードして自分でサーバーにアップしないといけないので、
javascriptやサーバーにあまり詳しくない人にはハードルが若干高くなってしまいますね。

Github上のファイルを直リンで呼び出して良いものかどうか分からなかったので、
Google Codeみたいなサービスでabcjsが公開されてないかなと探してみたのですが、
残念ながら見つかりませんでした。

なので、今回はGithubから「abcjs_basic_2.3-min.js」をダウンロードしてきて使うことにします。
ダウンロードしてきてサーバーに転送したら、

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

こんな感じで読み込めば準備OKです。

余談ですが、Google Codeが閉鎖した理由はスパムに使用されることが多くなったからだそうです。
こういう、トラフィックを肩代わりしてくれるような太っ腹なサービスが、
そんな理由で閉鎖してしまうのは何とも悲しいことです。

さて、ライブラリの読み込みが完了したら、取りあえず最低限の動作をさせてみましょう。
HTMLソースはこんな感じ。

<div id="note"></div>
<script>
	ABCJS.renderAbc("note", "M:4/4\nL:1/4\nK:C\nCD EF | GA Bc ||");
</script>

すると、webページ上にはこんな感じに表示されます。

おおー、すごーい。

前述したライブラリの読み込みが正常に出来ていれば、こんな感じの楽譜が表示されたはずです。

abcjsの使い方を紹介しているサイトでは、preタグの中にABC記譜法を記述する方法が解説されていたのですが、
どうもそのやり方だとうまくいかなかったので、公式サイトのサンプルコードを参考にやってみました。

軽く解説をすると、IDが「note」に設定されているHTML要素を
M:4/4
L:1/4
K:C
CD EF | GA Bc ||
↑このABC記譜の楽譜にしてね。って感じになります。

さて、取りあえず楽譜を表示させられたのですが、コードが見づらいですね。

そうなっている理由として、ABC記譜法は改行をそのまま使えますが、
javascriptの場合だと文字列の中に改行を入れて

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

こんなふうに書くとエラーになってしまうので、

"X:1\nM:4/4\nL:1/4\nK:C\nCD EF | GA Bc ||"

こう書かないといけないわけですが、これだととっつき辛さMAXなので、
ちょっと工夫してみましょう。

こんな感じになりました。

<div class="score">
M:4/4
L:1/4
K:C
CD EF | GA Bc ||
</div>
<script>
	var scoreObj = document.getElementsByClassName("score");
	for( var i in scoreObj ){
		ABCJS.renderAbc( scoreObj[i], scoreObj[i].innerHTML );
	}
</script>

楽譜に差し替えるdivタグをidではなくclassで定義してあげて、
そのdiv内にABC記譜法で直接記述できるようにしてしまいます。

んで、後半のjavascriptで「score」という名前のclassになっているHTML要素を全て楽譜にしています。

なので、後半のjavascriptは一回だけ記述があればOKですし、
classを使用しているので、HTML内に何個もABC記譜を記述できます。

例えばこんな感じ

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

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

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

これを実際にHTMLページに記述すると、以下のようになります。

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

M:4/4
L:1/4
K:C
CD EF | GA Bc | BA GF | ED C2 ||

いかがでしょうか。

ここまでを参考にしていただければ、
javascriptにあまり詳しくない方でもabcjsを使えるところまでは
辿り着けるんじゃないかなと思います。

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

お楽しみに～♪

■HTMLページ内に楽譜を表示させる「abcjs」の使い方研究