VexTabのインストール
アセンブラの魔女 ⧫ VexFlow ⧫ VexTab ⧫ HTMLでの使用 ⧫ インストール

　まず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で次のような楽譜とコードボックスが表示されます。

options space=20 tabstave notation=true notes 4-5-6/3 10/4

　以上でHTMLでVexTabを使うことができるようになります。

▼ Property