HTMLページ内に楽譜を表示させる

僕の本業はプログラマーなんですけど、プログラマーになる前はミュージシャンを目指してたんです。

というか僕本人は音楽を辞めたつもりは全くないので、このサイトでも音楽関連の記事を書いていきたいと思います！

んで、もう10年以上も前ですけど、せっかく音楽系の学校に通って音楽理論やら作曲法やら勉強したので、
その手の話をしていきたいなと思っているのですが、そうなるとどうしてもこのサイト上に楽譜を載せたいなと。

画像として楽譜を載せようとしても、市販の楽譜は著作権があるから使えないので、
音楽ソフトを立ち上げて自分で音符を打って、その画面をスクショとってフォトショで切り取って、
サーバーにアップしてimgタグ打って・・・と、とても手順が多くて大変なので、
手軽に出来るようなものではありません。

何か良い方法は無いかなと考えていたところ、
「javascriptで楽譜を自動生成するプログラム」
を作ってみたら面白いんじゃなかと思い立ちました。

これはプログラマーとしての僕の知的好奇心をすごく刺激する案件です。
もしも良いものが出来たら、広くいろんな人にも使ってもらって、
web上での音楽制作事情に一石を投じられたら最高です。

ということで、どんなプログラムにしようかここ数日脳内で色々と設計をしていました。

昔、N-88BASICでゲーム音楽の打ち込みをしていた時の文法を真似てみよう。とか、
音符の画像を動的に生成するんだったらHTMLタグとCSSの組み合わせでやるよりもHTML5なのかな～とか、
こういうのって実際に作り始めるよりも、
準備段階でアレコレと想いを巡らせている時の方が楽しかったりしますよね。

んで、大体仕様が固まって、いざプログラミングを始めてみよう！という時になって、ふと思いました。

「もしかして既に同じようなものが存在するんじゃ・・・」

webページ上に楽譜を表示させたいニーズなんて遥か昔からあったでしょうし、
それをjavascriptで実現しようというのも、世界で最初に僕が思い付いたアイデアとも思えません。

そもそも一番最初にやらなければいけなかったことなのですが、
今更になって「javascript 楽譜」で検索したところ、やっぱりありました

abcjsという、ABC記譜法で記述されたテキストをjavascriptで楽譜として表示させるという、
僕がやろうと思ってたことそのままのライブラリです。

「ABC記譜法」というのも初めて知ったのですが、僕が参考にしようと思っていたN-88BASICの書式によく似ていて、
より楽譜を忠実に表現するためにブラッシュアップされている印象です。

ではさっそく、ウィキペディアのページにもあるソーラン節をabcjsで楽譜にしてみましょう。

凄すぎワロタｗｗｗ

いや、こりゃほんとに凄いですね。
こんなに完成度の高いライブラリが既に存在するなら、わざわざ自分で作る必要はなさそうです。

これほどのライブラリが、どうしてあんまり有名じゃないんだろう？と思ったのですが、
このabcjs、使い方を解説している日本語のサイトこそいくつか存在していますが、
その記事が書かれていた頃と最近では色々な事情も変わっているようで、
僕もそんなにスッと導入はできませんでした。

ということで、次回はこのabcjsの導入の仕方をなるべく簡単に、
プログラミングがそんなに詳しくない方にも解るように解説できたらな～と思います。

お楽しみに！

■HTMLページ内に楽譜を表示させる