VexFlow使ってみた: テキスケ

　MOONGIFTさんで紹介されていたVexFlowが面白そうだったので試してみた。
　が、思いのほか面倒だったので軽くまとめてみる。

　まず判ったことは

VexFlowはJavaScriptのライブラリ。
VexFlowには楽譜のパーツを指定位置に描画する機能しかない。
VexTabはVexFlowを利用したライブラリ。
VexTabは、簡易言語からタブ譜（＋通常の楽譜）を生成してくれる。

　ああ～VexTabのタブ譜じゃない普通の楽譜版が欲しかった…！

　仕方ないのでVexFlowのサンプルを覗いてみたのだけど、JavaScripterでない自分には分かりづらい！　なにjqunitって！
　同じような人がいるかもしれないので、ガンガン削ってシンプルな状態にしたソースを公開してみる。

まずはここからzipをダウンロード。
gitをインストールしなきゃいけないのかと思ったけどそんなことはなかった。
sconsを使ってライブラリを圧縮。
sconsはmakeのようなビルドツール。python1.5.2以上の環境が必要らしい。
うまくいけばhttp://www.vexflow.com/vexflow.jsにあるようなのが出来上がる。
以下のようなソースを書く。

test.html

<html>
  <head>
    <title>VexFlow Tests</title>
    <style type="text/css">
      div.testcanvas .vex-tabdiv {
      background: #eed;
      padding: 10px;
      border: 10px solid #ddc;
      }

      div.testcanvas .name {
      font-family: Arial, sans-serif;
      font-size: 18px;
      padding: 10px;
      color: #554;
      }
    </style>
    <!-- Compiled Source -->
    <script src="../vexflow.js"></script>
    <!-- Test Sources -->
    <script src="support/jquery.js"></script>
    <script src="test_helper.js"></script>
    <script src="test.js"></script>
    <script>
      $(function() {
      Vex.Flow.Test.StaveNote.Start();
      });
    </script>
  </head>
  <body>
    <div id="vexflow_testoutput"></div>
  </body>
</html>

test_helper.js

/**
 *  Simple VexFlow Test Support Library
 *  forked from "VexFlow Test Support Library" by Mohit Muthanna 2010
 */

Vex.Flow.Test = {}

Vex.Flow.Test.genID = function() {
  return Vex.Flow.Test.genID.ID++;
}
Vex.Flow.Test.genID.ID = 0;

Vex.Flow.Test.createTestCanvas = function(canvas_sel_name, test_name) {
  var sel = Vex.Flow.Test.createTestCanvas.sel;
  var test_div = $('<div></div>').addClass("testcanvas");
  test_div.append($('<div></div>').addClass("name").text(test_name));
  test_div.append($('<canvas></canvas>').addClass("vex-tabdiv").
      attr("id", canvas_sel_name).
      addClass("name").text(name));
  $(sel).append(test_div);
}
Vex.Flow.Test.createTestCanvas.sel = "#vexflow_testoutput";

/**
    Canvasを連番IDで作成し、登録された関数で譜面の描画を行う。

    name    譜面のタイトル
    func    登録する関数
    params  パラメータ
**/
Vex.Flow.Test.runTest = function(name, func, params) {
  test_canvas_sel = "canvas_" + Vex.Flow.Test.genID();
  test_canvas = Vex.Flow.Test.createTestCanvas(test_canvas_sel, name);
  func({ canvas_sel: test_canvas_sel, params: params },
  Vex.Flow.Renderer.getCanvasContext);
}

test.js

/**
 * VexFlow - Simple Score
 * forked from "Basic Tests" by Mohit Muthanna 2010
 */

Vex.Flow.Test.StaveNote = {}

Vex.Flow.Test.StaveNote.Start = function() {
  Vex.Flow.Test.runTest("Basic Score", Vex.Flow.Test.StaveNote.displacements);
}

Vex.Flow.Test.StaveNote.showNote = function(note_struct, stave, ctx, x) {
  var note = new Vex.Flow.StaveNote(note_struct);
  var tickContext = new Vex.Flow.TickContext();
  tickContext.addTickable(note).preFormat().setX(x).setPixelsUsed(20); // 左端からのオフセット座標
  note.setContext(ctx).setStave(stave);
  note.draw();
  return note;
}

Vex.Flow.Test.StaveNote.displacements = function(options, contextBuilder) {
  var ctx = new contextBuilder(options.canvas_sel, 600, 140);
  ctx.scale(0.9, 0.9);      // スケール
  ctx.fillStyle   = "#221"; // 色

  var stave = new Vex.Flow.Stave(10,   // X座標
                                 10,   // Y座標
                                 550); // 横幅
  stave.setContext(ctx);
  stave.draw();

  var showNote = Vex.Flow.Test.StaveNote.showNote;
  var notes = [
    { keys: ["c/4", "e/4", "a/4"], duration: "w"},
    { keys: ["c/4", "e/4", "a/4"], duration: "h"},
    { keys: ["c/4", "e/4", "a/4"], duration: "q"},
    { keys: ["c/4", "e/4", "a/4"], duration: "8"},
    { keys: ["c/4", "e/4", "a/4"], duration: "16"},
    { keys: ["c/4", "e/4", "a/4"], duration: "32"},
    { keys: ["c/4", "e/4", "a/4"], duration: "h", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "q", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "8", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "16", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "32", stem_direction: -1},
    { keys: ["c/4"], duration: "wr"},
    { keys: ["c/4"], duration: "hr"},
    { keys: ["c/4"], duration: "qr"},
    { keys: ["c/4"], duration: "8r"},
    { keys: ["c/4"], duration: "16r"},
    { keys: ["c/4"], duration: "32r"},
    { keys: ["x/4"], duration: "h"}
  ];

  // stave.drawVerticalBar(310); // 小節線

  for (var i = 0; i < notes.length; ++i) {
    var note = notes[i];
    var staveNote = showNote(note, stave, ctx, (i + 1) * 25);
  }
}

おしまい。
ここからどうしようかなー。

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

テキスケ

読書感想とか映画感想とか、たまに何か作ったりとか

最近の記事

最近のコメント

最近のトラックバック

バックナンバー

カテゴリー

スポンサードリンク

リンク

VexFlow使ってみた

test.html

test_helper.js

test.js

「javascript」カテゴリの記事

コメント

トラックバック

ブログパーツ

テキスケ

読書感想とか映画感想とか、たまに何か作ったりとか

最近の記事

最近のコメント

最近のトラックバック

バックナンバー

カテゴリー

スポンサード リンク

リンク

VexFlow使ってみた

test.html

test_helper.js

test.js

「javascript」カテゴリの記事

コメント

トラックバック

ブログパーツ

スポンサードリンク