日本だんでぃ協会
Japan Dandy Association
中の人プロフィール おこんてんつ トップ プログラミング (12) →音楽 (7) ポーカー (1) 雑記 (1) Tweets by webclap_dandy | ■HTMLページ内に楽譜を表示させる「abcjs」の使い方研究2017/02/10 00:59 作成 2017/02/12 23:47 更新
ということで、前回に引き続き「abcjs」の使い方を研究していきたいと思います。 まずは、肝心のabcjsを読み込まないといけないわけですが、 abcjsの使い方を解説しているサイトでは この記述がすごく多く紹介されているのですが、残念ながらGoogle Codeは2016年1月25日で閉鎖してしまっているので このやり方ではabcjsを読み込むことができません。 なので、公式サイトやGithubからダウンロードして自分でサーバーにアップしないといけないので、 javascriptやサーバーにあまり詳しくない人にはハードルが若干高くなってしまいますね。 Github上のファイルを直リンで呼び出して良いものかどうか分からなかったので、 Google Codeみたいなサービスでabcjsが公開されてないかなと探してみたのですが、 残念ながら見つかりませんでした。 なので、今回はGithubから「abcjs_basic_2.3-min.js」をダウンロードしてきて使うことにします。 ダウンロードしてきてサーバーに転送したら、 こんな感じで読み込めば準備OKです。余談ですが、Google Codeが閉鎖した理由はスパムに使用されることが多くなったからだそうです。 こういう、トラフィックを肩代わりしてくれるような太っ腹なサービスが、 そんな理由で閉鎖してしまうのは何とも悲しいことです。 さて、ライブラリの読み込みが完了したら、取りあえず最低限の動作をさせてみましょう。 HTMLソースはこんな感じ。 すると、webページ上にはこんな感じに表示されます。おおー、すごーい。 前述したライブラリの読み込みが正常に出来ていれば、こんな感じの楽譜が表示されたはずです。 abcjsの使い方を紹介しているサイトでは、preタグの中にABC記譜法を記述する方法が解説されていたのですが、 どうもそのやり方だとうまくいかなかったので、公式サイトのサンプルコードを参考にやってみました。 軽く解説をすると、IDが「note」に設定されているHTML要素を M:4/4 L:1/4 K:C CD EF | GA Bc || ↑このABC記譜の楽譜にしてね。って感じになります。 さて、取りあえず楽譜を表示させられたのですが、コードが見づらいですね。 そうなっている理由として、ABC記譜法は改行をそのまま使えますが、 javascriptの場合だと文字列の中に改行を入れて こんなふうに書くとエラーになってしまうので、 こう書かないといけないわけですが、これだととっつき辛さMAXなので、ちょっと工夫してみましょう。 こんな感じになりました。 楽譜に差し替えるdivタグをidではなくclassで定義してあげて、そのdiv内にABC記譜法で直接記述できるようにしてしまいます。 んで、後半のjavascriptで「score」という名前のclassになっているHTML要素を全て楽譜にしています。 なので、後半のjavascriptは一回だけ記述があればOKですし、 classを使用しているので、HTML内に何個もABC記譜を記述できます。 例えばこんな感じ これを実際に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とABC記譜法で遊んでみる 関連記事 abcjsで音の鳴らし方解説編 abcjsで音を鳴らしてみよう abcjsとABC記譜法で遊んでみる HTMLページ内に楽譜を表示させる「abcjs」の使い方研究 HTMLページ内に楽譜を表示させる 2024 日本だんでぃ協会 All Rights Reserved. |