まずVexTabのリポジトリのsrcからvextab-div.jsをダウンロードしてサイトやローカルマシンの適当な場所に設置します。
次に設置したスクリプトをHTMLのheadタグ内で読み込み、設定を行います。
headタグ内に追加するコード<script> VEXTAB_USE_SVG = true </script> <script src="vextab-div.js"></script> <!-- 設置場所のパスに合わせる --> </head>
上記のコードで、VEXTAB_USE_SVGの値をtrueにセットするとSVG、falseにセットするとcanvasを使って楽譜が描画されます。
これだけでもVexTabは使えますが、コードボックスに表示されるメッセージのスタイルを設定するために、以下のようなCSSを用意することをお勧めします。
div.vex-tabdiv { font-family: Arial, sans-serif; font-size: 18px; color: #554; white-space: pre; } /* コードボックスの設定*/ div.vex-tabdiv .editor { color: steelblue; background: white; border-style: solid; font-family: "Lucida Console", Monaco, monospace; font-size: 12px; } /* エラーメッセージの設定 */ div.vex-tabdiv .editor-error .text { font-family: "Lucida Console", Monaco, monospace; font-size: 12px; color: red; padding: 3px; } div.vex-tabdiv .title { font-family: Arial, sans-serif; font-size: 18px; padding: 10px; color: #554; }
次のHTMLコードは、簡単な楽譜を表示するサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="vextab.css" media="screen" rel="Stylesheet" type="text/css" /> <title>VexTab使用例(1)</title> <script> VEXTAB_USE_SVG = true </script> <script src="vextab-div.js"></script> </head> <body> <h2>VexTab使用例(1)</h2> <div class="vex-tabdiv"width=680 scale=1.0 editor="true" editor_width=680 editor_height=100> options space=20 tabstave notation=true notes 4-5-6/3 10/4 </div> </body> </html>
上記のHTMLで次のような楽譜とコードボックスが表示されます。
以上でHTMLでVexTabを使うことができるようになります。