VexTabを使ってブラウザ上でTAB譜を書く

前回の記事「Guitar Pro，その他TAB譜作成ソフトについて」で，PC上でTAB譜を作るソフトをいくつか紹介しました．

今回はWeb上でTAB譜を作る際に使える，VexTabを紹介します． 簡易な記法で手軽にTAB譜が作れるJavascriptライブラリです．

VexTabとは

VexTabはMohit Cheppudira氏が開発しているJavascriptのライブラリです．

簡易なテキストデータからSVG形式でTAB譜（＋五線譜）を出力できます．

オリジナルのチュートリアルは以下からアクセス可能です． vexflow.com

ちなみに五線譜に特化したVexFlowというライブラリもあります．

一例をどうぞ

以下に一例を載せます．

tabstave notation=true key=D time=4/4 notes :4 (2/2.2/3.2/4.0/5) notes :16 5/6 7/6 4/5 5/5 notes :8 7/5 7/4 :4 2/4

editor="true"を指定することで，ブラウザ上で編集できる緑色のエリアが出現します． この緑色の領域はプレイグラウンドの要領で使えます． 書いた内容は即座に反映されます．

tabstave notation=true key=D time=4/4 notes :4 (2/2.2/3.2/4.0/5) notes :16 5/6 7/6 4/5 5/5 notes :8 7/5 7/4 :4 2/4

VexTabでできること

音符，休符，スラッシュ表記，スライドやチョーキングなどのアーティキュレーションまで，基本的な記譜はこなせます．

オリジナルのチュートリアル（上記リンク参照）にいろいろな例が載っているので，そちらを参照するとよいと思います．

使い方

インポート

まず，VexTabを参照します． HTML内に以下のscriptタグを書いておけばOKです．

<script src="https://unpkg.com/vextab/releases/div.prod.js"></script>

TAB譜

TAB譜を置きたい箇所に次のタグを配置します．

<div class="vextab-auto" editor="true">
tabstave notation=true
</div>

divのeditor="true"をfalseにすると，緑色のエディタが出現しなくなります．

こう書くと次のように，空のTAB譜が生成されます．

tabstave notation=true

---

div内の最初にはtabstaveとありますが，これを書かないとTAB譜がそもそも出てきません．

notation=trueをfalseにすると，五線譜が出てこなくなります．

この後，いろいろ緑色の枠（か，divタグ内に直接）にいろいろ書くことでTAB譜が作れます． 具体的な書き方についてはオリジナルのチュートリアルを参照してください． 英語ですが，適当にいじればわかるようになっています．

ちなみにtabstaveをもう一度書くと，新しい段でスタートできます．
折返したいときは，折り返したい位置で改行して，tabstaveの行を書けば次の段になります．

私見

仕上がりが綺麗

まず仕上がりが綺麗ですよね． Guitar Proを強く意識している印象があります．

作られたTAB譜はSVG形式でHTMLに動的に埋め込まれます． SVGは仕組み上拡大してもぼやけない利点があります．

特にTAB譜の最初の「TAB」の文字はGuitar Pro感があります．

導入しやすい

テキストから楽譜を生成するツールといえばlilypondが挙がりますが，あちらより圧倒的に記法が簡単です． また，editor="true"とするだけでブラウザ上で出力を確認しながら記譜できるため使い勝手が良く，学習もしやすいです．

修正したいときは中のテキストを変えればいいので楽ですね．

ギター解説ページなどで，数小節のTAB譜を埋め込みたいときに特に便利だと思います．

まとめ

Web上でTAB譜を作れるVexTabについて紹介しました．

Webページに数小節のフレーズを置きたいときに強いですね．

このブログでもギター解説の記事を作るときがあれば，利用したいと思います．