abcjs をブログに組込む

作成日 : 2017-01-21
最終更新日 :

abcjs とは

abcjs とは、ブラウザ上で楽譜を表示するためのソフトウェアである。JavaScript と HTML5 の技術を用いている。

abcjs をブログで使うには（旧版）

abcjs をブログで使うために実施したことを述べる。ここでは朝日ネットのブログ（アサブロ）で行なったことをもとにしている。以下は旧版である。

  1. https://github.com/paulrosen/abcjs の Download の節にある Here are the latest versions. You can just download one of these: の Basic にある JavaScript を、 コンピュータの適当な場所にダウンロードする。
  2. ダウンロードした場所と同じ場所に、1. のJavaScript ファイルを参照する html ファイルを作成する。
  3. 2. で作成した html ファイルに http でアクセスする。

アサブロでは、HTMLカスタマイズという機能がある。 この機能では、いくつかの特定個所に任意の HTML を挿入できる。 私は、<head 要素 閉じタグ直前> の個所に、次の HTML を埋め込んでいる。 

	<script src="http://www.ne.jp/asahi/music/marinkyo/js/abcjs_basic_5.12.0-min.js"></script>

ここでは、html ファイルのごく簡単な例を挙げる。 

<p>
ヴィヴァルディのチェロソナタは下記の通り。
<div id="vivaldi_rv47_1"></div>
ヴィヴァルディのチェロソナタは上記の通り。下記から再生できる。
<div id="vivaldi_rv47_1_midi"></div>
</p>
<script>
const vivaldi_rv47_1 = `
X: 1
T: SONATA I
C: A. Vivaldi
M: C
L: 1/16
Q: "Largo"
K: Bb
K: clef=bass
B,2(DC) B,2F,2 (B,A,)B,2 z2B,2|C2D2 E2(DC) (DC)B,2 z D2|`

ABCJS.renderAbc("vivaldi_rv47_1", vivaldi_rv47_1, {}, {staffwidth:"460"});
ABCJS.renderMidi("vivaldi_rv47_1_midi", vivaldi_rv47_1, { generateInline: true })
</script>

楽譜情報については前のページを参照してもらうことにして、 ここでは、レンダリング関数 ABCJS.renderAbc の仕様を調べる。 https://github.com/paulrosen/abcjs/blob/master/api.md によれば、次のとおりである。

tuneObjectArray = ABCJS.renderAbc(output, tunebookString, parserParams, engraverParams, renderParams)

これは曲集 (tune book) を作るための完全なレンダリングである。 さて、実際のソースを引数を見ると、第1の output と第2の tunebookString しかない。 output はdiv 要素の id 属性が指定され、その div 要素が規定された位置でレンダリングされることを表す。 tunebookString は、その曲集の曲情報が表された文字列である。

第3引数の parserParams は、字句解析ツール (parser) に与えるオプションであるが、詳細は省略する。 第4引数はエングレービング(engraving)に影響を与えるオプション。scale （拡大率、デフォルトは1）、 staffwidth （譜表の幅、デフォルトは740 ピクセル）などがある。

ブログで表示するときには、staff-width を 300 ピクセルにするのがいいだろう。

まりんきょ学問所 ＞ コンピュータの部屋 ＞ マーク付け言語手習い ＞ abcjs(ブログ版)

MARUYAMA Satosi