読者です 読者をやめる 読者になる 読者になる

電子書籍を公開してみた(楽譜作成編)_その1

HTML5 iBook

電子書籍を公開してみた(楽譜作成編)_その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>

そんで実際にレンダリングしたのはこっち

f:id:naotooncajon:20131022201032p:image

おおっいい感じじゃないですか。HTML5最強。力尽きたので今回はここまで。

次回予告

  • 今回作ったhtmlをiBookに取り込んで、電子書籍化します。
  • その際、midiも合わせて取り込めたらいいな。(再生機能付き楽譜)

参考

以上です。