電子書籍を公開してみた(楽譜作成編)_その1
電子書籍を公開してみた(楽譜作成編)_その1
電子書籍を公開してみた(楽譜作成編)_その1
美しい音楽は、楽譜もそうあるべきだ
前回(電子書籍を公開してみた)は普通の小説形式を作成した。iBooksにはhtml5を内蔵することができると聞いたので、ギミックがある電子書籍を作ってみようと思う。
作るもの
簡単な楽譜を作ります。構成要素はこんな感じ
電子書籍の楽譜 = ABC記譜法 + HTML5/JS + iBooks
作り方
ABC記譜法
ABC記譜法とは、五線譜をASCII文字だけで表現する方法。たぶん、音楽経験者でパソコンを弄る人は似たようなことはやってると思う。例えば、「カエルの歌」は以下で表される。
CDEF EDC2|EFGA GFE2|C2C2C 2C2|C/2C/2 D/2D/2 E/2E/2 F/2F/2 EDC|
詳しくはwikiること。ABC記譜法 - Wikipedia
abcjs
ABC記譜法をHTMLにレンダリングしてくれるJavaScriptのライブラリ(abcjs)を利用しました。今回は嫁さんのオリジナル曲をレンダリングしてみました。(無許可です)
siki.html
preタグの中身がABC表記法で書かれた曲です。その周りはただのhtml
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>四季</title>
<script src="javascripts/abcjs_plugin_1.7-min.js" type="text/javascript"></script>
<script type="text/javascript">
ABCJS.plugin["show_midi"] = true; //デフォルトはtrue
ABCJS.plugin["hide_abc"] = false; //デフォルトはfalse
</script>
</head>
<body>
<pre>
X: 1
M: 4/4
L: 1/8
K: D
Q:1/4=85
T: 四季
T: siki ~four seasons~
C: 7oCの嫁(2012)
%%MIDI program 48
EF|E2EF EFAF|EFDE F2EF|E2EF EFAF|EFDE D2EF|
E2EF EFAF|EFDE F2EF|E2EF EAdA|cdAc B4||
d4 c2A2|F6 EF|A2EF B2AB|A8|
d4 c2f2|B4 A2fe|B2fe B2dA|B6 EF||
E2EF EFAF|EFDE F2EF|E2EF EFAF|EFDE D2EF|
E2EF EFAF|EFDE F2EF|E2EF EAdA|cdAc B2af|
e2af ef/2e/2 dA|cdAc B2af|e2af e4|f4 a4|b8|-b8|]
</pre>
</body>
</html>
そんで実際にレンダリングしたのはこっち
おおっいい感じじゃないですか。HTML5最強。力尽きたので今回はここまで。
次回予告
参考
以上です。